一．css层叠样式表
html相当于结构，css相当于装修网页的美化
如何嵌入，样式如何显示html元素，样式通常是存储在样式表中，把样式表添加到HTML元素里
定义css样式的方式
\1. 行内样式
style后面写的就代表层叠样式表
如果当前的样式不需要复用，，可以用，要不然会有垃圾
<body>
<!-- 行内样式，内联样式 -->
<p style="background: rgb(0, 255, 85);">I love Java</p>
<span style="background: rgb(0, 255, 85);">I love css</span>
<h1 style="background: rgb(0, 255, 85);">i love html</h1>
</body>
\2. 内页样式（嵌入样式）
首先给样式定义名字，然后对象根据想要的效果选择相应的样式
同样是style,只不过变成了标签
（1）标签选择器
（2）类选择器，声明仰视的时候需要用一个英文的，选择样式通过class属性不需要写.
（3）id选择器
声明样式需要用一个#，对应的元素的id要匹配
<head>
<style>
/* 标签选择器：可以让页面上所有的p标签都有对应的样式 */
p {
background: red;
}
span {
background: yellow;
}
/* 声明一个样式，并起个名字 */
/* 类选择器 */
/* 标签选择器和类选择器哪个优先级高？ */
.bg {
background: blue;
}
/* id选择器 */
#spring {
background: purple;
}
</style>
</head>
<body>
<p>i love java</p>
<p style="background: green;">i love html</p>
<div class="bg">i love mysql</div>
<span>i love css</span>
<div id="spring">i love spring</div>
</body>
\3. 外部样式（跨页面，推荐）
<head>
<!-- 引入外部的css样式 -->
<link rel="stylesheet" href="css/my.css">
</head>
插件推荐
Audo close自动关闭标签;Audo rename tag自动修改，自动重命名;Highlight matching tag高量匹配
Vscode-icons ;Code spell checker英语单词监测;Html css support属性更明显;Auto save on window 自动保存;Html format 保存的时候格式化
二．css选择器
更加复杂的选择器
（4）Div,p并列选择器:可以同时选多个选择器
<head>
<style>
/* 页面上所有的div和p的样式都一样 */
div,p {
color: yellow;
}
</style>
</head>
<body>
<p class="font">我是p</p> -->
<div>我是div2</div>
<p>我是p2</p>
</body>
（5) Div p只要是里面的，都能划伤
（6) Div>p 只要是div的p就能够画上
<head>
<style>
/* div里面的所有p */
div p {
color: purple;
}
/* 只要是div里面的p，一一对应 */
div > p {
color: orange;
}
</style>
</head>
<body>
<div>
<p>我是div里的p1</p>
<p>我是div里的p2</p>
<span>
<p>我是div里的span里的p</p>
</span>
<div>
<p>我是div里的div里的p</p>
</div>
</div>
<p>我是div外的p</p>
</body>
（7) Div+p
<head>
<style>
/* 选中紧跟着div的p */
div+p {
color: blue;
}
</style>
</head>
（8) 【type】选中页面上所有带有type的标签
（9) 【type=text】再选择
[type~=t]
<head>
<style>
/* 属性选择器 */
[class~=font]{
height: 100px;
}
</style>
</head>
<body>
<input type="text" name="username" title="flower">
<input type="password">
<p>我是p</p>
</body>
伪类选择器：llink:hover:active:vixited
<head>
<style>
/* 默认样式 */
a:link {
color: red;
}
/* 鼠标悬停样式 */
a:hover {
color: green;
}
/* 元素被激活 */
a:active {
color: blue;
}
/* 点过的链接 */
a:visited {
color: gray;
}
</style>
</head>
<body>
<a href="#">超级链接</a>
Nth-child选中第几个对应的元素
<head>
<style>
li:nth-child(3) {
color: red;
}
tr:nth-child(2n) {
background: red;
}
tr:hover {
background: yellow;
}
</style>
</head>
<body>
<ul>
<li>我是li</li>
<li>我是li</li>
</ul>
<ol>
<li>我是ol</li>
<li>我是ol</li>
</ol>
<table border="1">
<tr>
<td>1111</td>
<td>1111</td>
</tr>
<tr>
<td>1111</td>
<td>1111</td>
</tr>
<tr>
<td>1111</td>
<td>1111</td>
</tr>
</table>
</body>
:checked选中所有被选中的元素;
disabled 属性规定应该禁用 input 元素。被禁用的 input 元素既不可用，也不可点击。
<head>
<style>
[checked] {
height: 100px;
}
:disabled {
height: 100px;
}
</style>
</head>
<body>
<input type="button" disabled value="按钮">
<input type="radio" name="gender">男
<input type="radio" name="gender" checked>女
</body>
css层叠样式表特点：
层叠性；继承性；优先级；权重
css常用单位
Px像素：绝对单位，一个像素代表一个点
Em:相对单位。它会参考它的父级元素。父子元素的字体是16px，要设置元素的字体大小为2em,当前元素的字体大小就是32px
Rem:相对单位由页面决定，当我们改变了浏览器的字号设置，页面的字号也会随之发生变化。应用在老人版
百分比：相对于父级元素的比例
Table>tr3>td3 >代表层级关系 :代表过滤
*20220710上午*
1. *找路径问题*
2. *css引入*
3. *css特点*
*20220710下午*
1. *盒子*
2. *定位*
浙公网安备 33010602011771号