目录
css的介绍
css：层叠样式表
作用：给页面中的html标签设置样式
结构：HTML 表现：CSS 行为：JavaScript
css语法规则
css写在style标签中，style标签一般写在head标签里面，title标签下面
选择器 {
属性名：属性值；
}
css的引入方式
内嵌式：css写在style标签中，style标签通常写在head里
外连式：css写在一个单独的.css文件中，需要通过link标签在网页中引入
行内式：css写在标签的style属性中，之后会配合js使用
| 引入方式 | 书写位置 | 作用范围 | 使用场景 |
| 内嵌式 | css写在style标签中 | 当前页面 | 小案例 |
| 外联式 | css写在单独的css文件中，通过link标签引入 | 多个页面 | 项目中 |
| 行内式 | css写在标签的style属性中 | 当前标签 | 配合js使用 |
基础选择器
作用：能够使用基础选择器在html中选择元素
标签选择器
结构：标签名{css属性名：属性值；}
作用：通过标签名，找到页面中所有这类标签，设置样式
注意：
1、标签选择器选择的是一类标签，而不是单独某一个
2、标签选择器无论嵌套关系有多深，都能找到对应的标签
类选择器
结构：.类名{css属性名：属性值；}
作用：通过类名，找到页面中所有带这个类名的标签，设置样式
注意：
1、所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
2、类名可以由数字、字母、下划线、中划线组成，但不能以数字或中划线开头
3、一个标签可以同时有多个类名，类名之间以空格隔开
4、类名可以重复，一个类选择器可以同时选中多个标签
<!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>
.one {
color:green;
}
.red {
color:red;
}
.size {
font-size: 66px;
}
</style>
</head>
<body>
<p class="one">111</p>
<p class="red">222</p>
<div class="red size">类选择器</div>
</body>
</html>
id选择器
配合js加动态效果的
结构：#id属性值{css属性名：属性值；}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意：
1、所有标签上都有id属性
2、id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的，
3、一个标签上只能有一个id属性值
4、一个id选择器只能选中一个标签
<!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>
#two {
color:blue;
}
#one {
color:red;
}
</style>
</head>
<body>
<div id="two">11111</div>
<p id="one">2222</p>
</body>
</html>通配符选择器
结构：*{css属性名：属性值；}
作用：找到页面中所有的标签，设置样式
注意：
1、开发中使用极少，极特殊情况会用到
2、基础班小页面种可能会用于去除标签默认的margin和padding 内外边距
* {
margin:0;
padding:0;
}
字体和文本样式
字体样式
字体大小
属性名：font-size
取值：数字+px
注意：谷歌浏览器默认文字大小是16px
单位需要设置，否则无效
字体粗细
属性名：font-weight
取值：
关键字：
| 正常 | normal |
| 加粗 | bold |
纯数字：100-900的整百数：
| 正常 | 400 |
| 加粗 | 700 |
注意：不是所有字体都提供了九种粗细，因此部分取值页面中无变化。
实际开发中以：正常、加粗两种取值使用最多。
字体样式（是否倾斜）
属性名：font-style
取值：
正常（默认值）：normal
倾斜：italic
字体
属性名：font-family
常见取值：具体字体1，具体字体2，具体字体3，具体字体4，...,字体系列
| 系统 | 默认字体 |
| Windows | 微软雅黑 |
| macOS | 苹方 |
常见字体系列：
无衬线字体（sans-serif）：例如黑体（网页大多采用）
衬线字体（serif）：例如宋体（报刊书籍中应用广泛）
等宽字体（monospace）：例如Consolas（程序代码编写，有利于代码的阅读和编写）
div{
如果用户电脑没有安装微软雅黑，就按黑体显示文字
如果电脑没有安装黑体，就按任意一种非衬线字体系列显示
font-family：微软雅黑，黑体，sans-serif；
}
样式的层叠问题
如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效
css层叠样式表
表示样式可以一层一层的层叠覆盖，后覆盖前面
p {
color:red;
color:blue;
}
</style>
</head>
<body>
<p>1111</p>p会显示蓝色
font复合属性
属性名：font（复合属性）
取值：
font：style weight size family
省略要求：
只能省略前两个，如果省略了相当于设置了默认值
注意：如果需要同时设置单独和连写形式
要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面
p {
font: italic 700 66px 宋体;
}
div {
font: 100px 微软雅黑;
}文本样式
文本缩进
属性：text-indent
取值：
数字+px
数字+em (1 em =当前标签的font-size的大小）
p {
text-indent: 32px;
//用这个更方便 就算font-size改变也没事 text-indent：2em;
}
/*首行缩进2个字的大小 默认字号：16px*/文本水平对齐方式
属性名：text-align
取值：
| 属性值 | 效果 |
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
注意：
如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
text-align：center能让哪些元素水平居中？
1、文本
2、span标签、a标签
3、input标签、img标签
<!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>
h1 {
text-align: center;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>新闻标题</h1>
<img src="13.png" alt="">
</body>
</html>文本修饰
属性名：text-decoration
取值：
| 属性值 | 效果 |
| underline | 下划线（常用） |
| line-through | 删除线（不常用） |
| overline | 上划线（几乎不用） |
| none | 无装饰线（常用） |
注意：开发中会使用 text-decoration:none;清除a标签默认的下划线
行高
作用：控制一行的上下行间距
属性名：line-height
取值：
数字+px
倍数（当前标签font-size的倍数）
应用：
1、让单行文本垂直居中可以设置line-height：文字父元素高度
2、网页精准布局时，会设置line-height：1 可以取消上下间距
行高与font连写的注意点：
如果同时设置了行高和font连写，注意覆盖问题
font：style weight size/line-height family；
p {
//line-height: 50px;
//自己字号的1.5倍
line-height:1.5;
}谷歌调试工具
css但凡出现删除线都是被别人重叠掉的 或者自己的注释
黄色三角感叹号 css语法出问题
可以进行调试 按键盘箭头
调试可以在上边添加
也可以去掉✔
颜色常见取值
#ff0000 可以简写为#f00
标签居中
标签水平居中方法总结
margin：0 auto;
上下间距0
左右auto
注意：
1、如果需要让div、p、h（大盒子）水平居中，直接给当前元素本身设置即可
2、margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度
<!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>
div {
width: 300px;
height: 300px;
background-color: pink;
margin: 0 auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>综合案例一（新闻）
<!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>
div {
width: 800px;
height: 600px;
/* background: pink; */
margin: 0 auto;
}
/* h1 {
text-align: center;
} */
/* p {
text-align: center;
} 不是所有的p都居中*/
.center {
text-align: center;
}
.color1 {
color:#808080;
}
.color2 {
color:#87ceeb;
font-weight: 700;
}
a {
text-decoration: none;
}
.suojin {
text-indent: 2em;
}
</style>
</head>
<body>
<div>
<h1 class="center">官方：别墅套房不在价格调控范围 </h1>
<!-- <p class="center">2023-01-13 14:29 来源: 光明网</p> -->
<!-- span在同一行 -->
<p class="center">
<span class="color1">2023-01-13 14:29</span>
<span class="color2">来源：</span>
<a href="#">光明网</a>
</p>
<hr>
<p class="suojin">近日，三亚市市场监督管理局价格处工作人员表示，
酒店价格属市场调节价，政府会在春节期间对旅游客房的价格进行调控，但调控主要针对标准间，别墅套房不在调控范围。
</p>
<p class="suojin">
某在线旅游平台日前发布的《2023年春节旅游市场预测报告》显示，元旦假期期间，三亚酒店单间夜价格最高为二十万元以上，
西双版纳酒店单间夜价格最高为将近八万元。而目前两家酒店春节期间的客房，在线上预订平台上都显示已售罄。
</p>
<p class="suojin">
相关专家建议，根据市场经济规律，节假日期间酒店价格适当调高可以理解，但一定要公开透明，不能价格欺诈，
确保消费者在充分知情的情况下做出自主选择。此外，游客也可以根据自己的消费能力选择合适的酒店。
</p>
<p class="suojin">
“半个多月前，凤凰岛有海景房128元一晚，现在估计四五百元了。”三亚市民闫先生告诉记者，元旦那天，五星级酒店都处于爆满状态，不少游客来三亚游玩。
旅游项目和酒店的价格随之上涨，而旅游热门景点主要集中于亚龙湾、海棠湾，酒店价格也相对较贵。
</p>
</div>
</body>
</html>
综合案例二 （小米九号平衡车）
<!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>
body {
background-color: #f5f5f5;
}
.goods {
width: 234px;
height: 300px;
background-color: #fff;
/* margin让标签div居中 */
margin:0 auto;
/* center让内容居中 */
text-align: center;
/* 图、文字、input这类的标签内容要居中 要给父级去加 */
}
img {
width: 160px;
}
/* 产品标题 */
.title {
font-size: 14px;
line-height: 25px;
}
.info {
font-size: 12px;
color:#ccc;
line-height: 30px;
}
.money {
font-size: 14px;
color:#ffa500;
}
</style>
</head>
<body>
<!-- div是用来网页布局的，一个页面可能用无数次，原则：如果使用div，尽量使用类名控制样式 -->
<div class="goods">
<img src="./九号平衡车.jpg" alt="">
<!-- 两段段落间有空隙 之后工作用h或p完成 div标签没有特殊的样式 很干净-->
<div class="title">九号平衡车</div>
<div class="info">成年人的玩具</div>
<div class="money">1999元</div>
</div>
</body>
</html> 