1 基础知识
1.1 CSS介绍
CSS：层叠样式表（Cascading style sheets）
作用：美化网页
结构：
<style>
<style>
/* css注释 */
p {
color: blueviolet;
font-size: 30px;
background-color: blanchedalmond;
width: 300px;
height: 100px;
}
</style>
</style>`
1.2 CSS引入方式
1.内嵌式：CSS写到style标签中
通常在head中
2.外联式：单独写在.css文件中
需要link标签引入
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 关系：样式表 -->
<link rel="stylesheet" href="my.css">
</head>
新建.css文件
p{
color: blue;
}
3.行内式：写在style中
<div style="color: aqua; font-size : 20px;">这是div标签</div>
2.基础选择器
2.1 标签
2.2 类
结构:.类名{ css属性名:属性值;}
作用:通过类名，找到页面中所有带有这个类名的标签，设置样式注意点:
1.所有标签上都有class属性,class属性的属性值称为类名（类似于名字)
2.类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3.—个标签可以同时有多个类名，类名之间以空格隔开
4.类名可以重复，一个类选择器可以同时选中多个标签
.red{
color: blueviolet;
}
.size{
font-size: 66px;
}
<div class="red size">这个标签也要变紫色</div>
2.3 id选择器
结构:#id属性值{css属性名:属性值;}
作用:通过id属性值，找到页面中带有这个id属性值的标签，设置样式注意点:
1.所有标签上都有id属性
2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的!3.一个标签上只能有一个id属性值
4.—个id选择器只能选中一个标签
2.4 通配符选择器
结构:*{ css属性名:属性值;}
作用:找到页面中所有的标签，设置样式
注意点:
1.开发中使用极少，只会在极特殊情况下才会用到
2.在基础班小页面中可能会用于去除标签默认的margin和padding(后续讲解)
*{
color: yellow;
}
3 字体和文本样式
3.1 字体大小
属性名：font-size
取值：数字+px
注意点：
- 谷歌浏览器默认文字大小是16px
- 单位需要设置，否则无效
3.2 字体粗细
属性名：font-size
取值：
关键字：
正常：normal
加粗：bold
纯数字：
正常：400
加粗：700
不是所有字体都提供了九种粗细，因此部分取值页面中无变化
实际开发中以:正常、加粗两种取值使用最多。
3.3 字体样式（是否倾斜）
属性名：font-style
取值：
- 正常：normal
- 倾斜：italic
3.4 字体
属性名：font-family
常见取值:具体字体1,具体字体2,具体字体3,具体字体4…,字体系列
- 具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等…
- 字体系列：sans-serif、serif、monospa ce等.……
渲染规则:
- 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
- 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
注意点:
- 如果字体名称中存在多个单词，推荐使用引号包裹
- 最后一项字体系列不需要引号包裹
- 网页开发时，尽量使用系统常见自带字体
保证不同用户浏览网页都可以正确显示
3.5 样式的层叠问题
问题:
- 给同一个标签设置了相同的样式，此时浏览器会如何渲染呢?
结果:
- 如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖)，写在最下面的会生效
TIP:
- CSS (Cascading style sheets)层叠样式表
- 所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖
3.6 字体font相关属性的连写
属性名:font(复合属性：一个属性冒号后面书写多个值)
取值:
- font : style weight size family;
省略要求:
- 只能省略前两个，如果省略了相当于设置了默认值，空格隔开
注意点:如果需要同时设置单独和连写形式 - 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面
3.7 文本样式
1.文本缩进
属性名：text-ident
取值：
- 数字+px
- 数字+em（一个字的大小）
2.文本对齐水平方式
属性名：text-align
取值：
- left 左对齐
- center 居中对齐
- right 右对齐
能让哪些元素水平居中？
-
文本
-
span标签，a标签
-
input标签，img标签
如果需要让以上元素水平居中, text-align : center需要给以上元素的父元素设置
3.文本修饰
属性名: text-decoration
取值:
| 属性值 | 效果 |
|---|---|
| underline | 下划线（常用) |
| line-through | 删除线(不常用) |
| overline | 上划线（几乎不用) |
| none | 无装饰线（常用) |
开发中会使用text-decoration : none ;清除a标签默认的下划线
3.8 line-hight行高
1.行高
作用:控制一行的上下行间距
属性名:line-height
取值:
- 数字+px
- 倍数（当前标签font-size的倍数)
应用:
1.让单行文本垂直居中可以设置line-height:文字父元素高度
2.网页精准布局时，会设置line-height : 1可以取消上下间距
行高与font连写的注意点:
- 如果同时设置了行高和font连写，注意覆盖问题
- font : style weight size/line-height family ;
3.9 字体和文本样式
- 标签水平居中： margin: 0 auto
4 调试工具
F12
·
·
·