css是什么的缩写(CSS是什么？这一篇全解，绝对有你想要的)

缘分星空

2022-04-20 11:52:23

简介

什么是CSS？

是CSS层叠样式表的缩写，中文叫层叠样式表。

属性和属性值由冒号分隔，以分号结束。

介绍CSS的四种方式:

1.内联表达式

内联样式是在标签的style属性中设置CSS样式。

& ltdiv style = & # 34..."& gt& lt/div & gt；2.嵌入式

嵌入式是

& lthead & gt ... & lt；style type = & # 34text/CSS & # 34；& gt ...在这里写CSS样式导入
引入一个独立的。css文件导入到html文件中，而import使用@import导入外部CSS文件。< style >标签也被写入

导入将在加载整个网页后加载CSS文件。

& lthead & gt ... & lt；style type = & # 34text/CSS & # 34；& gt @ import & # 34；My.css & # 34；注意这里的路径。css文件链接
引入独立的。css文件转换成HTML文件，并使用< link & gt标记写入

该链接将在加载web文档正文之前加载CSS文档。

& lthead & gt ... & lt；link href = & # 34My.css & # 34rel = & # 34样式表& # 34；type = & # 34text/CSS & # 34；& gt & lt；/head & gt； 风格应用顺序:

内嵌样式具有最高优先级。

对于同一个样式属性，不同的样式属性会组合呈现。

相同的风格和属性，呈现在

！重要说明指定样式规则的应用优先。

.nick { color: yellow !important; }

。尼克{ 颜色:黄色！重要； }

选择器（Selector）

基本选择器:

1。通用元素选择器

*表示适用于所有标签。

* {color: yellow}2。标签选择器

匹配所有使用div标签的元素(所有标签都可以匹配)

Div {color: yellow}3。类别选择器

匹配class属性中包含信息的所有元素。

语法:。类名{style}(类名不能以数字开头，并且类名区分大小写。)

。my color { color:yellow } & lt；h3 class = & # 34Mycolor & # 34& gt尼克& lt/H3 & gt；4。ID选择器

使用id属性调用样式，id的值在一个网页中是唯一的(是W3C规范，不是规则，所以不会给出错误)。

语法:#ID name {style }(ID名称不能以数字开头)

# my color { color:yellow } & lt；h3 id = & # 34Mycolor & # 34& gt尼克。& lt/H3 & gt；组合选择器:

1。多元素选择器

同时匹配H3和H4标签，用逗号分隔。

h3、h4 {颜色:黄色；} & lt；h3 & gt尼克& lt/H3 & gt； & lt；h4 & gt珍妮& lt/H4 & gt； 2。下降元素选择器

匹配嵌套在所有div标签中的p标签，由空网格分隔。

div p {颜色:黄色；} & lt；div & gt & lt；p & gt尼克& lt/p & gt； & lt；div & gt & lt；p & gt尼克& lt/p & gt； & lt；/div & gt； & lt；/div & gt；3。子元素选择器

匹配所有嵌套在div标签中的sub-p标签，并使用>:Separate。

div & gtp {颜色:黄色；} & lt；div & gt & lt；p & gt尼克& lt/p & gt； & lt；p & gt尼克& lt/p & gt； & lt；/div & gt；4。相邻元素选择器

匹配紧跟在div标签之后的所有对等标签p，用+(只能匹配一个标签)分隔。

div+p {颜色:黄色；} & lt；div & gt尼克& lt/div & gt； & lt；p & gt尼克& lt/p & gt；属性选择器:

1。[Title] & P[title]

用title属性设置所有标签元素；

用title属性设置所有p标签元素。

【标题】 { 颜色:黄色； } p[title] { 颜色:黄色； } & lt；div title & gt尼克& lt/div & gt； & lt；p title & gt尼克& lt/p & gt；2。[标题=尼克]

设置title属性等于“Nick”的所有标签元素。

[title = & # 34；尼克& # 34；] { 颜色:黄色； } & lt；p title = & # 34尼克& # 34；& gt尼克& lt/p & gt；3。[title~=Nick]

设置所有title属性有多个空分隔值的tag元素，其中一个值等于“Nick”。

[title ~ = & # 34；尼克& # 34；] { 颜色:黄色； } & lt；p title = & # 34尼克·珍妮& # 34；& gt尼克& lt/p & gt； & lt；p title = & # 34珍妮·尼克& # 34；& gt尼克& lt/p & gt；4。[title | =尼克]

将所有标题属性设置为多个用连字符分隔的值，其中一个用& # 34；尼克& # 34；开头的标记元素。

例如:lang属性:& # 34；恩& # 34；、"en-us & # 34；、"en-GB & # 34；等等

[title | = & # 34；尼克& # 34；] { 颜色:黄色； } & lt；p title = & # 34尼克-珍妮& # 34；& gt尼克& lt/p & gt； 5。[title^=Nick]

设置属性值以指定值开始的每个标签元素。

【title^="；尼克& # 34；] { 颜色:黄色； } & lt；p title = & # 34NickJenny & # 34& gt尼克& lt/p & gt；6。[title$=Nick]

设置属性值以指定值结尾的每个标记元素。

[title $ = & # 34；尼克& # 34；] { 颜色:黄色； } & lt；p title = & # 34詹尼尼克& # 34；& gt尼克& lt/p & gt；7。[title * =尼克]

设置属性值包含指定值的每个元素。

[title * = & # 34；尼克& # 34；] { 颜色:黄色； } & lt；p title = & # 34SNickJenny & # 34& gt尼克& lt/p & gt；伪类选择器:

1。链接、悬停、活跃、已访问

答:link(未接入链路状态)，用于定义一般链路状态。

答:悬停(鼠标放在链接上的状态)，用来产生视觉效果。

答:active(鼠标按在链接上时的状态)。

答:已访问(已访问链接状态)，可以看到已访问的链接。

a:link { color:black } a:hover { color:yellow } a:active { color:blue } a:visited { color:red } & lt；a href = & # 34#"& gt尼克& lt/a & gt；2。之前、之后

p:在每个中之前；在元素内容之前插入内容；

p:在每个< p >中的之后在元素内容之后插入内容。

p { 颜色:黄色； } p:before { content:& # 34；以前..."； } p:after { content:& # 34；在...之后..."； } & lt；p & gt尼克& lt/p & gt；公共属性1。颜色属性:

颜色

HEX(十六进制颜色:color:# ffff 00-& gt；缩写:#FF0)

RGB(红绿蓝，用法:彩色:rgb(255，255，0)或彩色:rgb(100%，100%，0%))

RGBA(红色、绿色和蓝色透明度，a是介于0和1之间的透明度。用途:颜色:rgba(255，255，0，0.5))

HSL(CSS3有效，H代表色相，S代表饱和度，L代表亮度，用法:颜色:hsl(360，100%，50%))

HSLA(类似于HSL，a代表Alpha透明度，值在0到1之间。)

透明的

全透明，用途:颜色:透明；

不透明度

元素的透明度，语法:不透明度:0.5；

属性值范围从0.0到1.0，0表示透明，1表示不透明。

Filter属性(仅适用于早期的IE浏览器，语法:filter:alpha(不透明度:20)；)。

2。字体属性:

font-style:用于指定斜体

正常文本正常显示。

斜体文本斜体显示

倾斜文本倾斜显示

font-weight:设置文本的粗细

正常(默认)

粗体(粗体)

粗体(相当于

打火机(通用)

100 ~ 900(400 =正常，700 =粗体)

font-size:设置字体大小

默认值:中

& lt绝对尺寸& gt可选参数值:xx-small，x-small，small，medium，large，x-large，xx-large。

& lt相对大小& gt相对于父标签中的字体大小进行调整。可选参数值:较小、较大

& lt百分比& gt指定文本大小的百分比。

& lt长度& gt用长度值指定文本大小，不允许使用负值。

font-family:字体名称

用逗号分隔多个字体(优先顺序是从前到后，如果在系统中找不到当前字体，以后再找)

font:缩写属性

语法:font:字号/行高字体；(字体应该在最后)

3。文本属性:

空白:设置元素中空空白的处理方式

正常:默认处理方法。

Pre:保留空框，文字超出边界时不换行。

Nowrap:不要保留空框，并强制所有文本显示在同一行，直到触及文本的结尾或br标签。

预换行:保留空网格，当文字触及边界时换行。

前置行:不保留空网格，保留字换行，文字触及边界时换行。

方向:指定文本的方向

Ltr默认情况下，文本方向是从左到右。

Rtl文字方向是从右向左。

文本对齐: 文本的水平对齐

左边的

中心

正确

行高: 文本行高

默认情况下正常

vertical-align:文本行高的垂直对齐方式

基线默认值

Sub垂直对齐文本的下标。标签也有同样的效果。

超级垂直对齐文本的上标。标签也有同样的效果。

顶部对象的顶部与容器的顶部对齐。

文本顶部对象的顶部与文本行的顶部对齐。

中间元素对象基于基线垂直对齐。

底部对象的底部与行中文本的底部对齐。

文本底部对象的底部与文本行的底部对齐。

文本缩进: 文本缩进

字母间距:在字母之间添加空白色字符

单词间距:在每个单词之间添加空白色

text-transform:属性控制文本的大小写

ize文本中的每个单词都以大写字母开头。

大写定义只有大写字母。

Lowercase仅定义小写字母。

文本溢出: 文本溢出样式

剪辑修剪文本。

省略符号显示省略符号...来表示剪裁的文本。

字符串使用给定的字符串来表示被修剪的文本。

& lt！DOCTYPE html & gt & lt；html lang = & # 34恩& # 34；& gt & lt；head & gt & lt；meta charset = & # 34UTF-8 & # 34；& gt & lt；title & gtTitle & lt/title & gt； & lt；！-& lt；link href = & # 34cc2.css & # 34rel = & # 34样式表& # 34；type = & # 34text/CSS & # 34；& gt-& gt； & lt；style & gt div { 宽度:100px 高度:100px 空白:nowrap 溢出:隐藏； text-overflow:省略； } & lt；/style & gt； & lt；/head & gt； & lt；body & gt & lt；div & gt索宁索宁索宁索宁索宁索宁索宁索宁索宁索宁索宁。 & lt；/body & gt； & lt；/html & gt；文字装饰: 文字装饰

默认情况下无。

下划线下划线。

给轮廓加下划线。

直线穿过中线。

文本阴影:文本阴影

第一个参数是左右位置。

第二个参数是上下位置。

第三个参数是模糊效果。

第四个参数是颜色。

文-影:5px 5px 5px # 888

自动换行:自动换行

自动换行:断字；

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { width: 150px; height: 160px; background-color: #FFA500; /*边框阴影*/ box-shadow: 10px 10px 5px #888; /*自动换行*/ 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>索宁</h1> </body> </html>　　　　

& lt！DOCTYPE html & gt & lt；html lang = & # 34恩& # 34；& gt & lt；head & gt & lt；meta charset = & # 34UTF-8 & # 34；& gt & lt；title & gtTitle & lt/title & gt； & lt；style & gt p { 宽度:150px 身高:160px 背景色:# FFA500 /*边框阴影*/ box-shadow:10px 10px 5px # 888； /*自动换行*/ 自动换行:断字； } h1 { text-shadow:5px 5px 5px # 888； } & lt；/style & gt； & lt；/head & gt； & lt；body & gt & lt；p & gt 当你老了，头发花白，睡意朦胧，在炉火旁打盹，请取下这本书，慢慢地读，梦见那柔和的神情 & lt；/p & gt； & lt；h1 & gt宁

a { text-decoration:无； /*去掉A标签的下划线*/ }4。背景属性

背景色: 背景色

background-image将图像设置为背景

网址(& # 34；http://images . cnblogs . com/cnblogs _ com/suo ning/845162/o _ ns . png & # 34；);图片地址

背景-图像:线性-渐变(绿、蓝、黄、红、黑)；颜色渐变效果

background-position设置背景图像的位置坐标

背景-位置:中心居中；图像中心、x轴中心、y轴中心

1px -195px剪切图片的一部分，分别代表X轴和Y轴的坐标。

background-repeat将背景图像设置为不重复平铺

无重复设置图像不重复，常用。

圆形会自动缩放，直到适合并填满整个容器。

空间以相等的间隔平铺，并填满整个容器。

背景附件背景图片是固定的还是随着页面的其余部分滚动

背景的简称

背景:URL(& # 34；o _ ns.png & # 34)no-重复0-196 px；

背景:URL(& # 34；o _ ns.png & # 34)无重复中底15px

背景:URL(& # 34；o _ ns.png & # 34)无-重复左30px下15px

5。列表属性

list-style-type:列表项标志的类型

无移除标志

十进制前导零；02.

方形；方形框架

圆形；空心形圈

上阿尔弗；&光盘；唱片

list-style-image:将图像设置为列表项标志

list-style-position:列表项标志的位置

里面的

在外面

列表样式:缩写

页面布局

1。边框

border-style:边框样式

实线默认，实线

双线

点划线

border-color:边框颜色

border-width:边框宽度

边界半径:圆角

1参数:从四个角度应用

两个参数:第一个参数适用于左上和右下；第二个参数适用于左下角和右上角。

三个参数:第一个参数应用于左上；第二个参数应用于左下和右上；第三个参数应用于右下角。

4个参数:左上、右上、右下和左下(顺时针)

border:缩写

边框:2px黄色实心；

框阴影:边框阴影

第一个参数是左右位置。

第二个参数是上下位置。

第三个参数是模糊效果。

第四个参数是颜色。

盒影: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> 点赞哦！dear. </div> </body> </html>

& lt！DOCTYPE html & gt & lt；html lang = & # 34恩& # 34；& gt & lt；head & gt & lt；meta charset = & # 34UTF-8 & # 34；& gt & lt；title & gtTitle & lt/title & gt； & lt；style & gt div { border:2px solid； border-radius:25px；宽度:140px } & lt；/style & gt； & lt；/head & gt； & lt；body & gt & lt；div & gt 喜欢！亲爱的。 & lt；/div & gt； & lt；/body & gt； & lt；/html & gt；

<!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>

& lt！DOCTYPE html & gt & lt；html lang = & # 34恩& # 34；& gt & lt；head & gt & lt；meta charset = & # 34UTF-8 & # 34；& gt & lt；title & gtTitle & lt/title & gt； & lt；style & gt . radius 1 { display:inline-block；宽度:100px 高度:100px 背景色:黄色； border-radius:20px； } . radius 2 { display:inline-block；宽度:100px 高度:100px 背景色:红色； border-radius:20px 35px； } . radius 3 { display:inline-block；宽度:100px 高度:100px 背景色:蓝色； border-radius:20px 35px 50px； } . radius 4 { display:inline-block；宽度:100px 高度:100px 背景色:绿色； border-radius:20px 35px 50px 60px； } & lt；/style & gt； & lt；/head & gt； & lt；body & gt & lt；div & gt & lt；span class = & # 34半径1 & # 34；& gt& lt/span>。 & lt；span class = & # 34半径2 & # 34；& gt& lt/span>。 & lt；span class = & # 34半径3 & # 34；& gt& lt/span>。 & lt；span class = & # 34半径4 & # 34；& gt& lt/span>。 & lt；/div & gt； & lt；/body & gt； & lt；/html & gt；

边框实现各种三角形符号:

<!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>

& lt！DOCTYPE html & gt & lt；html lang = & # 34恩& # 34；& gt & lt；head & gt & lt；meta charset = & # 34UTF-8 & # 34；& gt & lt；title & gtTitle & lt/title & gt； & lt；style & gt 。triangle-one { 显示:inline-block； border-top: 50px红色实心； border-right: 50px绿色实心； border-bottom: 50px黄色实心； border-left: 50px蓝色实心； } 。triangle-two { 显示:inline-block； border-top: 0红色实心； border-right: 50px绿色实心； border-bottom: 50px黄色实心； border-left: 50px蓝色实心； } 。triangle-stree { display:inline-block； border-top: 50px红色实心； border-right: 0绿色实心； border-bottom: 50px黄色实心； border-left: 50px蓝色实心； } 。triangle-four { 显示:inline-block； border-top: 50px红色实心； border-right: 0绿色实心； border-bottom: 0黄色实心； border-left: 50px蓝色实心； } 。triangle-five { 显示:inline-block；边框:50px透明实心； border-top: 50px红色实心； } 。triangle-six { 显示:inline-block；边框:50px透明实心； border-bottom: 50px黄色实心； } 。triangle-seven { 显示:inline-block；边框:50px透明实心； border-top: 60px红色实心；右边界:0； } 。三角-八{ 显示:内嵌-块；边框:50px透明实心； border-left: 30px黄色实心； border-bottom:0； } & lt；/style & gt； & lt；/head & gt； & lt；body & gt & lt；div class = & # 34三角形-一& # 34；& gt& lt/div & gt； & lt；div class = & # 34三角-二& # 34；& gt& lt/div & gt； & lt；div class = & # 34三角形应力& # 34；& gt& lt/div & gt； & lt；div class = & # 34三角-四& # 34；& gt& lt/div & gt； & lt；div class = & # 34三角五& # 34；& gt& lt/div & gt； & lt；div class = & # 34三角六& # 34；& gt& lt/div & gt； & lt；div class = & # 34三角-七& # 34；& gt& lt/div & gt； & lt；div class = & # 34三角八& # 34；& gt& lt/div & gt； & lt；/body & gt； & lt；/html & gt；

<!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">妹子求关注 ^.^</h3></div> <div class="back-img"></div> </div> </body> </html>

2.★ 盒子模型& lt！DOCTYPE html & gt & lt；html lang = & # 34恩& # 34；& gt & lt；head & gt & lt；meta charset = & # 34UTF-8 & # 34；& gt & lt；title & gtTitle & lt/title & gt； & lt；style & gt 。背面{ 宽度:1000px 高度:1000px margin: 0自动；背景色:# ddd 位置:相对； } 。后退{ 位置:绝对；宽度:1020px 身高:45px left:-20px； top:50px；背景色:# 2 F4 f4f； } 。back-img { 边框:20px纯色透明； border-top: 10px纯色暗灰色；右边界:0； display:inline-block；位置:绝对； top:95px； left:-20px； } 。back-font { line-height:9px；左边距:30px 颜色:白色； } & lt；/style & gt； & lt；/head & gt； & lt；body & gt & lt；div class = & # 34back & # 34& gt & lt；div class = & # 34后退& # 34；& gt& lth3 class = & # 34back-font & # 34；& gt妹子请注意。2。★箱型

标准箱式模型:

填充:用于控制内容和边框之间的距离；

margin:用于控制元素之间的距离；

适用于四边的参数。

两个参数，第一个用于上下，第二个用于左右。

三个参数，第一个用于向上，第二个用于左右，第三个用于向下。

默认情况下，边框将位于浏览器窗口的左上角，但并不靠近浏览器窗口的边框。这是因为主体本身也是一个盒子，外层是html。默认情况下，正文与html之间会有几个像素的边距，所以正文中的框不会靠近浏览器窗口的边框。解: 体{ 边距:0； }3。★显示

无不显示。

块显示为块级元素。

Inline显示为inline元素。

内嵌块行中的块元素(块元素的高度和宽度将保持不变)。

列表项显示为列表元素。

4。可见度

可见元素是可见的

隐藏元素不可见

在表格元素中使用时，此值可以删除行或列，而不会影响表格的布局。

5。★ float float

在一行中显示两个块级标签将与文档流分开。

没有人

向左浮动

右浮动

清除浮动:

无:默认值。允许两边都有浮动对象。

Left:左边不允许有浮动对象。

右:不允许右边有浮动对象。

Both:不允许两边都有浮动对象。

6。剪辑裁剪图像

矩形剪裁定位元素:

自动默认，无剪辑

上-右-下-左(顺时针)顺序提供了四个偏移值。

区域外的部分是透明的。

位置:必须指定绝对值；

例如:clip:rect(0px，60px，200px，0px)；

7。overflow 设置当对象的内容超出其指定的高度和宽度时如何显示内容

Visible默认值，内容将不会被剪裁，但会呈现在元素框之外。

隐藏的内容将被修剪，其余的将不可见。

滚动内容将被修剪，但浏览器将显示滚动条来查看其余内容。

如果自动内容被裁剪，浏览器将显示滚动条来查看其余内容。

8。★ position指定元素的定位类型

css是什么

定位有四个属性:

左边的

顶端

正确

底部

z指数

9。z索引 元素堆叠顺序

Z-index仅在定位元素上有效(例如:position:absolute；)

您可以指定负属性值(例如:-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>

& lt！DOCTYPE html & gt & lt；html lang = & # 34恩& # 34；& gt & lt；head & gt & lt；meta charset = & # 34UTF-8 & # 34；& gt & lt；title & gtTitle & lt/title & gt； & lt；style & gt 。z-index1 { 宽度:100px 高度:100px 背景色:黄色；位置:绝对； z-index:-1； } 。z-index2 { 宽度:100px 高度:100px 背景色:红色；位置:绝对； top:20px； left:20px； z-index:5； } & lt；/style & gt； & lt；/head & gt； & lt；body & gt & lt；div class = & # 34z-index 1 & # 34；& gt& lt/div & gt； & lt；div class = & # 34z-index 2 & # 34；& gt& lt/div & gt； & lt；/body & gt； & lt；/html & gt；

10。轮廓 边框轮廓

轮廓宽度轮廓宽度

轮廓颜色轮廓颜色

轮廓样式轮廓样式

十一。缩放比例

<!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>

& lt！DOCTYPE html & gt & lt；html lang = & # 34恩& # 34；& gt & lt；head & gt & lt；meta charset = & # 34UTF-8 & # 34；& gt & lt；title & gtTitle & lt/title & gt； & lt；style & gt .zoom1 { 缩放:100%； } .zoom2 { 缩放:150%； } .zoom3 { 缩放:200%； } & lt；/style & gt； & lt；/head & gt； & lt；body & gt & lt；div class = & # 34zoom1 & # 34& gt尼克百分百& lt/div & gt； & lt；div class = & # 34zoom2 & # 34& gt尼克200% & lt；/div & gt； & lt；div class = & # 34zoom3 & # 34& gt尼克300% & lt；/div & gt； & lt；/body & gt； & lt；/html & gt；

12。光标鼠标的类型和形状

鼠标掠过下面的文字，会有奇迹出现:

Url:自定义光标

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <style> body { cursor: url("mouse.png"), auto; /*图片地址：http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png*/ } </style> </head> <body> <div><img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" height="100%" width="100%"></div> </body> </html>

Auto: 默认
Default: 默认
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
Crosshair
Pointer
Move
text
wait
help& lt！DOCTYPE html & gt & lt；html lang = & # 34恩& # 34；& gt & lt；head & gt & lt；meta charset = & # 34UTF-8 & # 34；& gt & lt；title & gtTitle & lt/title & gt； & lt；！-& lt；link href = & # 34cc2.css & # 34rel = & # 34样式表& # 34；type = & # 34text/CSS & # 34；& gt-& gt； & lt；style & gt body { cursor:URL(& # 34；mouse.png & # 34)，汽车； /*图片地址:http://images.cnblogs.com/cnblogs _ com/索宁/845162/o _ mouse.png */ } Default:Default
e-resize
ne-resize
NW-resize
n-resize
se-resize
SW-resize[w-resize
十字准线
移动
文本
等待
帮助

不允许

十三。变换和过渡动画效果

变换变换，变形

原点定义左上中右下坐标值变换-原点:50px 50px变换-原点:左；。

旋转变换:旋转的旋转角度(50度)可以是负的，需要先定义原点。

歪斜扭曲变换:歪斜(50deg，50deg)分别相对于X轴倾斜和相对于Y轴倾斜。

缩放变换:scale(2，3)水平放大2倍，垂直放大3倍；Transform:scale(2)垂直和水平放大2倍。

平移移动变换:平移(50px，50px)分别相对于X轴和Y轴移动。

& lt！DOCTYPE html & gt & lt；html & gt & lt；head & gt & lt；meta http-equiv = & # 34；内容类型& # 34；内容= & # 34；文本/html；charset = utf-8 & # 34；/& gt； & lt；title & gt尼克& lt/title & gt； & lt；meta charset = & # 34utf-8 & # 34；/& gt； & lt；style type = & # 34text/CSS & # 34；& gt div { border: 1px纯黑；高度:30px 宽度:30px 背景色:黄色； /* transform-origin:50px 50px；*/ 转换-原点:左；变换:旋转(50度)； /* transform:skew(50度，50度)；*/ /* transform:translate(50px，50px)；*/ /* transform:scale(2)；*/ } & lt；/style & gt； & lt；/head & gt； & lt；body & gt & lt；div & gt& lt/div & gt； & lt；/body & gt； & lt；/html & gt；
过渡平滑过渡

Transition-property:转换的属性(无、全部、具体属性)

过渡持续时间:过渡持续时间。

转场-计时-功能:变换的速率(缓变:(逐渐减速)，线性:(恒速)，缓入:(加速)，缓出:(减速)，缓入:(加速然后减速)，三次贝塞尔曲线:(自定义时间曲线)

过渡延迟:过渡延迟时间。

过渡:缩写

#property指定属性 1的相应类型。颜色:由红、绿、蓝、透明组件(每个值单独处理)转换，如背景色、边框色、颜色、轮廓色等CSS属性； 2、长度:实数，如字距、宽度、垂直对齐、上、右、下、左、填充、轮廓宽度、边距、最小宽度、最小高度、最大宽度、最大高度、行高、高度、边框宽度、边框间距、背景位置等属性； 3、百分比:实数，如:字距、宽度、垂直对齐、上、右、下、左、最小宽度、最小高度、最大宽度、最大高度、行高、高度、背景。 4。整数离散步(整数)发生在实数空和floor()转换成整数时，如:outline-offset、z-index等属性； 5、number real(浮点)数值，如缩放、不透明度、字体粗细等属性； 6、转换列表. 7。矩形:通过x，y，宽度和高度(转换为数值)进行变换，如:crop； 8。可见性:离散步长，在0到1的范围内，0表示“隐藏”，1表示“完全显示”，如:可见性； 9、阴影:作用于颜色、x、y、模糊属性，如文本-阴影；；10 . 。渐变:根据每个站点的位置和颜色而变化。它们必须具有相同的类型(径向或线性)和相同的停止值，以便执行动画，例如:背景-图像；；11 . 。画图服务器(SVG):只支持以下几种情况:从渐变到渐变，从颜色到颜色，然后工作和上面类似；12 . 。上面的空格分隔列表:如果列表有相同的项目值，则列表中的每个项目都会根据上面的规则进行更改，否则不会有任何更改；13 . 。一个简写属性:如果缩写的所有部分都可以被动画化，它将像所有单个属性的变化一样变化。#支持执行过渡效果的属性 property name type background-color as color background-position作为长度、百分比或计算的简单列表的可重复列表 border-bottom-color as color border-bottom-width as length border-left-color as color border-left-width as length border-right-color as color border-right-width as length 或calc letter-spacing as length line-height as number或length margin-bottom as length margin-right as length margin-top as length max-height as length，percentage，或calc max-width as length，percentage，或calc min-height as length，percentage，或calc min-width as length，percentage，或calc

把鼠标放在下图上，会有奇迹出现:

<!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>

作者：suoning& lt！DOCTYPE html & gt & lt；html & gt & lt；head & gt & lt；meta http-equiv = & # 34；内容类型& # 34；内容= & # 34；文本/html；charset = utf-8 & # 34；/& gt； & lt；title & gt尼克& lt/title & gt； & lt；meta charset = & # 34utf-8 & # 34；/& gt； & lt；style type = & # 34text/CSS & # 34；& gt 。img-see-2016-7-2 { background-image:URL(& # 34；http://images . cnblogs . com/cnblogs _ com/suo ning/845162/o _ sea . jpg & # 34；); 背景-大小:660px 后台-重复:无-重复；高度:300px 宽度:600px 过渡-时长:30s 过渡-定时-功能:ease transition-property:background-size； } 。img-see-2016-7-2:hover { background-size:2000 px； } & lt；/style & gt； & lt；/head & gt； & lt；body & gt & lt；div class = & # 34img-see-2016-7-2 & # 34；& gt& lt/div & gt； & lt；/body & gt； & lt；/html & gt；作者:索宁

原文:https://www.cnblogs.com/suoning/p/5625582.html

css是什么

css是什么的缩写(CSS是什么？这一篇全解，绝对有你想要的)

您可以还会对下面的文章感兴趣

相关文章：