字体样式：font-size
属性名：font-size
取值：数字 + px
注意点：谷歌浏览器默认文字大小是16px 单位需要设置，否则无效
字体粗细：font-weight
属性名：font-weight
取值：normal:正常 Bold:加粗
纯数字：100~900的整百数：
400：正常 700：加粗
字体样式（是否倾斜）：font-style
属性名：font-style
取值：正常（默认值）：normal 倾斜：italic
字体系列：font-family
属性名：font-family
常见取值：具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列
具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等……
字体系列：sans-serif、serif、monospace等……
渲染规则：
1. 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
2. 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
注意点：
1. 如果字体名称中存在多个单词，推荐使用引号包裹
2. 最后一项字体系列不需要引号包裹
3. 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
字体font相关属性的连写：font : style weight size family;
省略要求： 只能省略前两个，如果省略了相当于设置了默认值
文本缩进：text-indent
属性名：text-indent
取值： 数字+px 或 数字+em（推荐：1em = 当前标签的font-size的大小）
文本对齐：text-align
注意点：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
文本修饰：text-decoration
注意点：开发中会使用 text-decoration : none ; 清除a标签默认的下划线
行高：控制一行的上下行间距
属性名：line-height
取值：数字+px 或 倍数（当前标签font-size的倍数）
应用：
1. 让单行文本垂直居中可以设置 line-height : 文字父元素高度
2. 网页精准布局时，会设置 line-height : 1 可以取消上下间距
行高与font连写的注意点：
如果同时设置了行高和font连写，注意覆盖问题
font : style weight size/line-height family ;
Chrome调试工具小结
后代选择器：空格
作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素
选择器语法：选择器1 选择器2 { css }
注意点：后代包括：儿子、孙子、重孙子……, 后代选择器中，选择器与选择器之前通过 空格 隔开
子代选择器：>
作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素
选择器语法：选择器1 > 选择器2 { css }
注意点：子代只包括：儿子; 子代选择器中，选择器与选择器之前通过 > 隔开
并集选择器：,
作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1 ， 选择器2 { css }
注意点：
1. 并集选择器中的每组选择器之间通过 , 分隔
2. 并集选择器中的每组选择器可以是基础选择器或者复合选择器
3. 并集选择器中的每组选择器通常一行写一个，提高代码的可读性
交集选择器：紧挨着
作用：选中页面中 同时满足 多个选择器的标签
选择器语法：选择器1选择器2 { css }
注意点：
1. 交集选择器中的选择器之间是紧挨着的，没有东西分隔
2. 交集选择器中如果有标签选择器，标签选择器必须写在最前面.
hover伪类选择器
作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器:hover { css }
注意点：
1. 伪类选择器选中的元素的某种状态
emmet语法: 通过简写语法，快速生成代码
背景相关属性
背景颜色：background-color
背景图片：background-image
属性值：：background-image:url(‘图片路径’)
背景平铺：background-repeat
背景位置：background-position
属性值：background- position
属性值：background- position:水平方向位置 垂直方向位置
背景相关属性的连写形式：background：color image repeat position
块级元素
1. 独占一行（一行只能显示一个）
2. 宽度默认是父元素的宽度，高度默认由内容撑开 。
3. 可以设置宽高
常用块级标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……
行内元素：
1. 一行可以显示多个 ;
2. 宽度和高度默认由内容撑开 ;
3. 不可以设置宽高;
常用行内元素：a、span 、b、u、i、s、strong、ins、em、del……
行内块元素：
1. 一行可以显示多个 ;
2. 可以设置宽高;
常用行内块元素：input、textarea、button、select……
元素显示模式转换
居中小总结
CSS三大特性优先级
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
Chrome调试工具（查错流程）
PxCook的基本使用
通过软件打开设计图：打开软件；然后拖拽入设计图；最后新建项目
常用快捷键：放大设计图：ctrl + +
缩小设计图：ctrl + -
移动设计图：空格按住不放，鼠标拖动
盒子模型
CSS 中规定每个盒子分别由：
内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（ margin）构成，这就是 盒子模型。
内容的宽度和高度：
作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小。
属性：width / height ;
常见取值：数字+px;
边框（border）- 单个属性：给设置边框粗细、边框样式、边框颜色效果。
eg: border : 10px solid red;
边框（border）- 单方向设置:只给盒子的某个方向单独设置边框。
属性名：border - 方位名词eg: border-top：10px dashed yellow；
内边距（padding）- 取值 设置 边框 与 内容区域 之间的距离。
属性名：padding
记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
内边距（padding）- 单方向设置
场景：只给盒子的某个方向单独设置内边距。
属性名：padding - 方位名词 eg: padding-left : 50px ;
属性值：数字 + px
CSS3盒模型（自动内减）
解决方法 1 ：手动内减
操作：自己计算多余大小，手动在内容中减去。
缺点：项目中计算量太大，很麻烦。
解决方法 2 ：自动内减
操作：给盒子设置属性 box-sizing : border-box ; 即可
优点：浏览器会自动计算多余大小，自动在内容中减去。
外边距（margin）- 取值 设置边框以外，盒子与盒子之间的距离。
属性名：margin
记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
外边距（margin） - 单方向设置
场景：只给盒子的某个方向单独设置外边距 。
属性名：margin - 方位名词 eg: margin-left : 50px ;
属性值：数字 + px
清除默认内外边距
结构伪类选择器
作用与优势：
1. 作用：根据元素在HTML中的结构关系查找元素 。
2. 优势：减少对于HTML中类的依赖，有利于保持代码整洁 。
3. 场景：常用于查找某父级选择器中的子元素
n为：0、1、2、3、4、5、6、……
伪元素: 一般页面中的非主体内容可以使用伪元素
区别:1. 元素：HTML 设置的标签
2. 伪元素：由 CSS 模拟出的标签效果
注意点： 1. 必须设置content属性才能生效 2. 伪元素默认是行内元素
浮动
属性名：float
属性值：左浮动:left 右浮动：right
清除浮动的方法 — 直接设置父元素高度
特点：优点：简单粗暴，方便
缺点：有些布局中不能固定父元素高度。
清除浮动的方法 —额外标签法
操作：
1. 在父元素内容的最后添加一个块级元素
2. 给添加的块级元素设置 clear:both
特点：缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
清除浮动的方法 — 单伪元素清除法
特点： 优点：项目中使用，直接给标签加类即可清除浮动
清除浮动的方法 —双伪元素清除法
特点： 优点：项目中使用，直接给标签加类即可清除浮动
清除浮动的方法 —给父元素设置overflow : hidden
操作：直接给父元素设置 overflow : hidden
特点：优点：方便
定位
属性名：position
设置偏移值：水平+垂直就近各取一个
静态定位：静态定位是默认值，就是之前认识的标准流。
代码：position:static;
相对定位: 自恋型定位，相对于自己之前的位置进行移动
代码：position:relatice;
特点：
1. 需要配合方位属性实现移动
2. 相对于自己原来位置进行移动 ;
3. 在页面中占位置 → 没有脱标;
绝对定位: 拼爹型定位，相对于非静态定位的父元素进行定位移动。
代码：position:absolute;
特点：
1. 需要配合方位属性实现移动 ;
2. 默认相对于浏览器可视区域进行移动 ;
3. 在页面中不占位置 → 已经脱标。
子绝父相介绍：让子元素相对于父元素进行自由移动
子元素：绝对定位 父元素：相对定位
固定定位：死心眼型定位，相对于浏览器进行定位移动。
代码：position:fixed;
特点：
1. 需要配合方位属性实现移动 ;
2. 相对于浏览器可视区域进行移动 ;
3. 在页面中不占位置 → 已经脱标。
不同布局方式元素的层级关系：标准流 < 浮动 < 定位
改变定位元素的层级 属性名：z-index ；
属性值：数字 ， 数字越大，层级越高。
垂直对齐方式：vertical-align
光标类型 ：cursor
边框圆角：border-radius
常见取值：数字+px 、百分比
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！
溢出部分显示效果: overflow
元素本身隐藏
常见属性：
1. visibility：hidden 2. display：none
区别：
1. visibility：hidden 隐藏元素本身，并且在网页中 占位置 ;
2. display：none 隐藏元素本身，并且在网页中 不占位置。
注意：开发中经常会通过 display属性完成元素的显示隐藏切换 。
display：none；（隐藏）、 display：block；（显示）
精灵图的使用步骤:
1. 创建一个盒子
2. 通过PxCook量取小图片大小，将小图片的宽高设置给盒子 ;
3. 将精灵图设置为盒子的背景图片 ;
4. 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y;
背景图片大小:
语法：background-size：宽度 高度；
文字阴影: text-shadow
盒子阴影：box-shadow
过渡: transition
注意点：
1. 过渡需要：默认状态 和 hover状态样式不同，才能有过渡效果 ;
2. transition属性给需要过渡的元素本身加 ？
3. transition属性设置在不同状态中，效果不同的 ;
(1) 给默认状态设置，鼠标移入移出都有过渡效果 ;
(2)给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
