目录
前言
本文介绍对CSS3层叠样式表的学习
一、CSS选择器
1.1 基础认知
1)CSS的介绍
CSS:层叠样式表(Cascading style sheets) 作用:给页面中的HTML标签设置样式。
2)语法规则
css写在style标签中,style标签一般写在head标签里面,title标签下面
3)常见属性
属性 | 作用 |
---|---|
color | 文字颜色 |
font-size | 字体大小 |
background-color | 背景颜色 |
width | 宽度 |
height | 高度 |
4)CSS引入方式
引用方式 | 位置 | 使用场景 |
---|---|---|
内嵌式 | CSS 写在style标签中 | 当前页面 |
外联式 | 写在一个单独的.css文件中 | 多个页面,通过link标签在网页中引入 |
行内式 | CSS 写在标签的style属性中 | 配合js在当前标签内 |
1.2 基础选择器
1)标签选择器
结构:标签名 { css属性名:属性值; }
2)类选择器
结构:.类名 { css属性名:属性值; }
3)id选择器
结构:#id属性值 { css属性名:属性值; }
4)通配符选择器
结构:* { css属性名:属性值; }
1.3 字体和文本样式
1)字体样式
样式 | 属性名 | 属性值 |
---|---|---|
字体大小 | font-size | 数字+px |
字体粗细 | font-weight | 正常:normal 或 400/加粗:bold 或 700 |
字体样式 | font-style | 正常:normal/倾斜:italic |
字体类型 | font-family | 具体字体1,具体字体2 |
字体类型 | font | font : style weight size family; |
2)文本样式
样式 | 属性名 | 属性值 |
---|---|---|
文本缩进 | text-indent | 数字+px/数字+em |
文本水平对齐方式 | text-align | left/center/right |
文本修饰 | text-decoration | underline(下划线)/none |
3)line-height行高
作用:控制一行的上下行间距
属性名:line-height
取值:
• 数字+px
• 倍数(当前标签font-size的倍数)
1.4 Chrome调试工具
1.5 选择器进阶
- 复合选择器
1)后代选择器:空格
作用:根据 HTML 标签的嵌套关系,选择父元素 后代中 满足条件的元素 选择器语法:选择器1 选择器2 { css }
2)子代选择器:>
作用:根据 HTML 标签的嵌套关系,选择父元素 子代中 满足条件的元素
选择器语法:选择器1 > 选择器2 { css }
- 并集选择器:,
作用:同时选择多组标签,设置相同的样式
选择器语法:选择器1 , 选择器2 { css }
- 交集选择器:紧挨着
作用:选中页面中 同时满足 多个选择器的标签
选择器语法:选择器1选择器2 { css }
- hover伪类选择器
作用:选中鼠标悬停在元素上的状态,设置样式
选择器语法:选择器:hover { css }
- Emmet语法
作用:通过简写语法,快速生成代码
1.6 背景相关属性
- 背景颜色
属性名:background-color(bgc)
属性值:关键字、rgb表示法、rgba表示法、十六进制……
- 背景图片
属性名:background-image(bgi)
background-image:url('图片的路径');
- 背景平铺
属性名:background-repeat(bgr)
- 背景位置
属性名:background-position(bgp)
background-position:水平位置,垂直位置;
- 背景相关属性的连写形式
属性名:background(bg)
属性值:单个属性值的合写,取值之间以空格隔开
1.7 元素显示模式
- 块级元素
显示特点:独占一行(一行只能显示一个);宽度默认是父元素的宽度,高度默认由内容撑开;可以设置宽高
代表标签: • div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……
- 行内元素
显示特点:一行可以显示多个; 宽度和高度默认由内容撑开;不可以设置宽高
代表标签: a、span 、b、u、i、s、strong、ins、em、del……
- 行内块元素
显示特点:一行可以显示多个;可以设置宽高
代表标签:
• input、textarea、button、select……
• 特殊情况:img标签有行内块元素特点,但是Chrome调试工具中显示结果是inline
- 元素显示模式转换
目的:改变元素默认的显示特点,让元素符合布局要求
1.8 CSS特性
- 继承性的介绍
特性:子元素有默认继承父元素样式的特点(子承父业)
可以继承的常见属性(文字控制属性都可以继承)
①color
②font-style、font-weight、font-size、font-family
③text-indent、text-align
④ line-height
- 层叠性的介绍
特性:
①给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
②给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效