目录
一、概述
1.CSS名称
Cascading Style Sheet：层叠样式表
2.作用
- 布局：控制HTML元素在页面上显示的位置。
- 样式：控制HTML元素显示的边框、颜色、边距。。。
- 动态效果：鼠标悬停的时候改变颜色
二、操作
1.CSS嵌入HTML
（1）嵌入HTML标签
不推荐，会导致样式设置很分散，不利于维护。
（2）内联
使用Style标签，设定HTML页面样式。
<style>
div{
border: 2px solid blueviolet;
width: 800px;
font-family: 楷体;
color: deeppink;
font-size: 100px;
<!--设置居中的两种方式-->
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
</head>
<body>
<div>白日依山尽，</div>
<div>黄河入海流。</div>
<div>欲穷千里目，</div>
<div>更上一层楼。</div>
</body>
</html>
（3）外部
1.创建CSS文件，直接写CSS
li{
border: 2px dashed greenyellow;
text-align: center;
width: 300px;
}
li:hover{
background-color: yellow;
}2.在HTML中引入
<!– link 标签：引入外部 CSS 文件 –>
<!– ref 属性：表示引入的外部资源是个 CSS 样式文件 –>
<!– href 属性：指定外部 CSS 文件的路径 –>
<link rel=”stylesheet” href=”style/color.css”>
<link rel="stylesheet" href="color.css">
</head>
------------------------------------------------------
<ol>
<li>iasdhfakjdhflahsdj</li><br>
<li>oernsdfvherkjcxiovj</li><br>
<li>hoiafjhnbjweqrdfvdg</li><br>
</ol>
</body>
</html>
（4）优先级
如果三种标签同时设定同一个标签，则最近的生效
2.CSS选择器
用来找到目标标签
（1）HTML目标
<div>div标签</div>
<div class="big">div标签</div>
<p>p标签</p>
<p class="big">标签</p>
<li>li标签</li>
<ol>ol标签</ol>
<ul>ul标签</ul>
（2）CSS样式
/* 使用逗号分开的多个选择器使用相同设置 */
/* 标签选择器：使用 HTML 标签名作为定位依据 */
div,p {
border: 1px solid black;
width: 100px;
height: 100px;
}/* 类选择器：针对相同的 class 属性值做样式设置 */
.big {
font-size: 20px;
background-color: aqua;
}/* id选择器：根据某一个具体的 id 值，设定对应的具体一个标签 */
/* 在整个 HTML 页面中，id 值不能重复 */
#targetTag {
color: green;
font-weight: bold;
font-style: italic;
}
#abc{
color: blue;
font-family: "Times New Roman";
background-color: yellow;
font-style: italic;
}
---------------------------------------------------
<p id="abc">fjikahsdbjk</p><br>
3.常用的CSS设置
1.给表格设置边框
table {
border: 1px solid black;
border-collapse: collapse;
}
th,td {
border: 1px solid black;
}
2.给块设置边框
div,p {
border: 1px solid black;
width: 100px;
height: 100px;
}