[TOC]

CSS核心样式

文字属性font

文本粗细

作用：设置文字粗细程度

属性名：font-weight => font属性中的单一属性

属性值：特定单词或者数字

特定单词	对应数值	注明
normal	400	默认值
bold	700	加粗字符
bolder	>700	加更加粗
lighter	<400	变细字符

注意：取数字为属性值时，数字范围为 100~900 之间整百数字

字体风格

作用：设置文字是否为斜体

属性名：font-style =>font属性中的单一属性

属性值：特定单词

属性值	说明
normal	默认设置，正规字体
italic	将所有英文字体倾斜显示
oblique	将所有字体倾斜显示

垂直居中

作用：设置XXX高的垂直居中文字

属性名：line-height => font属性中的单一属性

属性值： 数字+特定单位 =>设置元素高度

属性值	说明
数字+px	设置XX像素高
数字+%	设置相对于本身字号像素比高度

备注实际使用时，建议使用 Photoshop、Fireworks 软件测量

综合属性

上述几个属性都是独立于font属性

若用font属性综合，请注意写法顺序

一般顺序为：风格（加粗+斜体）> 字号 > 行高 > 字体

写法1：

只有字号字体：

font: 14px "consolas","arial","SimSun","Microsoft Yahei";

写法2：

有字号、行高、字体时：

字号和行高两种属性属性值一样，所以说就要字号先，行高后用/分割书写

font: 14px/28px "consolas","arial","SimSun","Microsoft Yahei";

写法3：

风格（加粗和斜体）、字号、行高、字体时

font: bold italic 14px/28px "consolas","arial","SimSun","Microsoft Yahei";

文本属性

水平对齐

作用：设置文本水平方向对齐

属性名：text-align

属性值：特定英文单词

属性值	作用
left	默认值，居左对齐
right	居右对齐
center	居中对齐

文本修饰

作用：设置文本整体是否有线条修饰效果

属性名：text-decoration

属性值：特定英文单词

属性值	说明
none	默认值，不设置装饰
overline	设置上划线
line-through	设置中划线(删除线)
underline	设置下划线

备注：a标签默认值为underline

首行缩进

作用：设置段首缩进

属性名：text-indent

属性值：数字+特定单位

属性值	说明
数字+px	首行缩进XX像素
数字+em	首行坐进XX个中文字符
数字+%	缩进父辈标签width属性值百分比

备注：最常用的特定单位为em

​ 属性值有正负 = > 正代表右缩进，负代表左缩进

盒模型常用五大属性

盒模型有五大属性：width、height、padding、border、margin

​ => 宽度 、高度 、内边距 、边框 、外边距(外间距)

概念图

开发者工具中盒模型图

书写元素内容：width+height

盒子实体化区域：width+height+padding+border

盒子实际占为：width+height+padding+border+margin

宽度

作用：设置元素区域内宽度

属性名：width

属性值：数字+特定单位

属性名	说明
auto(不填数字)	默认值，浏览器实际决定
数字+px	像素定义宽度
数字+%	相对于父元素宽度百分比

备注：不同的元素浏览器会根据其 特点自动计算出实际宽度，例如div元素等独占一行的，其 width属性的值会自动撑满父元素宽度，如 果是span元素等不需要独占一行的，其 width 属性的值是内部元素内容自动撑开的宽度

高度

作用：设置元素区域内高度

属性名：height

属性值：数字+特定单位

属性名	说明
auto(不填数字)	默认值，浏览器实际决定
数字+px	像素定义高度
数字+%	相对于父元素高度百分比

备注：默认设置时，浏览器会自动计算出实际高度，也就是是内部元素内容自动撑开的高度。元素的高度自适应内部内容的高度。

内边距

作用：设置元素边框到内容之间间距(包括上下左右四个方向)

属性名：padding

属性值：数字+px

特点：可以去加载背景，不能书写嵌套内容

使用注意事项：

/*  单写时，表示 上下左右 间距都是这样  */
div {
	padding: 1px;
}
/*  两个时，分别表示 上下、左右 两部分间距  */
div {
    padding: 5px 10px;
}
/*  三个时，分别表示 上、左右、下 三部分  */
div{
    padding: 5px 12px 9px;
}
/*  四个时，分别表示 上、右、下、左  四部分间距  */
div {
    padding: 5px 6px 8px 10px;
}

特殊使用 ==> 单一属性使用

​ padding四个方向可以拆分成四个单一属性

div {
	padding-top: 5px;
    padding-right: 7px;
    padding-bottom: 11px;
    padding-left: 13px;
}

边框

作用：设置元素边界区域

属性名：border

属性值：由三个方面组成 => 线条宽度、形状、颜色(三个属性值不同，所以说没有书写顺序)

div {
	border: 1px solid #f00;
    /*  宽度 形状 颜色  */
}

特殊使用 ==> 将属性值拆分成三个单一属性

​ 分别为：border-width、border-style、border-color

​ border-width

​ 作用：设置边框线条宽度

​ 属性值：数字+px

​ 写法：可以参考padding特殊写法

​ border-style

​ 作用：设置边框线条形状

​ 属性值：特定单词

属性值	说明
none	无边框
solid	实线边框
dashed	虚线边框，虚线间距与border-width有关
dotted	点状边框，两点间距与border-width有关
double	双线边框，双线距离与border-width有关
groove	3D凹槽边框，显示效果与border-color有关
ridge	3D垄状边框，显示效果与border-color有关
inset	3D内容凹陷效果
outset	3D内容凸出效果

​ border-color

​ 作用：设置边框颜色

​ 属性值：颜色型号或者颜色名，参考颜色写法

div {
	/*  线条宽度  */
    border-width: 1px;
    border-width: 1px 2px;
    border-width: 1px 5px 2px;
	border-width: 1px 2px 3px 4px;
    /*  线条形状  */
	border-style: solid;
    /*  线条颜色  */
	border-color: #f00;
}

外边距

作用：设置盒子与其他容器间距

属性名：margin

属性值：数字+px

特点：不能背景渲染

特殊使用 ==> 单一属性使用

​ 与内边框像是，根据四个方向设定四个不同单一属性

div {
	margin-top: 20px;
	margin-right: 30px;
	margin-bottom: 40px;
	margin-left: 50px;
}

写法类似padding

盒模型综合使用

清除默认样式

• 大部分标签都有默认样式，会对布局造成影响，一般建议清除默认样式

• 盒模型都有默认外边距、内边距，同样大部分容器标签都有外边框、内边框

• ul和ol两种列表都有前缀：清除list-style属性。

• a标签会有 下划线、点击前后颜色 默认样式，清除color、text-decoration

• font-weight清除默认加粗样式

  body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,td,th {
  	margin:0;
  	padding:0;
  }
  /*  建议使用通配符  */
  * {
  	margin: 0;
  	padding: 0;
  }
  
  a {
  	color: #666;
  	text-decoration: none;
  }
  
  h1,h2,h3,h4,h5,h6,b,strong {
  	font-weight: normal;
  }
  

  /*  也可以给 body 设置样式，让后代标签继承  */
  body {
      color: #666;
      font-size: 14px;
      font-faminy: "Arial","consolas","Microsoft Yahei";
  }
  

高度应用

• 在不设置高度时，高度会随着内容自动扩展

• 在设置高度后，盒子就只有那么高，不会随着内容变化

  • 设置高度后，后续元素都会紧挨着上个盒子高度加载

  • 若盒内内容高度高过盒本身高度，显示情况由overflow决定

  overflow属性

  作用：在设置高度的盒子内，元素内容高出元素时，对多出部分进行处理

  属性值：

  属性值	说明
  visible	默认值，显示溢出部分
  hidden	隐藏溢出部分
  scroll	出现滚动条，但不改变盒子宽度高度（无论有无溢出都会出现滚动条）
  auto	自动模式，没有溢出用visible，溢出时用scroll

居中

文本垂直居中

文本行高line-height等于盒子高度

文本水平居中

文本属性text-align: center

元素水平居中

设置左右方向外边距auto

元素垂直居中

父元素高度自适应，子元素设置上下外边距

父子盒模型

一个父元素可以包含若干个子元素，若若干(>1)个子元素同排展示，必须满足以下条件，不然会换行展示甚至会溢出父元素

父元素width≥所有子元素[width+左右(padding+border+margin)]

错误示范

正确示范

特殊

• 父元素设置宽度子元素会自动继承父元素宽度
• 若子元素水平方向设置了margin、padding、border时，子元素的宽度会自动收缩

外边框(margin)塌陷

现象一：在垂直方向两元素相遇，两元素垂直方向距离为两元素中最大的外边距

​ 另一个则会塌陷在最大外边距 => 对应外边距为零

大 外边距

小 外边距塌陷

现象二：当子元素设置上边距margin-top，父元素没设置时，父元素会跟子元素一起掉落

父元素没设置外边距

虽然只有子元素设定上边距，但子元素影响父元素

解决方案：

​ 1、在同一竖直方向两元素，只用给一个元素设置边距即可

​ 2、父子元素中，建议父元素用padding-top方法来隔开与子元素的上下距离

注意！水平方向不存在塌陷现象

标准文档流

原理：元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式

​ ==> html就是一种标准文档流文件

​ ==> html标准文档流有两特点：微观现象和元素等级

微观现象

1、空白折叠

2、文字类元素在同一行会出现高低不齐但底边对齐效果

3、元素写满时一行时会自动换行

元素等级

html元素有等级区分，习惯以加载级别将元素划分成：块级元素、行内元素、行内块元素

​ 块级元素

​ 特点： 1、块级元素可以设置宽高，在浏览器中正常加载。

​ 2、块级元素必须独占一行，不能与其他标签并行

​ 3、不设置宽度时，会自动填满父级width区域；高度不设置时，内容会自动调整高度

​ 行内元素

​ 特点： 1、行内元素不能正常加载宽高

​ 2、行内元素可以与其他的行内或者行内块元素并行显示

​ 3、行内元素宽高只能被内容自动撑开

​ 行内块元素

​ 特点： 1、可以设定宽高

​ 2、行内块元素可以与其他行内或行内块元素并排一行显示。

​ 3、在不设置宽高时，元素宽高随内容多少自动调整

​ 4、具有微观现象，如空白折叠

总结：

​ 块状元素 ==> 大部分都是容器标签(包括p标签)，如：div、h1

​ 行内元素 ==> 大部分为文本标签，如span、a、b

​ 行内块元素 ==> img、input

显示模式

作用：改变元素加载顺序

属性名：display

属性值：

属性值	作用
block	以块状元素模式加载(块状元素默认)
inline	以行内元素模式加载(行内元素默认)
inline-block	以行内块元素模式加载(行内块元素默认)
none	隐藏标签以及其内容

脱离标准流

为了实现部分布局效果，还要脱离标准流布局，如：浮动、绝对定位、固定定位。

​ 浮动属性

​ 属性名：float

​ 属性值：

属性值	说明
left	向左浮动
right	向右浮动

​ 作用：让元素脱离标准流，改变同行元素排列显示顺序

​ 浮动的元素脱离了标准流的限制，具备行块属性，浮动元素可以设置宽高，可以并排，而且不会有空白折叠现象

​ 如果元素不设置宽高，可以被元素内容自动撑开

​ 如果父元素宽度不够，子元素会换行

​

​ 注意：子元素2低于1、3时，不会出现转空现象

​ 浮动元素不会出现margin塌陷

​ 应用：

​ 一、上述平均分布表格效果

​ 二、导航栏效果

​ 三、③常见的电商或企业网站布局。

​ 特殊用法：

​ 同级元素时，前者设定左浮动后者不设置，就会出现特殊样式

​ 在该样式内，若在蓝色盒子内写文字，文字会自动避开粉色盒子，形成字围现象

​ 浮动产生问题

​ 1、浮动元素不会自动撑高父元素高度

​ 2、父元素没有高度，会影响后面元素的标准流位置

​ 清除浮动问题

​ 1、给存有浮动元素的父元素设置高度

​ 2、给父元素添加clear属性=>clear: both;

​ 3、外墙法：在两个父元素之间，添加一个空的 div 标签，标签上带有 clear

​ 4、内墙法：在父元素内部，所有的浮动子元素后面添加一个空的 div 元素，标签高度为 0，添加 clear 属性

​ 5、伪类：通过选中标签添加伪类:after=>标签内部最后位置

.clearfix:after {
	content: "1";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

​ 6、给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden; ，解决浮动问题

CSS伪类选择器

类	伪类
必须给标签设定对应的class属性才能被选中，被选中后立即加载到浏览器上	不需要给标签添加属性，但必须搭配其他选择器使用
权重与伪类相同	权重与类相同

写法： 普通选择器+伪类名 .clll:after{…………}

a标签伪类处理

a:link {
	color: gray;	/* 点击前的颜色 */
}
a:visited {
    color: cyan;	/* 点击后的颜色 */
}
a:hover {
    color: red;		/* 鼠标移到标签后变化颜色 */
}
a:active {
    color: yellow;	/* 鼠标点击时变化的颜色 */
}

背景属性

背景颜色

作用：在盒子区域内添加背景颜色

属性名：background-color

作用范围：border及其内部

属性值：颜色值、特定颜色单词

背景图片

作用：在盒子区域内添加背景图片

属性名：background-image

作用范围：默认的加载到边框及以内部分，默认从开始左上角加载

属性值：url("图片路径")

注意：绝对路径只能是网页地址路径，本地文件只能是相对路径

背景重复

作用：设置图片背景是否重复加载(只作用与图片)

属性名：background-repeat

属性值：

属性值	作用
repeat	默认值，重复，重复加载图片直至填满盒子背景
no-repeat	不重复，只加载一次图片
repeat--x	水平重复但垂直方向不重复
repeat--y	垂直重复但水平方向不重复

背景定位

作用：主要设置不重复图片背景加载开始位置

属性名：background-position

属性值：特殊单词、数字＋像素或百分比 =>一般都是两个值，分别表示水平、垂直方向位置

​ 特殊单词：表示对齐方向

​ 水平方向：left、center、right

​ 垂直方向：top、center、bottom

​ 像素

​ 第一个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点水平方向位移的距离

​ 第二个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点垂直方向位移的距离。

​ 数值为正时，向右、下移动；为负时，向上、左移动

​ 百分比

​ 水平方向，等价于盒子的border以内背景区域宽度减去图片宽度

​ 垂直方向，等价于盒子的border以内背景区域高度减去图片高度

背景附着

作用：设置背景图片是否跟随页面盒子/页面滚动而滚动

属性名：background-attachment

属性值：

属性值	说明
scroll	滚动，表示背景图片与盒子保持相对位置，会随着页面移动而移动
fixed	固定，当盒子在显示器窗口时，不会随着页面翻动而翻动

综合写法

由于上述背景单一属性属性值独一没重叠，所以说可以不分顺序写(但是背景定位两个值不能分开！！)

div {
	background: url("图片路径") no-repeat center top fixed #fff;
}

注意：

• 若属性值没有写全，未写部分按默认值加载
• 若层叠综合属性中某单一属性，建议使用单一属性去写

背景应用

• 替换插入图片，防止用户点击图片加载的时图片地址
• padding区域加载背景图片
• 精灵图技术
  • css精灵是一种处理网页背景图片的方式
  • 原理：将所有背景图集中在一张大图，然后大图作用于网页
  • 工作原理：将网页中小尺寸背景图制作成一张背景透明的 png 图片，再利用背景定位技术将小图片加载到对应标签上
  • 注意：
    • 精灵图都是小的装饰性质背景图片，插入图片不能往上放
    • 宽度取决于最宽背景图片的标签宽度
    • 可以横向\纵向摆放，但每个图片之间必须留够足够的空白， 保证背景图片加载到一个标签内部时，不能出现多余内容

背景半透明（css3）

颜色值增加了rgba模式

rgba分别为：红，绿，蓝，不透明度

其中不透明度范围在0~1之间

背景缩放(css3)

作用：设置背景图片尺寸

属性名：background-size

属性值：数字+px/% 特定单词

属性值	说明
数字+px	单值表示按照垂直方向等比例缩放；双值表示分别按比例在垂直、水平方向缩放比例
数字+%	同上
cover	自动调整缩放比例，让背景图完全覆盖背景区域，若有溢出则隐藏溢出部分
contain	自动调整缩放比例，把图像缩放到最大尺寸，保证图片始终完整显示

多背景(css3)

规定一个盒子内可以添加多个背景图片

书写时要以逗号,隔开url路径

注意：背景加载时，先写的背景压盖，后写的背景图片

定位属性

作用：设置元素在页面位置

属性名：position

属性值：特定英文单词

属性值	说明
relative	相对定位
absolute	绝对定位
fixed	固定定位

偏移量

定位的元素要想发生位置的移动，必须搭配偏移量属性进行设置

• 水平方向：left、right
• 垂直方向：top、bottom

属性值：数字+px/%

相对定位

作用：相对于标签加载原始位置移动

属性值：relative

.div1 {
    position: relative;
	left: 100px;
	top: 100px;
    /* 数值正负与属性方向正反对应 */
}

性质：相对定位的元素不脱离标签的原始状态（标准流、浮动），不会让出原来占有位置

绝对定位

作用：参考距离最近的有定位的祖先元素(若都没有就参考body)进行定位

属性值：absolute

.div1 {
    position: absolute;
	left: 100px;
	top: 100px;
    /* 数值正负与属性方向正反对应 */
}

性质：绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，可以随时定义位置，不设置宽高时会被内容撑开。

注意：绝对定位参考元素不固定，有可能导致偏移方向和偏移量不同

固定定位

作用：参考浏览器四个点位进行偏移定位

属性值：fixed

.backtop {
    /* 定位 */
	position: fixed;
	width: 100px;
	height: 50px;
	right: 50px;
	bottom: 50px;
    /***********/
background‐color: #ccc;
font: bold 20px/50px "Arial";
text‐align: center;
color: #333;
text‐decoration: none;
}

压盖效果

所有定位类可以实现压盖

黑色区域压盖其他背景

压盖顺序：

设置属性z-index改变压盖顺序=> 数字大的压盖小的，同级后者压盖前者

​ z-index属性必须在有定位的元素生效，否则不会生效

HTML 5

H5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML） 的第五次重大修改，取代HTML4与XHTML的新一代标准版本。

新变化

• XHTML
  • XHTML是一种增强了的HTML，它的可扩展 性和灵活性将适应未来网络应用更多的需求
• H5新特性
  • 方便移动设备使用(尤其是多媒体)
  • 语义特性、本地存储特性、设备兼容特性、连接特性、网页多媒体特性、三维图形及特效特性，性能与集成特性，CSS3 特性
  • 废除一些元素及属性：font、center等。

优劣

优势：

• 提高可用性和改进用户的友好体验
• 更好的语义化标签
• 可以给站点带来更多的多媒体元素(视频和音 频)
• 可以很好的替代FLASH和Silverlight
• 当涉及到网站的抓取和索引的时候，对于 SEO很友好
• 将被大量应用于移动应用程序和游戏
• 可移植性好

劣势：

• IE9以下浏览器不兼容
• 不能让所有浏览器全面支持

新增语义化标签

标签名	说明
header	头部标签
nav	导航标签
main	主题标签
article	独立的内容标签
section	区段标签
aside	侧边栏标签
footer	尾部标签

作用：便于搜索引擎能快速搜索到网页

注意：这些语义化标签可以重复使用

​ IE9中，要把元素转换为块级元素

​ 移动端更偏好语义化标签

新增多媒体标签

音频

<!--常规写法-->
<audio src="音频路径" controls="controls"></audio>

<!--兼容写法-->
<audio controls="controls">
	<source src="happy.mp3" type="audio/mpeg">
    <source src="happy.ogg" type="audio/ogg">
    您的浏览器暂不支持audio标签
</audio>

格式	MIME-type	IE9	Firefox3.5	Opera10.5	Chrome3.0	Safari3.0
mp3	audio/mpeg		√	√	√
ogg	audio/ogg	√			√	√
Wav	audio/wav		√	√		√

常见属性：

属性名	属性值	描述
autoplay	autoplay	出现该属性，则在音频就绪后直接播放
controls	controls	出现时，向用户显示控件
loop	loop	出现时，音频循环播放
preload	preload	音频就绪后不自动播放，若出现autoplay则忽略自身
src	url	目标音频路径

注意：src属性内绝对路径只能是网站路径，本地文件只能写相对路径

视频

<!--常规写法-->
<video src="音频路径" controls="controls"></video>

<!--兼容写法-->
<video controls="controls">
	<source src="move.mp4" type="video/mp4">
    <source src="move.ogg" type="video/ogg">
    您的浏览器暂不支持audio标签
</video>

格式	MIME-type	IE	Firefox	Opera	Chrome	Safari
ogg	video/ogg	X	3.5+	10.5+	5.0+	X
mp4	video/mp4	9.0+	X	X	5.0+	3.0+
webm	video/webm	X	4.0+	10.6+	6.0+	X

常见属性

属性名	属性值	描述
autoplay	autoplay	加载后自动播放
controls	controls	显示播放控件
loop	loop	循环播放
preload	auto(自动播放) none(不会自动播放)	加载后是否自动播放，若出现autoplay则忽略自身
src	url	目标视频路径
width	数字+px	设置播放器宽度
height	数字+px	设置播放器高度
poster	imgurl	加载等待的画面图片
muted	muted	静音播放

注意：视频/等待时出现的图片的绝对路径为网站路径，本地文件为相对路径

新增表单标签

input新增属性值

type的属性值	描述
email	输入内容必须是 email类型
url	输入内容必须是 路径类型
date	输入类型必须是 日期类型
time	输入类型必须是 时间类型
month	输入类型必须是 月份类型
week	输入类型必须是 周 类型
number	输入类型必须是 数字类型
range	滑动条
tel	手机号码
search	搜索框
color	颜色选择表

input辅助标签=>datalist

作用：为input提供列表式可选项

使用方法：input中必须用list属性绑定datalist的id属性

写法：

<input type="text" list="t1">
  <datalist id="t1">
      <option value="1">一</option>
      <option value="2">二</option>
      <option value="3">三</option>
      <option value="4">
      <option value="5">
      <option value="6">
  </datalist>

新增表单属性

属性名	属性值	描述
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单，一般页 面中放1个
autocomplete	on/off	当用户在字段开始键入时，浏览器基于之前键入过的值，应 该显示出在字段中填写的选项 默认已经打开，如 autocomplete=”on “ 关闭 autocomplete =”off” -需要放在表单内同时加上name属性 -同时成功提交
multiple	multple	多选文件提交

CSS 3

新增选择器

子集选择器

作用：选定特定父元素中的子元素集

书写：父元素在前，中间为>，子元素居尾

/*  父元素 > 子元素  */
div > h1 {
	color:red;
}

兄弟选择器

作用：选定同级中部分标签

书写：

选择器	说明
E1+E2	匹配同级中E1后面第一个E2元素
E1~E2	匹配同级中E1后面所有的E2元素

相邻兄弟选择器(E1 + E2)

h1 + h2 {
	text-align: center;
    background-color: slateblue;
}

其他兄弟选择器(E1 ~ E2)

h1 ~ h2 {
	text-align: center;
    background-color: slateblue;
}

结构伪类选择器

结构伪类选择

选择对象	说明
E1 E2:first-child	匹配父元素中的第一个子元素E2
E1 E2:last-child	匹配父元素中最后一个子元素E2
E1 E2:nth-child(n)	匹配父元素中第n个子元素E2
E1 E2:first-of-type	指定元素E的第一个
E1 E2:last-of-type	指定元素E的最后一个
E1 E2:nth-of-type(n)	指定元素E的第n个

n的用途

1、单纯用作数字

2、特殊单词，如：even(偶数)、odd(奇数)

3、用公式表示某种顺序关系

公式	作用范围
2n	偶数
2n+1	奇数
5n	5的倍数 => 5，10，15……
n+5	从第五个开始依次往后排：5，6，7……
-n+5	从第五个开始依次向前排：5，4，3，2，1，0……

nth-child(n)和nth-of-type(n)区别

E：nth-child(n) 必须同时满足 父元素内顺数第n个元素、这个元素必须为E元素

E:nth-of-type(n)满足父元素内第n个E元素

<style>
    div p:nth-child(3){
        color: brown;
    }
    div p:nth-child(5){
      background-color: blue;
    }
    div h2:nth-of-type(1){
      border: chocolate 1px solid;
    }
    
  </style>
  <div>
    <p>123</p>
    <p>456</p>
    <p>789</p>
    <h2>abc</h2>
    <pre>def</pre>
    <h2>ghi</h2>
  </div>

伪元素选择器

新增伪元素

选择器	说明
E::before	在E元素内最前面插入一个元素
E::after	在E元素内最后面插入一个元素
E::first-letter	选择到E容器内的第一个字母
E::first-line	选择到E容器内的第一行
E::sekection	被鼠标选中的字段

<style>
     
    div::before{
      content: "before";
      color: red;
    }
    div::after{
      content: "after";
      color: goldenrod;
    }
    p::first-letter{
      font-weight:bold ;
      font-size: 3em;
    }
    p::selection{
      background-color: maroon;
    }
  </style>
  <div>
    <p>123</p>
    <p>456</p>
    <p>789</p>
    <p>abc</p>
    <p>def</p>
    <p>ghi</p>
  </div>

注意：单冒号双冒号的伪元素都能浏览器被识别，但建议用h5双冒号标准写

​ 冒号与元素之间不能有空格

​ 伪元素内部必须写属性content:""

​ 创建的伪元素属于行内元素

​ 开发者工具内看不见创建的伪元素

属性选择器

属性选择器可以用于选择指定属性的标签

选择器	说明
E[att]	选择具有 att 属性的E元素
E[att="val"]	选择具有 att 属性且属性值为 val 的E元素
E[att^="val"]	选择具有 att 属性且属性值为 val开头 的E元素
E[att$="val"]	选择具有 att 属性且属性值为 val结尾 的E元素
E[att*="val"]	选择具有 att 属性且属性值为 含有val 的E元素

CSS3盒模型

box-sizing属性

属性值	说明
content-box	默认值，标准盒子模型，盒模型是外扩的 width 与 height 只包括内容的宽和高 在 width 和 height 之外绘制元素的内边距、边框、外边距
border-box	怪异模式，盒模型是内减的 width 和 height 属性包括内容，内边距和边框，但不包括外边距 为元素指定的任何内边距和边框都将在已设定的 width 和 height 内进行绘制

/* content-box  => 标准模式 */
div{
     width: 100px;
     height: 100px;
     border: 10px solid red;
     padding: 10px;
     margin: 10px;
     box-sizing: content-box;
     white-space: nowrap;
   }

高度/宽度 = 内容

/* border-box  => 怪异模式 */
div{
     width: 100px;
     height: 100px;
     border: 10px solid red;
     padding: 10px;
     margin: 10px;
     box-sizing: border-box;
     white-space: nowrap;
   }

宽度/高度 = 内容+内边距+边框

CSS3新增属性

边框圆角

作用：设置边框的圆角

属性名：border-radius

属性值：数字+px/%

写法：

写法	说明
x+px/%	说明水平垂直方向半径相同
X px/% / Y px/%	/为分割线，前者为水平弧度，后者为垂直弧度，得到椭圆

div{
	border-radius:10px; 				/* 四个角半径一样 */
    border-radius:10px 20px; 			/* 左上和右下 右上和左下 */
    border-radius:10px 20px 30px;		/* 左上 右上和左下 右下 */
    border-radius:10px 20px 30px 40px;	/* 左上 右上 左下 右上 */
}

/ 属性值写法

border-radius: 20% 30% 15%/ 30% 40%;

注意：Internet Explorer 8 及以下版本浏览器不支持border-radius属性，其他浏览器都支持

文字阴影

作用：设置文本阴影

属性名：text-shadow

属性值：数字+px 颜色值/颜色词

属性值	简介
h-shadow	第一个值，必填，设置水平阴影，可为负
v-shadow	第二个值，必填，设置垂直阴影，可为负
blur	第三个值，设置模糊距离，可不填
color	设置阴影颜色，可不填

​ 备注：h-shadow为正时方向向右，负时向左

​ v-shadow为正时方向向下，负时向上

/*  单层阴影效果  */
h1 {
	text-shadow: 3px 4px 4px red;
}

/*  多层阴影效果  */
h1 {
    text-shadow: 3px 4px 4px red,
                 6px 6px 3px green,
                 9px 9px 3px blue;
}

盒子阴影

作用：对盒子边框添加阴影效果

属性名：box-shadow

属性值：数字+px 颜色值/颜色名

属性值	说明
h-shadow	第一个值，必填，设置水平阴影位置，可为负
v-shadow	第二个值，必填，设置垂直阴影位置，可为负
blur	第三个值，设置模糊距离，可不填
spread	第四个值，第三个值存在时可设置，设置阴影尺寸，可不填
color	设置阴影颜色，可不填
inset	将外阴影改为内阴影，可不填

备注： h-shadow为正时方向向右，负时向左

​ v-shadow为正时方向向下，负时向上

/*  单层阴影效果  */
img {
    border: 10px solid skyblue;
    box-shadow: 3px 4px 4px black;
}

/*  多层阴影效果  */
img {
    border: 10px solid skyblue;
    box-shadow: 3px 4px 4px blue,
                -3px -4px 4px rgb(28, 114, 143),
                6px 8px 10px black;
   }

过度属性

作用：在不借助Flash动画或JS情况下，通过样式实现补间动画(过渡效果)展现下一个元素

属性名：transition

书写格式：

transition: 过度属性 过渡时间 运动曲线 延时时间;

单属性写法：

属性名	描述
transition	综合属性，用于综合下列四个属性
transition-property	规定应用过的的css属性名
transition-duration	规定过渡效果花费时长，默认为0
transition-timing-function	规定过渡效果时间曲线，默认为“ease”
transition-delay	规定延时执行，默认为0

transition-property属性值

属性值	说明
none	无属性过度
all	表示所有变化的属性过度
属性名，如width,height	具体变化属性名，多个属性名用逗号隔开

transition-duration和transition-delay属性值

都是以 s(秒) 做单位，包括零秒

transition-timing-function属性值

属性值	说明
linear	匀速过度到结束
ease	初始慢，后变快，再慢速结束
ease-in	规定慢速开始过渡效果
ease-out	规定慢速结束过渡效果
ease-in-out	规定慢速开始和结束过度效果
cubic-bezier(x1,y1,x2,y2)	在cubic-bezier函数中定义自己的值 x1、x2、y1、y2取值0~1

​ cubic-bezier曲线解释

上述P1点为(x1,y1)，P2点为(x2,y2)，两个点分别控制了开始，结束时间段速度

​ cubic-bezier对应属性

单词	对应值
ease	cubic-bezier(0.25,0.1,0.25,0.1)
linear	cubic-bezier(0,0,1,1)
ease-in	cubic-bezier(0.42,0,1,1)
ease-out	cubic-bezier(0,0,0.58,1)
ease-in-out	cubic-bezier(0.42,0,0.58,1)

浏览器兼容

浏览器	适配
IE10	transition
Firefox	-moz-transition 、 transition
Chrome	-webkit-transition 、 transition
Opera	-o-transition 、 transition
Safari	-webkit-transition 、 transition

2D转换

作用：实现元素移动、缩放，旋转、拉伸等效果

属性名：transform（3D也适用）

属性值：如下

位移

作用：对元素进行移动、缩放、旋转、拉长或拉伸

属性名：translate

属性值：

属性值	说明
translate(x,y)	xy分别时向水平垂直方向移动，可以用 px 或 % 单位，有正负区分
translate(x)	表示水平方向移动，单位同上

缩放

作用：实现元素缩放

属性名：scale()

属性值：

属性值	说明
scale(x,y)	xy分别改变元素宽度高度
scale(n)	宽度高度同时缩放
scaleX(n)	改变元素宽度
scaleY(n)	改变元素高度

旋转

作用：对元素进行旋转

属性名：rotate()

属性值：rotate(数字+deg)

备注：正数时顺时针选择，负数时逆时针旋转

倾斜

作用：设置元素倾斜度

属性名：skew()

属性值：skew(x,y)

备注：单位都是**deg**，xy分别表示水平垂直，正负分别表示右/下和左/上

原点迁移

作用：改变元素原点位置

属性名：transform-origin

属性值：数字+px/% 或者 特定单词

属性值	说明
第一个值	定位x轴的原点，取值：left、center、right、数字+px/%
第二个值	定位y轴的原点，取值：top、center、right、数字+px/%

3D转换

作用：实现3D立体转换效果

属性名：transform（也适用于2D）

透视属性

作用：设置在z轴视线焦点

属性名：perspective

属性值：数字+px

注意：这个属性要设置在父元素上

3D旋转

作用：对2D旋转进行3D化补充

属性值	说明
rotateX(n deg)	沿X轴转动
rotateY(n deg)	沿Y轴转动
rotateZ(n deg)	沿Z轴转动

注意：X轴Y轴旋转时必须同透视属性使用，不然会变成缩小样式

​ 可以为负，方向相反

3D位移

作用：对2D位移进行3D化补充

属性值	说明
translateX(x px)	设置X轴位移量
translateY(y px)	设置Y轴位移量
translateZ(z px)	设置Z轴位移量

注意：可以为负，方向相反

transform-style

作用：设置被嵌套的子元素在父元素的 3D 空间中显示

属性名：transform-style

属性值：

属性值	说明
flat	所有子元素在2D平面呈现
preserve-3D	保留在3D空间

浏览器兼容

浏览器	适配
IE9	-ms-transition
IE10	transition
Firefox	-moz-transition 、 transition
Chrome	-webkit-transition 、 transition
Opera	-o-transition 、 transition
Safari	-webkit-transition 、 transition

动画效果

@keyframes规则

作用：设定动画样式并对自定义的动画命名

写法：

/*  写法一：from + to
	from  =>  开始
	to    =>  结束
*/
@keyframes action1 {
    from {
        transform: translateX(0);
    }
    to {
      transform: translateX(100px);
    }
}

/*  写法二：  数字+%
	表示进程到 n% 时执行XXX
*/
@keyframes action2 {
      0% {
        transform: translateX(0);
      }
      25% {
        transform: translateX(100px);
      }
      50% {
        transform: translateX(0);
      }
      75% {
        transform: translateX(-100px);
      }
      100% {
        transform: translateX(0);
      }

注意浏览器兼容！！

浏览器	适配
IE9	完全不兼容，但IE10以上都支持
Firefox	@-moz-keyframes 、 @keyframes
Chrome	@-webkit-keyframes、@keyframes
Safari	@-webkit-keyframes
Opera	@-0-keyframes

animation属性

作用：绑定动画并且实现动画效果

写法：

div {
    animation: action1 5s linear infinite 0s;
    /*		动画名	运行时间 速度曲线 动画次数 延时时间
    */
}

单一属性列表：

属性名	描述
animation-name	绑定动画名称
animation-duration	规定完成周期时间，默认0s，单位 s 或者 ms
animation-timing-function	规定动画的速度曲线，默认“ease”
animation-delay	规定延时时间，默认0s，单位 s或者ms
animation-iteration-count	动画播放次数，默认1，infinite表示无限循环

同样注意浏览器兼容！！

浏览器	适配
IE9	完全不兼容，但IE10以上都支持
Firefox	-moz-animation、 animation
Chrome	-webkit-animation、animation
Safari	-webkit-animation
Opera	-0-animation

笔记整理者： 拉钩教育大前端就业1期