Cascading style sheet CSS_html/css_WEB-ITnose

??

1. What is a cascading style sheet
css is to control the display of styles on web pages
2. Several ways to set css
inline Style sheet (Inline styles)
Set the style attribute of the tag
When using inline style sheets, the html4.01 standard recommends adding the following

Reason: The new version of html can not only use css but also use other methods, such as using text/sml to control the display effect of xml in html

Disadvantages: It needs to be set in each tag. Inline style sheets will work on all media
Embedded style sheets
Defined in the tag

                      < style>
The basic format of each style rule defined in the tag pair is as follows:
selector{property:value;property:value;...}
selector : When defining a style rule, the web page elements affected by this rule must be specified.
The web page element defined in a rule is the selector (selector), that is, the web page element affected by the style rule is selected
property: Specify the style names to be modified, i.e. css attributes, such as color
Value: The value assigned to property, i.e. css attribute value

Disadvantage:
must be written in every page
External style sheet

type and media attributes It is optional

Save the external style sheet in the buffer to speed up the loading of the web page

Advantages: It can make the web page slimmer

Input style sheet
You can use css The @import statement imports an external style sheet (css file) into two external css files. The style rule definition statements in the imported css

file become part of the imported css file.

You can also use the @import statement to import a css file into the tag of the web page. The
style rule definition statement in the imported css file becomes tag pair.

An example statement using the @import declaration is as follows:

3. Selector of style rules
HTML selector: html tag
Class selector:
To divide each web page element created by an html tag into several categories, you need to divide the class of this HTML tag Properties are set to different values
                                                           class="normal"> paragraph1

In the style sheet, you can define style rules for each category of an HTML tag

In a style sheet, it can be defined for all HTML tags of a category Style rules:

Blue title

Blue paragraph

ID selector

The ID attribute is used to define a specific HTML element in a web page file Only one element can use a certain ID attribute value

ID Selector is to select HTML elements with a certain ID attribute value for the style rule definition statement.

terst

In the style sheet, the HTML element style rule definition statement with the id value yellowone is as follows:

Associative selector

Associative selector refers to two or more single selectors separated by spaces The string composed of

For example: P EM {background: yellow}
where "P EM" is the associated selector, which represents the emphasized text in the paragraph ( tag pair The background of the content) is yellow,
while the emphasized text appearing elsewhere will not be affected

The selection right of the style rules defined by the associated selector has a higher priority than the style rules defined by the single selector. , even if the following style rule is defined in the back part of
P EM{background: yellow}: EM{background: green}
However, the emphasized text defined in the paragraph tag

still uses a yellow background

Combining selectors

In order to reduce repeated declarations in style sheets, you can combine several selectors in one style rule definition statement, and separate each selector with a comma (,)

For example: H1 ,H2, H3, H4, H5, H6, td{color:red}

Pseudo-element selector

Pseudo-element selector refers to the various states of the same HTML element and its included A way of defining part of the content.

For example, for the normal state of the hyperlink tag , the visited state, the selected state, the state when the cursor moves to the hyperlink text,
can be used for the first letter and first line of the paragraph. Pseudo element selector to define.
Style rule definition for using pseudo-elements as selectors:
HTML: Pseudo-element {attribute: value}
Commonly used pseudo-elements:
A:active The state when a hyperlink is selected
A :hover The cursor moves to the state of the hyperlink
A:link The normal state of the hyperlink (before any action)
A:visited The visited hyperlink state
P:first-line in the paragraph First line of text
P:first-letter The first letter in the paragraph
Class selector format used with pseudo-element:
HTML element. Class name: pseudo-element {attribute: value}

4. Comments on style rules

There are many style attributes in css, which can be roughly divided into the following categories:

Font, background, text, position, layout, edge, list, others

5. Detailed explanation of style attributes

Filter(css filter)