文章目录
前言
提示：这里可以添加本文要记录的大概内容：
前端CSS是用于控制网页样式和布局的一种技术
提示：以下是本篇文章正文内容，下面案例可供参考
CSS基本语法
如何在HTML中添加CSS样式？
在HTML中使用<style>标签来编写CSS代码，或者使用<link>标签引用外部CSS文件
示例代码1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<!-- style标记中编写css代码 -->
<style>
/* 选择器body */
body {
/* 大括号内是一项项具体的样式声明---属性名冒号空格具体值; */
background-color: lightblue;
}
</style>
</head>
<body>
<p>你好世界！</p>
</body>
<!-- 使用 link 标签引用外部CSS文件 -->
<link rel="stylesheet" href="styles.css">
</html>
输出效果：
如果把 body选择器改成 p选择器：
p选择器和body选择器的区别：
body选择器：body选择器用于选择HTML文档中的<body>元素。它是文档的根元素，只能出现一次。body选择器通常用来设置全局样式
p选择器：p选择器用于选择HTML文档中的<p>元素，即段落元素
CSS选择器
CSS基本选择器
如何选择元素并应用样式？
使用CSS选择器来选择要应用样式的元素。常见的选择器有标签选择器、类选择器、ID选择器等。
标签选择器 p
标记选择器的名字就是某一个标记的名字，可以选择多个相同类项的标记
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
/* 标签选择器 */
p {
color: red;
}
</style>
</head>
<body>
<p>你好世界！</p>
</body>
</html>
输出效果：
类选择器 .p
类选择器名字前加. 名字自定义，可以选择多个不同类型的标记 ，使用最多
必须给标记设置class属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
/* 类选择器 */
.my-class {
font-weight: bold;/* 字体加粗 */
color: green;
}
</style>
</head>
<body>
<p class="my-class">爱上对方过后...</p>
<h1 class="my-class">手机大减价</h1>
</body>
</html>
输出效果：
ID选择器 #p
ID选择器前加#
选择器名字必须是某个标记的ID属性值，只能选择一个标记 （唯一），精准控制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
/* ID选择器 */
#my-id {
color:cornflowerblue;
}
</style>
</head>
<body>
<a href="https://rej177.blog.csdn.net/article/details/131234394" id="my-id">二哈喇子！</a>
</body>
</html>
输出效果：
如何设置元素的尺寸和布局？
使用CSS属性来设置元素的尺寸和布局，如width、height、margin、padding等
示例代码：
/* 设置宽度和高度 */
.my-element {
width: 200px;
height: 100px;
}
/* 设置外边距和内边距 */
.my-element {
margin: 10px;
padding: 20px;
}
如果是移动端，用单位：vw
100vw（移动端）相当于100% 百分比的意思
CSS后代选择器 div p
该选择器使用了空格符号 将父元素和子元素进行连接，表示只选择父元素中与子元素符合条件的元素
后代选择器，用于选择某个元素的后代元素，选择器中间加空格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
div p {
color: blue;
}
</style>
</head>
<body>
<h3>标题1</h3>
<div>
<h2>标题2</h2>
<p>段落1</p>
</div>
</body>
</html>
输出结果：
解释：上述代码中的 div p 后代选择器选择了 <div> 元素下的 <p> 元素，并将它的文本颜色设置为蓝色
【案例】另一个例子：
<ul class="food-type">
<li>
<img src="./img/dcfl01.png" alt="">
<p>美食</a></p>
</li>
<ul>
这段HTML代码使用后代选择器：
.food-type li{
width: 18vw;
height: 20vw;
/* 弹性布局 */
display: flex;
justify-content: center;
align-items: center;
}
上面的代码中.food-type li是一个后代选择器，它的作用是选择所有类名为"food-type"的父元素中的所有<li>子元素，也就是选择所有列表项。
在本例中，.food-type是父元素的类名，而li是子元素的标签名，因此.food-type li选择器表示匹配所有.food-type中的li元素。
CSS子选择器 div>p
子选择器中间加>号 ，选择第一代
【示例代码】：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
div>span{
color: #79a3e0;
}
</style>
</head>
<body>
<!-- div>span+p>span 公式生成 -->
<!-- 首先一个大div，里面一个span一个p，p里面又放了个span -->
<div>
<span>范围一</span> <!-- 儿子 -->
<p><span>范围二</span></p> <!-- 孙子 -->
</div>
</body>
</html>
输出结果：
如何创建响应式布局？
使用CSS媒体查询来创建响应式布局，根据不同的屏幕尺寸应用不同的样式。示例代码：
@media (max-width: 600px) {
/* 在窄屏幕上应用的样式 */
.my-element {
font-size: 14px;
}
}
@media (min-width: 601px) {
/* 在宽屏幕上应用的样式 */
.my-element {
font-size: 18px;
}
}
CSS群组选择器 p,p1
使用群组选择器，多个选择器之间逗号分割
群组选择器：多个选择器所选择的标记，公用这一段{}内样式，共享
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
p,.lei{
font-size: 24px;
color: green;
}
</style>
</head>
<body>
<p>段落</p>
<h1 class="lei">一级标题</h1>
</body>
</html>
输出效果：
CSS伪类选择器
伪类选择器不能单独使用，跟在其他选择器后面
使用伪类选择器时，需要在要选择的元素名称后面添加冒号和伪类选择器
CSS伪类选择器是一种用于选择元素状态的选择器
:first-of-type 父类第一个
用于选择一个父元素中特定类型的第一个元素
【示例代码】：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
li:first-of-type {
color: red;
}
</style>
</head>
<body>
<ul>
<li>第一个项目</li>
<li>第二个项目</li>
<li>第三个项目</li>
<div>第一个div</div>
<div>第二个div</div>
</ul>
</body>
</html>
输出结果：
这将第一个项目的文字颜色更改为红色（前三个<li>元素中的第一个）
请注意：这个选择器只作用于<li>元素，而不作用于<div>元素。如果需要选择特定类型的第一个元素，如第一个<div>元素，则必须使用不同的伪类选择器，如:first-of-type
div:first-of-type {
background-color: blue;
}
/* 这将选择第一个<div>元素并将其背景颜色更改为蓝色 */
:last-of-type 父类最后一个
用于选择一个父元素中特定类型的最后一个元素
【示例代码】：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
li:last-of-type {
color: red;
}
</style>
</head>
<body>
<ul>
<li>第一个项目</li>
<li>第二个项目</li>
<li>第三个项目</li>
<div>第一个div</div>
<div>第二个div</div>
</ul>
</body>
</html>
输出结果：
:nth-of-type(n) 父类第n个
①、:nth-of-type(n)用于选择父元素中特定类型的第n个元素
如果是:nth-of-type(3n)，代表3的倍数个标记，4n：4的倍数个标记
【示例代码】：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
li:nth-of-type(2) {
color: red;
}
</style>
</head>
<body>
<ul>
<li>第一个项目</li>
<li>第二个项目</li>
<li>第三个项目</li>
<div>第一个div</div>
<div>第二个div</div>
</ul>
</body>
</html>
输出结果：
②、:nth-of-type(odd)选择所有奇数元素
【示例代码】：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
li:nth-of-type(odd) {
color: green;
}
</style>
</head>
<body>
<ul>
<li>第一个项目</li>
<li>第二个项目</li>
<li>第三个项目</li>
<div>第一个div</div>
<div>第二个div</div>
</ul>
</body>
</html>
输出结果：
③、:nth-of-type(even)选择所有偶数元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
li:nth-of-type(even) {
color: gold;
}
</style>
</head>
<body>
<ul>
<li>第一个项目</li>
<li>第二个项目</li>
<li>第三个项目</li>
<div>第一个div</div>
<div>第二个div</div>
</ul>
</body>
</html>
输出结果：
CSS使用方式
行内样式的CSS代码直接编写在某个标记的style属性中
局限性：只在这一个标记有效，不建议使用，但在一些情况下，它可能是必要的，特别是当需要快速测试某个样式是否有效时
行内样式
<body>
<h1 style="color: navy; font-size: 36px;">Hello, World!</h1>
</body>
内嵌样式
在HTML文件的<head>标签中使用<style>标签来定义CSS样式，【简单说就是】：内嵌样式的CSS代码编写在style标签中
局限性：只在当前界面中有效
【示例代码】：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
font-size: 36px;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
输出效果：
外部样式
将CSS代码编写在单独的.css文件中，某一个HTML需要使用外部样式文件，必须使用<link>标签【link:css】引入
外部样式优点：
- HTML和CSS完全分开，便于代码维护
- 一个外部的CSS文件可以被多个HTML文件共同使用，便于系统界面的样式统一
案例：
以下例子代码写在了同一个文件夹中
【例1】
新建一个HTML文件，在HTML文件中：
【示例代码】：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<link rel="stylesheet" href="./common.css">
</head>
<body>
<h1>你好，外部样式</h1>
<p class="h">外部样式，你好</p>
</body>
</html>
在common.css文件中：
body {
background-color: lightblue;
}
.h {
color: navy;
font-size: 58px;
}
输出结果：
【例2】
另外新建一个HTML文件（便于观察：一个外部的CSS文件可以被多个HTML文件共同使用，便于系统界面的样式统一）
【示例代码】：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./common.css">
</head>
<body>
<p class="h">HELLO WORLD!</p>
</body>
</html>
如果要改样式只需要更改css文件中的样式，运行两个HTML文件后，样式均会被改变
CSS优先级
相同类型的选择器，代码靠后的优先级高，而!important声明具有最高优先级
不同类型的选择器，id>类>标签
【示例代码】：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
p{
color: red;
/* 在red后面加上!important声明，则会显示红色 */
}
p{
color: blue;
}
/* 选择器一样，以后面的为准 */
.lei{
color: yellow;
}
#id{
color: darkgreen;
}
</style>
</head>
<body>
<p class="lei" id="id">我是啥色</p>
</body>
</html>
输出结果：
CSS层叠特性
层叠性：多段样式代码在同一个标记上叠加生效
【示例代码】：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
p{
color: green;
}
.abc{
font-size: 50px;
}
.xyz{
background-color: skyblue;
}
</style>
</head>
<body>
<p class="abc xyz">层叠特性</p>
</body>
</html>
输出结果：
CSS继承特性
CSS继承特性是指某些样式属性可以自动从父元素继承到子元素上，从而使得子元素的样式表现与父元素的样式表现类似。
CSS中有许多样式属性都具有继承特性，例如字体、颜色、行高、文本对齐、字间距等。如果某个元素没有指定这些属性，那么该元素将从其父元素中继承这些属性。
下面演示了CSS继承特性在HTML中的应用：
【示例代码】：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<title>CSS继承特性</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
}
h1 {
color: red;
font-size: 30px;
font-weight: bold;
}
p {
color: green;
line-height: 1.5;
}
.note {
font-style: italic;
}
</style>
</head>
<body>
<h1>CSS继承特性</h1>
<p>在 CSS 中，许多属性可以被子元素继承。通过继承，可以使得网页设计变得更加简洁明了</p>
<p class="note">注意：并不是所有的属性都可以被继承，比如背景色（background）和边框（border）等都不能被继承</p>
</body>
</html>
输出效果：
在上面的代码中，首先定义了一个样式规则，它应用到 body 元素上，设置了字体和字体大小。因为没有明确指定其他元素的字体，所以所有子元素都会继承这个样式。
接下来定义了一个样式规则，应用到 h1 元素上，设置了颜色、字体大小和粗细。这个样式规则会覆盖之前定义的字体样式，但是字体大小和粗细会被继承到 h1 的子元素中。
然后定义了一个样式规则，应用到 p 元素上，设置了颜色和行高。这个样式规则同样会继承前面的字体样式，但是颜色和行高属性会覆盖前面的样式规则。
最后定义了一个类 .note，应用于一个 p 元素上，设置了字体样式为斜体。这个样式规则同样会继承前面的字体样式和颜色属性，但是字体样式会覆盖前面的样式规则。
扫一扫
1447
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
