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 style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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></span></span></span></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;">
　　<link rel="stylesheet" type="text/css" href="style.css">
</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

<span style="color: #800000;">
    <style>
        p </style></span>{<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;">red</span>;
        }<span style="color: #800000;">
    
        </span>

　4.3 Inline style

　　Inline style refers to writing CSS styles directly in the style attribute in the HTML tag. Note that when introducing CSS in this way, there is no need to write a selector.

<span style="color: #800000;"><p style="color:red;">这是一个段落</p></span>

　4.4 Priority comparison of three introduction methods

　　When the same HTML element is defined by more than one style, which style will be used? Generally speaking, all styles are cascaded into a new virtual stylesheet according to the following rules, with number 4 having the highest priority.

1. Browser default settings
2. External stylesheet
3. Internal stylesheet (located inside the tag)
4. Inline styles (inside HTML elements)

Therefore, inline styles (inside HTML elements) have the highest precedence, which means it will take precedence over style declarations in: tags, style declarations in external style sheets, or styles in the browser statement (default).

5.CSS code comments

css code comments, starting with /* and ending with */.

<span style="color: #008000;">/*</span><span style="color: #008000;"> 公共样式</span><span style="color: #008000;">*/</span><span style="color: #800000;">

body </span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;">0px</span>;<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;">0px</span>;}    
    
<span style="color: #008000;">/*</span><span style="color: #008000;">导航样式开始</span><span style="color: #008000;">*/</span><span style="color: #800000;">
    
#nav </span>{<span style="color: #ff0000;">
      ……
    </span>}

<span style="color: #008000;">/*</span><span style="color: #008000;">导航样式结束</span><span style="color: #008000;">*/</span>    

6.CSS Selector

CSS selectors are used to select the pattern of elements you want to style.

　6.1 Wildcard Selector

　　 * The selector selects all elements. * The selector can also select all elements within another element:

<span style="color: #800000;">*</span>{                  <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择所有元素 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;">0</span>;
}<span style="color: #800000;">
div *</span>{              <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择div元素下的所有元素 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">blue</span>;
}

　6.2 Element Selector

　 The so-called element selector refers to the selector that uses the existing tag name in the web page as its name.

<span style="color: #800000;">body</span>{               <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择标签为body的元素 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">16px</span>;
}<span style="color: #800000;">
a</span>{                  <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择标签为a的元素 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;">none</span>;
}

　6.3 Group Selector

　In addition to specifying styles for a single tag, you can also define the same style for a group of tags. Use commas to separate selectors. For elements in the page that need to use the same style, you only need to write the style once.

<span style="color: #800000;">h1,h2,h3,p</span>{<span style="color: #ff0000;">         
    font-size</span>:<span style="color: #0000ff;">16px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">red</span>;
}