CSS概述
CSS（层叠样式表，Cascading Style Sheets）是一种样式表语言，用于对HTML文档控制外观，定义布局。例如、css涉及字体、颜色、边距、高度、背景图像、高级定位等方面
CSS的主要用途：
1. 分离内容和样式
可将页面内容和表现形式分隔开，页面内容存放在HTML文档中，而用于定义表现形式的css在一个.css文件中或HTML文档的某一部分
2. 提供了丰富的样式描述
CSS提供了丰富的样式描述能力，可以精确地控制网页中每一个元素的外观和布局。例如，你可以使用CSS来设置文本的颜色、字体、大小、间距等，以及元素的背景色、边框、边距、内边距等。
3. 层叠性
CSS的层叠性（Cascading）是指当多个样式应用于同一个元素时，这些样式会按照一定的规则进行叠加和覆盖。这种机制使得你可以为不同的元素或情境定义不同的样式，并通过优先级规则来决定最终应用哪个样式。
基本语法-行内样式表
在HTML元素的style属性中直接进行添加CSS样式的方法
行内样式表直接在HTML元素中使用style属性，并在其中定义CSS属性和值。每个CSS属性和值之间使用分号（;）分隔，整个style属性的值使用引号（可以是单引号或双引号）包裹起来，但属性值本身（如颜色值）通常不需要引号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- css的基本语法 行内样式表（直接写在标签内部的属性）-->
<p style="color: indianred;font-size: 20px;font-weight: bold;">静夜思</p>
<!-- px指的是像素单位 ，font-size字体所占的像素尺寸，font-weight字体加粗-->
<!-- 那么我们利用css的行内样式表去完成一首古诗的书写 -->
<p style="color: limegreen;font-size: 16px;">床前明月光</p>
<p style="color: limegreen;font-size: 16px;">疑是地上霜</p>
<p style="color: limegreen;font-size: 16px;">举头望明月</p>
<p style="color: limegreen;font-size: 16px;">低头思故乡</p>
<!-- 当我们使用css的行内样式表使发现还不能避免冗余 -->
</body>
</html>虽然行内样式表在某些情况下（如快速测试或一次性样式）可能很有用，但它们通常不推荐用于大型或复杂的项目，原因如下：
- 难以维护：如果样式分布在HTML文件的多个位置，管理和维护这些样式将会变得困难。
- 重复代码：如果你需要在多个元素上应用相同的样式，使用行内样式表会导致代码重复。
- 无法利用CSS的强大功能：行内样式表只能用于单个元素，因此你无法利用CSS的选择器、伪类、媒体查询等强大功能。
基本语法-内嵌样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 内嵌样式表 -->
<style>
/* 对p标签的属性进行创建 */
/* 标签选择器 */
p{
font-size: 16px;
color: blueviolet;
font-weight: 100;
}
</style>
</head>
<body>
<p>静夜思</p>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</body>
</html>在HTML中的style标签中对p标签中样式进行定义
虽然内嵌样式表在某些情况下很有用，但通常不推荐在大型项目中过度使用它们。这是因为：
- 难以维护：如果你的样式分布在HTML文件的多个位置，那么管理和维护这些样式将会变得困难。
- 重复代码：如果你需要在多个元素上应用相同的样式，那么使用内嵌样式表将会导致重复的代码。
- 无法利用CSS的强大功能：内嵌样式表只能用于单个元素，因此你无法利用CSS的选择器、伪类、媒体查询等强大功能。
基本语法-外部样式表
外部样式表是将所有的样式放在或者多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式文件链接到HTML文档中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="../css/new_file.css" rel="stylesheet"/>
<!-- rel="stylesheet"为指定导入的为一个样式表文件 -->
</head>
<body>
<p>静夜思</p>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</body>
</html>p{
font-size: 16px;
color: blueviolet;
font-weight: 100;
}rel: 定义了当前文档与被链接文档之间的关系。对于CSS文件，该值通常为stylesheettype: 定义了被链接文档的MIME类型。对于CSS文件，该值通常为text/css,但在HTML5中，这个属性是可选的，因为浏览器默认将.css文件的MIME类型视为text/csshref: 指定了被链接文档的位置，可以是相对路径或绝对路径。在这个例子中，我们假设styles.css文件与HTML文件位于同一目录下
使用外部样式表的好处包括：
- 易于维护：所有的样式规则都集中在一个或多个
.css文件中，使得修改和更新样式变得更加容易。 - 代码复用：你可以在一个或多个HTML文件中引用同一个外部样式表，从而实现样式的复用。
- 提高性能：浏览器会缓存外部样式表文件，这意味着如果多个页面使用了相同的样式表，那么浏览器只需要下载一次样式表文件。
- 内容与表现分离：使用外部样式表可以使HTML文件更加专注于内容，而CSS文件则专注于表现，这符合Web开发中的“内容与表现分离”的原则。
选择器
要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这是需要用到CSS选择器
选择器（Selector） 是CSS（层叠样式表）中用于“定位”或“选择”要应用样式规则的HTML元素的方式。选择器决定了哪些元素会受到影响，而声明块则包含了这些元素应如何展示的指令
常用的选择器：
标签选择器
通过标签选择器可以选择页面中所有的指定标签
标签名{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 内嵌样式表 -->
<style>
/* 对p标签的属性进行创建 */
/* 标签选择器 */
p{
font-size: 16px;
color: blueviolet;
font-weight: 100;
}
</style>
</head>
<body>
<p>静夜思</p>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</body>
</html>类选择器
通过标签的class属性值选中一组标签
.cclass属性值{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 类选择器 */
.p1{
color: aqua;
font-size: 20px;
}
.p2{
color: aquamarine;
font-size: 16px;
}
</style>
</head>
<body>
<p class="p1">静夜思</p>
<p class="p2">床前明月光</p>
<p class="p2">疑是地上霜</p>
<p class="p2">举头望明月</p>
<p class="p2">低头思故乡</p>
</body>
</html>id选择器
通过标签的id属性选中一组标签
#id属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* id选择器 */
#id1{
color: aqua;
font-size: 20px;
}
#id2{
color: aquamarine;
font-size: 16px;
}
</style>
</head>
<body>
<p id="id1">静夜思</p>
<p id="id2">床前明月光</p>
<p id="id2">疑是地上霜</p>
<p id="id2">举头望明月</p>
<p id="id2">低头思故乡</p>
</body>
</html>通配选择器
可以用来选中页面中的所有标签
*{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 标签选择器 */
p{
font-weight: 300;
font-family: 宋体;
}
/* id选择器 */
#id{
color: blue;
font-size: 16px;
}
/* 类选择器 */
.p{
color: azure;
font-family: 楷体 ;
}
/* 通配选择器 */
*{
font-family: 楷体;
}
#id,.p{
font-weight: bold;
}
</style>
</head>
<body>
<p id="id">静夜思</p>
<p class="p">床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
<h1>作者：李白</h1>
<b>类型：古诗</b>
</body>
</html>文本
在CSS（层叠样式表）中，文本样式是一个重要的组成部分，用于控制网页中文本的外观和布局。以下是一些常见的CSS文本属性：
1. 颜色（color）
使用color属性定义文本颜色
p {
color: red;
}2.字体大小（font-size）
使用font-size属性可以设置文本字体大小
h1 {
font-size: 24px;
}也可以使用相对单位，如em、rem、%等
3. 字体家族 (Font Family)
使用font-family属性可以设置文本的字体
body {
font-family:楷体;
}如果第一个字体不可用，浏览器将尝试使用列表中的下一个字体
4.字体风格 (Font Style)
使用font-style属性可以设置文本是否为斜体
em {
font-style: italic;
}5. 字体粗细 (Font Weight)
使用font-weight属性可以设置文本的粗细
strong {
font-weight: bold;
} 也可以使用数字值，如400（正常）和700（粗体），其中700表示的字体粗细与bold相同，这也是平常见到的字体粗体
6. 文本装饰 (Text Decoration)
使用text-decoration属性可以设置文本的下划线、上划线或删除线
a {
text-decoration: none; /* 移除下划线 */
}移除超链接文本的下划线
7. 文本对齐 (Text Align)
使用text-align属性可以设置文本的水平对齐方式
div {
text-align: center; /* 居中对齐 */
}8. 文本缩进 (Text Indent)
使用text-indent属性可以设置文本的首行缩进
p {
text-indent: 2em; /* 首行缩进两个字符的宽度 */
}9. 行高 (Line Height)
使用line-height属性可以设置文本行之间的垂直间距
p {
line-height: 1.5; /* 行高为字体大小的1.5倍 */
}
10. 文本转换 (Text Transform)
使用text-transform属性可以控制文本的大小写
h1 {
text-transform: uppercase; /* 转换为大写 */
}11. 字间距 (Letter Spacing)
使用letter-spacing属性可以设置字符之间的间距
h2 {
letter-spacing: 2px; /* 字符间距增加2像素 */
}12. 词间距 (Word Spacing)
使用word-spacing属性可以设置单词之间的间距
p {
word-spacing: 5px; /* 单词间距增加5像素 */
}13. 文本阴影 (Text Shadow)
使用text-shadow属性可以为文本添加阴影效果
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 阴影向右下方偏移，模糊半径为4像素，颜色为半透明的黑色 */
}
应用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.demo1{
/* 设置字体颜色 */
color: green;
/* 设置字体的大小 */
font-size: 20px;
/* 设置相应字体 */
font-family: 楷体;
/* 设置字体的加粗 */
font-weight: 700;
/* 设置字体格式--italic(斜体) */
font-style: italic;
/* 设置文本的对齐方式————(默认left)*/
text-align: left;
/* text—... 对文本的一些修饰 */
/* 设置行高 */
line-height: 30px;
/* 指定字符的间距 */
/* 中文 */
letter-spacing: 5px;
/* 英文（分隔单词） */
word-spacing: 10px;
/* 段落首行缩进 em---当前文档中一个字符的大小 */
text-indent: 2em;
}
a{
/* 去除超链接标签的下划线 */
text-decoration: none;
/* none表示什么都没有，去除原有的多余修饰 */
}
</style>
</head>
<body>
<p class="demo1"">
在刚过去的一周，两站世界乒联（WTT）常规挑战赛在中国太原和巴西里约热内卢同时进行，均完美落幕。
国乒再度包揽WTT太原赛的全部五项冠军，雨果·卡尔德拉诺同样在主场夺得WTT巴西赛的男单冠军。
</p>
<a href="">百度</a>
</body>
</html>背景
在CSS中，你可以使用多种属性来修饰元素的背景。以下是一些常用的CSS属性，用于定制元素的背景：
1. background-color：设置元素的背景颜色
div {
background-color: #f00; /* 红色背景 */
} 2. background-image：设置元素的背景图像
div {
background-image: url('image.jpg'); /* 使用指定的图片作为背景 */
}3. background-repeat：设置背景图像是否及如何重复。
repeat：默认值，水平和垂直方向都重复。repeat-x：只在水平方向重复。repeat-y：只在垂直方向重复。no-repeat：不重复
div {
background-image: url('image.jpg');
background-repeat: no-repeat; /* 不重复背景图像 */
}4. background-position：设置背景图像的位置。
可以使用关键字（如
top,bottom,left,right,center）或百分比、像素值来定位
div {
background-image: url('image.jpg');
background-position: right top; /* 将背景图像定位到右上角 */
}5. background-size：设置背景图像的大小。
可以使用关键字（如
cover,contain）或百分比、像素值来设置大小
div {
background-image: url('image.jpg');
background-size: cover; /* 确保背景图像覆盖整个元素区域，可能部分图像不可见 */
}6. background-attachment：设置背景图像是否固定或随页面滚动。
fixed：背景图像不会随页面的其余部分滚动。local：背景图像与元素内容一起滚动。scroll：默认值，背景图像随页面的其余部分一起滚动。
div {
background-image: url('image.jpg');
background-attachment: fixed; /* 固定的背景图像 */
}7. background：这是一个简写属性，用于设置所有背景属性
div {
background: #f00 url('image.jpg') no-repeat right top fixed;
/* 简写形式，设置颜色、图像、不重复、位置（右上角）、固定 */
}注意：当使用多个背景图像时，后面的图像会覆盖前面的图像。你可以通过逗号分隔每个背景声明来设置多个背景图像。例如：
div {
background: url('image1.jpg') no-repeat left top, url('image2.jpg') no-repeat right bottom;
/* 左侧顶部显示image1.jpg，右侧底部显示image2.jpg */
}应用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
color: red;
/* 背景颜色 */
background-color: aquamarine;
width:800px;
height:600px;
/* 背景图片 */
background-image: url("../img/pear.jpg");
/* 控制背景图片是否重复 */
background-repeat: no-repeat;
/* 背景位置 */
background-position: center center;
/* 背景尺寸 */
background-size: 400px 400px;
}
</style>
</head>
<body>
<p>段落</p>
</body>
</html>css列表、css伪类、透明度、块级、行级、行级块标签、Display、div和span、盒子模型见下篇
![【代码随想录】【算法训练营】【第30天】 [322]重新安排行程 [51]N皇后 [37]解数独](https://img-blog.csdnimg.cn/direct/8f45ca00551f4c53a4542c43ea51c335.png)
