CSS in a simple way_html/css_WEB-ITnose

1. Concept

css, cascading style sheets (English: Cascading Style Sheets, abbreviated CSS), also known as string style list, hierarchical style sheet file, a

used to structure A computer language for adding styles (fonts, spacing, colors, etc.) to documents (such as HTML documents or XML applications). "Cascading" means that the styles of a

file can be inherited from other style sheets. The reader can use his or her own preferred style in some places, and inherit or "layer

" the author's style in other places. This layering approach gives both authors and readers the flexibility to add their own designs and mix their own preferences.

2. Function:

Separate (decouple) the content and style of the web page
Example: the previous method of adding color to text

 <font color="0000ff ">阿猫</font> <font color="0000ff ">阿狗</font> <font color="0000ff ">阿兔</font>

                                                                                                                                                                                                                                  From the above example can be seen that there is a lot of repetition, the content and color are merged together, if we need to change the color, we have to change the code. If there are too many contemporary

codes, replacement will be troublesome. And it's error-prone. So someone suggested that HTML files only contain structure and content information, and CSS files only contain

style information.

3. CSS usage

1. Add the selector

where you can put either code or text. And make a mark, which can be modified through the mark file in the style file.

    <span class="menu">阿猫</span>    <span class ="menu">阿狗</span>    <span class="menu">阿兔</span>

2. Write the corresponding tag style in the style sheet

With class selector For example

.menu{    color:#00f;                     /*在这里Ctrl+J会自动列出代码的样式*/}

3. Match the web page to the style sheet

Then change the color directly to the style file. Can. If hundreds or thousands of web pages correspond to one style file, it will be much easier to modify.

                                                                                                                                                    using   using  -                       through ’ ’ s ’ through ’ using ’s ’ ’ s ’ t ‐ ‐ ‐‐ ‐                                                                               to  Each selector can be separated by commas

<link href="StyleSheet1.css" rel="stylesheet" />

4. Types of selectors in CSS:

1. Class selector, the example above is class selection 2. ID selector

.menu,.title{    background-color:#ffd800;}

Note: If the ID selector and class selector are set Different values ​​for the same attribute are subject to the ID selector

3. HTML tag selector (for the content in the body tag)

<span id="special" class="menu">阿猫</span>      #special{    font-weight:bold;          /*粗体*/}

Priority of tag selectors: HTML selector

In addition, there are universal selectors, attribute selectors and pseudo selectors Selector, if you are interested, you can check it yourself.

4. Inheritance relationship of selectors If there are other selectors in the selector, then the later selectors inherit the previous selectors, for example:

body {    color :#ffd800;}

Usage of style modification of "one" in the middle :

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">       </span></p>
<p> </p>
<p> </p> <p> <br></p> <br> Note: There must be a space between this and span, but the number of spaces is not limited <pre name="code" class="sycode"><span class="title">阿猫是<span>一</span>一只猫</span>

5. Name different selector class names within the same class selector

Note: Writing multiple selectors together is limited to class selectors when two selectors represent the same attribute. When the values ​​are different, the order in CSS will be

.title span{    font-style:initial;    font-size :larger ;    font-weight :bold;}       

accurately, and the ones ranked earlier will overwrite the ones behind.

Key point: The core of CSS is to decouple the content and style of the web page. The html file is only responsible for the text to be displayed. How to encapsulate

specifically in the style file. In this way, when modifying the front-end display style, you can directly modify the style file, which is convenient and error-free. In line with the idea of ​​object-oriented

<span class="title title2">阿猫是一只猫</span>

programming.