CSS-Responsive layouts

First,Special selectors

1. * Used to match any mark

2.> for specifying Parent-child node relationships

3. E + F adjoins the element selector, matching all sibling elements immediately following the E element f

4. E ~ F matches the sibling element after all E elements F

5. name [expression]

5.1 E[att] matches all e elements with the att attribute ([att] gets all the tags that define the att; e[att=val] matches all e elements of the att attribute equal to "Val";

5.2 [att=val] gets all tags that define the att attribute and the attribute value equals Val;

5.3 [att^=val] gets all tags that define the att attribute and the attribute value begins with Val;

5.4 [att$=val] gets all tags that define the att attribute and the attribute value ends in Val;

5.5 [att*=val] gets all the tags that define the att attribute and the attribute value contains the Val character;

5.6 [Att~=val] gets all the tags that define the att attribute and the attribute value contains the Val word;

5.7 [att|=val] gets all tags that define the att attribute and the attribute value equals Val or begins with val-. ）

6. Pseudo-class/pseudo-elements

The 6.1 CSS Pseudo-class is used to add special effects to certain selectors. CSS pseudo-elements are used to add special effects to certain selectors.

Can be clear two points, the first two are related to selectors, the second is to add some "special" effect. The special point here is that they describe things that other CSS cannot describe.

Pseudo-class kinds of pseudo-element types difference

Here are the pseudo-classes: first-child and pseudo-elements: first-letter for comparison.

P>i:first-child {color:red}<p><i>first</i><i>second</i></p>//Pseudo-class: First-child adding a style to the first child element

If we do not use pseudo-classes and want to achieve the above effects, we can do this:

. first-child {color:red}<p><i class= "First-child" >first</i><i>second</i></p>

That is, we add a class to the first child element and then define the style of the class. So let's take a look at the element:

:p: first-letter {color:red}<p>i am Stephen Lee.</p>//pseudo-element: First-letter Add a style to the first letter

So if we do not use pseudo-elements, to achieve the above effect, what should be done?

. first-letter {color:red}
<p><span class= ' First-letter ' >i</span> am Stephen Lee.</p>

That is, we add a span to the first letter and then add a style to span.

The difference between the two has come out. That is:

the effect of a pseudo-class can be achieved by adding an actual class, while the effect of the pseudo-element needs to be achieved by adding an actual element , which is why they are called pseudo-classes, a pseudo-element.

Summarize:

Pseudo-elements and pseudo-classes are so easily confused because they are similar in effect, but in fact CSS3 the pseudo-class is represented by a colon in order to differentiate between them, while pseudo-elements are represented by two colons.

:p seudo-classes::p seudo-elements But because of the compatibility problem, so now most of the unity of the single colon, but aside from the compatibility of the problem, we should write as far as possible to develop good habits, to distinguish between the two.

Simply put: the weight of the pseudo-element is higher than the pseudo-class, such as a container for the element and pseudo-class have defined the same property, but the value is not the same, then the pseudo-element will be used. A page is used only once from the canonical angle of the pseudo-element, and the pseudo-class can be used multiple times. Pseudo-Elements produce new objects that are not visible in the DOM, but can be manipulated; pseudo-classes are different states of an element in the DOM;

6.1 Common pseudo-classes

6.1.1 a:hover,a:link,a:active,a:visited,:focus/* Dynamic pseudo class */

6.1.2 :d isabled,:enabled,:checked,:read-only,:read-write/*ui State pseudo class */

6.1.2.1 : read-only read-only status

6.1.2.2 : read-write non-read-only status

6.1.3 CSS3 Pseudo-Class

6.1.3.1 : Nth-child (n) the nth element of its parent element (such as: P:nth-child (2) {color:red;} p element is the 2nd element of its parent element, the font color is red)

6.1.3.2 nth-last-child (n) the reciprocal nth element of its parent element

6.1.3.3 : Nth-of-type (n) (for example: P:nth-of-type (2) {color:red;} p element is the 2nd P element of its parent element, the font color is red)

6.1.3.4 : First-child The first element of its parent element

6.1.3.5 : Last-child The last element of its parent element

6.1.3.6 nth-last-of-type (n) (for example: P:nth-last-of-type (2) {color:red;} p element is the last 2 P element of its parent element, the font color is red)

6.1.3.7 : First-of-type The first P element of its parent element

6.1.3.8 : Last-of-type The last P element of its parent element

6.1.4 : Not ()/* negation pseudo-Class selector */(e.g. P:not (. a) {color:red;})

6.2 Common Pseudo-elements

6.2.1 : Before,::after

<style type= "Text/css" >p::before{content: "Lines:";} </style>
6.2.2:: First-letter
<style type= "Text/css" >p::first-letter{color:red;} </style>
6.2.3 :: First-line
<style type= "Text/css" >p::first-line{color:red;} </style>
6.2.4 :: Selection
<style type= "Text/css" >::selection{color:red;background-color: #00F;} </style>
Second,CSS Weights
1. List of weights
<style>/*a>b>c>d>0*/.main-content{color: #666;} /*0*/h3{color: #f00;} /*d*/.h3{color: #0f0;} /*c*/.main-content h3{color: #00f;} /*cd*/.main-content. H3{color: #0ff;} /*cc*/#h3 {color: #ff0;} /*b*/</style>
Third,CSS3 New Properties
1. Define Text styles
1.1 Text Shadow Text-shadow
<style>p{    font-size:60px;    font-weight:900;    Color: #999;    text-shadow:5px 5px 5px #333,/* Horizontal displacement, vertical displacement, blur radius, color */    -15px 15px 5px #333,    -15px-15px 5px #333;} </style>
1.2 text indent text-indent
1.3 Text line wrapping
<style>p{    width:100px;    Border:solid 1px red;    word-wrap:break-word;/* Word */    word-break:break-all;/* break character */    white-space:nowrap;/* forces the display of all text in one line */}</ Style>
1.4 Text Overflow
<style type= "Text/css" >div{    width:200px;    White-space:nowrap;    Border:solid 1px red;    text-overflow:clip;/* does not display ellipsis, but simply cuts out/text-overflow:ellipsis;/* the    ellipsis when text overflows in an object */    Overflow:hidden;} </style>
1.5 Fillet Border-radius
1.6 Shadow Box-shadow
1.7 background picture covered Background-size:cover
1.8 Transform
<style type= "Text/css" > #d1 {    width:100px;    height:100px;    Background-color: #00F;} #d1: hover{    transform:rotate (40deg) scale (1.2);/* Rotate 40 degrees clockwise, enlarge 1.2 times times */    transform:translate (40px,40px);/* Horizontal offset 40px, vertical offset 40px*/    transform:skew (30DEG,-10DEG);/* Tilt 30 degrees horizontally, tilt 10 degrees vertically */}</style>
1.9 Smooth transition transition
<style type= "Text/css" > #d1 {    width:100px;    height:100px;    Background-color: #00F;} #d1: hover{    background-color: #F00;    transition:background-color 1s ease-in;/* transition properties, if all is all, experience the time, transition effect */}</style>
2.0 more complex animation animation
<style type= "Text/css" > #d1 {    magin:0px auto;    width:959px;    height:613px;    Background-image:url ("11.jpg");    Animation:x-spin 20s infinite linear;/* animation name, experience time, play times (for infinite), playback mode */}@-webkit-keyframes x-spin{0%{        Transform:rotatex (0DEG);/* Start rotation along the x-axis */    }    50%{        Transform:rotatex (180DEG);/* Rotate 180*/    }    10%{Transform:rotatex (360deg) along the x-axis        ;/* Rotate along the x-axis 360*/    }} </style>
<style type= "Text/css" > #d1 {width:100px;height:100px;background:red;position:relative;animation:mymove 5s Infinite;} @keyframes mymove{from {left:0px;} to {left:200px;}} </style>
2.1 Gradient
<style type= "Text/css" > #d1 {    height:200px;    width:400px;    Border:solid 1px red;    /* Linear gradient, start position, end position, start color, end color, color label (color label position, color label color, can have multiple color mark, color mark is color transition point) *    ///background:-webkit-gradient (linear,left Top,left Bottom,from (blue), to (red), Color-stop (0.4, #fff), Color-stop (0.6, #fff));    /* Radial gradient, Inner circle center position, Inner circle radius, Outer Circle center radius, Outer circle radius, start color, end color, color label *    /background:-webkit-gradient (Radial, center center, 0, center Center, 460, from (blue), to (red), Color-stop (0.6, #fff));} </style>
2.2 -responsive layout
<style type= "text/css" >/* screen width is greater than 900 when */*{padding:0px;    margin:0px; Font-family: "Microsoft Jas Black";}    #header {height:100px;    Border:solid 1px red; margin:0px Auto;}    #main {margin:10px auto; height:400px;}    #footer {margin:0px auto;    height:100px; Border:solid 1px Red;}    @media screen and (min-width:900px) {#header, #footer {width:800px;        } #main {width:800px;    height:400px;;        } #main-left {width:200px;        height:400px;        Border:solid 1px red;    Float:left;        } #main-center {width:394px;        height:400px;        Border:solid 1px red;    Float:left;        } #main-right {width:200px;        height:400px;        Border:solid 1px red;    Float:left;    }} @media screen and (min-width:600px) and (max-width:900px) {#header, #footer {width:600px;        } #main {width:600px;    height:400px;;        } #main-left {width:200px; Height400px;        Border:solid 1px red;    Float:left;        } #main-center {width:396px;        height:400px;        Border:solid 1px red;    Float:left;    } #main-right {display:none;    }} @media screen and (max-width:600px) {#header, #footer {width:300px;        } #main {width:300px;    height:400px;;    } #main-left {display:none;        } #main-center {width:300px;        height:400px;    Border:solid 1px red;    } #main-right {display:none; }}</style>
 CSS-Responsive layout