What is CSS? This is a complete solution, there is absolutely what you want

blessed by heaven 2021-05-03 03:28:15
css complete solution absolutely want


brief introduction

CSS What is it? ?


CSS What is it? ? A complete explanation of this article , There's definitely something you want

CSS yes Cascading Style Sheets For short , It's called cascading style sheet in Chinese .

Attributes and attribute values are separated by colons , It ends with a semicolon .

CSS Four ways of introduction :

1. Inline

Inline is in the label style Property CSS style .

<div style="..."></div>

2. The embedded

Embedded is going to be CSS The style is written on the web page <head> Labeled <style></style> Label alignment .

<head>    ...    <style type="text/css">        ... Write here CSS style     </style></head>

3. Import type
Put an independent .css The file import HTML In file , Import use @import Introduce the outside CSS file ,<style> The mark is also written in <head> In the mark .

Import will load the entire web page after loading CSS file .

<head>    ...    <style type="text/css">        @import "My.css"; Note here .css Path to file     </style></head>

4. Linked
Put an independent .css File import to HTML In file , Use <link> The mark is written in <head> In the mark .

Link type will be loaded before the main body of the web page file is loaded CSS file .

<head>    ...    <link href="My.css" rel="stylesheet" type="text/css"></head>

Style application order :

  • In line styles have the highest priority
  • For the same style properties , Different style properties will be presented in a combined way
  • Same style and same attributes , How to present it <head> The order in the decision , The following will override the previous attributes
  • !important Specifies that style rules are applied first
.nick {    color: yellow !important;}

CSS What is it? ? A complete explanation of this article , There's definitely something you want

Selectors (Selector)

Basic selector :

1. Universal element selector

* Indicates that it applies to all tags .

* {color: yellow}

2. tag chooser

Match all uses div The elements of the label ( Can match all tags )

div {color: yellow}

3. Class selectors

Match all class Property contains info The elements of .

grammar :. Class name { style }( Class names cannot begin with numbers , Class names should be case sensitive .)

.Mycolor {color: yellow}<h3 class="Mycolor">nick</h3>

4.ID Selectors

Use id Property to call the style , In a web page id All the values of are unique ( yes W3C Norms, not rules , So there's no mistake ).

grammar :#ID name { style }(ID The first name cannot begin with a number )

#Mycolor {color: yellow}<h3 id="Mycolor">Nick.</h3>

Combination selector :

1. Multi element selector

Simultaneous matching h3,h4 label , Separated by commas .

h3,h4 {color: yellow;}<h3>Nick</h3><h4>Jenny</h4>

2. Descendant element selector

Match all div Nested in tags P label , Space between .

    div p {color: yellow;}<div>    <p>Nick</p>    <div>        <p>Nick</p>    </div></div>

3. Child Selector

Match all div Nested subunits in tags P label , In between > Separate .

    div > p {color: yellow;}<div>    <p>Nick</p>    <p>Nick</p></div>

4. Adjacent element selector

Match all the following div The peer label after the label P, In between + Separate ( You can only match one ).

    div + p {color: yellow;}<div>Nick</div><p>Nick</p>

Attribute selector :

1.[title] & P[title]

Set all with title Label elements for attributes ;

Set all with title Attribute P Tag element .

    [title]    {        color: yellow;    }    p[title]    {        color: yellow;    } <div title>Nick</div><p title>Nick</p>

2.[title=Nick]

Set all title Attribute is equal to the “Nick” Tag elements of .

    [title="Nick"]    {        color: yellow;    }<p title="Nick">Nick</p>

3.[title~=Nick]

Set all title Property has multiple space-separated values 、 One of the values is equal to “Nick” Tag elements of .

    [title~="Nick"]    {        color: yellow;    }<p title="Nick Jenny">Nick</p><p title="Jenny Nick">Nick</p>

4.[title|=Nick]

Set all title Property has multiple hyphens separated (hyphen-separated) Value 、 One of the values is represented by "Nick" start Tag elements of .

example :lang attribute :"en"、"en-us"、"en-gb" wait

    [title|="Nick"]    {        color: yellow;    } <p title="Nick-Jenny">Nick</p>

5.[title^=Nick]

Sets each label element whose attribute value begins with the specified value .

    [title^="Nick"]    {        color: yellow;    }<p title="NickJenny">Nick</p>

6.[title$=Nick]

Sets each label element whose attribute value ends with the specified value .

    [title$="Nick"]    {        color: yellow;    }<p title="JennyNick">Nick</p>

7.[title*=Nick]

Set each element in the attribute value that contains the specified value

[title*="Nick"] { color: yellow; } <p title="SNickJenny">Nick</p>

Pseudo class selector :

1. link、hover、active、visited

  • a:link( Unreached link status ), Used to define the general link state .
  • a:hover( Mouse on link state ), Used to produce visual effects .
  • a:active( The state of pressing the mouse over a link ).
  • a:visited( Visited link status ), You can see the links you've visited .
    a:link{color: black}    a:hover{color: yellow}    a:active{color: blue}    a:visited{color: red} <a href="#">Nick</a>

2. before、after

  • P:before At every <p> Insert content before the content of element ;
  • P:after At every <p> After the content of the element, insert the content .
    p {        color: yellow;    }    p:before{        content: "before...";    }    p:after{        content: "after...";    } <p> Nick </p> 

Common properties

1. color property :

color

  • HEX( Hexadecimal color :color: #FFFF00 --> abbreviation :#FF0)
  • RGB( Red, green and blue , Usage mode :color:rgb(255,255,0) perhaps color:rgb(100%,100%,0%))
  • RGBA( Red green blue transparency ,A It's transparency 0~1 Between . Usage mode :color:rgba(255,255,0,0.5))
  • HSL(CSS3 It works ,H It means hue ,S Indicates saturation ,L Indicates brightness , Usage mode :color:hsl(360,100%,50%))
  • HSLA( and HSL be similar ,A Express Alpha transparency , Value 0~1 Between .)

transparent

  • Completely transparent , Usage mode :color: transparent;

opacity

  • The transparency of the elements , grammar :opacity: 0.5;
  • The attribute value is 0.0 To 1.0 Within the scope of ,0 Show transparency ,1 It means opaque .
  • filter Filter properties ( Only for the early IE browser , grammar :filter:alpha(opacity:20);).

2. Font properties :

font-style: Used to specify italicized text

  • normal Text is displayed normally
  • italic Text in italics
  • oblique Text tilt

font-weight: Set text thickness

  • normal( Default )
  • bold( In bold )
  • bolder( amount to <strong> and <b> label )
  • lighter ( routine )
  • 100 ~ 900 The whole hundred (400=normal,700=bold)

font-size: Set the font size

  • The default value is :medium
  • <absolute-size> Optional parameter values :xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
  • <relative-size> Adjust relative to the size of the font in the parent label . Optional parameter values :smaller、 larger
  • <percentage> Percentage specifies the text size .
  • <length> Specifies the text size with a length value , Negative value not allowed .

font-family: Font name

  • Use commas to separate multiple Fonts ( Priority from front to back , If the current font is not found in the system , Then look behind )

font: Abbreviated attribute

  • grammar :font: font size / Row height typeface ;( The font should be at the end )

3. Text attribute :

white-space: Set the way to handle whitespace in an element

  • normal: Default handling .
  • pre: Keep the space , Don't wrap when the text is out of bounds
  • nowrap: No spaces , Force all text on the same line , Until the end of the text or when br label
  • pre-wrap: Keep the space , When the text hits the boundary, wrap
  • pre-line: No spaces , Keep the word wrapping , When the text hits the boundary, wrap

direction: Set the direction of the text

  • ltr Default , Text direction left to right .
  • rtl Text direction right to left .

text-align: Horizontal alignment of text

  • left
  • center
  • right

line-height: Text line height

  • normal Default

vertical-align: Vertical alignment of the line height of the text

  • baseline Default
  • sub Align subscripts of text vertically , and <sub> The same effect as the label
  • super Align superscripts of text vertically , and <sup> The same effect as the label
  • top The top of the object is aligned with the top of the container
  • text-top The top of the object is aligned with the top of the line text
  • middle Element objects are aligned vertically based on the baseline
  • bottom The bottom of the object is aligned with the bottom of the text in the line
  • text-bottom The bottom of the object is aligned with the bottom of the line text

text-indent: Indent text

letter-spacing: Add space between letters

word-spacing: Add space between each word

text-transform: Property controls the case of text

  • capitalize Each word in the text begins with a capital letter .
  • uppercase Definitions are only capital letters .
  • lowercase The definition is only lowercase .

text-overflow: Text overflow style

  • clip Trim text .
  • ellipsis Show ellipsis ... To represent the trimmed text .
  • string Use the given string to represent the trimmed text .
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <!--<link href="cc2.css" rel="stylesheet" type="text/css">-->    <style>        div {            width: 100px;            height: 100px;            white-space: nowrap;            overflow: hidden;            text-overflow: ellipsis;        }    </style></head><body>    <div> Sonin Sonin Sonin Sonin Sonin Sonin Sonin Sonin Sonin Sonin Sonin Sonin Sonin Sonin Sonin Sonin Sonin Sonin Sonin Sonin </div></body></html>

text-decoration: The decoration of the text

  • none Default .
  • underline Underline .
  • overline Top line .
  • line-through center line .

text-shadow: Text shadow

  • The first parameter is the left and right position
  • The second parameter is up and down position
  • The third parameter is the virtualization effect
  • The fourth parameter is color
  • text-shadow: 5px 5px 5px #888;

word-wrap: Word wrap

  • word-wrap: break-word;
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        p {            width: 150px;            height: 160px;            background-color: #FFA500;            /* Border shadow */            box-shadow: 10px 10px 5px #888;            /* Word wrap */            word-wrap: break-word;        }        h1 {            text-shadow: 5px 5px 5px #888;        }    </style></head><body>    <p>        When you are old and grey and full of sleep,And nodding by the fire, take down this book,And slowly read, and dream of the soft look    </p>    <h1> Sonin </h1></body></html> 

CSS What is it? ? A complete explanation of this article , There's definitely something you want

a { text-decoration: none; /* Remove a Label underline */}

4. Background properties

background-color: The background color

background-image Set the image as the background

  • url("//inotgo.com/imagesLocal/202105/03/20210503032609380z_10.png"); Picture address
  • background-image:linear-gradient(green,blue,yellow,red,black); Color gradient effect

background-position Set the position coordinates of the background image

  • background-position: center center; Put the picture in the middle ,x Axis center,y Axis center
  • 1px -195px Capture a part of the picture , They represent the coordinates x,y Axis

background-repeat Set the background image not to tile repeatedly

  • no-repeat Set the image not to repeat , Commonly used
  • round Auto zoom until it fits and fills the entire container
  • space Lay and fill the entire container at the same spacing

background-attachment Is the background image fixed or scrolling with the rest of the page

background Abbreviation

  • background: url("o_ns.png") no-repeat 0 -196px;
  • background: url("o_ns.png") no-repeat center bottom 15px;
  • background: url("o_ns.png") no-repeat left 30px bottom 15px;

5. A list of attributes

list-style-type: The type of the list item flag

  • none Remove the sign
  • decimal-leading-zero; 02.
  • square; Square box
  • circle; The hollow circle
  • upper-alph; & disc; Solid round

list-style-image: Set the image as a list item flag

list-style-position: The location of the list item flag

  • inside
  • outside

list-style: abbreviation

The page layout

1. Frame

border-style: Border style

  • solid Default , Solid line
  • double double
  • dotted Dotted lines
  • dashed Dotted line

border-color: Border color

border-width: Border width

border-radius: Round corners

  • 1 Parameters : Four angles of application
  • 2 Parameters : The first parameter applies to Top left 、 The lower right ; The second parameter applies to The lower left 、 The upper right
  • 3 Parameters : The first parameter applies to Top left ; The second parameter applies to The lower left 、 The upper right ; The third parameter applies to the lower right
  • 4 Parameters : Top left 、 The upper right 、 The lower right 、 The lower left ( Clockwise )

border: Abbreviation

  • border: 2px yellow solid;

box-shadow: Border shadow

  • The first parameter is the left and right position
  • The second parameter is up and down position
  • The third parameter is the virtualization effect
  • The fourth parameter is color
  • box-shadow: 10px 10px 5px #888;
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div {            border:2px solid;            border-radius:25px;            width: 140px;        }    </style></head><body>    <div>          Thumb up oh !dear.     </div></body></html>

CSS What is it? ? A complete explanation of this article , There's definitely something you want

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .radius1 {            display: inline-block;            width: 100px;            height: 100px;            background-color: yellow;            border-radius: 20px;        }        .radius2 {            display: inline-block;            width: 100px;            height: 100px;            background-color: red;            border-radius: 20px 35px;        }        .radius3 {            display: inline-block;            width: 100px;            height: 100px;            background-color: blue;            border-radius: 20px 35px 50px;        }        .radius4 {            display: inline-block;            width: 100px;            height: 100px;            background-color: green;            border-radius: 20px 35px 50px 60px;        }    </style></head><body>    <div>        <span class="radius1"></span>        <span class="radius2"></span>        <span class="radius3"></span>        <span class="radius4"></span>    </div></body></html>

CSS What is it? ? A complete explanation of this article , There's definitely something you want

Border to achieve a variety of triangle symbols :


CSS What is it? ? A complete explanation of this article , There's definitely something you want

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .triangle-one {            display: inline-block;            border-top: 50px red solid;            border-right: 50px green solid;            border-bottom: 50px yellow solid;            border-left: 50px blue solid;        }        .triangle-two {            display: inline-block;            border-top: 0 red solid;            border-right: 50px green solid;            border-bottom: 50px yellow solid;            border-left: 50px blue solid;        }        .triangle-stree {            display: inline-block;            border-top: 50px red solid;            border-right: 0 green solid;            border-bottom: 50px yellow solid;            border-left: 50px blue solid;        }        .triangle-four {            display: inline-block;            border-top: 50px red solid;            border-right: 0 green solid;            border-bottom: 0 yellow solid;            border-left: 50px blue solid;        }         .triangle-five {            display: inline-block;            border: 50px transparent solid;            border-top: 50px red solid;        }        .triangle-six {            display: inline-block;            border: 50px transparent solid;            border-bottom: 50px yellow solid;        }        .triangle-seven {            display: inline-block;            border: 50px transparent solid;            border-top: 60px red solid;            border-right: 0;        }        .triangle-eight {            display: inline-block;            border: 50px transparent solid;            border-left: 30px yellow solid;            border-bottom: 0;        }    </style></head><body>    <div class="triangle-one"></div>    <div class="triangle-two"></div>    <div class="triangle-stree"></div>    <div class="triangle-four"></div>    <div class="triangle-five"></div>    <div class="triangle-six"></div>    <div class="triangle-seven"></div>    <div class="triangle-eight"></div></body></html>

CSS What is it? ? A complete explanation of this article , There's definitely something you want

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .back {            width: 1000px;            height: 1000px;            margin: 0 auto;            background-color: #ddd;            position: relative;        }        .back-in {            position: absolute;            width: 1020px;            height: 45px;            left: -20px;            top: 50px;            background-color: #2F4F4F;        }        .back-img {            border: 20px solid transparent;            border-top: 10px solid dimgrey;            border-right: 0;            display: inline-block;            position: absolute;            top: 95px;            left: -20px;        }        .back-font {            line-height: 9px;            margin-left: 30px;            color: white;        }    </style></head><body>    <div class="back">        <div class="back-in"><h3 class="back-font"> My sister asks for attention ^.^</h3></div>        <div class="back-img"></div>    </div></body></html>

2.* Box model

A standard box model :


CSS What is it? ? A complete explanation of this article , There's definitely something you want

padding: Used to control the distance between the content and the border ;

margin: Used to control the distance between elements ;


CSS What is it? ? A complete explanation of this article , There's definitely something you want

One parameter , Apply to four sides .

Two parameters , The first one is for 、 Next , The second one is for the left 、 Right .

Three parameters , The first one is for , The second one is for the left 、 Right , The third one is for .

 By default, the border is positioned at the top left corner of the browser window , But it doesn't stick to the border of the browser window , This is because body It's also a box , The outer and html, By default ,body distance html It's going to have a number of pixels margin, therefore body The box in the browser window will no longer adhere to the border . resolvent :body { margin: 0;}

3.* display

  • none No display .
  • block Display as block level elements .
  • inline Show as inline element .
  • inline-block Inline block element ( It keeps the height and width of the block elements ).
  • list-item Display as a list element .

4. visibility

  • visible The element is visible
  • hidden Elements are not visible
  • collapse When used in table elements , This value can delete a row or a column , Does not affect the layout of the table .

5.* float float

Let's have two block level labels on one line , Will break away from the document stream

  • none
  • left Left floating
  • right Right float

clear Remove the floating :

  • none : The default value is . Allows floating objects on both sides
  • left : No floating objects are allowed on the left
  • right : No floating objects are allowed on the right
  • both : Floating objects on both sides are not allowed

6. clip Cut the image

rect Tailoring positioning elements :

  • auto The default value is , No shear
  • On - Right - Next - Left ( Clockwise ) Provide four offset values in the order of
  • The outside part is transparent
  • Must specify position:absolute;
  • example :clip:rect(0px,60px,200px,0px);

7. overflow Sets how to display content when the content of an object exceeds its specified height and width

  • visible The default value is , Content will not be trimmed , It will appear outside the element box .
  • hidden The content will be trimmed , And the rest is invisible .
  • scroll The content will be trimmed , But the browser will display scroll bars to see the rest of the content .
  • auto If the content is trimmed , The browser will display scroll bars to view the rest of the content .

CSS What is it? ? A complete explanation of this article , There's definitely something you want

8.* position Specify the location type of the element


CSS What is it? ? A complete explanation of this article , There's definitely something you want

  • Positioning through the following four attributes :
  • left
  • top
  • right
  • bottom
  • z-index

9. z-index The order of elements

  • z-index Valid only on positioning elements ( example :position:absolute;)
  • You can specify negative property values ( example :-1;)
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .z-index1 {            width: 100px;            height: 100px;            background-color: yellow;            position: absolute;            z-index: -1;        }        .z-index2 {            width: 100px;            height: 100px;            background-color: red;            position: absolute;            top: 20px;            left: 20px;            z-index: 5;        }    </style></head><body>    <div class="z-index1"></div>    <div class="z-index2"></div></body></html>

CSS What is it? ? A complete explanation of this article , There's definitely something you want

10. outline Border outline

  • outline-width Contour width
  • outline-color Outline color
  • outline-style Outline style

CSS What is it? ? A complete explanation of this article , There's definitely something you want

11. zoom Zoom ratio

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .zoom1 {            zoom: 100%;        }        .zoom2 {            zoom: 150%;        }        .zoom3 {            zoom: 200%;        }    </style></head><body>    <div class="zoom1">Nick 100%</div>    <div class="zoom2">Nick 200%</div>    <div class="zoom3">Nick 300%</div></body></html>

CSS What is it? ? A complete explanation of this article , There's definitely something you want

12. cursor The type and shape of the mouse

Mouse over the following words ,There will be a miracle:

url: Custom cursor

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--<link href="cc2.css" rel="stylesheet" type="text/css">--> <style> body { cursor: url("mouse.png"), auto; /* Picture address :http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png*/ } </style></head><body> <div><img src="//inotgo.com/imagesLocal/202105/03/20210503032609380z_10.png" height="100%" width="100%"></div></body></html>

Auto: Default
Default: Default
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
Crosshair
Pointer
Move
text
wait
help

not-allowed

13. transform、transition Animation effect

transform transformation , deformation

  • origin Define the rotation base point (left top center right bottom Coordinate value ) transform-origin: 50px 50px; transform-origin: left;.
  • rotate rotate transform:rotate(50deg) The rotation angle can be negative , You need to define origin.
  • skew Distortion transform:skew(50deg,50deg) They are opposite x Axis tilt , relative y Axis tilt .
  • scale The zoom transform:scale(2,3) Lateral amplification 2 times , Vertical magnification 3 times ;transform:scale(2) Zoom in both vertically and horizontally 2 times .
  • translate Move transform:translate(50px, 50px) They are opposite x Axis movement , relative y Axis movement .
<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>nick</title>    <meta charset="utf-8" />    <style type="text/css">        div {            border: 1px solid black;            height: 30px;            width: 30px;            background-color: yellow;             /*transform-origin: 50px 50px;*/            transform-origin: left;            transform: rotate(50deg);            /*transform: skew(50deg,50deg);*/            /*transform: translate(50px,50px);*/            /*transform: scale(2);*/        }    </style></head><body>    <div></div></body></html>


Transition Smooth transition

  • transition-property: Properties of transformation (none( No attribute changes )、all( All attributes change )、 Specific properties )
  • transition-duration: Change duration
  • transition-timing-function: The rate of transformation (ease:( Slow down gradually )、linear:( uniform )、ease-in:( Speed up )、ease-out:( Slow down )、ease-in-out:( Accelerate and then decelerate )、cubic-bezier:( Custom time curve ))
  • transition-delay: Transform delay time
  • transition: abbreviation
#property Specify the type of the property 1、color: Through red 、 green 、 Blue and transparency components transform ( Each value is processed separately ), Such as :background-color,border-color,color,outline-color etc. CSS attribute ;2、length: Real numbers , Such as :word-spacing,width,vertical- align,top,right,bottom,left,padding,outline-width,margin,min-width,min- height,max-width,max-height,line-height,height,border-width,border- spacing,background-position Equal attribute ;3、percentage: Real numbers , Such as :word-spacing,width,vertical- align,top,right,bottom,left,min-width,min- height,max-width,max-height,line-height,height,background-position Equal attribute ;4、integer Discrete steps ( The whole number ), In real digital space , And the use of floor() Occurs when converting to an integer , Such as :outline-offset,z-index Equal attribute ;5、number Actual ( floating-point ) The number , Such as :zoom,opacity,font-weight Equal attribute ;6、transform list.7、rectangle: adopt x、 y、 width and height( Convert to value ) Transformation , Such as :crop;8、visibility: Discrete steps , stay 0 To 1 Within the numerical range ,0 Express “ hide ”,1 It means complete “ Show ”, Such as :visibility;9、shadow: Act on color、x、y、 and blur( Fuzzy ) attribute , Such as :text-shadow;10、gradient: Change by position and color at each stop . They have to be of the same type ( Radial or linear ) And the same stop value in order to perform the animation , Such as :background-image;11、paint server (SVG): Only the following situations are supported : from gradient To gradient as well as color To color, Then the work is similar to the above ;12、space-separated list of above: If the list has the same item value , Each item in the list changes according to the above rules , Otherwise no change ;13、a shorthand property: If all parts of the abbreviation can be animated , It will change just like all single attribute changes .
# Support execution transition The properties of the effect Property Name Typebackground-color as colorbackground-position as repeatable list of simple list of length, percentage, or calcborder-bottom-color as colorborder-bottom-width as lengthborder-left-color as colorborder-left-width as lengthborder-right-color as colorborder-right-width as lengthborder-spacing as simple list of lengthborder-top-color as colorborder-top-width as lengthbottom as length, percentage, or calcclip as rectanglecolor as colorfont-size as lengthfont-weight as font weightheight as length, percentage, or calcleft as length, percentage, or calcletter-spacing as lengthline-height as either number or lengthmargin-bottom as lengthmargin-left as lengthmargin-right as lengthmargin-top as lengthmax-height as length, percentage, or calcmax-width as length, percentage, or calcmin-height as length, percentage, or calcmin-width as length, percentage, or calcopacity as numberoutline-color as coloroutline-width as lengthpadding-bottom as lengthpadding-left as lengthpadding-right as lengthpadding-top as lengthright as length, percentage, or calctext-indent as length, percentage, or calctext-shadow as shadow listtop as length, percentage, or calcvertical-align as lengthvisibility as visibilitywidth as length, percentage, or calcword-spacing as lengthz-index as integer


Mouse over the picture below ,There will be a miracle:


CSS What is it? ? A complete explanation of this article , There's definitely something you want

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>nick</title> <meta charset="utf-8" /> <style type="text/css"> .img-see-2016-7-2 { background-image: url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_sea.jpg"); background-size: 660px; background-repeat: no-repeat; height: 300px; width: 600px; transition-duration: 30s; transition-timing-function: ease; transition-property: background-size; } .img-see-2016-7-2:hover { background-size: 2000px; } </style></head><body> <div class="img-see-2016-7-2"></div></body></html>

author :suoning


Link to the original text :https://www.cnblogs.com/suoning/p/5625582.html
版权声明
本文为[blessed by heaven]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/05/20210503032609380z.html

  1. HTML + CSS + JavaScript to achieve cool Fireworks (cloud like particle text 3D opening)
  2. HTML + CSS + JavaScript realizes 520 advertising love tree (including music), which is necessary for programmers to express themselves
  3. Solve the problem of Web front-end deployment server (it can be deployed online without a server)
  4. HTML + CSS + JS make wedding countdown web page template (520 / Tanabata Valentine's Day / programmer advertisement)
  5. What else can driverless minibus do besides "Park connection"?
  6. Cloud native leads the era of all cloud development
  7. NRM mirror source management tool
  8. Bring it to you, flex Jiugong
  9. Lolstyle UI component development practice (II) -- button group component
  10. Deconstruction assignment in ES6
  11. Luo 2 peerless Tang clan was officially launched. The official gave a key point, and the broadcast time was implied
  12. 20初识前端HTML(1)
  13. 当新零售遇上 Serverless
  14. 20 initial knowledge of front-end HTML (1)
  15. When new retail meets serverless
  16. [golang] - go into go language lesson 5 type conversion
  17. [golang] - go into go language lesson 6 conditional expression
  18. HTML5(八)——SVG 之 path 详解
  19. HTML5 (8) -- detailed explanation of SVG path
  20. 需要开通VIP以后页面内容才能复制怎么办?控制台禁用javascript即可
  21. Web前端|CSS入门教程(超详细的CSS使用讲解,适合前端初学者)
  22. 实践积累 —— 用Vue3简单写一个单行横向滚动组件
  23. Serverless 全能选手,再下一城
  24. What if you need to open a VIP to copy the page content? Just disable JavaScript on the console
  25. Web front end | CSS introductory tutorial (super detailed CSS explanation, suitable for front-end beginners)
  26. Practice accumulation - write a single line horizontal scroll component simply with vue3
  27. Dili Reba is thin again. She looks elegant and high in a strapless hollow skirt, and her "palm waist" is beautiful to a new height
  28. Serverless all-round player, next city
  29. The difference between MySQL semi synchronous replication and lossless semi synchronous replication
  30. Vue表单设计器的终极解决方案
  31. The ultimate solution for Vue form designer
  32. Nginx从理论到实践超详细笔记
  33. Yu Shuxin's red backless swimsuit is split to the waist and tail, with a concave convex figure and excessive color matching, and his face is white to dazzling
  34. Nginx ultra detailed notes from theory to practice
  35. 【动画消消乐|CSS】086.炫酷水波浪Loading过渡动画
  36. typecho全站启用https
  37. CCTV has another popular employee. The off-site interpretation is very professional, and the appearance ability is no less than that of Wang Bingbing
  38. [animation Xiaole | CSS] 086. Cool water wave loading transition animation
  39. Enable HTTPS in Typecho
  40. 50天用JavaScript完成50个web项目,我学到了什么?
  41. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax
  42. What have I learned from completing 50 web projects with JavaScript in 50 days?
  43. "My neighbor doesn't grow up" has hit the whole network. There are countless horse music circles, and actor Zhou Xiaochuan has successfully made a circle
  44. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax
  45. Implement the Ajax of jQuery according to the native XMLHttpRequest in JavaScript
  46. Implement the Ajax of jQuery according to the native XMLHttpRequest in JavaScript
  47. 30 + women still wear less T-shirts and jeans. If they wear them like stars, they will lose weight
  48. 数栈技术分享前端篇:TS,看你哪里逃~
  49. Several stack technology sharing front end: TS, see where you escape~
  50. 舍弃Kong和Nginx,Apache APISIX 在趣链科技 BaaS 平台的落地实践
  51. Abandon the landing practice of Kong and nginx, Apache apisik on the baas platform of fun chain technology
  52. 浪迹天涯king教你用elementui做复杂的表格,去处理报表数据(合并表头,合并表体行和列)
  53. 前端HTML两万字图文大总结,快来看看你会多少!【️熬夜整理&建议收藏️】
  54. Wandering around the world king teaches you to use elementui to make complex tables and process report data (merge header, merge table body rows and columns)
  55. 路由刷新数据丢失 - vuex数据读取的问题
  56. Front end HTML 20000 word graphic summary, come and see how much you can【 Stay up late to sort out & suggestions]
  57. Route refresh data loss - vuex data reading problem
  58. Systemctl系统启动Nginx服务脚本
  59. Systemctl system startup nginx service script
  60. sleepless