第三次网络前端培训（CSS）
作者：互联网
CSS：层叠样式表，用来优化页面。
1、CSS基本使用
1.1、CSS基本语法
css样式由选择器和一条或多条以“；”隔开的样式声明组成。每条样式声明都包含一个css属性及值。
h1{color：yellow；background-color：red；} h1为选择器（要修改的标签），color为属性“：”后面的yellow为值。
注意：声明用{}包裹且每个样式声明以“；”结束；一般一条样式声明写一行（美观）；当值为多个单词时，用“”包裹住。
css三种使用方式：
行内样式：直接在标签上的样式，在style中，在<>内。
内部样式：定义在style标签内，style在head内，前面有选择器。
外部样式：定义在css文件中，通过link引用（在head中引用）。
<link rel="stylesheet" type="text/css" href="css/style.css" />
rel=“stylesheet”表示这是一个层叠样式表，type=“text/css”表示这是css样式，后面href表示css文件地址。
注意：当有多重样式时（如行内样式与内部样式都设置同一个标签的同一个属性时），越精确越优先，行内最精确（可以记成就近原则）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h2{
color:aqua;
}
</style> <!-- 内部样式 -->
<link rel="stylesheet" type="text/css" href="css/style.css" /><!-- 外部样式 -->
</head>
<body>
<h2>我们</h2>
<h2 style="font-family: 楷体;">我们</h2> <!-- 行内样式 -->
</body>
</html>
楷体是行内样式，颜色是内部样式，字体这么大是外部样式，在css文件中定义的。
1.2、css选择器（基本选择器）
1.2.1、通用选择器
用*表示，表示定义body中所有的*的样式，如*{color：red；} 其中*是选择器，后面所有的内容颜色属性都定义为red。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
color: bisque;
}
</style>
</head>
<body>
<div>这是一个div</div>
<div>这是一个div</div>
<p>这是一个p</p>
<span>这是一个span</span>
<br />
<font>这是一个font</font>
</body>
</html>
1.2.2、元素选择器（优先级比通用选择器高）
元素名称（标签名）{}。可对所有标签修改样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
color: red;
}
div{
color: yellow;
}
</style>
</head>
<body>
<div>这是一个div</div>
<div>这是一个div</div>
<p>这是一个p</p>
<span>这是一个span</span>
<br />
<font>这是一个font</font>
</body>
</html>
1.2.3、ID选择器（优先级比元素选择器高）
以#区分，#ID{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
color: red;
}
div{
color: yellow;
}
#div1{
color: blue;
}
</style>
</head>
<body>
<div id="div1">这是一个div1</div>
<div>这是一个div</div>
<p>这是一个p</p>
<span>这是一个span</span>
<br />
<font>这是一个font</font>
</body>
</html>
1.2.4、类选择器（优先级比元素选择器高）
以.开头，后面跟定义的类名，.class{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
color: red;
}
div{
color: yellow;
}
#div1{
color: blue;
}
.class1{
font-family: 楷体;
color: aquamarine
}
</style>
</head>
<body>
<div id="div1" class="class1">这是一个div1</div>
<div id="div1">这是一个div</div>
<div>这是一个div</div>
<p>这是一个p</p>
<span>这是一个span</span>
<br />
<font>这是一个font</font>
</body>
</html>
1.2.5、分组选择器
将多个选择器写在一起。中间英文逗号。
选择器1,选择器2,选择器3...{}满足一个选择器就可以修改样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
color: red;
}
div{
color: yellow;
}
#div1{
color: blue;
}
.class1{
font-family: 楷体;
color: aquamarine
}
div,p{
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="div1" class="class1">这是一个div1</div>
<div id="div1">这是一个div</div>
<div>这是一个div</div>
<p>这是一个p</p>
<span>这是一个span</span>
<br />
<font>这是一个font</font>
</body>
</html>
只要满足div或者p就有中划线样式。
注意：各选择器优先权重：元素选择器1，类选择器10，id选择器100，内联选择器1000（行内样式）。
1.3、css选择器（组合选择器）
说明两个选择器直接的关系
1.3.1、后代选择器（派生选择器）
以空格分隔，选择指定元素的所有指定后代元素。
选择器 指定元素{
属性名：属性值；
。。。。。。
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.food li{
border:#5555ff solid/* 实心线 */ 1px ;
}
</style>
</head>
<body>
<ul class="food">
<li>水果
<ul>
<li>苹果</li>
<li>梨</li>
<li>香蕉</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>芹菜</li>
<li>萝卜</li>
</ul>
</li>
</ul>
</body>
</html>
1.3.2、子代选择器
选择指定元素的第一代元素，用>隔开。
选择器 > 指定元素{
属性名：属性值；
。。。。。。
}
.food > li{
border:#5555ff solid/* 实心线 */ 1px ;
}
1.3.3、相邻兄弟选择器（相邻弟弟选择器，因为程序自上而下）
选择指定元素的下一个指定元素(只找一个），两者有相同父元素，中间加号分开。
选择器 + 指定元素{
属性名：属性值；
。。。。。。
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#s1 + div{
color: #0000FF;
}
</style>
</head>
<body>
<div>这是一个div1</div>
<div id="s1">这是一个div2</div>
<div>这是一个div3</div>
<div>这是一个div4</div>
</body>
</html>
注意：只有当要找到元素与前面的选择器相邻时才会执行 ，如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#s1 + div{
color: #0000FF;
}
</style>
</head>
<body>
<div>这是一个div1</div>
<div id="s1">这是一个div2</div>
<p>111</p>
<div>这是一个div3</div>
<div>这是一个div4</div>
</body>
</html>
1.3.4、普通弟弟选择器
选择指定元素后面所有指定元素，用~分隔，如下图所有红色字。
选择器 ~ 指定元素{
属性名：属性值；
。。。。。。
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#s1 + div{
color: #0000FF;
}
#s3 ~ div{
color: #FF0000;
}
</style>
</head>
<body>
<div>这是一个div1</div>
<div id="s1">这是一个div2</div>
<div>这是一个div3</div>
<div>这是一个div4</div>
<hr />
<div>这是一个div4</div>
<div>这是一个div4</div>
<div id="s3">这是一个div4</div>
<div>这是一个div4</div>
<div>这是一个div4</div>
</body>
</html>
标签：培训,这是,color,前端,样式,一个,div,选择器,CSS 来源： https://blog.csdn.net/qq_59744114/article/details/122791295