CSS implementation and selector, CSS implementation Selector

CSS implementation and selector, CSS implementation Selector
CSS implementation and Selector

Course content:

I. Implement CSS in four ways

1. Each html tag has a style attribute. The value of this attribute is the css code. (For a tag)
2. Use the style label. It is generally defined in the head label. (For multiple identical tags)
3. When multiple pages use the same style, you can encapsulate the style separately as a CSS file for import.
<Style type = "text/css"> @ import url(+1.css "); </style>
4. Use the link label in the HTML header label to link a CSS file.
<Link rel = "stylesheet" href1_1_1.css "media property (optional) default device screen/>

Ii. Selector

Tag selector div {}
Class selector. haha
Id selector # qq (the value of id is unique on the page, because this attribute is not only used for CSS, but also for javascript)
Similar to the id selector, the priority of the id selector is higher than that of the class selector.

 

Iii. CSS notes

Css: separates the webpage content from the display style to improve the display function.

 

CSS stacked style sheet cascading style Sheet

Separate the styles in the web page, completely controlled by CSS, and enhance style reusability and scalability.

Format: Selector {property name: property value ;......}

4 combination of CSS and HTML:

1. Each HTML tag has a style attribute.

2. When Multiple labels on the page have the same style, you can define the style label encapsulation style to reuse it.

<Style type = "text/css"> css Code </style>

3. When multiple pages use the same style, you can encapsulate the style separately as a CSS file for import.

<Style type = "text/css"> @ import url(+1.css "); </style>

4. Use the link label in the HTML header label to link a CSS file

<Link rel = "stylesheet" href1_1_1.css "media property (optional) default device screen/>

Tip: To improve the reusability and scalability of the sample, add multiple examples as CSS files, such as p.css1_div.css ...... In a total CSS file, use import to import these CSS files, and then use the link label on the HTML page to import the total CSS file.

Priority: The style attribute set on the proximity rule label can overwrite other styles.

 

Selector:

1. Tag selector: Each HTML Tag name is a selector.

2. class selector: class attribute in the label specifies that the definition style should be referenced by js with className.

3. ID selector: id attribute of a tag. It is unique as possible to facilitate JavaScript element acquisition.

4. Extended selector:

A. Join selector: the label table div in the label indicates the div area in the table.

B. Combination selector: Multiple selectors are separated by commas (,).

C. Element selector: displays the default status, click status, and hover status of an element.

A: link a: visited a: hover a: active LVHA Sequence

Delete a hyperlink default underline: text-decoration: none

P: first-letter p: first-line focus: IE6 not supported

CSS Filter: Rich styles with some code

When designing a webpage, DIV + CSS

The DIV and P labels belong to the row-level area. The carriage return effect is displayed. The SPAN label is a block-level area with no carriage return effect.

Add attributes such as border and color. Do not nest DIV labels in P labels.

 

Iv. Code 1

1 <! -- 2 content of this course: 3. Implement CSS in four ways. 4. Each html tag has a style attribute. The value of this attribute is the css code. (For a label) 5 2. Use the style label. It is generally defined in the head label. (For multiple identical tags) 6 3. When multiple pages use the same style, you can encapsulate styles as CSS files and import them to 7 <style type = "text/css"> @ import url(“1.css "); </style> 8 4, link a CSS file 9 <link rel = "stylesheet" href1_1_1.css "media attribute through the link tag in the HTML header. Optional, default device screen/> 10 II. selector 11 tag selector div {} 12 class selector. haha13 id selector # qq (the value of id is unique on the page, because this attribute is used not only for CSS, but also for javascript) Class 14 selector is used in the same way as the id selector, the priority of the id selector is higher than that of the class selector. The lower the priority is, the higher the priority is. 15 --> 16 <! DOCTYPE html> 17 
 
 
V. Code 2
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <title> untitled document </title> <! -- Link rel = "stylesheet" href = "1.css" type =" text/css "/--> <style type =" text/css ">/* @ import url(1.css ); div {background-color: # 09F; color: # FFF ;}. haha {background-color: # FF3; color: #0C0;} * // * predefined style for dynamic loading .. Hehe {background-color: # C93; color: # 00F;} * // * # qq {the usual ID value is unique on the page, this attribute can be used by js in addition to css. IDs are usually used to indicate certain areas on the page. Background-color: #000; color: # FFF;} * // * span B {selector background-color: # 09F; color: # FFF ;} * // * combination selector *//*. haha, div B {defines the background-color: #000; color: # C00;} * // * pseudo-element hyperlink status for multiple selectors in the same style. * // * Not accessed */a: link {background-color: # 06F; color: # FFF; text-decoration: none; font-size: 18px ;} /* hover over the mouse */a: hover {background-color: # FFF; color: # F00; font-size: 24px;}/* click effect */: active {background-color: #000; color: # FFF; font-size: 36px;}/* effect after access */a: visited {background-color: # FF9; color: #000; text-decoration: line-through;} p: first-letter {font-size: 36px; color: # F00;} div: hover {background-color: # F00; color: # FFF;} input: focus {background-color: # 09F ;}# qq {float: left ;} /* l v h a */</style>