Css ----- powerful effect, css ----- powerful effect

Css ----- powerful effect, css ----- powerful effect

1 <div id = "d1"> Hello 2 <span> aaaaaaaaa </span> 3 <div> 4 <span id = "s1"> bbbbbbbb </span> 5 <div> ttttttttttttt </div> 6 <div> zzzzzzzzzzz </div> 7 <span> ccccccc </span> 8 <div title = "f"> eeeeeeeeeeee </div> 9 </div> span> ddddddd </span> 10 <div> ffffffffffff </div> 11 </div> 12 <div title = "fc"> gggggggggg </div> 13 </div>

1. --- (the above is the html code)

1 # d1> span // The Sub-tag span2 {3 color: # f00; 4} 5 6 # all the tags under d1 span // span7 {8 color: # f00; 9}

 

2 ---- '+' and '~ '

'+': The Tag next to it must also be next to it to set css.

'~ ': Set css for all the labels next to it at the same level.

# S1 ~ Div // All divs at the same level as s1 {color: # F00 ;}

/* # S1 + div // The div next to it ---- maybe it is next to it ---- It also indicates that only one div's css can be set {color: # F00 ;}*/

 

3 --- name [expression]

 

Div [title] // All div {color: # F00;} with the title Attribute Set ;}

If you want the class to achieve the corresponding effect

<Div title = "f"> eeeeeeeeeeee </div> // Add a class <div title = "f" class = "hh"> eeeeeeeeeeee </div>/ /Then set it in css. hh {corresponding style}

 

 

4 -------- pseudo classes and pseudo elements

Pseudo-class: a div uses the css effect set by clss. You can also use the pseudo-class effect to replace class. That is why it is called a pseudo-class.

Pseudo element: css Effect of elements in a div --------- can be replaced by pseudo elements --------- that is why pseudo elements

 

4.1 -----: last-child and: first-letter

Html: <p> <I> first </I> <I> second </I> </p> <p> I am stephen lee. </p> css: p> I: last-child {color: red;} // I first child under the p tag --- style setting for the first I p: first-letter {color: red;} // set the style of the first letter under the p tag

To achieve the desired effect, set the class first and then set it in css.

Html: <p> <I class = "one"> first </I> <I> second </I> </p> <span class = "two"> I </span> am stephen lee. </p> css :. one {color: red;} p span {color: red;} Or. two {color: red ;}

 

4.2 ------ common pseudo classes:

A: link a: visited a: hover a: active a: focus

You can set a style when getting focus

# Txt: focus // the style of the div corresponding to id = txt {color: # F00 ;}

 

Expand ---------- blur filter:-webkit-filter: blur (5px)

<input type = "text" disabled = "disabled"/> // disabled text <input type =" text "readonly =" readonly "value =" www "/> // only texts that cannot be changed can be read.

Css: input: disabled // all disabled input tags {}: read-only // set the tag {color: # F00;} For all read-only tags ;}

 

6 -------------- the above is the pseudo class of css2, the following is

Pseudo class of css3

--------------------------

 

html:<div>  <p>aaaaaaaaaaaaa</p>  <p>bbbbbbbbbbbbb</p>  <div>      <span>ccccccccccccc</span>      <p>ddddddddddddd</p>      <p>eeeeeeeeeeeee</p>  </div>  <p>fffffffffffffff</p>  <p>ggggggggg</p></div>

 

Css: p: nth-child (2) // If the p element is the second element of its parent element, set its css style for a long time {color: red ;}

Type indicates the type.

P: nth-of-type (2) // If the p tag is the second p tag of its parent element, set its css style {color: red ;}

 

P: nth-last-child (1) // If the p tag is the penultimate tag of its parent tag, set its css style {color: red ;}

 

: First-child: the first element of its parent element: last-child: the last element p: nth-last-of-type (2) {color: red ;} // If the p element is the last two p elements of the parent element, the font color is the first p element p of the parent element of the red p: first-of-type: last-of-type parent element's last p element

 : Not ()/* negative pseudo class selector */(for example, p: not (. a) {color: red ;})

7 ------------------- pseudo element

Html:

1 <p> I'm Donald Duck. I'm Donald Duck. I'm Donald Duck. I'm Donald Duck. I'm Donald Duck. I'm Donald Duck. I'm Donald Duck. I'm Donald Duck. I'm Donald Duck. I'm Donald Duck. I'm Donald Duck. I'm Donald Duck. I'm Donald Duck. I'm Donald Duck. I'm Donald Duck. I'm Donald Duck. I'm Donald Duck. I'm Donald Duck. I'm Donald Duck. I'm Donald Duck. </P> // The text will exceed 2 lines. <p> I live in Duckburg. </P> 3 <p> <B> Note: </B> for before that works in IE8, DOCTYPE must be declared. </P>

 

Css:

P: before // Add a text {content: "line:";} p: after // Add a text {content: "lines:";} p: first-letter // the first element of the p tag {color: red;} p :: first-line // set the color of the first line of the p tag ----------- if the text is not a line {color: red ;}:: selection // set the background color and text color after the text of the selected webpage {color: red; background-color: #0f0 ;}*/

　　

8 ------------ css weight

 

(Inline) A> (ID) B> (class) C> (tab) D> inherit from 0> * All none

Html:

 

1 <div class = "main-content"> 2 

 

 

Css: ----------------------- set the font color.

Eg:

. Main-content # d1 -------------- BC ------------ check the content later

. Main-content h3 ----------- is from the back to the front ------- that is, the first DC, but to follow the order of books, it is CD

. Main-content {------------------- the font inherits its color. Therefore, it is 0 color: # F00; // red} h3 ---------------- D {color: # 00F ;//}. c1 ---------------- C {color: #0F0 ;}. main-content h3 ---------------- CD {color: # FF0 ;}. main-content. c1 -------------- CC {color: #939;} # d1 --------------------- B {color: # 0FF ;}. main-content # d1 ---------------- BC {color: #690 ;}

Whose weight is big is who's color -----

#690 display color


9 ----------------------- text-shadow text shadow

 

You can set multiple text-shadow: 5px 5px #333,/* horizontal displacement, vertical displacement, blur radius, color-15px 15px 5px #333, -15px-15px 5px #333;

 

 

10 -------------------- text indent

Html: <p> I'm Donald Duck. I'm Donald Duck. I'm Donald Duck. I'm Donald Duck. I'm Donald Duck. I'm Donald Duck. I'm Donald Duck </p> css: p {text-indent: 20px;} // The text is indented 20 Px to the right.

 

 

11 -------------

Html: <p> when English and Chinese are mixed into the clause, English and English </p> css: p {width: 100px; border: solid 1px red; word-wrap: break-word;/* broken word-break: break-all;/* broken character white-space: nowrap;/* force all text in a line}

 

Original Status

White-space: nowrap;/* force all text to be displayed in a row

Word-wrap: break-word;/* broken words
If a word occupies a full row, the next row is displayed.

 

Word-break: break-all;/* broken characters

When the character is full, the next line is displayed.

 

 

12 -------------- border-radius rounded corner

Border-radius: 20px 5px 10px 40px; // fold the rounded corner clockwise

Border-radius: 20px 5px; // The degree to which the rounded corner on the diagonal line is folded.

Border-radius: 50%; // circle

13 ----------- box-shadow --- block-level element shadow ------ use the same text-shadow

box-shadow:10px 10px 10px #F00,    -2px -5px 10px #00F;    box-shadow:inset 10px 10px 10px #FF0000;

 

14 ------------------------- the background image is full of background-size: cover

15 --------------------------- transform

# D1 {width: 100px; height: 100px; border: solid 2px red; position: absolute; top: 200px; left: 300px; background-color: # 00F ;}# d1: hover // After the mouse is put up {transform: rotate (-30deg) scale (2); // rotate (negative number --- deg. positive number is clockwise-deg) scale (2) is magnified 2 times

Transition: transform 2 s transition-in ;}

-Smooth transition to transform-time-Acceleration

 

16 -------- animation

# D1 {magin: 0px auto; width: 816px; height: 485px; background-image: url (".. /image/12.png"); animation: x-spin 20 s infinite linear;/* Custom animation name, experience time, playback times (always play If infinite is used ), playing mode (linear speed) * //} @-webkit-keyframes x-spin // @-webkit-keyframes indicates defining an animation ------- x-spin is the name {0% {transform: rotateY (0deg);/* rotate along the X axis */} 50% {transform: rotateY (180deg);/* rotate 180 */} 100% {transform: rotateY (360deg);/* rotate 360 X axis */}}