New features of day7CSS3

I Know CSS3

7.1.1 CSS3 introduction

CSS3 is CSS2 1, which is an extension of CSS

7.1.2 new features of CSS3

1) Selector

2) Shadow

3) Shape conversion (2D-3D)

4) Deformation

5) Animation (transition animation, frame animation)

6) Border

7) Multiple background

8) Reflection

9) Writing

10) Color (RGBa/hsl/hsla)

11) Filter

12) Elastic layout

13) Multi column layout

14) Box model

15) Web fonts

16) Media query

CSS3 is not supported by all browsers or different versions of the same browser, so it needs to be compatible. The common practice is to add the manufacturer prefix

7.1.2 mainstream browser kernel (interview questions)

1) Trident:IE kernel

2) Webkit:Chrome and Safari (Apple)

3)Gecko:Firefox kernel

4) Blink (a branch of Wedkit): Chrome and Opera

Tips:

At present, most domestic browsers are dual core (IE core + Chrome core)

Mobile IOS:webkit Android: blink

7.1.3 compatibility processing - vendor prefix

1)IE : -ms-

2)Chrome&Safari: -Webkit-

3)FireFox: -moz-

4)Opera: -o-

II CSS3 selector:

The purpose of enrichment is to reduce the use of class and Id in tags

1) Attribute selector (filtering function):

[attribute name]

[attribute name = attribute value]

[attribute name ^ = attribute value]

[attribute name $= attribute value]

[attribute name * = attribute value]

<style type="text/css">
       /* 1)Attribute selector -- * -------p tag with class attribute/
        /*p[class]{*/
             /*color:red;*/
         /*}*/
       /*p[class=content]{*---p class attribute = content in tag/
             /*color:blue;*/
         /*}*/
       /*p[class^=content]{*---p The class attribute in the tag starts with content/
               /*color:blue;*/
           /*}*/
        /*p[class$=content]{*---p The class attribute in the tag ends with content/
            /*color:red;*/
        /*}*/
        p[class*=content]{//——————p the class attribute in the tag contains content
              color: #000;
          }
    </style>
2) Structural pseudo class

:fisrt-child

:last-child

:nth-child(n)

:nth-last-child(n)

:nth-of-type(n)

:nth-last-of-type(n)

:only-child

:only-of-ype

:empty

1) : root ------- matches the html tag, and the effect of the body selector is the same

2) Child element selector: match the consecutive elements in the parent element!!! Child element of

: first child: first child element

: last child: last element

: nth last child (N): nth to last

: nth child (n): nth positive number

: nth child (2n): / 2n represents the multiple of 2, 2, 4, 6, 8

 p:first-child{
            color: blue;
        }
        p:last-child{
            color: red;
        }
        p:nth-child(4){
            color: green;
        }
        p:nth-last-child(2){
            color: #ff38ec;
        }
        p:nth-child(2n+1){
            color: #8bf8ff;
        }

It doesn't work when the fourth positive number is not a p tag

<div class="container">
    <p class="content p1">Content 1</p>
    <p class="p2 content">Content 2</p>
    <p class="content">Content 3</p>
    <div class="box">box_4</div>
    <p class="content">Content 4</p>
    <p class="content p5">Content 5</p>
</div>
p:nth-child(4){
           color: green;
       }

3. Nth of type class: used to match the sibling child elements in the parent element. It can be used when the child elements are discontinuous

​ :nth-of-type(n)

​ :nth-last-of-type(n)

p: Nth last of type (4): find the penultimate sibling tag. If the nth is not a p tag, empty i skips and continues to look forward until it is found

<div class="container">
    <p class="content p1">Content 1</p>
    <p class="p2 content">Content 2</p>
    <p class="content">Content 3</p>
    <div class="box">box_4</div>
    <div class="box">box_4</div>
    <div class="box">box_4</div>
    <p class="content">Content 4</p>
    <p class="content p5">Content 5</p>
</div>
p:nth-child(4){/*Find the fourth positive number and stop if the fourth is not a p tag*/
            color: red;
        }
p:nth-of-type(4){/*Find the fourth positive number. If the fourth is not a p tag, continue to look down until it is found*/
            color: red;
}
 p:nth-last-of-type(4){/*Find the fourth from the bottom. If the fourth is not a p tag, continue to find it until it is found*/
            color: red;
        }

​ 4. other

​ 1:only-child

If only the parent element is found and there is only one child element, it has no effect on the nesting of child elements, that is, there can be no other peer labels

​ 2):only-of-type

There is only one element with this label in the parent element, and there can be other elements without this label

​ 3):empty

No elements, including text elements, that is, find empty elements

<div>
     <p>p<span>span</span></p>
</div>
<div>
        <p>p</p>
</div>
<div>
        <p>p</p><div >div</div>
</div>
 p:only-child{//Find that only one child element in the parent element is a p tag
            color: red;
            background-color: #45ff59;
        }
p:only-of-type{//Select the parent element and child element and only have one p tag. Other tags are allowed
            color: red;
            background-color: #45ff59;
        }
3) Target pseudo class: matches the element E pointed to by the URL

​ :target

 	<a href="#Jump1 "> jump 1</a>
    <a href="#Jump2 "> jump 2</a>
    <a href="#Jump3 "> jump 3</a>
		p{
            height: 200px;
        }
        :target{//The background changes color when jumping to p $
            background-color: #5bffe7;
        }
		p:target{//The style effect only works when the label you jump to is a p label
            background-color: #5bffe7;
        }
4) UI element state pseudo class

E:enable

Matches all E elements in the user interface (form) that are available

E:disable

Match all E elements in the user interface (form) that are not available

E:checked is only valid in Opera

Match all selected elements E in the user interface (form form)

E: :selection

Match the part of the E element that is selected or highlighted by the user

<form action="">
    <input type="text" disabled><br>
    <input type="text"><br>
    <input type="text"><br><br>

    <input type="radio"name="name">Xiao Hei
    <input type="radio"name="name" checked>Xiao Hong
    <input type="radio"name="name">Blue  <br>

    <input type="checkbox" name="face">party member
    <input type="checkbox" name="face" checked>League member
    <input type="checkbox" name="face">Others <br>
    <select >
        <option >front end</option>
        <option  selected>big data</option>
        <option >UI</option>
    </select>
input:disabled{
            background-color: #eeffcd;
        }
        input:checked{: /*checked Only valid in Opera*/
            background-color:#00ff00;
        }
        ::selection{/*Note that double colons must be used for the selected text*/
            color: red;
        }
5) Negative pseudo class

:not()

<div class="container">
    <p>p1</p>
    <p>p2</p>
    <span>span</span>
</div>
  .container :not(p){
            background-color: #51faff;
        }
6) Universal sibling element selector

E~F

<div class="test">
    <!--.div${div$}*3-->
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <strong>strong</strong>
    <div class="div3">div3</div>
</div>
.div1~ .div3{
            color: #a2ff6a;
        }

III CSS3 text

1) Text shadow: (supported by mainstream browsers, IE9 or above)

Text shadow: horizontal offset vertical offset blur distance] shadow size color] [inset];

h1{
 text-shadow: 5px 5px 5px #FF0000;
}
2) Text auto Wrap: (supported by mainstream browsers)

word-wrap: normal|break-word;

normal: wrap only at the allowed hyphenation point (the browser keeps the default processing).

Break word: break a line inside a long word or URL address.

div{
 word-wrap:break-word;
}
3) Word splitting (supported by mainstream browsers)

word-break: normal|break-all|keep-all;

normal: use the browser's default line break rule.

Break all: allow line breaks within words.

Keep all: line breaks can only be made at half width spaces or hyphens.

4) Text split: text Wrap: (not supported by mainstream browsers, not important)

text-wrap: normal|none|unrestricted|suppress;

normal: wrap only at the allowed line break points.

none: no line breaks. Text that cannot be accommodated by the element will overflow.

unrestricted: wrap between any two characters.

suppress: compress line breaks in elements. The browser only wraps lines when there are no other valid line break points in the line.

5) Text overflow

a) Single line text overflow (important)

text-overflow: clip|ellipsis|string;

clip: trim text.

Ellipsis: displays ellipsis to represent the trimmed text.

String: use the given string to represent the trimmed text.

div {
 overflow: hidden;
 white-space: nowrap;/*Line break display is not allowed*/
 text-overflow: ellipsis;
}

Working with text styles:

​ width:300px;

​ white-space:nowrap;/ Line break display is not allowed/

​ -ms-text-overflow:ellipsis;/ Compatible with IE/

​ text-overflow:ellipsis;

​ overflow:hidden;

b) Multi line text overflow (not supported by IE9 and below, mainly supported by Google)

div {
    width:300px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

IV CSS3 border

1) Rounded borders: border radius

Syntax: border radius: 1-4 length|% / 1-4 length|%;

top-left/top-right/bottom-left/bottom-right

When there are two parameters: the first one corresponds to the upper left and lower right, and the second one corresponds to the upper right and lower left

Four parameters: upper left, upper right, lower right and lower left

 div{
            width: 200px;
            height: 200px;
            border: solid 1px #666666;
           /*-webkit-border-radius: 50% 40% 30% 20%;
            -moz-border-radius: 50% 40% 30% 20%;
            border-radius: 50% 40% 30% 20%;*/
            -webkit-border-radius: 50%;
            -moz-border-radius:50%;
            border-radius: 50%;
        }
2) Border shadow (above IE9)

Box shadow: horizontal offset vertical offset blur distance shadow distance color [inset]// Default external

div {
            width: 200px;
            height: 200px;
            border: solid 1px #00ff00;
            -webkit-box-shadow: inset 3px 3px 2px #000;
            -moz-box-shadow: inset 3px 3px 2px #000;
            box-shadow: inset 3px 3px 2px #000;
        }
3) Border picture (only supported by IE11.0 and above)

Border image: the image path is offset inward by the distance, and the width exceeds the distance of the border

Repeat effect: round / stretch / repeat

.div3{
            -webkit-border-image: url(../img/border.png) 10 round;
            -moz-border-image: url(../img/border.png) 10 round;
            -o-border-image: url(../img/border.png) 10 round;
            border-image: url(../img/border.png) 10 round;
        }
        img{
            -webkit-border-image: url(../img/border.png) 10 round;
            -moz-border-image: url(../img/border.png) 10 round;
            -o-border-image: url(../img/border.png) 10 round;
            border-image: url(../img/border.png) 10 round;
        }

V CSS3 background

1) Multiple background

Background: background color (when the background is not filled with background image, it will be filled with background color) background picture tile position, background color background picture tile position (about 50%, 100% up and down)

div{
            width: 500px;
            height: 500px;
            margin: 100px auto;
            background: url("../img/ufo.png") no-repeat 50% 100%,url("../img/stars.png") no-repeat 0 0,url("../img/sky.png") no-repeat 0 0;
        }
2) Background size: sets the display size of the background image.

Background size: fixed length | percentage | cover|contain;

length: sets the height and width of the background image. The first value sets the width and the second value sets the height. If only one value is set, the second value is set to "auto".

Percentage: sets the width and height of the background image as a percentage of the parent element. The first value sets the width and the second value sets the height. If only one value is set, the second value is set to "auto".

cover: expand the background image to be large enough so that the background image completely covers the background area. Some parts of the background image may not be displayed in the background positioning area.

contain: expand the image to the maximum size so that its width and height fully adapt to the content area.

3) Background origin: Specifies the location area of the background image. (hidden)

background-origin: padding-box|border-box|content-box;

Padding box: the background image is positioned relative to the inner margin box.

Border box: the background image is positioned relative to the border box.

Content box: the background image is positioned relative to the content box.

4) Background clip: sets the drawing area of the background. (crop)

background-clip: border-box|padding-box|content-box;

5) Gradient background

Background image: linear gradient / radial gradient

Vi CSS3 color

1)rgba(r,g,b,a)

R: Red value. Positive integer | percentage

G: Green value. Positive integer | percentage

B: Blue value. Positive integer | percentage

A: Alpha transparency. The value is between 0 and 1.

2)hsl(h,s,l)

H: Hue. Value: 0 - 360

0 (or 360) indicates red, 120 indicates green, 240 indicates blue, or other values can be used to specify the color.

S: Saturation. Value: 0.0% - 100.0%

50: L ightness. Value: 0.0% - 100.0%

3)hsla(h,s,l,a)

H: Hue. Value: 0 - 360

0 (or 360) indicates red, 120 indicates green, 240 indicates blue, or other values can be used to specify the color.

S: Saturation. Value: 0.0% - 100.0%

50: L ightness. Value: 0.0% - 100.0%

a: Opacity

4) Opacity: sets the opacity level of the element

In most cases, the mask effect of elements is taken as a decimal point of 0-1

IE8 and none of them support opacity. Handle it in a compatible way and add a line of code

fitlter:alpha(opacity=numerical value) //Range of values: 0-100

Handle opacity

VII CSS3 gradient

Gradient is mainly used to set the background or make a three-dimensional map

1) Linear gradient

Background: linear gradient (direction or angle, color-stop1, color 1 percentage, color-stop2, color 2,...);

Direction:

To left: gradient from right to left

To right: gradient from left to right

To top: gradient from bottom to top

to bottom: gradient from bottom to top

To top left: gradient from bottom right to top left

To top right: gradient from bottom left to top right

To bottom left: gradient from top right to bottom left

To bottom right: gradient from top left to bottom right

Angle:

45 °, expressed as: 45deg

Color value:

Words representing color / hexadecimal / functions representing color (for example: rgb(),rgba(),hsl(),hsla())

.div1 {
 /* Top to bottom gradient (by default) */
 background: linear-gradient(red, blue); 
}
.div2 {
 /* Left to right gradient */
 background: linear-gradient(right,red, blue); 
}
.div3 {
 /* Gradient from top left corner to bottom right corner */
 background: linear-gradient(to bottom right,red, blue); 
}
2) Radial gradient (gradient along radius)

Background: radial gradient (shape gradient size, at position, color 1 percentage,..., color n);

Shape:

ellipse: elliptical radial gradient (default)

Circle: circle radial gradient

Gradient size:

Farthest corner: the radius length of the gradient is from the center of the circle to the farthest corner of the center of the circle

Closest corner: the radius length of the gradient is the angle from the center to the nearest center

Closest side: the radius length of the gradient is from the center of the circle to the edge closest to the center of the circle

Farthest side: the radius length of the gradient is from the center of the circle to the roundest edge from the center of the circle

Location:

Center: set the center of the circle at the middle position

Top: set the center of the circle at the top

Bottom: set the center of the circle at the bottom

At Space Center abscissa space circular ordinate: set the position of the center of the circle at the specified (abscissa, ordinate) / / write the front position, and you cannot write the specific value

3) Text gradient

Background image: linear gradient or radial gradient;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-image: -webkit-linear-gradient(to bottom, #90faff, #e693ff);
background-image: linear-gradient(to bottom, #90faff, #e693ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

VIII CSS3 box model

Box sizing: allows you to define certain elements in some way to fit a specified area

Box sizing:: content box / border box (lower versions of Firefox and Google require vendor prefix)

Content box: This is created by CSS2 1 specified width height behavior. The width and height are applied to the content box of the element respectively. Between width and height

Draws the inside margin and border of the element.

Border box: the width and height set for the element determine the border box of the element. That is, any margins and borders you specify for the element will be

Draw within the set width and height. The width and height of the content can be obtained by subtracting the border and inner margin from the set width and height

Tags: Front-end css3

Posted by tmk4php on Sun, 08 May 2022 04:24:32 +0300