20220824 第七小组 王茜
CSS
CSS层叠样式表 网页美化 html相当于布料，上色 如何嵌入 样式如何显示html元素 样式通常是存储在样式表中 把样式表添加到HTML元素中
把样式表添加到HTML中，内容与表现分离（样式和外部结构分离）
定义css样式的方式
1、行内样式
如果当前的样式不需要复用，可以用行内样式 优先级
<p style="background-color:blue">我是p1</p>
2、内联样式（嵌入样式）
（1）标签选择器 （2）类选择器：声明样式的时候需要用一个英文的.，选择样式通过class属性，不需要写. （3）id选择器：声明样式需要用一个#号，对应的元素的id要匹配
3、外部样式（推荐）
css选择器：
1、元素选择器 标签名{ }
2、id选择器 #id属性值{ }
3、类选择器 ·class属性值{ }
4、分组选择器(并集选择器)
5、复合选择器(交集选择器)
6、通配选择器
7、后代元素选择器
8、子元素选择器
9、伪类选择器
10、属性选择器
11、兄弟元素选择器1、标签选择器*：
p {
font-family: "仿宋";
}
2、类选择器*：一个标签元素是可以选择多个样式，样式名中间用空格隔开
<style>
.fontStyle {
color: red;
font-size: 20px;
font-family: "楷体";
}
.backgroundStyle{
background-color: yellow;
}
</style>
<body>
<p class="fontStyle backgroundStyle">我爱你中国</p>
</body>3、id选择器:每个标签元素的id 是唯一不能重复
<style>
#fontStyle2 {
color: blue;
font-size: 30px;
}
</style>
<body>
<input type="text" name="username">
<input type="password" name="password">
</body>4、div,p：选中页面上所有的div和p元素
5、div p：选中div里面的p，无论嵌套多少层，都可以找到
6、div>p：选中div里面的直接字标签p
7、div+p：选中紧跟着div的p
8、[type]：选中页面上所有带有type属性的标签
9、[type=text]：选中页面上所有带有type=text属性的标签
10、[type~=t]：选中页面上type属性包含单词的所有元素
11、*伪类选择器：（有顺序，如果在激活后使用悬停，悬停会被覆盖掉）
（1）a:link 初始状态
（2）a:hover 鼠标悬停
（3）a :active 激活状态
（4）a:visited 访问过的
12、nth-child()：选中第几个对应的元素
13、:checked：选中所有被选中的元素
14、属性选择器：
input[name]{
height: 100px;
font-size: 50px;
}
input[name=username] {
color: red;
}15、通配符，全部选择器：页面选择器
