基础认知
➢ CSS的中文名称叫做什么呢?
层叠样式表
➢ CSS常见三种引入方式有哪些?
- 内嵌式
- 外联式
- 行内式
基础选择器
- 选择器作用:选中页面中对应的标签(找她)，方便后续设置样式(改她)
- 标签选择器:标签名 { css属性名:属性值; }
- 类选择器:.类名 { css属性名:属性值; }
- id选择器:#id属性值 { css属性名:属性值; }
- 通配符选择器:* { css属性名:属性值; }
字体样式
➢ 字体大小: font-size
- 数字+px
➢ 字体粗细:font-weight
- 正常:normal 或 400
- 加粗:bold 或 700
➢ 字体样式:font-style
- 正常:normal
- 倾斜:italic
➢ 字体系列:font-family
- 具体字体1具体字体2,具体字体3,具体字体4,...,字体系列
➢ 字体连写:font
- font : style weight size family;
文本样式
- 文本缩进:text-indent
- 文本水平对齐方式:text-align
- 文本修饰:text-decoration
行高
➢ 属性名:line-height
➢ 取值:
- 数字+px
- 倍数(当前标签font-size的倍数)
➢ 应用:
- 让单行文本垂直居中可以设置 line-height : 文字父元素高度
- 网页精准布局时，会设置 line-height : 1 可以取消上下间距
➢ 行高与font连写的注意点:
- 如果同时设置了行高和font连写，注意覆盖问题
- font : style weight size/line-height family ;
Chrome调试工具
选择器进阶
-
复合选择器
- 后代选择器:空格
- 子代选择器:>
-
并集选择器: ,
-
交集选择器: 紧挨着
-
hover伪类选择器 选择器:hover { css }
-
Emmet语法
通过简写语法，快速生成代码
背景相关属性
- 背景颜色\ background-color(bgc)
- 背景图片\ background-image(bgi)
- 背景平铺\ background-repeat(bgr)
- 背景位置\ background-position(bgp)
- 背景相关属性连写 • 推荐:background:color image repeat position
元素显示模式(重点)
块级元素
➢ 块级元素的显示特点有哪些?
- 独占一行(一行只能显示一个)
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高
➢ 块级元素的代表标签有哪些?
- div、p、h系列
行内元素
➢ 行内元素的显示特点有哪些?
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
➢ 行内元素的代表标签有哪些?
- a、span
行内块元素
➢ 行内块元素的显示特点有哪些?
- 一行可以显示多个
- 可以设置宽高
➢ 行内块元素的代表标签有哪些?
- input、textarea
元素显示模式转换
拓展:HTML嵌套规范注意点
-
块级元素一般作为大容器，可以嵌套:文本、块级元素、行内元素、行内块元素等等...... ➢ 但是:p标签中不要嵌套div、p、h等块级元素
-
a标签内部可以嵌套任意元素 ➢ 但是:a标签不能嵌套a标签
CSS 特性
继承性
➢ 继承性的特性是什么? • 子元素有默认继承父元素样式的特点
➢ 有哪些常见属性可以继承?
控制字的都可以继承，否则不可以继承
- color
- font-style、font-weight、font-size、font-family
- text-indent、text-align
- line-height
➢ 好处:可以在一定程度上减少代码
➢ 常见应用场景:
- 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
- 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小
➢ 如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
- a标签的color会继承失效
- 其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
- h系列标签的font-size会继承失效
- 其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
层叠性
➢ 如果给同一个标签设置了相同的属性，此时样式会?
- 会层叠覆盖，写在最后的会生效
➢ 如果给同一个标签设置了不同的样式，此时样式会?
- 会层叠叠加，共同作用在标签上
