- CSS：层叠样式表
- CSS作用：给页面HTML标签设置样式
A. 内嵌式
- CSS写在style标签中
- style标签通常写在head标签中
B. 外联式(常用)
- CSS写在一个单独的.css文件中
- 通过link标签引入网页中
C. 行内式(常配合JS使用)
- CSS直接写在标签的style属性中
A. 标签选择器
写法：
标签选择器选择一类标签中的所有，而不是单独某一个
B. 类选择器
写法：
注意：
- 类名由数字、字母、下划线和中划线组成，但不能以数字或中划线开头。
- 一个标签可以同时有多个类名，类名之间以空格隔开
C. ID选择器
写法：
注意：
- id属性值在一个页面是唯一的，不可重复！
- 一个标签只能有一个id属性值，是一对一的
D. 通配符选择器
A. 属性
B. 样式的层叠性
给同一个标签设置相同属性，样式会层叠，最下面的生效
此时blue样式生效，red样式不生效。
C. font的复合属性
写法:
注意：只能省略前两个(style和weight)，size和family必须存在
数字+em(1em=1个字的大小)text-align文本水平对齐left, center, right(左中右)text-decoration文本修饰underline:下划线(常用)
none:无装饰线(常用)
line-through:删除线
overline:上划线line-height行高数字+px;
倍数(当前font-size的倍数)
让div、p、h等标签大盒子水平居中
A.复合选择器
1. 后代选择器
根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
语法：
2. 子代选择器: >
根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
语法：
B. 并集选择器
C. 交集选择器
D. hover伪类选择器
A. 属性
no-repeat:不平铺
repeat-x:水平方向平铺
repeat-y:垂直方向平铺background-position背景位置background-position:水平方向位置 垂直方向位置;
B.背景相关属性的连写形式
写法：
A. 块级元素
- 独占一行
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高
代表标签：div、p、h、ul等
B. 行内元素
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
代表标签：a、span、b、u等
C. 行内块元素
- 一行可以显示多个
- 可以设置宽高
代表标签: input、textarea、button、select等
D. 元素显示模式转换
- 改变元素默认的显示特点，让元素符合要求
E. HTML嵌套注意
- 块级元素一般作为大容器，可以嵌套其他元素
但：p标签不能嵌套div、p、h等块级元素 - a标签内部可以嵌套任意元素
但：a不能套a标签
A. 继承性
子元素有默认继承父元素样式的特点；但如果自己本身有相应的属性，就不会继承父元素的属性
B. 层叠性
- 给同一个标签设置不同样式时，样式会叠加
- 给同一个标签设置相同样式时，样式会覆盖掉，以最后样式生效
C. 优先级
下面介绍
定义：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式
优先级大小：
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important
如果是复合选择器，需要通过权重叠加计算方法判断最终哪个选择器优先级最高最终生效。
公式：(0,0,0,0)==>(第一级,第二级,第三级,第四级)
复合选择器中：(行内样式个数,id选择器个数,类选择器个数,标签选择器个数)
比较规则：
从第一级开始比较，若能比较出来，则完成；否则继续下一级的比较；以此类推
例如：(1,0,0,0)>(0,2,0,0)>(0,1,0,1)>(0,0,5,0)
注意：
- 记住:(行内,id,类,标签)
- !important永远是最高优先级，继承最低
由于(0,1,0,1)>(0,0,2,0)>(0,0,1,1)>(0,0,0,2);所以最终orange颜色生效。
A. 内容区域的宽度和高度
使用width和height属性设置盒子内容区域的大小
B. 边框区域
属性使用border;
语法：
例子：
C. 内边距区域
padding属性可以当作复合属性使用
- 一值(上下左右)：
- 二值(上下 左右)：
- 三值(上 左右 下):
- 四值(上 右 下 左):
D. 外边距区域
使用margin属性，与padding属性使用方式一样
E. 清除默认内外边距
使用以下方式：
F. 版心居中
根据元素在HTML中的结构关系查找元素
- 元素：HTML设置的标签
- 伪元素：由CSS模拟出的标签效果
注意： content属性必须有，否则不生效
用作网页布局
清除浮动给其他元素带来的影响
A. 额外标签法
- 在父元素内容的最后添加一个块级元素
- 给添加的块级元素设置：
B. 单伪元素清除法(推荐)
写法2(用于解决浏览器兼容性)：
C. 双伪元素清除法(推荐)
写法：
D. overflow法(推荐)
给父元素加上：
A. 定位的作用
让元素自由的摆放在网页的任意位置，一般用于盒子间的层叠情况
B. 定位的基本使用
(1) 定位方法
属性名：position
(2) 偏移值
A. 不同布局方式元素的层级关系
- 标准流<浮动<定位
B. 不同定位之间的层级关系
- 相对、绝对和固定默认层级相同
- HTML写在后面的元素层级更高
A. 垂直对齐方式
属性名:
B. 光标类型
C. 边框圆角
盒子的四个角变得圆润
属性名：
取值： 数字+px，百分比
- 画一个正圆
- 盒子必须是正方形
- 设置border-radius: 50%;
- 胶囊按钮
- 盒子必须是长方形
- 设置border-radius: 盒子高度的一半
D. overflow溢出显示效果
E. 元素显示隐藏
F. 元素透明度
让元素整体变得更透明
属性名：
属性值： 0~1之间的数字
- 1：完全不透明
- 0：完全透明
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/68167.html