CSS32020-11-10演讲人目录01.02.选择器文字与字体相关属性04.03.背景与边框相关样式盒相关样式06.05.过渡变形处理0
8.07.布局相关样式动画01选择器选择器伪元素::伪类:D通用兄弟选择器C属性选择器BA选择器[att=val][att^=v
al]属性选择器[att$=val][att=val]att属性包含val[att^=val]att属性开头包含val[att$
=val]att属性结尾val选择器element1+element2element1~element2B通用兄弟选择器Aelem
ent1~element2属于同一个父元素的element1之后的所有同级element2兄弟元素element1+element
2紧挨着element1之后的element2元素结构性伪类选择器选择器伪类:UI元素状态伪类选择器子元素选择器01020304f
irst-childlast-childnth-child(n)nth-last-child(n)第一个子元素最后一个子元素第n个
子元素倒数第n个子元素同类子元素选择器first-of-type2014属于父元素的第一个同类子元素last-of-type201
5属于父元素的最后一个同类子元素nth-of-type(n)2016属于父元素的第n个同类子元素nth-last-of-type(
n)2017属于父元素的倒数第n个同类子元素唯一元素only-child选择器唯一子元素only-of-type属于其父元素唯
一的同类元素其他rootnot50%71%页面根元素排除该元素下的子元素emptytarget62%60%内容为空的元素选取当前活
动的目标元素状态focushover获得光标焦点鼠标悬停linkactive应用于未被访问过的链接元素被激活visited应用于被
访问过的链接表单相关ABC可用状态可读状态表单选取DEF输入有效性表单必填项相关范围有效性表单相关可用状态enableddisab
led表单相关可读状态read-onlyread-write表单相关表单选取checkeddefaultindeterminate
表单相关输入有效性validinvalid表单相关表单必填项相关requiredoptional表单相关范围有效性in-range
out-of-rangeLOGOfirst-line01选择器first-letter02伪元素::before03after04
selection05https://www.wps.cnfirst-line文本第一行文字first-letter文本首字母或第
一个字before元素之前after元素之后selection处于选中状态时文本02文字与字体相关属性文字与字体相关属性text-
shadow文字添加阴影(text-shadow:h-shadowv-shadowblurcolor)word-break
规定非中日韩文本的换行规则normal：使用浏览器默认的换行规则break-all：允许在单词内换行keep-all：只能在半角空
格、连字符或标点符号处换行word-wrap对长单词与URL地址自动换行normal：使用浏览器保持默认处理break-word：
在长单词或URL地址内部进行换行user-select是否可选取文字text：可以选取none：禁止选取all：只能选取全部文字e
lement：可以选取文字，但选择范围受元素边界的约束文字与字体相关属性WebFont使用服务端字体@font-face文字与字
体相关属性font-size-adjust修改字体种类而保持字体尺寸不变(font-size-adjust:aspect)文字与字
体相关属性rem根据页面上的根元素（一般指html元素）的字体大小而计算出实际的字体大小03盒相关样式盒相关样式针对元素的宽度与高
度的计算方法盒阴影D盒内容溢出C盒类型BA030102inline-blockblockinline盒相关样式盒类型060405l
ist-itemrun-incompact0102盒相关样式none表格相关类型盒类型盒类型block块元素，用于显示占用一行的块
盒类型inline行内元素，用于把一个元素放在行的内部盒类型inline-block以block的方式渲染，以inline的方式放
置，具有width与height盒类型list-item将多个元素作为列表来显示，同时在元素的开头加上列表的标记盒类型run-in
如果元素后面有block类型的元素，元素将被包含在后面的block类型的元素内部盒类型compact如果元素后面有block类型的
元素，元素将被放置在block类型的元素左边盒类型none元素不会被显示表格相关类型ABCtableinline-tabletab
le-rowDEFtable-celltable-row-grouptable-header-group表格相关类型table-f
ooter-grouptable-columntable-column-grouptable-caption表格相关类型table
此元素会作为块级表格来显示（类似<table>），表格前后带有换行符表格相关类型inline-table此元素会作为
内联表格来显示，将table元素修改成该类型可以让表格与其他文字处于同一行表格相关类型table-row此元素会作为一个表格行显示
（类似<tr>），代表表格中的一行表格相关类型table-cell此元素会作为一个表格单元格显示（类似<td
>和<th>），代表表格中的列标题/所有行表格相关类型table-row-group此元素会作为一个或多个行
的分组来显示（类似<tbody>），代表表格中的所有行表格相关类型table-header-group此元素会作为一
个或多个行的分组来显示（类似<thead>），代表表格中的表头部分表格相关类型table-footer-group此
元素会作为一个或多个行的分组来显示（类似<tfoot>），代表表格中的脚注部分表格相关类型table-column此
元素会作为一个单元格列显示（类似<col>）代表表格中的一-列表格相关类型table-column-group此元素
会作为一个或多个列的分组来显示（类似<colgroup>），代表表格中的所有列表格相关类型table-caption
此元素会作为一个表格标题显示（类似<caption>），代表整个表格的标题盒相关样式overflowoverflow
-x盒内容溢出text-overflowoverflow-yoverflowvisiblehidden超出容纳范围的文字按原样显示
超出容纳范围的文字将被隐藏起来autoscroll超出容纳范围时根据需要出现水平滚动条或垂直滚动条出现固定的水平滚动条与垂直滚动条
盒内容溢出overflow-x在水平方向上内容超出盒的容纳范围时的显示方法盒内容溢出overflow-y在垂直方向上内容超出盒的容
纳范围时的显示方法text-overflowclipellipsisAB修剪文本显示省略符号来代表被修剪的文本stringC使用给
定的字符串来代表被修剪的文本盒相关样式盒阴影盒添加阴影(box-shadow:h-shadowv-shadowblurs
preadcolorinset)盒添加阴影(box-shadow:h-shadowv-shadowblursprea
dcolorinset)h-shadowv-shadowblurspreadcolorinset盒添加阴影(bo
x-shadow:h-shadowv-shadowblurspreadcolorinset)h-shadow必需，
水平阴影的位置。允许负值盒添加阴影(box-shadow:h-shadowv-shadowblurspreadcolo
rinset)v-shadow必需，垂直阴影的位置。允许负值盒添加阴影(box-shadow:h-shadowv-sh
adowblurspreadcolorinset)blur可选，模糊距离盒添加阴影(box-shadow:h-sh
adowv-shadowblurspreadcolorinset)spread可选，阴影的尺寸盒添加阴影(box-
shadow:h-shadowv-shadowblurspreadcolorinset)color可选，阴影的颜色
盒添加阴影(box-shadow:h-shadowv-shadowblurspreadcolorinset)ins
et可选，将外部阴影(outset)改为内部阴影盒相关样式针对元素的宽度与高度的计算方法box-sizingbox-sizi
ngcontent-box元素的宽度与高度不包括内部补白区域与边框的宽度与高度border-box元素的宽度与高度包括内部补白区域
与边框的宽度与高度padding-box指定的宽度与高度包括内容的宽度与高度和内部补白区域的宽度与高度，不包括边框的宽度与高度04
背景与边框相关样式背景与边框相关样式背景边框0402030501background-clip(属性规定背景的绘制区域)back
ground-origin(规定背景图片的定位区域)背景与边框相关样式背景background-size(规定背景图片的尺寸)
background-repeatbackground-imagebackground-clip(属性规定背景的绘制区域)010
302border-boxcontent-boxpadding-box背景被裁剪到边框盒背景被裁剪到内容框背景被裁剪到内边距框ba
ckground-origin(规定背景图片的定位区域)padding-box背景图像相对于内边距框来定位border-box
背景图像相对于边框盒来定位content-box背景图像相对于内容框来定位background-size(规定背景图片的尺寸
)percentagelength以父元素的百分比来设置背景图像的宽度和高度设置背景图像的高度和宽度containcover把图像
图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域把背景图像扩展至足够大，以使背景图像完全覆盖背景区域background-re
peatrepeatrepeat-xrepeat-y010203no-repeatinheritspace040506backgr
ound-repeatroundbackground-repeatrepeat背景图像将在垂直方向和水平方向重复backgroun
d-repeatrepeat-x背景图像将在水平方向重复background-repeatrepeat-y背景图像将在垂直方向重复
background-repeatno-repeat背景图像将仅显示一次background-repeatinherit规定应该从
父元素继承background-repeat属性的设置background-repeatspace图像会尽可能得重复,但是不
会裁剪background-repeatround随着允许的空间在尺寸上的增长,被重复的图像将会伸展(没有空隙),直到有足够的
空间来添加一个图像线性渐变linear-gradient([<angle>|to<side-or-c
orner>,]?<color-stop>[,<color-stop>]+)side-o
r-corner[left|right]||[top|bottom]color-stop<color>
;[<percentage>|<length>]?background-image放射性渐变r
adial-gradient([circle||<length>][at<position>
]?,|[ellipse||[<length>|<percentage>]{2}][
at<position>]?,|[[circle|ellipse]||<extent-ke
yword>][at<position>]?,|at<position>,<
color-stop>[,<color-stop>]+)背景与边框相关样式边框border-radiu
sborder-image12border-radius圆角边框(border-radius:1-4length|%/1-
4length|%)border-image图片边框向内偏移边框图像区域超出边框的量border-image-sourcebor
der-image-sliceborder-image-widthborder-image-outsetborder-image-
repeat用在边框的图片的路径图片边框的宽度图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretch
ed)05变形处理变形处理3D转换1232D转换transform-origin变形处理2D转换transformtransfor
m元素顺时针旋转给定的角度元素的尺寸会增加或减少，根据给定的宽度（X轴）和高度（Y轴）参数元素翻转给定的角度，根据给定的水平线
（X轴）和垂直线（Y轴）参数元素从其当前位置移动，根据给定的left（x坐标）和top（y坐标）位置参数所有的2D
转换方法组合在一起，需要六个参数，包含数学函数，允许我们：旋转、缩放、移动以及倾斜元素rotate(angle)scale(x,y
)skew(x-angle,y-angle)translate(x,y)matrix(n,n,n,n,n,n)0402030501
transformperspective变形处理3D转换perspective-origintransform-style(规定
如何在3D空间中呈现被嵌套的元素)backface-visibility(定义当元素不面向屏幕时是否可见)transform
rotateX()rotateY()AB元素围绕其X轴以给定的度数进行旋转元素围绕其Y轴以给定的度数进行旋转rotateZ()C元
素围绕其Z轴以给定的度数进行旋转3D转换perspective设置元素被查看位置的视图(perspective:number|n
one)3D转换perspective-origin设置3D元素的基点位置(perspective-origin:x-axi
sy-axis)transform-style(规定如何在3D空间中呈现被嵌套的元素)flat子元素将不保留其3D位
置preserve-3d子元素将保留其3D位置backface-visibility(定义当元素不面向屏幕时是否可见)vi
sible背面可见hidden背面不可见变形处理transform-origin设置旋转元素的基点位置(transform-o
rigin:x-axisy-axisz-axis)，默认是图形中心transform-origin设置旋转元素的基点位置(t
ransform-origin:x-axisy-axisz-axis)，默认是图形中心06过渡过渡元素从一种样式逐渐改变为另
一种的效果(transition属性是一个简写属性，用于设置四个过渡属性transition:propertydurat
iontiming-functiondelay)过渡元素从一种样式逐渐改变为另一种的效果(transition属性是一个
简写属性，用于设置四个过渡属性transition:propertydurationtiming-functiondel
ay)transition-property(规定设置过渡效果的CSS属性的名称)transition-duration(
规定完成过渡效果需要多少秒或毫秒)transition-timing-function(规定速度效果的速度曲线)transi
tion-delay(定义过渡效果何时开始)transition-property(规定设置过渡效果的CSS属性的名称)al
l所有属性都将获得过渡效none没有属性会获得过渡效果property元素从一种样式逐渐改变为另一种的效果(transition属性是一个简写属性，用于设置四个过渡属性transition:propertydurationtiming-functiondelay)transition-duration(规定完成过渡效果需要多少秒或毫秒)元素从一种样式逐渐改变为另一种的效果(transition属性是一个简写属性，用于设置四个过渡属性transition:propertydurationtiming-functiondelay)transition-timing-function(规定速度效果的速度曲线)元素从一种样式逐渐改变为另一种的效果(transition属性是一个简写属性，用于设置四个过渡属性transition:propertydurationtiming-functiondelay)transition-delay(定义过渡效果何时开始)07动画动画08布局相关样式布局相关样式感谢聆听 |
|
