基础选择器#

由单个选择器组成

分为：标签选择器、类选择器、id选择器和通配符选择器

标签选择器#

用html标签名称作为选择器，为该类标签统一指定样式

无需符号作开头

类选择器 .class#

差异化选择标签，可以单独选择一个或几个标签

先给要添加样式的标签添加一个统一的类名，再进行选择

类名中可以有短横-跟下划线_，选择时以.做开头

可以给一个标签指定多个类名，这些类名都可以选出这个标签

id选择器 #id#

以#做开头，不能有重复id

id选择器一般用于页面唯一性元素，常与js搭配使用

通配符选择器 *#

以*定义，选取页面内所有元素

在特殊情况下使用

复合选择器（见后面）#

复合选择器是对基本选择器进行组合形成的

字体系列 font-family#

用font-family属性定义字体系列

可以定义多个字体，要以逗号分割

字体名可以不加引号。果有字体名包含空格，要加引号分隔开

默认使用第一个字体，如果不支持则使用下一个字体，应尽量使用系统默认自带的字体

可以把字体统一添加到body标签

字体大小 font-size#

用font-size属性定义字体系列

注意加上单位px（像素）

谷歌浏览器默认16px，但不同浏览器不同，应尽量给明确值

可以给body标签统一字体大小

标题标签比较特殊，需要单独指定文字大小

字体粗细 font-weight#

用font-weight属性定义字体粗细

属性值有：normal / bold / bolder / lighter / 数字

实际开发提倡数字表示加粗和变细，400为正常

可以将其放在名为bold的class里，代替b标签

文字样式 font-style#

用font-style属性定义文字样式

平时一般不加斜体，反而是给斜体标签改为不倾斜

字体复合属性 font#

使用font属性设置复合属性

按照指定格式统一设置文字样式，可以节约代码

line-height是行距，单位px，图示的斜杠也要加

顺序不能更换，各属性以空格隔开

不需要的属性可以省略取默认值，但必须保留size和family

文本颜色 color#

color属性定义文本颜色

对齐文本 text-align#

text-align属性设置水平对齐方式

注意，给图片加居中对齐，加在图片标签内不会有效果，要给图片的父标签加居中对齐

装饰文本 text-decoration#

用text-decoration设置，给文本添加下划线、上划线、删除线等

由于超链接a自带下划线，可以以此去掉a自带的下划线

文本缩进 text-indent#

用text-indent指定文本第一行的缩进，通常修饰段落

设置的缩进单位是px或em，甚至可以是负值

em是相对于当前元素1个文字的大小，如果当前元素没有设置大小则会按照父元素设置

行距 text-height#

用text-height设置行间距

在这里修改的主要是上下间距

如果文字大小等于行距，则相当于只有文本高度

内部样式表（嵌入式）#

将css代码写到html页面内部，单独放到一个style标签内

该标签可以放在任何地方，但一般放在head内

结构和样式未完全分离，称为嵌入式引入

行内样式表（行内式、内联样式表）#

在元素标签的style属性设置css样式，适合简单修改

外部样式表（链接式）#

样式单独写到CSS文件中，之后引入到html文件，用于实际开发

先建立.css文件，并在该文件内书写样式，不需要style标签

再在html页面内用<link>标签引入该文件（写在head）

后代选择器（重要）（（所有子级）#

又叫包含选择器，可以选择父元素内的子元素

子选择器（重要）（相邻子级）#

并集选择器#

一般会把用到的元素各起一行竖着写

伪类选择器#

链接伪类选择器#

input: focus伪类选择器#

块元素#

行内元素(一般不能再放块元素)#

行内块元素#

显示模式的转换（display属性，常用block）#

想要让链接内文字垂直居中，则需要将行高设置为与盒子高度相等

背景颜色background-color#

opacity属性也可以改不透明度

背景图片background-image#

背景图片会覆盖背景颜色，实际开发常用于logo或者装饰图片、较大的背景图片、精灵图等，易于控制位置

背景平铺background-repeat#

背景图片位置background-position#

背景附着（背景图像固定）background-attachment#

设置背景图像是否固定或者随着页面的其余部分滚动

背景属性复合写法background#

层叠性#

继承性：子标签继承父标签样式#

行高的继承：可以不使用px，而是字体大小倍数

优先级：选择器权重#

important使用：在属性值后添加!important

不管父元素的权重多高，子元素继承父元素的权重一定是0

复合选择器的权重相互叠加，不会进位：

如下，只执行ul li这个复合选择器的样式

如下，只会执行第一个，需要为.pink前添加.nav

盒子模型组成#

边框（粗细、样式、颜色）#

常见样式：solid实线，dash虚线，dotted点线

边框简写

单独的边框设置

**层叠性：**通过就近原则将单独设置的边框写在最后，使单独设置的优先级更高

上边框红，其他边框蓝

表格相邻单元格边框border-collapse#

边框影响盒子实际大小#

内边距padding#

复合写法：按值个数决定值内容

内边距会撑大盒子，影响盒子实际大小#

父元素有设置宽高，子元素没有，子元素的内边距也不会撑开宽高

外边距应用：水平居中#

外边距合并/塌陷#

相邻垂直的块元素，外边距垂直合并：尽量只给一个margin

嵌套垂直的块元素，外边距塌陷：

边框可以将颜色设置为transparent（透明）

清除默认内外边距（css最先写的代码）#

盒子圆角边框 border-radius#

精准写法如border-top-right-radius

参数可以是数值或百分比

圆形：

当半径是正方形边长的一半(或者值为50%)，则会作出圆形

圆角矩形：

当半径是长方形高度的一半(或者值为50%)，则会作出圆角矩形

该属性跟多个值：

按照顺时针，可以用四个值分别设置四个角

分开设置：

盒子阴影 box-shadow#

常见网页布局#

标准流#

设置浮动#

浮动特性#

脱标：浮动的盒子会压住后面的标准流盒子，类似图层

3.浮动盒子不会压住下面标准流盒子里的文字和图片(文字环绕效果)

浮动盒子前面的标准流盒子不会被压住

排列：一行内显示并且元素顶端对齐

行内块特性

浮动的使用#

浮动元素搭配标准流的父元素#

例如ul作标准父元素，添加多个li作浮动子元素

注意，子元素的margin值是子元素之间的，不会撑开定高的父盒子

浮动元素的兄弟元素也应浮动#

定位模式：子绝父相#

静态定位（无定位）static#

相对定位（相对自身）relative#

绝对定位 absolute#

绝对定位特点：

绝对定位的盒子居中实现#

子绝父相#

子级是绝对定位的话，父级应是相对定位

固定定位 fixed#

将元素固定在浏览器可视区的位置

固定定位定位在版心附近的算法#

粘性定位#

跟页面滚动搭配使用，当元素碰到浏览器视窗时变为固定定位

可以认为是相对定位和固定定位的结合

定位的拓展#

1.定位的特殊特性

2.脱标的盒子不会触发外边距塌陷

3.绝对定位/固定定位会完全压住盒子

定位的叠放次序 z-index#

边偏移#

显示方式display：none#

可见性visibility：hidden#

溢出显示设置overflow：hidden#

鼠标样式 cursor#

取消表单轮廓线outline#

防止拖拽文本域 resize#

verticle-aglign实现垂直对齐#

解决图片底部默认空白缝隙（图片与文字默认基线对齐）#

溢出文字以省略号显示#

单行文本

多行文本

margin负值的使用#

避免边框并列，并正常显示出边框

文字围绕浮动元素#

文字为直接输入的标准流，文字前插入浮动的图片