CSS style Selector

CSS is an abbreviation for the English cascading style sheets, called Cascading style sheets, to beautify the page. There are three ways of existence:

element inline, page embedding, and external ingestion. Compare the pros and cons of three different ways.

Syntax: style= ' key1:value;key2:value2; '

Use style= ' xx:xxx in the label; '

Embed in page: <style type= ' Text/css ' > </style> block

Introducing an external CSS file

Necessity: The American Union is responsible for the color collocation of the page and the beautification of the picture, and the developer must know how to achieve it.

See the above three ways to use it separately:

1. Use <style type= ' Text/css ' > </style> block in Label

<! DOCTYPE html>
2. Embed <style type= ' text/css ' > </style> block in the page

<! DOCTYPE html>
That is, add a <style></style> code block to your code, customize a style, and then you can call back and forth in the code that follows



3. Introduction of external CSS files

If you have more than one HTML file that needs to refer to a custom CSS style, then the second way is to define a style in each HTML file, in order to solve this problem, you can define a file, write a custom style, and then call the style from the file.

The style:

<style>    . logo{        background-color:red;    }    #logo {        background-color:red;    }    a,div{        color:red;    }    A div{        color:red    }    input[type= ' text ']{    color:blue    }    . logo a,.logo        p{font-size : 56px;    } </style>
1. Class Selector

When the logo indicates class= ' logo ', reference the style



2. ID Selector

#logo表示id = ' logo ', refer to this style



3, combination selector Selector

A,div indicates that all a tags and div tags refer to the style



4. Correlation Selector

A DIV represents a hierarchical relationship where the style is applied to the DIV tag under all a tags.



5. Attribute Selector

Input[type= ' text ', a property tag that indicates that all the type ' text ' tags refer to the style



6,. Logo A,.logo P denotes class= ' logo ', all of the following a label and class= ' logo ' when all the P tags below, reference the style