CSS3

为网页添加样式、美化网页

固定格式

<head>
  <style  type="text/css">
    css-selecor {
      css-property: value;
    }
    p {
      color: #ff0000;
    }
  </style>
</head>

style标签必须置于head标签中
type属性可不写，默认值为 type="text/css"
冒号不可省略，分号大多数时不可省略，按不可省略使用

选择器

标签选择器

根据指定标签名称，在当前界面选择所有对应标签渲染

p {
  ...
}

id选择器和类选择器

id选择器

根据指定 id 名称找到对应标签，进行渲染；

id名前面必须使用#

企业开发中，仅仅为了设置样式的话，将不会使用id，因为id是留给 js 使用的

#id {
  ...
}

类选择器

根据指定的类名，将含有该类名的所有标签，进行渲染

*类选择器指定类名前，一定要加.

.class-name {
  ...
}

后代选择器

**注意：**标签或类名之间的空格，每一个选择器中后者为前者的后代

div .cls-name p img{
  ...
}

子元素选择器

ul>li {
  ...
}

查找到所有ul的子元素li，定义样式

交集选择器

给所有选择器选中的相交部分定义样式

p.class-name {
  ...
}

选择器p和选择器.class-name中间无任何符号，组成一个交集选择器

不常用

并集选择器

选择列举的所有选择器

选择器之间为逗号,

p, .class-name {
  color: pink;
}

兄弟选择器

相邻兄弟选择器

给指定选择器后面紧跟的那个选择器选中的标签设置属性

h1 + p {
  color: red;
}

注意标签之间的加号+

通用兄弟选择器

给指定选择器后面的所有兄弟选择器，设置样式

h1 ~ p {
  color: pink;
}

序选择器

同级别序

序选择器	作用
`:first-child`	选中同级别的第一个
`:last-child`	选中同级别的最后一个
`:nth-child(n)`	整数n，选中同级别的第n个
`:nth-last-child(n)`	整数n，选中同级别的倒数第n个
`:only-child`	选中同级别的唯一的元素
`:nth-child(odd)`	`odd`奇数，选中同级别中所有的奇数位标签；偶数为`even`
`:nth-child(xn+y)`	`x,y`都可以自定义。`odd`为`2n+1`，`even`为`2n+0`

属性选择器

属性选择器	CSS写法	含义
`[attribute]`	`p[id]`	根据指定属性名称`id`找到对应标签含有属性`id`的标签`p`
`[attribute=value]`	`p[class=app]`	根据指定属性名称`class`且，`class`值为`app`的所有对应`p`标签
`[attribute^=value]`	`a[alt=^https]`	属性以特定值开头,重点掌握后一个
`[attribute$=value]`	`a[src$=.pdf]`	属性以特定值结尾
*`[attribute=value]`**	`a[alt*=some]`	属性值是否包含特定值

通配符选择器

* { ... }

伪元素选择器

给指定标签内容前面添加一个子元素，或者给指定标签后面添加一个字的元素

格式

标签名称::before {
  ...
}
标签名称::after {
  ...
}

content属性

属性值为指定标签内填充的内容

a标签伪类选择器

默认状态

未被访问时的状态，通过下面选择器进行样式修改

a:link {
  ...
}

点击时状态

修改标签被点击时的状态

a:active {
  
}

访问后状态

修改放过后的标签样式

a:visited {
  ...
}

鼠标悬停时的样式

鼠标悬停时的样式

a:hover {
  ...
}

注意点

a标签伪类选择器可单独出现，也可同时出现
同时出现，按照link, visited, hover, active顺序编写样式
a标签伪类选择器最好写在标签选择器后

CSS三大特性

继承性

不是所有属性都能继承，只有以color, font-, text-,line开头的属性才能继承
后代标签都可以继承可继承属性
特殊要点：
1. <a>标签的文字颜色和文字下划线样式不能继承
2. <h*>标签的文字大小不能继承
继承性用于：
1. 设置网页共性属性

层叠性

多个选择器选择了同样的属性进行设置时，属性根据优先级规则进行响应的层叠覆盖。

优先级

继承自选择器时，按照就近原则
选择器优先级

id>类>标签>通配符>继承>浏览器默认

!important

提升某个直接选中的标签值至最高级优先级

只能提升直接指定的属性优先级，不会对其他属性造成影响，无继承效果
!important必须写在属性值后，分号之前

权重

通过权重的计算规则，确定选择器的优先级

规则：

id多的选择器，优先级高
类名多的选择器，优先级高
标签名称多的，优先级高
以上规则都无法判断时，采用就近原则
注：只有选择器直接选中标签，才对权重进行计算

CSS 属性

font

文字样式

font-style

p {
  font-style: normal; /* 正常默认显示字体 */
  ...
  font-style: italic; /* 倾斜字体 */
}

文字粗细

font-weight

p {
  font-weight`: lighter; /* 细线，默认值 */
  font-weight`: bold; /* 加粗字体 */
  ...
  font-weight`: bolder; /* 比加粗更粗字体 */
  ...
  font-weight: 700px;	/* 数字去值100~900之间，取整百 */
}

文字大小

font-size

p {
  font-size: 24px;
}

文字字体

font-family

p {
  font-family: '楷体';	/*中文名字体，用引号引起来*/
  font-family: '不存在字体, 备用字体1, 备用字体2 ...';	/*字体不存在，则网页设置都好后的备用字体 */
  /* 英文字体不能处理中文，但是，中文字体可以处理英文 */
}

常见字体：

中文
1. 宋体
2. 黑体
3. 微软雅黑
英文
1. "Times New Roman"
2. Arial

文字属性简写

font

格式为：font: style weight size family;

可省略可交换位置属性值：style,weight

**size和family**既不能省略也不能交换位置，且此二属性必须写在所有属性的最后

p {
  font: italic bold 24px "楷体 黑体";
}

text

文本装饰

p {
  text-decoration: underline;	/* 文字下划线 */
}

text-decoration属性值取值有：

属性值	作用
underline	下划线
line-through	删除线
overline	上划线
none	不设置文本装饰样式

文本水平对齐

text-align

p {
  text-align: left; /* center, right */
}

文本缩进

p {
  text-indent: 2em;	/* 文本缩进两个文字的宽度 */
}

颜色属性

修改文字颜色

color

p {
  color: red;
}

颜色属性的取值

英文

颜色关键字，用英语标识

RGB

p {
  color: rgb(x, y, z); /* x， y，z为整数值*/
  color: rgb(255, 0, 0); /* red */
  color: rgb(0, 255, 0); /* green */
  color: rgb(0, 0, 255); /* blue */
}

三原色：red, green, blue，最小值为0，最大值为255。

RGBA (CSS3)

p {
  color: rgba(255, 0, 0, 0.5); /* 半透明，红色 */  
}

"A": 透明度，取值0～1；

十六进制

p {
  color: #FF0000; /* red */
}

本质上也是RGB，但是是通过每两位十六进制数代表一种原色；

CSS显示模式

块级元素和行内元素的区别

块级元素独占一行，行内元素不会
块级元素不设置宽度会默认和父元素一样宽高
行内元素不能设置宽高
行内块级元素：
1. 既不独占一行
2. 又可设置长高
3. img元素就是行内块级元素

显示模式转换

元素显示模式之间可任意转换

inline

selector {
  display: inline;
}

设置选择器指定元素为行内元素

block

selector {
  display: block;
}

设置选择器指定元素为块级元素

Inline-block

selector {
  display: inline-block;
}

设置选择器指定元素为行内块级元素

背景

background-color

专门设置标签的背景颜色

background-image:url();

专门用于设置背景图片

背景图片的资源地址必须写在url圆括号内
默认水平、垂直方向平铺图片

background-repeat

设置垂直、水平属性

默认为repeat，设置no-repeat作用为不设置平铺，repeat-x,repeat-y分别在水平和垂直方向设置为平铺

background-position

同时设置背景颜色和背景图片时，背景图片部分会优先显示

控制背景图片的位置

取值为：

方位名词
1. 水平方向
  1. left
  2. center
  3. right
2. 垂直方向
  1. top
  2. center
  3. bottom
3. 默认为：background-position: left top;
数值（可接受负值）

第一个参数为水平方向，第二个参数为垂直方向：

background-position: 100px 100px;

一定要写单位

background-attachment

默认取值设置为:scroll

取值为fixed时，背景图片会在页面上固定在指定位置

background

背景所有属性合一简写

参数顺序为：

背景颜色
背景图片
平铺方式
关联方式
定位方式

注：以上任何参数都可以被省略

背景相关

background-size

取值有：

具体像素
1. 第一参数为背景宽度
2. 第二参数为背景高度
百分比
1. 第一参数为背景高度的百分比
2. 第一参数为背景宽度的百分比
宽高等比拉伸
1. 固定值用具体像素
2. 自动拉伸的使用auto
3. background-size: auto 100px;：宽度等比拉伸
cover
1. 背景等比拉伸
2. 拉伸至宽高全部填满整个元素
contain
1. 等比拉伸
2. 拉伸至宽度货或高度其一填满元素

背景定位区域

background-origin:背景图片从什么区域开始显示，默认从padding区域开始显示，还有border，content等属性取值。

背景绘制区域

指定从哪个区域开始绘制背景，默认从border-box边框区域开始

还有padding-box和content-box等取值。

多重背景区域

多张背景图片之间使用逗号,隔开

先添加的图片会盖住后添加的背景图片
建议在编写多重背景图片时按属性分开编写

边框

border

同时设置四条边

border: 边框宽度边框样式边框颜色
分别设置四条边
1. border-top:边框宽度边框样式边框颜色
2. border-bottom:边框宽度边框样式边框颜色
3. border-left:边框宽度边框样式边框颜色
4. border-right:边框宽度边框样式边框颜色

border-width

border-width: 上右下左

边框宽度，记得带上长度单位

border-style

border-style: 上右下左

边框样式，有solid, dashed,dotted等

border-color

border-color: 上右下左

边框样式

内边距

边框和内容之间的距离

padding

内边距连写

padding: 上右下左

注意：内边距改变对容器长宽有影响；内边有背景颜色

非连写

padding-top
padding-right
padding-bottom
padding-left

margin

外边距连写

margin: 上右下左

外边距部分是没有背景颜色的

非连写

margin-top
margin-right
margin-bottom
margin-left

外边距合并（塌陷）现象

当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

注：水平方向上不会发生外边距合并

盒子模型

比喻，HTML中所有标签都是盒子

盒子模型的宽度和高度

内容的宽高

通过标签的width/height属性设置的宽度和高度

元素宽高

$$ 宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框 $$

$$ 高度 = 上边框 + 上内边距 + height + 下内边距 + 下边框 $$

元素空间宽高

$$ 宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距 $$

$$ 高度 = 上外边距 + 上边框 + 上内边距 + height + 下内边距 + 下边框 + 下外边距 $$

box-sizing

对元素宽高进行特殊设置

取值：

默认取值box-sizing:content-box; $$ 元素宽高 = 边框 + 内边距 + 内容宽高 $$
box-sizing:border-box; $$ 元素宽高 = width属性 $$ 无论如何改变padding,border宽度，都不会对元素宽高产生影响，该取值会自动计算内容和padding,border之间的取值，让元素宽高始终等于width属性。

嵌套盒子

设置内部盒子外边距时，会让外部盒子跟随内部盒子外边距设置情况产生被顶下来的效果。
如果外部盒子不想被设置外边距，可设置边框属性进行固定，也可设置 overflow: hidden;属性，避免盒子被一起顶下来。
开发中，嵌套盒子之间的关系，优先使用padding，其次使用margin，margin本质上是控制兄弟元素之间的关系
内部盒子设置属性：margin:0 auto;。让内部盒子在水平方向距中。

`margin:0 auto;`和`text-align: center;`

margin:0 auto;盒子自身水平居中
text-align: center;盒子中的文字、图片等内容距中

清空默认边距

使用通配符清空

* {
	margin: 0;
	padding: 0;
}

开发推荐用法

YUI-reset css

normalize.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {
  margin:0;
  padding:0
}

line-height

文字在行高中默认垂直居中

所以将行高设置同盒子高度一样，让该行文字、图片内容在盒子中垂直居中
如果盒子中有多行文字时，应该使用padding属性，让文字内容正确在盒子内部垂直居中

vertical-align

设置元素垂直对齐方式

注意点

text-align设置给父元素对子行内元素进行对齐
vertical-align设置给需要对齐的行内元素本身
img默认和文字基线对齐（文字中最短字符的底部）
中线并不是正中间的线，而是文字底部往上四分之一位置的线

边框圆角

`border-radius`

将直角边框变为圆角边框,按指定的值绘制边框

正方形变圆形：border-radius: 50%;

格式

border-radius: 左上右上右下左下;

注意点

省略某个角的值后，会参考对角的值
只设定一个值时，其他角都以此角为参考
边框圆角值>外边框宽度时，外边框和内边框都会变成圆角
边框圆角值<=外边框宽度时，外边框是圆角，内边框是直角

边框图片

网页布局方式

标准流

网页默认排版方式
浮动流
定位流

浮动流

float

和父元素的左边(取值left)对齐货右边(取值right)对齐
没有居中对齐
不可以使用margin:0 auto;
浮动流不区分块级元素、行内元素和行内块级元素
1. 都可以水平排版
2. 都可以设置宽高

浮动元素脱标

元素浮动后脱离标准流，如果后面的元素处于标准流，两者将会产生重叠

浮动元素排序规则

相同方向上，先浮动的元素会显示在前面
左浮动找左浮动，有浮动找有浮动
浮动元素浮动之后的位置，由元素浮动之前在标准流中的位置确定

浮动元素高度问题

标准流中内容高度撑起盒子高度
浮动元素不能撑起父元素盒子高度

清除浮动的方式

给前面父元素设置高度

不常用

clear属性

添加clear属性及其对应取值，清除浮动

clear属性取值有：

none：默认取值，按浮动元素排序规则
left：当前元素不找前面浮动的左浮动元素
right：当前元素不找前面浮动的右浮动元素
both：当前元素不找前面浮动（左和右）的浮动元素
inherit：继承自父元素

**添加clear**属性的元素，margin属性会失效

外墙法

在两个盒子之间添加一个块级元素，如div

注意：上面的盒子不能正常显示margin-bottom属性，下面的盒子不能正常显示margin-top属性，所以俩盒子之间的间隙通过在添加的会计元素中使用

div.wall {
  clear: both;	/* 外墙要清除双向的浮动 */
}

内墙法

在第一个盒子所有元素之后添加一个会计元素，设置 clear: both; 清除双向的浮动

内墙法可以撑起第盒子高度，对margin属性不再有显示bug

伪元素选择器清除浮动

.div1::after {
  content: "";
  visibility: hidden;
  display: block;
  height: 0;	
  clear: both;	/* 清除浮动关键语句 */
  *zoom: 1;			/* 兼容`IE6` */
}

overflow：hidden;清除浮动

第一个元素设置overflow：hidden;属性，可清除浮动。

推荐使用

定位流

相对定位

相对以前在标准流中的位置，进行相对定位，且不会脱离标准流

会占用标准流位置，区分行内、块级和行内块级元素
设置margin和padding会影响到标准流中的布局

应用场景

微调元素
配合绝对定位使用

绝对定位

相对于body进行定位

使用属性position: absolute;开启元素绝对定位

绝对定位的参考点

默认所有元素按照body为参考点进行定位
绝对定位的祖先元素是定位流（除静态定位以外），那么会按照祖先元素为参考点进行绝对定位
祖先元素有多个定位流，按照就近原则确定参考点

注意点

绝对定位元素是脱离标准流的
不区分行内、块级和行内块级元素
以body为参考点，实际上是按照网页首屏作为参考点，而不是整个网页
绝对定位元素，会忽略祖先元素的padding属性

子绝父相

必备口诀，确定元素位置的最佳方式

绝对定位元素水平居中

设置绝对定位left: 50%;
设置元素margin-left: -元素宽度的一半;，注意负号

居中

水平居中：

selector {
  left: 50%;
  transform: translateX(-50%);
}

垂直居中

selector {
  top: 50%;
  transform: translateZ(-50%);
}

固定定位

设置position: fixed;；

注意点

不区分行内、块级和行内块级元素

静态定位

默认即为静态定位

z-index

用于定位流控制元素间的覆盖关系。所有元素默认z-index: 0;。

默认情况下，定位流会覆盖标准流
默认情况下，后面的定位流元素会覆盖前面的定位流元素
z-index属性值，较大者覆盖覆盖较小者

弹性布局

基本概念

设置display: flex;的元素为弹性容器。

flex-direction

修改修改主轴方向

取值有：

row：主轴起点终点从左至右，默认取值
row-reverse：修改主轴起点终点为从右至左
column：主轴起点在弹性容器的最顶部，终点在最底部，主轴竖直时侧轴水平
column-reverse：主轴起点在弹性容器的最底部，终点在最顶部

justify-content

主轴上弹性元素的对齐方式

取值有：

flex-start：默认值，和主轴起点对齐
flex-end：和主轴终点对齐
center：和主轴中点对齐
space-between：弹性元素从主轴起点开始填充，元素之间距离等分分布
space-around：弹性元素左右之间平富余空间

**注意：**先按照主轴方向进行排版，再按照主轴对齐方式对齐，才是最终的显示效果

align-items

在弹性容器中设置弹性元素在侧轴上的对齐方式

取值有：

flex-start：默认值，和侧轴起点对齐
flex-end：和侧轴终点对齐
center：和侧轴中点对齐
baseline：和侧轴基线对齐
stretch：拉伸对齐，所有弹性元素高度变为侧轴高度，同时注意弹性元素就不再允许设置高度

align-self

在指定弹性元素中设置该元素在侧轴上的对齐方式

flex-start：默认值，和侧轴起点对齐
flex-end：和侧轴终点对齐
center：和侧轴中点对齐
baseline：和侧轴基线对齐
stretch：拉伸对齐，所有弹性元素高度变为侧轴高度，同时注意弹性元素就不再允许设置高度

弹性布局换行和换行对齐

默认情况下，弹性容器一行放不下所有弹性元素，会等比压缩所有弹性元素而不换行

flex-wrap

控制是否能换行

默认取值：不换行，no-wrap

取值：

wrap：放不下，换行
wrap-reverse：放不下就换行，以行为单位进行反转
no-wrap：不换行，默认值

align-content

设置弹性元素换行之后的侧轴对齐方式

取值：

flex-start：换行之后和侧轴的起点对齐，一行接一行
flex-end：换行之后和侧轴的终点对齐，将所有换行之后的内容当作一个整体进行处理
center：换行之后和侧轴的中点对齐
space-between：换行之后在侧轴两端对齐
space-around：换行之后在侧轴环绕对齐
stretch：以行为单位进行拉伸，拉伸的部分填充以空白，保证拉伸后所有行会填满侧轴

弹性元素排序

order：决定排序的先后顺序，默认都为0，修改属性值进行排序，会按照值的从小到大进行排序

弹性元素扩充

flex-grow：默认值为0，即不需要扩充。所有元素宽度总和小于容器宽度时可用。取值代表需要扩充的份数，将容器宽度减去元素宽度总和的剩余空间后按总份数及元素份数占比进行分配。

弹性元素缩小

flex-shrink：所有元素宽度总和大于容器宽度时，设置元素缩小效果。按照竖直进行等比缩小，取值为0时元素不缩小。

注意点

flex-grow: 0;设置当时弹性元素不会被扩充
flex-shrink: 0;设置当前元素不会被缩小
是主轴方向上的属性值进行扩充和缩小

弹性元素宽度设置

flex-basis：设置弹性元素的宽度

flex-basis属性优先级高于width，如果其中有一个设置为auto另外一个设置为具体数值，那么优先使用具体数值。

弹性元素`flex`连写

在弹性元素中采用flex连写方式设置弹性布局属性

flex: 扩充缩小宽度;

过渡和2D、3D

过渡属性基本使用

过渡三要素

必须有属性发生变化
必须监听发生变化的属性，使用transition-property属性，多个变化属性，用逗号分隔
必须指定过渡变化的时长，使用transition-duraiton属性

`transition-delay`

延迟指定时间后，开始过渡动画

`transition-timing-function`

控制过渡动画的运动形式和速度

transition

过渡模块简写属性

div {
  transition: 过渡属性 过渡时长 运动速度 延迟时间,...
}

**过渡属性：取值all**指定所有属性

多个属性添加过渡动画，使用逗号分隔,
满足过渡三要素即可出发过渡动画

弹性效果

2D转换

使用transform属性，设置2D转换特性

rotate

div {
  transform: rotate(45deg); /* 角度单位 deg */
}

上述样式指定元素逆时针旋转45度

实际上是修改了元素的坐标系，综合运用时需注意坐标系发生了改变。

translate

2D平面上指定元素进行移动

第一个参数：水平方向平移
第二个参数：垂直方向平移

scale

取值为1，比例即为1，小于1会缩小，大于1为放大

第一参数：水平方向拉伸
第二参数：垂直方向拉伸

只写一个参数时，水平和垂直方向拉伸比例一样

形变中心点

以自身中心点作为参考，进行旋转

通过使用transform-origin对形变中心点进行修改。

默认值为：transform-origin: 50% 50%;。

div {
  transform-origin: 100px 100px;
}

第一个参数为水平方向
第二参数为垂直方向

旋转轴向

div {
  transform: rotateZ(45deg);
}

rotateZ围绕Z轴进行旋转，也是默认旋转轴向
rotateX围绕X轴进行旋转
rotateY围绕Y轴进行旋转

透视属性

透视，取值单位为像素

添加至需要产生透视效果的元素的祖先元素上
取值越小透视越明显，取值越大，透视越不明显

3D

2D只是平面，没有厚度；3D元素有厚度。元素默认是2D；

元素展示为3D属性

transform-style: preserver-3d;

注意：是在其父元素上添加该属性

渐变

线性渐变

默认情况从下至上渐变
to right可修改为从左至右渐变

selector {
  background: linear-gradient(to right, #f00, #0f0);
}

45deg可修改渐变方向为向右上方向
至少要指定两种渐变颜色
默认系统自动分配纯色和渐变色范围，可通过background: linear-gradient(to right, #f00 100px, #0f0);中设置100px红色的纯色范围，后续再添加数值都是在指定渐变范围

-webkit-background-clip

私有属性，将背景裁剪为指定范围，text指定为文字形状，将文字颜色指定为透明之后，将镂空为背景色

径向渐变

selector{
  background: radial-gradient(100px at top left, #f00, #0f0);
}

默认从中心向外扩散
at top left指定开始渐变的中心在top left
100px指定扩散范围为100px，注意：数值必须写在at关键字之前

阴影

盒子阴影

box-shadown: 水平偏移垂直偏移模糊度阴影扩展阴影颜色内外阴影;

注意点

默认为外阴影
快速添加阴影:box-shadown: 水平偏移垂直偏移模糊度，阴影默认颜色同盒子内容颜色一样

文字阴影

text-shadown: 水平偏移垂直偏移模糊度阴影颜色;

默认可省略阴影颜色,默认阴影颜色同内容颜色

动画

动画不需要事件进行触发，过渡需要

动画三要素

animation-name

动画名称

创建自定义名称的动画

@keyframes animation-name {
  from {
    ...
  }
  to {
    ...
  }
}

animation-duration

动画持续时间

animation-iteration-count

动画重复运行次数

infinite：无限次运行

animation-timing-function

取值有linear, ease, ease-in, ease-in-out等。

animation-direction

动画是否需要往返

取值normal时动画运行至尾部后直接返回头部开始动画

取值alternate时动画运行至尾部后开始作返回运动回至头部

animation-play-state

控制动画运行和暂停两种状态

`animation-play-state:running;`

动画运行

#####animation-play-state:paused;

动画暂停

animation-fill-mode

等待状态和结束状态样式设置

取值：

none：不做任何改变
backwards：动画等待状态时设置为动画第一帧的样式
forwards：动画结束状态保持为最后一帧的样式
both：就是动画等待状态时设置为动画第一帧的样式，动画结束状态保持为最后一帧的样式；为backwards和forwards两者样式叠加状态。

动画连写

animation: 动画名称持续时间 timing-function 延迟时间 iteration-count direction fill-mode;

简写

animation: 动画名称持续时间

注意点

动画中和默认样式同名的样式，该样式将会覆盖默认样式；
动画中固定不变的值写在前面，变化的值写在后面；

媒体查询

根据不同的浏览器宽度调整元素的样式，不适合复杂网页

媒体类型

媒体类型（Media types）描述设备的一般类别。除非使用 not 或 only 逻辑操作符，媒体类型是可选的，并且会（隐式地）应用 all 类型。

all

适用于所有设备。
print

适用于在打印预览模式下在屏幕上查看的分页材料和文档。（有关特定于这些格式的格式问题的信息，请参阅分页媒体。）
screen

主要用于屏幕。
speech

主要用于语音合成器。

媒体特性（略）

逻辑操作符

逻辑操作符（logical operators） not, and, 和 only 可用于联合构造复杂的媒体查询，您还可以通过用逗号分隔多个媒体查询，将它们组合为一个规则。

`and`

and 操作符用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。

`not`

not运算符用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。如果使用not运算符，则还必须指定媒体类型。

**注意：**在Level 3中，not关键字不能用于否定单个媒体功能表达式，而只能用于否定整个媒体查询。

`only`

only运算符仅在整个查询匹配时才用于应用样式，并且对于防止较早的浏览器应用所选样式很有用。当不使用only时，旧版本的浏览器会将screen and (max-width: 500px)简单地解释为screen，忽略查询的其余部分，并将其样式应用于所有屏幕。如果使用only运算符，则还必须指定媒体类型。

`,` (逗号)

逗号用于将多个媒体查询合并为一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为true，则整个media语句均返回true。换句话说，列表的行为类似于逻辑或or运算符。

格式

内联格式

@media 条件{
  ...
}

如果条件满足，则执行大括号中的样式。

许多媒体功能都是范围功能，这意味着可以在它们前面加上“最小”或“最大”来表示“最小条件”或“最大条件”约束。例如，仅当您的浏览器的viewport宽度等于或小于12450px时，此CSS才会应用样式：

@media (max-width: 12450px) { ... }

外链格式(推荐)

<link rel="stylesheet" href="path/to/css/file.css" media="条件">

注意点

书写顺序

PC端>平板>移动端

指定宽度不定

根据需求进行选择，可按以下推荐：

大于等于1200px归为PC端，小于1200px同时大于等于768px归为平板端，小于768px时归为移动端

PC端页面不设置条件

只需通过后写的平板和移动端端的代码对相同内容进行覆盖即可修改样式的同时，降低代码冗余。

CSS技巧

大图片在父元素中居中定位

定位流
margin: 0 -100%;
1. 适用于图片宽度大于父元素宽度时
2. 同时，父元素需要设置属性text-align: center;

补充属性

拉伸图片或视频

object-fit: cover;：拉伸图片或视频使其完全覆盖设置的宽度和高度

`:first-of-type`	选中同级别且同类型的第一个标签
`:last-of-type`	选中同级别且同类型的最后一个标签
`:nth-of-type(n)`	整数n，选中同级别且同类型的第n个标签
`:nth-last-of-type(n)`	整数n，选中同级别且同类型的倒数第n个标签
`:only-of-type`	选中父元素中唯一类型的指定标签
`:nth-of-type(odd)`	`odd`奇数，选中同类型中所有的奇数位标签；偶数为`even`
`:nth-of-type(xn+y)`	`x,y`都可以自定义。`odd`为`2n+1`，`even`为`2n+0`

Files

CSS3.md

Latest commit

History

CSS3.md

File metadata and controls

CSS3

固定格式

选择器

标签选择器

id选择器和类选择器

id选择器

类选择器

后代选择器

子元素选择器

交集选择器

并集选择器

兄弟选择器

相邻兄弟选择器

通用兄弟选择器

序选择器

同级别序

同类型序

属性选择器

通配符选择器

伪元素选择器

格式

content属性

a标签伪类选择器

默认状态

点击时状态

访问后状态

鼠标悬停时的样式

注意点

CSS三大特性

继承性

层叠性

优先级

!important

权重

CSS 属性

font

文字样式

文字粗细

文字大小

文字字体

文字属性简写

text

文本装饰

文本水平对齐

文本缩进

颜色属性

color

颜色属性的取值

英文

RGB

RGBA (CSS3)

十六进制

CSS显示模式

块级元素和行内元素的区别

显示模式转换

inline

block

Inline-block

背景

background-color

background-image:url();

background-repeat

background-position

background-attachment

background

背景相关

background-size

背景定位区域

背景绘制区域

多重背景区域

边框

border

border-width

border-style

`margin:0 auto;`和`text-align: center;`

`border-radius`