css
来源：互联网 发布：软件著作权申请网址 编辑：程序博客网 时间：2024/06/06 14:21
（E，指的是元素名element；attr，指的是属性名attribute）
结构伪类选择器
- 1
- 2
- 3
- 4
- 5
- 6
1）:first-child
h1:first-child：选择的是h1元素，因为h1元素是div的第1个子元素。
p:first-child：选择不到任何元素，因为p并不是div的第1个子元素，而是div的第2个子元素。
span:first-child:选择不到任何元素，因为span并不是div的第1个子元素，而是div的第3个子元素；
2）:first-of-type
h1: first-of-type:选择的是h1元素，因为h1元素是div中所有h1元素中的第1个h1元素，事实上也只有一个为h1的子元素；
p: first-of-type:选择的是p元素，因为p元素是div中所有p元素中的第1个p元素，事实上也只有一个为p的子元素；
span: first-of-type:选择的是id=”first”的span元素，因为在div元素中有2个span元素，我们选择的是两个之中的第1个。
总结：
“:first-child”是选择父元素下的第1个子元素（不区分元素类型），而“:first-of-type”是选择父元素下某个元素类型的第1个子元素（区分元素类型）。
“:last-child”和“:last-of-type”、“nth-child（n）”和“:nth-of-type（n）”同样也可以这样去理解.
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
:empty选择器用于选择一个不包含任何子元素或内容的元素。也就是选择一个内容为空白的元素。
:target选择器用于选取页面中的某个target元素。那什么是target元素呢？target元素，说白了就是该元素的id被当做页面的超链接来使用。
UI元素状态伪类选择器
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
CSS3文本属性
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
opacity属性
在CSS3中，我们可以使用opacity属性来控制元素的透明度。
语法：
opacity:数值;
说明：
opacity属性取值范围为0.0~1.0，0.0表示完全透明，1.0表示完全不透明（默认值）。
opacity属性取值不可以为负数。
1、线性渐变
线性渐变，指的就是指在一条直线上进行渐变，在网页中大多数渐变效果都是线性渐变。
2、径向渐变
径向渐变，是一种从起点到终点颜色从内到外进行圆形渐变（从中间向外拉，像圆一样）。
线性渐变简介:linear-gradient
在CSS3中，线性渐变指的是一条直线上进行的渐变。在网页中，大多数渐变效果都是线性渐变。
语法：
background:linear-gradient(方向，开始颜色，结束颜色);
说明：
线性渐变的方向取值有2种，一种是使用角度（deg），另外一种是使用关键字：
- 1
径向渐变简介:radial-gradient
CSS3径向渐变，是一种从起点到终点颜色从内到外进行圆形渐变（从中间向外拉，像圆一样）。CSS3径向渐变是圆形或椭圆形渐变，颜色不再沿着一条直线渐变，而是从一个起点向所有方向渐变。
语法：
background:radial-gradient(position ,shape size,start-color,stop-color)
说明：
position：定义圆心位置；
shape size：由2个参数组成，shape定义形状（圆形或椭圆），size定义大小；
start-color：定义开始颜色值；
stop-color：定义结束颜色值；
position、shape size都是可选参数，如果省略，则表示该项参数采用默认值。
start-color和stop-color为必选参数，并且径向渐变可以有多个颜色值。
定义圆心位置position
position用于定义径向渐变的圆心位置，属性值跟background-position属性值相似，也有2种情况：（1）长度值，如px、em或百分比等；（2）关键字。
- 1
定义形状shape
- 1
定义大小size
size主要用于定义径向渐变的结束形状大小。
- 1
CSS3边框属性简介
在CSS3中，针对边框，增加了丰富的修饰效果，使得网页更加美观舒服。下面列出了常用的CSS3边框属性：
在CSS3中，我们可以使用border-radius属性为元素添加圆角效果。
语法：
border-radius:长度值;
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
边框背景图片延伸方
在CSS3中，我们可以使用box-shadow属性轻松地为元素添加阴影效果。
语法：
box-shadow：x-shadow y-shadow blur spread color inset;
说明：
（1）x-shadow：设置水平阴影的位置（X轴），可以使用负值；
（2）y-shadow：设置垂直阴影的位置（y轴），可以使用负值；
（3）blur：设置阴影模糊半径；
（4）spread：扩展半径，设置阴影的尺寸；
（5）color：设置阴影的颜色；
（6）inset：这个参数默认不设置。默认情况下为外阴影，inset表示内阴影。
CSS3背景
css2中关于背景的属性有background-image、background-position
background-size属性
在CSS3之前，背景图片的大小是由图片的实际大小决定的。
在CSS3中，我们可以使用background-size属性来设置背景图片的大小，这使得我们可以在不同的环境中重复使用背景图片。
语法：
background-size:取值;
background-size取值共有2种，一种是使用长度值（如px、百分比）；另外一种是使用关键字。
background-size关键字取值如下表：
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
1、对于背景图片，不是可以使用width和height属性来设置吗？为什么还要增加一个background-size属性呢？
记住，背景图片不同于img标签引用的图片，对于img标签引用的图片，我们可以使用width和height属性来设置，但是这两个属性不能用于设置背景图片的大小。因此，在CSS3中，引入了background-size属性来设置背景图片的大小。这里大家要清楚一点，背景图片的大小跟一般图片的大小设置有本质的区别。
background-origin属性
在CSS3中，我们可以使用background-origin属性来设置元素背景图片平铺的最开始位置。
语法：
background-origin:属性值;
说明：
background-origin属性取值如下：
background-clip属性
在CSS3中，使用background-clip属性来将背景图片根据实际需要进行剪切。
语法：
background-clip:属性值;
说明：
background-clip属性取值如下表：
background-clip属性指定了背景在哪些区域可以显示，但与背景开始绘制的位置（即background-origin属性）无关。背景绘制的位置可以出现在不显示背景的区域。这就相当于背景图片被不显示背景的区域裁剪了一部分一样。
多张背景图片
- 1
- 2
CSS3动画效果共3大部分：
- （1）CSS3变形；
- （2）CSS3过渡；
- （3）CSS3动画；
CSS3变形（transform）
在CSS3中，我们可以使用transform属性来实现文字或图像的的各种变形效果，如位移、缩放、旋转、倾斜等。
translate()移动
在CSS3中，我们可以使用translate()方法将元素沿着水平方向（X轴）和垂直方向（Y轴）移动。
对于位移translate()方法，我们分为3种情况：
（1）translateX(x)：元素仅在水平方向移动（X轴移动）；
（2）translateY(y)：元素仅在垂直方向移动（Y轴移动）；
（3）transklate(x,y)：元素在水平方向和垂直方向同时移动（X轴和Y轴同时移动）；
- 1
translate(x,y)
语法：
tranform:translate(x,y)
说明：
x表示元素在水平方向（x轴）的移动距离，y表示元素在水平方向（y轴）的移动距离。
注意，Y是一个可选参数，如果没有设置Y值，则表示元素仅仅沿着X轴正方形移动。
- 1
scale()缩放
缩放，指的是“缩小”和“放大”。在CSS3中，我们可以使用scale()方法来将元素根据中心原点进行缩放。
跟translate()方法一样，缩放scale()方法也有3种情况：
（1）scaleX(x)：元素仅水平方向缩放（X轴缩放）；
（2）scaleY(y)：元素仅垂直方向缩放（Y轴缩放）；
（3）scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）；
- 1
rotate()旋转
在CSS3中，我们可以使用rotate()方法来将元素相对中心原点进行旋转。这里的旋转是二维的，不涉及三维空间的操作。
transform：rotate(度数);
说明：
度数指的是元素相对中心原点进行旋转的度数，单位为deg。其中，deg是degree（度数）的缩写。
如果度数为正，则表示元素相对原点中心顺时针旋转；如果度数为负，则表示元素相对原点中心进行逆时针旋转。
- 1
skew()倾斜
在CSS3中，我们可以使用skew()方法将元素倾斜显示。
skew()方法跟translate()方法、scale()方法一样，也有3种情况：
（1）skewX(x)：使元素在水平方向倾斜（X轴倾斜）；
（2）skewY(y)：使元素在垂直方向倾斜（Y轴倾斜）；
（3）skew(x,y)：使元素在水平方向和垂直方向同时倾斜（X轴和Y轴同时倾斜）；
- 1
- 2
- （1）skewX()方法会保持高度，沿着X轴倾斜；
- （2）skewY()方法会保持宽度，沿着Y轴倾斜；
- （3）skew(x,y)方法会先按照skewX()方法倾斜，然后按照skewY()方法倾斜；
transform-origin属性
任何一个元素都有一个中心原点，默认情况下，元素的中心原点位于X轴和Y轴的50%处。
默认情况下，CSS3变形进行的位移、缩放、旋转、倾斜都是以元素的中心原点进行变形。
假如我们要使得元素进行位移、缩放、旋转、倾斜这些变形操作的中心原点不是原来元素的中心位置，那该怎么办呢？
在CSS3中，我们可以通过transform-origin属性来改变元素变形时的中心原点位置。
语法：
transform-origin:取值;
说明：
transform-origin属性取值有2种：一种是采用长度值，另外一种是使用关键字。长度值一般使用百分比作为单位，很少使用px、em等作为单位。
不管transform-origin取值为长度值还是关键字，都需要设置水平方向和垂直方向的值。transform-origin属性取值跟背景位置background-position属性取值相似，大家可以回去看看，对比理解一下。
- 1
CSS3过渡transition
我们知道，transform（变形）、transition（过渡）和animation（动画）是CSS3动画的3大部分。
在CSS3中，我们可以使用transition属性来将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另外一个属性值”来实现动画效果（仔细理解这句话）。
CSS transform属性所实现的元素变形，呈现的仅仅是一个“结果”，而CSS transition呈现的是一种过渡“过程”，通俗点说就是一种动画转换过程，如渐显、渐隐、动画快慢等。
语法：
transition:属性 持续时间 过渡方法 延迟时间;
说明：
其实transition属性是一个复合属性，主要包含4个子属性：
（1）transition-property：对元素的哪一个属性进行操作；
（2）transition-duration：过渡的持续时间；
（3）transition-timing-function：过渡使用的方法（函数）；
（4）transition-delay：可选属性，指定过渡开始出现的延迟时间；
- 1
transition-property属性
在CSS3中，我们可以使用transition属性来将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另外一个属性值”来实现过渡效果。
其中，我们可以使用transition-property属性来单独设定过渡动画所要操作的那个属性。
语法：
transition-property：取值;
说明：
transition-property属性的取值是一个“CSS属性名”。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
transition-timing-function属性
在CSS3中，我们可以使用transition属性来将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另外一个属性值”来实现动画效果。
在CSS3中，我们可以使用transition-timing-function属性来定义过渡方式。所谓的“过渡方式”主要用来指定动画在过渡时间内的速率。
语法：
transition-function:取值;
说明：
transition-timing-function属性取值共有5种，具体如下：
transition-timing-function属性取值
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
动画animation
在CSS3中，动画效果使用animation属性来实现。animation属性和transition属性功能是相同的，都是通过改变元素的属性值来实现动画效果。但是这两者又有很大的区别：transition属性只能通过指定属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡来实现动画效果，因此只能实现简单的动画效果。animation属性则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现复杂的动画效果。
想要使用animation属性实现CSS3动画的话，需要2步：
- （1）定义动画；
- （2）调用动画；
在CSS3中，我们使用@keyframes来“定义动画”。关于“调用动画”，我们学习了以下属性：
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
@keyframes简介
从上一节我们知道，使用animation属性定义CSS3动画需要2步：
- （1）定义动画；
- （2）调用动画；
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
animation-name：动画名;
说明：
注意，animation-name 调用的动画名需要和@keyframes规则定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果
animation-iteration-count属性
在CSS3中，我们可以使用animation-iteration-count属性来定义动画的播放次数。
语法：
animation-iteration-count：取值;
说明：
animation-iteration-count属性取值有2种：
- （1）正整数；
- （2）infinite；
animation-iteration-count属性默认值为1。也就是默认情况下，动画从开始到结束只播放一次。“animation-iteration-count:n”表示动画播放n次，n为正整数；
当animation-iteration-count属性取值为infinite时，动画会无限次地循环播放。
animation-direction属性
在CSS3中，我们可以使用animation-direction属性定义动画的播放方向。
语法：
animation-direction:取值;
说明：
animation-direction属性取值如下：
animation-play-state属性
在CSS3中，我们可以使用animation-play-state属性来定义动画的播放状态。
语法：
animation-play-state：取值;
说明：
animation-play-state属性取值只有2个：running和paused。
animation-fill-mode属性
在CSS3中，我们可以使用animation-fill-mode属性定义在动画开始之前和动画结束之后发生的事情。
语法：
animation-fill-mode:取值;
说明：
animation-fill-mode属性取值如下：
CSS3多列布局
column-count列数
在CSS3的多列布局中，我们可以使用column-count属性指定多列布局的列数，而不需要通过列宽度等来调整列数。
语法：
column-count: auto/正整数;
说明：
column-count有2个属性值，一个是auto，另外一个是正整数（如1、2、3）
column-width每一列的宽度
在CSS3的多列布局中，我们可以使用column-width属性定义多列布局中每一列的宽度。
语法：
column-width：auto/长度值;
column-width有2个属性值：1个是auto，另外1个是长度值。
column-gap列间距
在CSS3多列布局中，我们可以使用column-gap属性定义列与列之间的间距（列间距）。
语法：
column-gap：取值;
column-gap有2个属性值：一个是normal，另外一个是长度值。
- 1
- 2
- 3
- 4
- 5
column-rule列之间的边框样式
在CSS3的多列布局中，我们可以使用column-rule属性来定义列与列之间的边框样式，其中边框样式包括：宽度、颜色和样式。
语法：
column-rule：边框宽度 边框样式 边框颜色;
说明：
column-rule属性类是一个复合属性，由3个子属性组成：
（1）column-rule-width：设置边框的宽度；
（2）column-rule-style：设置边框的样式；
（3）column-rule-color：设置边框的颜色；
- 1
- 2
- 3
column-span跨列
column-span：取值;
说明：
column-span属性取值如下：
弹性盒子模型
在CSS3中，使用弹性盒子模型可以轻松实现自适应布局以及响应式布局。
注意，在你使用弹性盒子模型之前，你必须先把父元素display属性设置为box或inline-box后，该元素才具有弹性盒子模型。
box-orient盒子的布局方向
在CSS3弹性盒子模型中，我们可以使用box-orient属性定义弹性盒子内部中“子元素”的排列方向。也就是盒子内部的子元素是横着排，还是竖着走。
语法：
box-orient：取值;
box-orient属性取值如下：
- 1
- 2
box-direction盒子的布局顺序
在CSS3弹性盒子模型中，我们可以使用box-direction属性来设置弹性盒子内部中“子元素”的排列顺序。
语法：
box-direction：取值;
box-direction属性取值如下：
- 1
- 2
- 3
box-ordinal-group盒子的布局位置
从上一节，我们知道box-direction属性可以设置弹性盒子内部“子元素”的排列顺序。在CSS3弹性盒子模型中，我们还可以使用box-ordinal-group属性来设置每个“子元素”在弹性盒子中的“准确”显示位置。
语法：
box-ordinal-group:整数;
box-ordinal-group属性取值是一个自然数，从1开始，用来设置子元素的位置序号。子元素的分布将根据这个属性值从小到大进行排列。在默认情况下，子元素将根据元素的位置进行排列。
注意，对于没有指定box-ordinal-group属性值的子元素，则该子元素的序号默认都为1。并且序号相同的子元素将按照它们在HTML文档中加载的顺序进行排列。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
box-flex属性
在CSS3弹性盒子模型中，我们可以使用box-flex属性来定义弹性盒子内部的子元素是否具有弹性空间。如果子元素具有弹性空间，当弹性盒子（父元素）的尺寸放大或缩小的时候，具有弹性空间的子元素的尺寸也会放大或缩小。每当弹性盒子有额外的空间时，具有弹性空间的子元素也会扩大自身大小来填补这一空间。
语法：
box-flex:取值;
说明：
box-flex属性取值是一个整数或者小数，不可为负数，默认值为0。
当盒子中包含多个定义了box-flex属性的子元素时，浏览器将会把这些子元素的box-flex属性值相加，然后根据它们各自的值占总值的比列来分配盒子剩余的空间。
注意，box-flex属性只有在弹性盒子确定了宽度或高度才有效。也就是说必须要先为父元素定义width或者height属性值。
使用弹性空间设置，使得弹性盒子内部元素的总宽度和总高度，始终等于弹性盒子的宽度与高度。不过只有当弹性盒子具有确定的宽度或高度时，子元素的弹性空间才生效。
box-pack水平对齐
box-pack属性可以在水平方向上对盒子的富余空间进行管理。
语法：
box-pack:取值;
说明：
box-pack属性取值如下：
box-align垂直对齐
box-align属性可以在垂直方向上对盒子的富余空间进行管理。
语法：
box-align:取值;
box-align属性取值如下：
- CSS
- css
- css
- css
- css
- CSS
- CSS
- css
- css
- CSS
- css
- css
- CSS
- css
- CSS
- css
- CSS
- css
- 通过函数名的字符串来调用这个函数
- javascript之异常捕获
- 多线程之并发与并行概念总结
- 读
- [C]求出满足下列条件的四位数：该数是个完全平方数，且第一、三位数字之和为10，第二、四位数字之积为12
- css
- 【MD5】MD5校验文件的正确性
- spring.profiles.active 针对多种启动环境的spring配置
- hdu1505(最大子矩阵)
- TensorFlow学习笔记02：TensorFlow基本简介
- python 进程的理解
- Switch用String做参数
- Reflection2017.12.4
- A Plug for UNIX POJ
