Three ways to place CSS in HTML and CSS selectors_html/css_WEB-ITnose

(1) There are generally three ways to use CSS styles in HTML:

1 Inline reference

2 Internal reference

3 External reference.

The first type: inline reference (also called inline reference)

is to apply CSS styles directly to HTML tags.

　

Use CSS inline references to represent paragraphs.

　< ;/p>

Features: Inline styles are more flexible than other methods, but they need to be confused with the displayed content. Inline styles will lose some of the advantages of style sheets.

The second type: internal reference (also called inline)

Use the style tag to directly load the content of the CSS file into the HTML document in the tag.

　

 …

 ​​The text in the p tag is in the following style*/ >

　　

　

　Features: Suitable for use when an HTML document has a unique style.

The third type: external reference

CSS external reference uses external CSS files. General browsers have caching functions, so users do not need to Download this CSS file every time.

External references are efficient and save bandwidth compared to internal references and inline references.

External references are recommended by W3C

There are two ways to implement external references:

(1) Use the link tag to reference CSS

(2) Use @import to import CSS

　

 …

                                         /css">

@import "mystyle2.css"

.... /*Other CSS definitions*/

/head>

Note: If you use several different style sheets on the same selector, this attribute value will overlap several style sheets and encounter conflicts. The final definition will prevail.

(2) CSS selector has six types of selectors:

1 HTML selector

2 types of selectors

3 ID selector

4 Association selector

5 Combination selector

6 Pseudo element selector

1 HTML selector: It is an HTML tag, used to change the style of a specified tag. Any HTML element can be a CSS selector.

Syntax: HTML tag name {attribute: value}

　p { text-indent:3em; } /*The selector is p*/

h1{ color:red; } /*The selector is h1*/

2. Class selector: Match the element whose class attribute value is classname of element E in the document

Syntax: tag name. class name {attribute: value} or . class name {attribute: value}

　　类选择符名称的定义方式是,"."符号，英文"dot"，后加类名称classname

　　类选择符的定义需要有.符号（.符号标明是类选择符），但是HTML文档中的标签的class属性名不能出现.符号，见下面示例：

　　p.dark-row{ background:#EAEAEA; }　　　　/*设置p标签中class属性为dark-row的*/

　　.note{ font-size:small }　　　　　　　　　　  /*为note的类可以被用于任何元素*/

　　

第一段

           　　

　　第二段   　

　　第三段          　

　　

第四段

 > Syntax: ID name {attribute: value}

The ID selector name is defined as the # symbol, English "pound", followed by the ID name idname

ID selector The definition needs to have the # symbol (the # symbol indicates the ID selector), but the # symbol cannot appear in the id attribute name of the tag in the HTML document, see the example below

The special thing about the id attribute is that a document Only one element can use an ID selector (just the opposite of the class attribute). The id attribute can be used to uniquely identify an element.

Text indentation 3em

4 association selectors: also It is called the inclusion selector. It can be used to define a style sheet for a certain element inclusion relationship. Element 1 contains element 2. This method is only defined for element 2 in element 1. There is no definition for individual element 1 or element 2.

Syntax: selector 1 selector 2...{attribute: value}

table a{font-size:12px}

Links within the table The style has been changed so that the text size is 12 pixels, while the text for links outside the table remains at the default size.

5 Combination selectors: also called selector groups, you can combine selectors with the same attributes and values ​​to write, and separate the selectors with commas, which can reduce the style Repeat definition.

Syntax: selector 1, selector 2,.,..{attribute: value}

h1, h2, h3, h4, h5, h6 { color: green }

p, table{ font-size: 9pt }

The effect is completely equivalent to:

p { font-size: 9pt }

table { font-size: 9pt }

6 Pseudo-element selectors refer to a way of defining different states of the same HTML element. For example, the normal state, access state, selected state, and the state when the cursor moves to the hyperlink text of the tag can be defined using a pseudo-element selector.

Syntax: tag: pseudo-element {attribute: value;}

a:link {color: #FF0000; text-decoration: none} /* Unvisited link*/

a:visited {color: #00FF00; text-decoration: none} /* Visited links*/

a:hover {color: #FF00FF; text-decoration: underline} /* Mouse over link*/

a:active {color: #0000FF; text-decoration: underline} /* Activate link*/

Tip: a:hover must be placed It is only valid after a:link and a:visited.

Tip: a:active must be placed after a:hover to be effective.

If there are any mistakes, please correct me.