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

                                                                                                                                                                                                                                  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.

2. Write the corresponding tag style in the style sheet

With class selector For example

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

4. Types of selectors in CSS:

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

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)

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:

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

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

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

programming.