1、基础认知
1.1、CSS初识
CSS:层叠样式表(Cascading style sheets)
CSS作用:给页面中的HTML标签设置样式
1.2、CSS语法规则
CSS书写位置:css写在style标签中, style标签一般写在head标签里面, title标签下面
示例:
代码:
显示:
1.3、CSS初体验
常见属性:
CSS常见属性 | 作用 |
---|---|
color | 文字颜色 |
font-size | 字体大小 |
background-color | 背景颜色 |
width | 宽度 |
height | 高度 |
示例:
代码:
显示:
注意点:
- CSS标点符号都是英文状态下的
- 每一个样式建值写完之后,最后都需要写分号
2.1、CSS引入方式
- 内嵌式: CSS写在style标签中
提示:style标签虽然可以写在页面任意位置,但是通常约定写在head标签中
示例:
- 外联式: CSS写在一个单独的.css文件中
提示:需要通过link标签在网页中引入
示例:
- 行内式: CSS写在标签的style属性中
提示:不推荐使用,之后会配合js使用
示例:
CSS常见三种引入方式的特点区别:
引入方式 | 书写位置 | 作用范围 | 使用场景 |
---|---|---|---|
内嵌式 | CSS写在style标签中 | 当前页面 | 小案例 |
外联式 | CSS写在单独的CSS文件中,通过link标签引入 | 多个页面 | 项目中 |
行内式 | CSS写在标签的style属性中 | 当前标签 | 配合js使用 |
2、基础选择器
选择器的作用: 选择页面中对应的标签(找她),方便后续设置样式(改她)
2.1、标签选择器
结构: 标签名{CSS属性名:属性值;}
作用: 通过标签名,找到页面中所有这类标签,设置样式
注意点:
- 标签选择器选择的是一类的标签,而不是单独的一个
- 标签选择器无论嵌套有多深,都能找到对应的标签
示例:
代码:
效果:
2.2、类选择器
结构: .类名{CSS属性名:属性值;}
作用: 通过类名,找到页面中所有带有这个类名的标签,设置样式
注意点:
- 所有标签上都有class属性,class属性的属性值称为类名(类似于名字)
- 类名可以由数字、字母、下划线、中划线组成,但不能以数字开头或者中划线开头
- 一个标签可以同时有多个类名,类名之间以空格隔开
- 类名可以重复,一个类选择器可以同时选中多个标签
示例:
代码:
效果:
2.3、id选择器
结构: #id属性值{CSS属性名:属性值;}
作用: 通过id属性值,找到页面中所有带有这个id属性值的标签,设置样式
注意点:
- 所有标签上都有id属性
- id属性类似于身份证号码,在一个页面中是唯一的,不可重复的!
- 一个标签上只能有一个id属性值
- 一个id选择器只能选中一个标签
示例:
代码:
效果:
2.3.1类与id的区别
class类名与id属性值的区别:
- class类名相当于姓名,可以重复,一个标签可以同时有多个class类名
- id属性值相当于身份证号码,不可重复,一个标签只能有一个id属性值
类选择器与id选择器的区别:
- 类选择器以.开头
- id选择器以#开头
实际开发情况:
- 类选择器用的最多
- id一般配合js使用,除非特殊情况,否则不要使用id设置样式
- 实际开发中会遇到冗余代码的抽取(可以将一些公有代码抽取到一个公共的类中去)
2.4、通配符选择器
结构: *{CSS属性名:属性值;}
作用: 找到页面中所有的标签,设置样式
注意点:
- 开发中使用极少,只会在极特殊情况下才会用到
- 在基础小页面中可能会用于去除标签默认的margin和padding
代码:
*{
margin: 0;
padding: 0;
}
示例:
代码:
效果:
2.5基础选择器小结
标签选择器: 标签名 { css属性名:属性值; }
类选择器: .类名 { css属性名:属性值; }
id选择器: #id属性值 { css属性名:属性值; }
通配符选择器: * { css属性名:属性值; }
3、字体和文本样式
3.1、字体样式
3.1.1、字体大小
属性名: font-size
取值: 数字+px
注意点:
- 谷歌浏览器默认文字大小是16px
- 单位需要设置,否则无效
示例:
代码:
效果:
3.1.2、字体粗细
属性名: font-weight
取值:
- 关键字:
正常 | normal |
---|---|
加粗 | bold |
- 纯数字:100~900的整数
正常 | 400 |
---|---|
加粗 | 700 |
注意点:
- 不是所有的字体都提供了九种粗细,因此部分取值页面中无变化
- 实际开发中以:正常、加粗两种取值使用最多
示例:
代码:
效果:
3.1.3、字体样式(是否倾斜)
属性名: font-style
取值:
- 正常值(默认值):normal
- 倾斜:italic
示例:
代码:
效果:
3.1.4、字体系列font-family
属性名: font-family
常见取值: 具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列
- 具体字体: “Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等……
- 字体系列: sans-serif、 serif、 monospace等……
渲染规则:
- 从左往右按照顺序查找,如果电脑中未安装该字体,则显示下一个字体
- 如果都不支持,此时会根据操作系统,显示最后字体系列的默认字体
注意点:
- 如果字体名称中存在多个单词,推荐使用引号包裹
- 最后一项字体系列不需要引号包裹
- 网页开发时,尽量使用系统常见自带字体,保证不同用户浏览网页都可以正确显示
示例:
代码:
效果:
3.1.5、样式的层叠问题
问题:
给同一个标签设置了相同的样式,此时浏览器会如何渲染呢?
结果:
如果给同一个标签设置了相同的属性,此时样式会层叠(覆盖),写在最下面的会生效
TIP:
- CSS (Cascading style sheets) 层叠样式表
- 所谓的层叠即叠加的意思,表示样式可以一层一层的层叠覆盖
示例:
代码:
效果:
3.1.6、字体font相关属性的连写
属性名: font (复合属性)
取值:
• font : style weight size family;
省略要求:
• 只能省略前两个,如果省略了相当于设置了默认值
注意点: 如果需要同时设置单独和连写形式
• 要么把单独的样式写在连写的下面
• 要么把单独的样式写在连写的里面
示例:
代码:
效果:
3.1.7、字体相关属性总结
字体大小: 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;
3.2文本样式
3.2.1文本缩进
属性名: text-indent
取值:
• 数字+px
• 数字+em(推荐: 1em = 当前标签的font-size的大小)
示例:
代码:
效果:
3.2.2文本水平对齐方式
属性名: text-align
取值:
属性值 | 效果 |
---|---|
left | 左对齐 |
center | 居中对齐 |
right | 右对齐 |
注意点:
• 如果需要让文本水平居中, text-align属性给文本所在标签(文本的父元素) 设置
水平居中方法总结 text-align : center
text-align : center 能让以下元素水平居中:
- 文本
- span标签、 a标签
- input标签、 img标签
注意点:
如果需要让以上元素水平居中, text-align : center 需要给以上元素的 父元素 设置
示例:
代码:
效果:
3.2.3文本修饰
属性名: text-decoration
取值:
属性值 | 效果 |
---|---|
umderline | 下划线(常用) |
line-through | 删除线(不常用) |
overline | 上划线(几乎不用) |
none | 无装饰线 |
注意点:
• 开发中会使用 text-decoration : none ; 清除a标签默认的下划线
示例:
代码:
效果:
3.2.4文本样式总结
样式 | 属性名 | 常见属性值 |
---|---|---|
文本缩进 | text-indent | 数字+px/数字+em |
文本水平对齐方式 | text-align | left/center/right |
文本修饰 | text-decoration | underline/none |
3.3line-height行高
作用: 控制一行的上下行间距
属性名: line-height
取值:
• 数字+px
• 倍数(当前标签font-size的倍数)
应用:
- 让单行文本垂直居中可以设置 line-height : 文字父元素高度
- 网页精准布局时,会设置 line-height : 1 可以取消上下间距
行高与font连写的注意点:
• 如果同时设置了行高和font连写,注意覆盖问题
• font : style weight size/line-height family ;
示例:
代码:
效果: