1-1CSS基础
1-1css引入方式
1.内嵌式：
CSS写在style标签中
提示：syle标签虽然可以写在页面任意位置，但是通常约定写在head标签中
2.外联式：
CSS写在一个单独的.css文件中
提示：需要通过ink标签在网页中入
3.行内式：
CSS写在标签的style属性中
提示：基础班不推荐使用，之后会配合js使用
<!DOCTYPE html>
<html lang="en">
<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>
<!-- CSS写在style标签中
提示：syle标签虽然可以写在页面任意位置，但是通常约定写在head标签中 -->
<style>
div {
width: 200px;
height: 200px;
background-color: #ccc;
}
</style>
<!-- CSS写在一个单独的.css文件中提示：需要通过ink标签在网页中入 -->
<!-- <link rel="stylesheet" href="/demo.css" /> -->
</head>
<body>
<div></div>
<!-- CSS写在标签的style属性中
提示：基础班不推荐使用，之后会配合js使用 -->
<div style="width: 200px; height: 200px; background-color: #333"></div>
</body>
</html>
1-2标签选择器
1.标签选择器
标签选择器结构：标签名{cSs属性名：属性值；}
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点：
标签选择器选择的是一类标签，而不是单独某一个
标签选择器无论嵌套关系有多深，都能找到对应的标签
2.类选择器
结构：.类名{css属性名：属性值；}
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：
所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头一个标签可以同时有多个类名，
类名之间以空格隔开类名可以重复，一个类选择器可以同时选中多个标签
3.id选择器
结构：#id属性值{css属性名：属性值：}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点：
所有标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的。不可重复的！
一个标签上只能与一个id属性值
一个id选择器只能选中一个标签
补充“类与id的区别
class类名与id属性值的区别
class类名相当于姓名，可以重复，一个标签可以同时有多个class
类名id属性值相当于身份证号码，不可重复，一个标签只能有一个d属性值
类选择器与id选择器的区别类选择器以.开头id选择器以#开头
实际开发的情况.类选择器用的最多id一般配合js使用，除非特殊情况，否侧不要使用id设置样式实际开发中会遇到冗余代码的抽取（可以将一些公共的代码抽取到一个公共的类中去）
4.通配符选择器
结构：*{css属性名：属性值；}
作用：找到页面中所有的标签，设置样式注意点：
开发中使用极少，只会在极特殊情况下才会用到
在基础班小页面中可能会用于去除标签默认的margin和padding
标签选择器
div{
width: 200px;
height: 200px;
background-color: #ccc;
}
类选择器
.div{
width: 200px;
height: 200px;
background-color: #ccc;
}
id选择器
#div{
width: 200px;
height: 200px;
background-color: #333;
}
通配符选择器
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
1-3字体文本样式
1.字体大小
属性名：font-size
取值：数字+px注意点：
谷歌浏览器默认文字大小是16px
单位需要设置，否则无效
2.字体粗细
属性名：font-weight
关键词
| 正常 | normal |
|---|---|
| 加粗 | bold |
纯数字"100~900之间的整百数
| 正常 | 400 |
|---|---|
| 加粗 | 700 |
3.字体样式(是否倾斜)
| 属性名 | font-style |
|---|---|
| 正常(默认) | normal |
| 倾斜 | italic |
1-4字体系列
属性名:font-family
1-5字体font相关属性的连写
| 属性名 | font |
|---|---|
| 书写顺序: | font:style weight size family(记住swsf) |
2-1文本缩进
| 属性名 | text-indent |
|---|---|
| 数字+px | |
| 数字+em（推荐1em=当前标题的font-size的大小） |
2-2文本水平居中
| 属性名 | text-align |
|---|---|
| 取值 | |
| 属性值 | 效果 |
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
扩展
text align：center能让那些元素水平居中
1.文本 2.span标签 3.input、img标签
2-3文本修饰
| 属性名 | text-decoration |
|---|---|
| 取值 | |
| underline | 下划线（常用） |
| line-through | 删除线（不常用） |
| overline | 上划线（几乎不用） |
| none | 无装饰 |
| 注意：开发中会清除默认样式使用text decoration：none | 清除a标签默认的下划线 |
2-4行高
| 作用 | 控制一行的上下行间距 |
|---|---|
| 属性名 | line-height |
| 取值 | |
| 数字+px倍数（当前标签font-size的倍数） |
应用：
**1.让单行文本垂直居中可以设置ine-height：文字父元素高度
2.网页精准布局时，会设置ine-height：1可以取消上下间距行高与font连写的注意点：
如果同时设置了行高和font连写，注意覆盖问题 font: style weight size/line-height family
<!DOCTYPE html>
<html lang="en">
<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>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100%;
height: 30px;
background-color: #ccc;
}
a{
/* a标签为行内元素.没有尺寸大小,需要转换为块状元素或者行内块元素 */
display: block;
/* 清除下滑线 */
text-decoration: none;
/* 文字倾斜 */
font-style: italic;
/* 文本居中对齐 */
text-align: center;
/* 字体大小 */
font-size: 20px;
/* 文字不加粗 */
font-weight: 400;
/* 文字加粗 */
font-weight: 700;
/* 垂直居中,盒子自身的宽度我的盒子自身宽度是30px */
line-height: 30px;
}
div{
/* font连写书写顺序 */
/* font: :font-style font-weight font-size/line-height font-family; */
font: normal 700 20px/30px "宋体","微软雅黑" ;
}
</style>
<body>
<div>
<a href="#">文字文本样式修改</a>
</div>
<div>文本文字样式修改</div>
</body>
</html>
Chrome开发者工具脑图
打开开发者工具的两种路径：
鼠标右键➡检查➡
电脑安键F12快捷键
2-1CSS进阶
1-1选择器进阶
| 选择器 | 作用 | 格式 | 实例 |
|---|---|---|---|
| 后代选择器 | 找后代 | 选择器之间用空格分离 | .header .nav{css样式} |
| 子代选择器 | 找儿子 | 选择器之间用>分离 | .header>.nav{css样式} |
| 并集选择器 | 找同时满足多个选择器的元素 | 选择器之间紧挨着 | ullia{css样式} |
| hover伪类选择器 | 选中鼠标悬停在元素上的状态 | :hover | a:hover{css样式} |
2-1背景相关属性
1.背景颜色
| 属性名 | background-color （bgc） |
|---|
2.背景图片
| 属性名 | background-image （bgi） |
|---|
3.背景平铺
| 属性名 | background-repeat （bgr） |
|---|---|
| 取值 | 效果 |
| repeat | (默认值)水平垂直方向都平铺 |
| no-repeat | 不平铺(经常使用) |
| repeat-x | 沿x轴平铺 |
| repeat-y | 沿y轴平铺 |
4.背景位置
5.背景连写顺序
推荐：background:color image repeat position(中间用空格分开)
6.6.1（拓展）img标签和背景图片的区别
需求：需要在网页中展示一张图片的效果？
方法一：直接写上img标签即可
img标签是一个标签，不设置宽高默认会以原尺寸显示
方法二：div标签+背景图片需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签
3-1元素显示模式
1.块级元素
显示特点
1.独占一行(一行只能显示一个)
2.宽度默认是父元素的宽度,高度默认由内容撑开
3.可以设置宽度
代表标签
div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer......
2.行内元素
显示特点
1.一行可以显示多个
2.宽度和高度默认又内容撑开
3.不可设置宽高
代表标签
a、span、b、u、i、s、strong、ins、em、del......
3.行内块元素
显示特点：
1.一行可以显示多个
2.可以设置宽高
代表标签：
input、textarea、button、select..
4.1元素转换
| 属性 | 效果 | 使用频率 |
|---|---|---|
| display:black | 转换成块级元素 | 较多 |
| display:inline-black | 转换成行内块元素 | 较多 |
| display:inline | 转换成行内元素 | 极少 |
拓展
HTML嵌套规范注意点
1.块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等.…
但是：p标签中不要嵌套div、p、h等块级元素
2.a标签内部可以嵌套任意元素
但是：a标签不能嵌套a标签
拓展2：居中方法总结
