Home > Developer > JavaScript
Three methods for placing CSS in HTML and CSS selector, css Selector
(1) There are generally three methods to use CSS styles in HTML: 1 inline reference 2 internal reference 3 External reference. First, inline reference (also called intra-row Reference) is to directly apply CSS styles to HTML tags.
<P style = "font-size: 10px; color: # FFFFFF;">
Use CSS inline references to represent paragraphs.
</P>
Features: inline styles are more flexible than other methods, but need to be confused with the displayed content. inline styles will lose some advantages of style sheets. Type 2: Internal references (also called embedded style) use the style label to directly load the content in the CSS file into the <Head>......
<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>
</Head>
Features: Suitable for an HTML document with unique styles. Third: External Reference CSS external reference uses an external CSS file. Generally, browsers have cache functions, so users do not need to download this CSS file every time. external Reference is more efficient than internal reference and inline reference, which saves bandwidth. external reference is recommended by W3C to implement external reference in two ways: (1) use the link tag to reference CSS (2) use @ import to import CSS<Head>
......
<Link rel = "stylesheet" type = "text/css" href = "mystyle.css">
<Style type = "text/css">
@ Import "mystyle2.css"
....... /* Other CSS Definitions */
</Style>
</Head> Note: If several different style sheets are used on the same selector, the attribute value will overlay several style sheets. In case of any conflict, the last definition prevails. (2) The CSS selector has six choices: 1 HTML selector 2 class selector 3 ID selector 4 join selector 5 combination selector 6 pseudo element selector 1 HTML selector: HTML tag, it is 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;}/* select p */
H1 {color: red;}/* select h1 */
Class 2 selector: matches the element syntax of the class attribute of Element E in the document as classname: Tag name. class Name {attribute: Value} Or. the class name {attribute: Value} class selector name is defined ,". "symbol, English" dot ". The class name classname class selector must be defined. symbol (. but the class attribute name of the tag in the HTML document cannot appear. symbol, see the following example:
P. dark-row {background: # EAEAEA;}/* set the class attribute in the p tag to "dark-row */
. Note {font-size: small}/* The note class can be used for any element */
<P class = "dark-row"> first paragraph </p> <! -Has a dark-row style. -->
<Span class = "dark-row"> second paragraph </span> <! -No class dark-row style -->
<Span class = "note"> third </span> <! -Style with notes -->
<Div class = "note"> fourth </div> <! -With a note style --> 3 ID selector: match the element syntax of the idname attribute of Element E in the document. The attribute value is idname: id name {attribute: value} the ID selector name is defined as # symbol, "pound" in English ", the definition of the ID name idname ID selector must contain the # symbol (# The symbol indicates the ID selector). However, the id attribute name of the tag in the HTML document cannot contain the # symbol, the special feature of the id attribute in the following example is that only one element in a document can use one ID selector (opposite to the class attribute), and the id attribute can be used to identify one element.# Main {text-indent: 3em;}/* Add a # sign before the ID name main */
... ...
<P id = "main"> text indent 3em </p> <! -Specify the id attribute main in the p tag of html -->
4. Join selector: Also known as include selector. You can define a style table that contains a link for an element. element 1 contains element 2, this method only defines element 2 in element 1 and does not define the syntax for element 1 or element 2: select 1 to select 2... {attribute: Value} the link in table a {font-size: 12px} has changed the style. The text size is 12 pixels, while the text of the link outside the table is still the default size. 5. Combination selector: it is also called the selector group. You can combine the selector with the same attribute and value and separate the selector with commas to reduce repeated style definitions. Syntax: Select character 1, character 2,... {attribute: Value} h1, h2, h3, h4, h5, h6 {color: green}
P, table {font-size: 9pt}
The effect is equivalent:
P {font-size: 9pt}
Table {font-size: 9pt}
A: link {color: # FF0000; text-decoration: none}/* unaccessed link */
A: visited {color: #00FF00; text-decoration: none}/* accessed link */
A: hover {color: # FF00FF; text-decoration: underline}/* move the cursor over the link */
A: active {color: # 0000FF; text-decoration: underline}/* activation link */prompt: a: hover must be placed after a: link and a: visited, is valid. Tip: a: active must be placed after a: hover, which is valid. If any errors occur, please correct me.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
