CSS class notes

CSS: Cascading style sheet cascading ( [kæ ' Ske?d??] cascading) style Sheet

CSS BASIC Syntax structure: selector {

attribute: value;

attribute: value;

...

}

Three main selectors:

Tag Selector:

A selector named after the HTML tag that directly controls the corresponding label

P{font-size:16;}

Class selector:

Add the class attribute to the tag, and the selector name is "." plus the corresponding class attribute value

. p1{font-size:16px;} ... <  class= "P1">.... </ P >

ID selector:

Add id attribute to tag, id attribute cannot be duplicated, selector name "#" Plus id attribute value

#p1 {font-size:16px;} ... <  ID= "P1">... </ P >

ID Selector priority > class selector > tag Selector

<span></span> Range Labels

CSS styles are introduced in HTML:

The inline reference is to add the Style property to the label and set the

<style= "FONT-SIZE:16PX;" >... </ P >

Internal references:

Add <style> tags and some statements to the

< Head >    < title ></ title >    <  type= "Text/css">...     . Write various selectors     </style></head> 

External references:

First create a new CSS file, CSS file with. css as the suffix, you can have the declaration code, the other and in the HTML exactly the same.

@charset "Utf-8";/* CSS Document */p{    font-size:16px;    }

There are two ways to refer to an external style sheet within HTML:

It's all in the head tag. External style sheets are introduced

1. Link the external style sheet:

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

2. Import the external style sheet:

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

Import my understanding, show the space to set up CSS, and then use the URL properties to bring in the corresponding CSS content.

The difference between a link and an import:

1, the link is loaded into the Web page, the page is compiled, the import is to compile the page before loading style

2. The imported style sheet is followed by a special internal style sheet, which must be placed in the first row of <style>, followed by the writing of CSS code

3, JS operation can only change the content of the link linked style sheet, unable to manipulate the import

4, multiple pages at the same time link a CSS will be slower than the import

Composite selector:

Descendant Selector

In HTML <a><b>x</b></a>

If you set the contents of the B tag that is wrapped in a, you can use the descendant selector

Rule: The outer label is written in front, the inner label is written in the back, and the middle is separated by a space

When a tag is nested, the inner label is called the descendant of the outer label

p span{    font-size:30px;    Color:yellow;    } < P >Hello,<span> Hello </span></  p>

Note: The selector name is nested more than just the label, and the class selector name can also

P. sp{    font-size:30px;    Color:blue;    }

Intersection Selector

The intersection selector controls the content of the intersection of two selectors. Note: This is essentially different from the descendant selector. This refers to the contents of the same label that can be controlled by both the first selector and the second selector.

Writing rules:

The first must be a tag selector, the second must be a class selector or an ID selector, no spaces between two selectors, tight connections

 <  p  id  = "Yu"  >  Hello, right </ p  >  <  p  >  Hello, <  span  class  = "Me"  >  okay </ span  ></ p  >     p#yu{Background-color: #3F6;    }p.me{Background-color: #3F6; }

Test results: Yes, you can get a background, okay?

and set Selector

Intersection of multiple selectors

Rules, multiple selectors are connected by commas.

p,table{Background-color:green; }<P>How are you doing<spanclass= "Me">All right</span></P><Table><TR>    <TD><inputtype= "text" /></TD></TR></Table>

Inheritance in CSS

Child tags inherit parent tag style

Child tags do not affect parent tag style style

CSS class notes