文章目录

前言
CSS基本语法
CSS选择器
- CSS基本选择器
- - 标签选择器 p
  - 类选择器 .p
  - ID选择器 #p
- CSS后代选择器 div p
- CSS子选择器 div>p
- CSS群组选择器 p,p1
- CSS伪类选择器
- - :first-of-type 父类第一个
  - :last-of-type 父类最后一个
  - :nth-of-type(n) 父类第n个
CSS使用方式
- 行内样式
- 内嵌样式
- 外部样式
CSS优先级
CSS层叠特性
CSS继承特性

前言

提示：这里可以添加本文要记录的大概内容：
前端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;
}

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> 元素，并将它的文本颜色设置为蓝色

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>