基础认识

1. CSS初识

CSS：层叠样式表（cascading style sheets）
作用：给页面中HTML设置样式

常见属性：
color：文字颜色
font-size：字体大小
background-color：背景颜色
width：宽度
height：高度
注意：CSS标点符号都是在英文状态下的
每一个键值对写完之后，最后需要写分号

1. CSS引入方式

内嵌式：CSS写在style标签中
style标签虽然可以写在页面任意位置，但通常约定写在head标签中
外联式：CSS写在一个单独的.css文件中
需要通过link标签在网页中引用

行内式：CSS写在标签的style属性中

基础选择器

选择器的作用：选择页面中对应的标签，方便后续设置样式
样式冲突则以最后一次样式为准

1. 标签选择器

标签名{css属性名：属性值；}
注意：标签选择器选择的是一类标签，而不是单独某个

1. 类选择器

.类名{css属性名：属性值；}
注意：类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
一个标签可以有多个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以同时选择多个标签

1. id选择器

id属性值{css属性名：属性值；}
注意：id属性值在一个页面中是唯一的，不可重复的
一个id选择器只能选中一个标签

1. 通配符选择器

*{css属性名：属性值；}
注意：找到页面中所有的标签，设置样式

字体和文本样式

1. 字体样式
   • 字体大小：font-size
   • 字体粗细：font-weight

属性值：
normal 正常
bold 加粗
纯数字 100-900的正百数
400 正常
700 加粗

  - 字体样式：font-style

属性值：
normal 正常
italic 倾斜

  - 字体类型：font-family（了解）

常见字体系列：
无衬线字体：（sans-serif）黑体、Aarial
衬线字体：（serif）宋体、Times New Roman
等宽字体;（monospace）Consolas、Courier New
属性值：
具体字体1，具体字体2，…，字体系列
注意：如果字体名称中存在多个单词，推荐使用引号包裹
最后一项字体系列不需要引号包裹

  - 字体连写：font

属性值：style weight size/line-height family
省略只能省略前2个，有顺序要求

1. 文本样式
   • 文本缩进：text-indent

属性值：
数字+px
数字+em（推荐：1em=当前标签font-size的大小）

  - 文本水平对齐方式：text-algin

属性值：
left：左对齐
center：居中对齐
可以让文本、span标签、a标签、input标签、img标签水平居中，需要设置给父元素
right：右对齐
注意：text-align是让文字对齐，盒子不动

  - 文本修饰：text-decoration

属性值：
underline：下划线
line-through：删除线
over-line：上划线
none：无装饰线

1. line-height行高

属性值：
数字+px
倍数（当前标签font-size的倍数）
注意：一个盒子如果没有指定高度，则以行高为默认
line-height：1；可以让盒子的高度和文字大小一样高（可以取消上下间距）
垂直居中：line-height：文字父元素高度

颜色常见取值（了解）

1. 关键词

预定义的颜色名
red、blue、green、skyblue等

1. rgb表示法

红绿蓝三原色。每项取值范围：0-255
rgb（255,255,255）

1. rgba表示法

红绿蓝三原色和透明度，透明度取值：0-1
rgba（255,255,255,0.5）

1. 十六进制表示法

开头将数字转换为十六进制表示

选择器进阶

1. 复合选择器
   • 后代选择器

根据HTML的嵌套关系，选择父元素后代中满足条件的元素
选择器1 选择器2{css属性名：属性值；}

  - 子代选择器

根据HTML的嵌套关系，选择父元素子代中满足条件的元素
选择器1>选择器2{css属性名：属性值；}

1. 并集选择器

同时选择多组标签，设置相同的样式
选择器1，选择器2{css属性名：属性值；}

1. 交集选择器

选中页面中同时满足多个选中器的标签
选择器1选择器2{css属性名：属性值；}

1. hover伪类选择器

选中鼠标悬停在元素上的状态
选择器：hover{css属性名：属性值；}

Emmet语法

标签名 div
类选择器 .red
id选择器 #one
交集选择器 p.red#one
子代选择器 ul>li
内部文本 ul>li{我是li内容}
创建多个 ul>li*3
取消li前面的小圆点：li{list-style:none;}

背景相关属性

1. 背景颜色background-color

背景颜色默任值是透明：rgba（0,0,0,0）、transport

1. 背景图片background-image

background-image：url（’图片的路径’）；
背景图片中的url可以省略引号
背景图片默认是在水平和垂直方向平铺

1. 背景平铺background-repeat

属性值：
repeat：（默认值）水平和垂直方向都平铺
no-repeat：不平铺
repeat-x：沿水平方向（x轴）平铺
repeat-y：沿垂直方向（y轴）平铺

1. 背景位置background-position

属性值：

     - 方向名词：

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

     - 数值+px（坐标）

坐标系：
原点：盒子的左上角
x轴：水平向右
y轴：垂直向下
操作：将图片左上角和坐标点重合即可
注意：方向名词取值和坐标取值可以混合使用，第一个取值表示水平，第二个取值表示垂直

1. 背景相关属性连写

background：color image repeat position
注意：如果需要设置单独的样式和连写，要么把单独的样式写在连写的下面，要么把单独的样式写到连写的里面

元素显示模式

1. 块级元素

display：block；
独占一行、宽度默认是父元素的宽度，高度由内容撑开、可以设置宽高
代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer等

1. 行内元素

display：inline；
一行可以显示多个、宽度和高度默认由内容撑开。不可以设置宽高
代表标签：a、span、b、u、i、s、strong、ins、em、del等

1. 行内块元素

display：inline-block；
一行可以显示多个、可以设置宽高
代表标签：input、textarea、button、select等

1. 元素显示模式转换

display：block；转化为块级元素
display：inline；转换为行内元素
display：inline-block；转换为行内块元素

HTML嵌套规范注意点

块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素。行内块元素等
但是p标签中不要嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素
但是a标签不能嵌套a标签

CSS三大特性

1. 继承性

子元素默认继承父元素样式的特点
不是所有的属性都会继承，一般跟文字相关的一些特性会继承
a标签的color会继承失效，其实color属性继承下来了，但是被浏览器默认设置的样式覆盖掉了
h系列标签font-size会继承失效，其实font-size属性继承下来了，但是被浏览器默认设置的样式覆盖掉了
div的高度不能继承，但是宽度有类似于继承的效果，宽度属性不能继承，但div有独占一行的特性

1. 层叠性

给同一个标签设置不同的样式，样式会层叠叠加，会共同作用在标签上
给同一个标签设置相同的样式，样式会层叠覆盖，写在最后的样式会生效
当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

1. 优先性

不同的选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
!important>行内样式>id选择器>类选择器>标签选择器>通配符选择器>继承
!important写在属性值的后面，分号的前面
!important不能提升继承的优先级，只要是继承优先级最低

权重

标签选择器 0,0,0,1
类选择器 0,0,1,0
id选择器 0,1,0,0
行内样式 1,0,0,0

盒子模型

1. 盒子模型介绍

CSS规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型
盒子宽度=左边框+左padding+内容宽度+右padding+右边框
盒子高度=上边框+上padding+内容高度+下padding+下边框

1. 内容区域的宽度和高度

width/height：
常见取值：数字+px/百分比%

1. 边框（border）

border-width（边框粗细）：数字+px
border-style（边框样式）：solid（实线）、dashed（虚线）、dotted（点线）
border-color（边框颜色）：颜色取值
border-方位名词：只给盒子的某个方向单独设置边框
连写：border：width style color

1. 内边距（padding）

padding-方位名词：数字+px；
取值：
上下左右
上下 左右
上 左右 下
上 右 下 左
注意：如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
此时给子盒子设置左右的padding或者左右的border，此时不会撑大盒子

1. 外边距（margin）

margin-方位名词：数字+px；
取值：
上下左右
上下 左右
上 左右 下
上 右 下 左
外边距折叠现象：垂直布局的块级元素，上下margin会合并，以最大值为准
互相嵌套的块级元素，父子元素紧贴的margin-top会合并作用在父元素上
解决方法：给父元素设置border-top或者padding-top或overflow：hidden，转换为行内块元素，设置浮动
行内元素，不要给上下边距，只给左右边距

CSS3盒子模型

自动内减：box-sizing：border-box；
表格细线边框：border-collapse：collapse；（合并相邻的两个边框）

CSS布局

1. 结构伪类选择器

根据元素文档所在位置，通过结构关系查找元素

注意：

1. 伪元素

一般页面中的非主体内容可以使用伪元素

1. 标准流

1. 浮动

float
取值：
left：左浮动
right：右浮动
一行可以显示多个，可以设置宽高
注意：浮动的盒子会压住下面标准流的盒子，但是浮动的元素不会压住文字、图片、表单等
浮动的元素不能通过text-algin：center或者margin：0 auto；让浮动元素水平居中
浮动的元素一定要搭配一个标准流的父元素

1. 清除浮动

清除浮动带来的影响
方法1：直接设置父元素的高度
方法2：在父元素最后添加一个块级元素，给添加的块级元素设置clear：both
方法3：用伪元素替代了额外标签

方法4：双伪元素清徐法

方法5：给父元素加overflow：hidden；

CSS3

transition：要过渡的属性 花费的时间（单位秒） 运动曲线（默认ease可省略） 何时开始
圆角边框：border-radius：50%；
盒子阴影：box-shadow
元素透明度：opacity：0-1；

定位

相对定位：relative
特点：不脱离标准流，占位置
提升显示层次
相对于自己原来的位置移动
绝对定位：absolute
特点：脱离标准流，不占位置
提升层级
相对最近的有定位属性的父亲定位
固定定位：fixed
特点：脱离标准流，不占位置
固定在屏幕上的固定位置
至少要指定一个上或者下的偏移量属性
粘性定位：sticky
特点：不脱离标准流
当屏幕滚动到某一个位置后，会固定在屏幕上
至少要指定一个边的偏移量属性
如果盒子（不分块级还是行内）加了浮动或者定位（绝对定位固定定位相对定位）则可以直接设置宽度和高度
z-index：控制定位元素层级，属性值：数字（数字越大，盒子越靠前）
让定位的盒子水平垂直居中：

鼠标样式

显示和隐藏

溢出隐藏

浏览器私有前缀