CSS (1): Understanding CSS

1.What is CSS

CSS Cascading Style Sheets (English full name: Cascading Style Sheets) is a computer language used to express file styles such as HTML or XML. CSS3 is an upgraded version of CSS2, and 3 is just the version number. It adds many powerful new features based on CSS2.1. At present, the mainstream browsers chrome, safari, firefox, opera, and even 360 already support most of the functions of CSS3. IE10 will also begin to fully support CSS3. Different browsers may require different prefixes. It means that the CSS property or rule has not yet become part of the W3C standard and is a private property of the browser. Although newer versions of browsers currently do not require prefixes, prefixes are still indispensable for better forward compatibility.

<span style="color: #800000;">-moz-transform:translateX(20px);
-webkit-transform:translateX(20px);
-ms-transform:translateX(20px);
transform:translateX(20px);</span>

Transform is a new attribute of CSS3, and each browser needs to add a prefix to support it.

2.What CSS can do

• Styles define how HTML elements are displayed.
• CSS can achieve many effects and even animation effects that previously required the use of images and scripts in just a few lines of code. For example, rounded corners, picture borders, text shadows and box shadows, transitions, animations, etc.
• CSS simplifies the design process for front-end developers, providing more flexible page layout and faster page loading speed.
• All web page styles on the site can be controlled using a CSS file. As long as the corresponding code in the CSS file is modified, all pages of the entire site will change accordingly.
• Purpose: Separate performance from structure.

<span style="color: #008000;">/*</span><span style="color: #008000;"> style.css </span><span style="color: #008000;">*/</span><span style="color: #800000;">

body</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;">#ccc</span>;
}<span style="color: #800000;">
h1</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">16px</span>;<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;">"微软雅黑"</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;">normal</span>;
}

<span style="color: #008000;"><!--</span><span style="color: #008000;"> index.html </span><span style="color: #008000;">--></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="./style.css"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>这是标题<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

3.CSS syntax structure

CSS rules consist of two main parts: the selector, which is usually the HTML element you want to change the style of, and one or more declarations. Each declaration consists of a property and a value. A property is the style attribute you wish to set. Each attribute has a value. Properties and values ​​are separated by colons.

<span style="color: #800000;">p</span>{                  <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择器 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">      
    color</span>:<span style="color: #0000ff;">red</span>;      <span style="color: #008000;">/*</span><span style="color: #008000;"> 属性:值; </span><span style="color: #008000;">*/</span>
}

4. How to introduce CSS

There are three ways to introduce style sheets:

• External stylesheet
• Internal stylesheet
• Inline styles

　4.1 External style sheet

　An external style sheet is ideal when styles need to be applied to many pages. With external style sheets, you can change the look of your entire site by changing one file. Each page links to the style sheet using the tag. tag in the head (of the document):

<span style="color: #800000;"><head>
　　<link rel="stylesheet" type="text/css" href="style.css">
</head></span>

　4.2 Internal style sheet

　 When a single document requires special styling, an internal style sheet should be used. Internal style sheets can be defined at the head of the document using the