CSS+ day2

Composite selectors (descendant selectors, child selectors, intersection selectors, union selectors, pseudo-class selectors) label display mode: block-level elements, inline elements, inline block elements, a-line elements are often converted to inline block elements. Line height: Three relationships between line height and height, why line height == text height will center text vertically. Background-color -image background-repeat background-position background-attachment Background color, background picture, background position, background tile, Background attached background abbreviation translucent weight first see if there is a selected label in the weight.

The CSS has the following three features: cascading inheritance priority

1. Compound selectors: by combining base selectors.

Descendant selector, descendant space. Nav a

    .nav a {
        color: red;
    }
    #wangwang li {
        color: blue;
    }
Copy the code
Internal links
Internal links
Internal links 
< a href = "#" > external links < / a > < a href = "#" > external links < / a > < a href = "#" > external links < / a > < ul > < li > a dog < / li > < li > a dog < / li > < li > a dog < / li > < / ul > < div id="wangwang"> <ul> <li>wangk</li> <li>wangk</li> <li>wangk</li> </ul> </div>Copy the code

Four are red, descendant selectors

Internal links
Internal links
Internal links

Internal links

Child element selectors greater than sign parent child elements do not contain grandchildren, and great grandchildren. div>a { color: pink; }

Internal links
Internal links
Internal links

Internal links

The common part of the intersection selector,

red

red

blue

/* intersection selector even if p tags are class selectors */ p.reed {color: red; }

Union selectors separated by commas,

  p,span {
       color: red;
   }
Copy the code

hello

hello

hello

The < div > nihao < / div > < div > nihao < / div > < div > nihao < / div > < h3 > hello < / h3 > < h3 > hello < / h3 > < span > nihao < / span > < span > nihao < / span > p, span, .red { color: red; }Copy the code

hello

hello

hello

< div class = "red" > nihao < / div > < div > nihao < / div > < div > nihao < / div > < h3 > hello < / h3 > < h3 > hello < / h3 > < span > nihao < / span > <span>nihao</span>Copy the code

.one,p,#op,

.site-r a { color: red; } a { text-decoration: none; } .nav ul li a { color: orange; }. Nav,. Sitenav {font: 20px "Microsoft Yahei "; } </style>Copy the code
  • Company home page
  • Company profile
  • The products of the company
  • Contact us
Left navigation bar
The login

Pseudo-class selectors link pseudo-class selectors one dot is a class selector and two dots are colon pseudo-class selectors. Add special effects to some selectors, such as adding special effects to links, such as the ability to select a number of elements.

Link pseudo-classes, structure pseudo-classes, try to follow the order. LVHA

/* normal state/a:link {color: #333; } / / a:visited {color: yellow; }

/ / a:hover {color: red; } /* a:active {color: blue; } a { text-decoration: none; }Copy the code

2. Label display mode,

Why div span can occupy a line, the three display modes of labels, features and differences, understand the conversion of the three display modes.Copy the code

Block level elements, inline elements, inline block elements,

Block level elements: h1.. h6 div p ul ol li div { height: 200px; background-color:gray; width: 200px; }

Block level elements: 1. Exclusive row 2. Height, width, margins, and margins can be controlled. 4. Is a container box in which internal and block-level elements can be released.

Do not write width the default is to give the father the same width.

Note: 1. Only text can be used to form a paragraph, and no block elements can be placed in p, especially div. 2. It’s hard to put block-level elements in H6 dt.

3. Inline elements,

Inline element; 1. A line is displayed. 2. Setting the width and height has no effect. It’s actually the width and height of the content. It depends on the content. 3. Only internal elements can be allowed for inline elements, not div. block level elements.

Note: 1. No more link A tag inside the link. 2/ In special cases, A can put block-level elements.

3. Inline block elements,

Cells can be set to width, height and alignment

2. But you can set the width and height here.

dadas dadas dadas 

<img src=".. /images/zhoujielun.png"> <img src=".. /images/liushishi.jpg">Copy the code

A summary of the three models,

Block level element, one line showing a width height div P1 can be set… The default width of ul. Ol Li is 100%. The container contains any label line elements. Holds text or other inline elements. Inline blocks. You can put more than one line, you can set the width height, IMG input. The default width is the width of the content.

transformation

Block to inline display: inline inline to block level display:block block and inline elements to inline block display= inline-block.

    a {
        background-color: teal;
        display: inline-block;
        width: 100px;
        height: 100px;
    }
Copy the code

3. Line height line height: the three relationships between line height and height, why line height == text height will make the text vertical center. Measuring line height

The distance from baseline to baseline is called row height,

Top line Middle line baseline bottom line

Distance from baseline to baseline

4. The text is vertically centered and consists of three parts: upper distance + content height + lower distance. Single row, if the row is higher than the height it will go down and the row height equals the height will be vertically centered. Row height less than height is offset upward.

4. CSS Background Background position

1. The difference between the CSS background image and the insert image.

2. CSS background properties, add background style to page elements, set the position of different background pictures. background-color:green; background-color:transparent; The default color is transparent, which means transparent.

background-image: url(); Must add an image default is None. Background-image: url(.. /images/liushishi.jpg); // The url must be added without quotation marks.

1. The background image is at the bottom of the box, while the insert image is at the top of the box. 2. 3. The default background image is tiled. background-repeat: no-repeat; background-repeat: repeat-y;

        background-repeat: repeat-x;          
Copy the code

4. Position the background image: background-position:10px 10px; It can be followed by a location noun or a number. Xy coordinates background-position: bottom left;

Background-position must be in the background-image property of a background image. Position x and y,

        background-position:center center;  
Copy the code

B: I’ve found a bottom left at the center. 3. If it is a number and only one is given, it must be the x-coordinate. background-position:10px center; background-position:-10px center; You can mix them. X y – x | | y

.bg { width: 200px; height: 200px; background-color:yellowgreen; background-image: url(.. /images/zhuce.png); background-repeat: no-repeat; background-position: center -10px; }

4. Why can some background pictures be made into 1920 *

Background-image: url(.. /images/bg1.jpeg); background-attachment: fixed; background-repeat: no-repeat; height: 6000px;

background-attachment

  1. Short for background

    Background color Background image tiled fixed position. /* Background: # CCC url(..) */ background: # CCC /images/bg1.jpeg) no-repeat fixed center top;

Background color, Background image, Background Tiling, Background Position, Background attachment, Background abbreviation, Background transparency,

6. Background translucent: The box is translucent and has no effect on the contents inside.

5. The CSS has the following three features: cascading inheritance priority

CSS style conflicts take the principle that common styles will have inheritance? CSS priority algorithm, common selector stack value?

1. Cascading proximity principle

/ / div {background-color: yellowgreen; font-size: 30px; } div { background-color: red; }Copy the code

< span style = “box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 14px! Important; word-break: inherit;

    div {
        color: red;
    }
</style>
Copy the code

adasdsa

3. Priority of the CSS

1. If the selectors are the same, follow the cascading style and proximity rule. 2. If the selectors are different,

The inherited wildcards are 0000 label selectors. 0001

/ /* div {background-color: yellowgreen; font-size: 30px; } div { background-color: red; } */ div {/* 0 0 0 1 */ color: red; }. One {pseudo-class /* class selector 0 0 1 0 monitor */ color: blue; } #two {/* id selector 0 1 0 0 } /* style="color: yellow; */ /* color: blue! important; Commissioner * / < / style >Copy the code
adasdsa

adasdsa

Weight calculation formula, weight stacking by reason is no carry.

The weight of inheritance is 0, depending on whether the tag is selected or not. If it’s not checked, the weight is 0,