Three ways to place CSS in HTML and CSS selectors

(a) There are generally three ways to use CSS styles in HTML: 1 inline References 2 internal references 3 external references. The first: inline references (also called inline references) are the CSS styles that work directly in HTML tags.

<p style= "font-size:10px; Color: #FFFFFF; " >

Use CSS inline references to represent paragraphs.

</p>

Features: Inline styles are more flexible than others, but need to be confused with what is shown, inline styles lose some of the benefits of stylesheets. The second type: internal references (also called inline) use the style tag to load the contents of the CSS file directly into the

......

<style type= "Text/css" >

/* Set the text in the P tab of this page to the following style */

p{

font-size:10px;

Color: #FFFFFF;

}

</style>

Features: Suitable for use when an HTML document has a unique style.　　The Third Kind: external reference CSS External references use an add-in CSS file, the General browser has a caching function, so users do not have to download this CSS file every time.　　External references are efficient when compared to internal references and inline references, and are bandwidth-saving. External references are two ways to implement external references that are recommended by the User: (1) using the link tag to refer to CSS (2) using @import to import CSS

......

<link rel= "stylesheet" type= "Text/css" href= "Mystyle.css" >

<style type= "Text/css" >

@import "Mystyle2.css"

.../* Other CSS Definitions */

</style>

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

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

Class 2 selector: The attribute value of the class attribute that matches the element E in the document is the element syntax for classname: the tag name. Class Name {property: Value} or. class Name {property: Value} class selector name is defined by, "." Symbol, English "dot", after adding class name the definition of the ClassName class selector needs to have a. symbol (. symbol is a class selector), but the class attribute name of a label in an HTML document cannot appear. Symbol, see example below:

p.dark-row{background: #EAEAEA;} /* Set the Class property to Dark-row in the P tag */

. note{Font-size:small}/* The class of note can be used for any element */

<p class= "Dark-row" > First segment </p> <!– with class Dark-row style--

<span class= "Dark-row" > Second segment </span> <!– no class Dark-row style--

<span class= "Note" > Third paragraph </span> <!– has a class note style--

<div class= "Note" > Fourth </div> <!– has a class note style--3 ID selector: The attribute value for the id attribute of the element e in the matching document is the element syntax for Idname: id Name {attribute:　　The value} ID selector name is defined in the #符号, English "pound", followed by the definition of the ID name idname ID selector requires a # sign (#符号标明是ID选择符), but the id attribute name of the label in the HTML document cannot appear the # symbol, see the following example The exception to the ID attribute is that only one element in a document uses an ID selector (as opposed to the class attribute), and the id attribute can be used to identify an element in a single way.

#main {text-indent:3em;} /*id name main precede with a # # # *

... ...

<p id= "main" > Text indent 3em</p> <!– Specify the id attribute in the P tag of HTML main---

4 Association selectors: Also known as the inclusion of selectors, you can separate a relationship definition of a style sheet, element 1 contains element 2, this method only for element 1 in element 2 is defined, the individual element 1 or element 2 has no definition syntax: Selector 1 Selector 2 ... 　{property: Value} table a{font-size:12px} The link within the table changed the style, the text size is 12 pixels, and the text of the link outside the table is still the default size.　　5 Combo selector: Also called a selector group, you can combine selectors of the same attribute and value to write, separating the selectors with commas, which reduces the repetition of the style definition. Syntax: selector 1, selector 2,.,.. {attribute: value} h1, H2, H3, H4, H5, h6 {Color:green}

P, table{font-size:9pt}

The effect is exactly equivalent to:
p {font-size:9pt}
Table {FONT-SIZE:9PT}

6 pseudo-element selectors are a way of defining different states of the same HTML element.　　For example, the normal state of the <a> label, the access state, the selected state, and the state of the cursor over the hyperlink text can be defined using the pseudo element selector. Syntax: Tags: pseudo-element {attribute: value;}

a:link {color: #FF0000; text-decoration:none}/* Link not visited */

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

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

a:active {color: #0000FF; text-decoration:underline}/* Activate link * * Hint: a:hover must be placed after A:link and a:visited to be valid. Tip: a:active must be placed after a:hover to be valid. Please correct me if there is any mistake in the recent study of the superficial knowledge.

Three ways to place CSS in HTML and CSS selectors