当前位置：首页 > article >正文

杏仁海棠花饼的学习日记第十四天CSS

article 2025/9/21 6:05:24

一，前言

第二天，今天看CSS。

二，CSS简介及导入方式

CSS简介

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述 HTML 或 XML（包括 SVG、XHTML 等）文档呈现效果的样式语言。它通过定义元素的外观和布局，使网页内容更加美观、一致且易于阅读。下面我将从多个方面对 CSS 进行详细介绍。

导入方式

1. 外部样式表（推荐）

通过<link>标签引入外部 CSS 文件，是最常用的导入方式。

 <link rel="stylesheet" href="./CSS/style.css">

优点：

代码分离，提高可维护性
支持浏览器缓存，提升加载速度
多页面共享，减少代码重复

适用场景：

网站整体样式
多页面共享的通用样式
需要缓存的大型项目

2. 内部样式表

在 HTML 文档的<head>部分使用<style>标签定义 CSS。

<style>.internal-style {background-color: #e6f7ff;padding: 10px;}
</style>

优点：

无需额外 HTTP 请求
适用于单页应用的特殊样式

缺点：

无法缓存，影响性能
代码无法在多页面共享

适用场景：

仅当前页面使用的特殊样式
小型单页应用

3. @import 规则

在 CSS 文件或<style>标签中使用@import导入其他 CSS 文件。

@import url("additional-styles.css");
@import url("https://fonts.googleapis.com/css2?family=Inter");

优点

支持模块化 CSS
适合导入外部资源（如字体）

缺点：

加载顺序问题（后导入的可能覆盖前面的）
性能较差（串行加载）

适用场景：

模块化 CSS 结构
导入外部字体或第三方样式库

4. 内联样式

直接在 HTML 元素的style属性中定义样式。

<div style="background-color: #fff2e8; padding: 10px;">内联样式内容
</div>

优点：

优先级最高，可覆盖其他样式
适合 JavaScript 动态修改样式

缺点：

代码难以维护
无法复用
影响 HTML 结构与 CSS 分离原则

适用场景：

需要立即生效的特殊样式
JavaScript 动态生成的样式

5.优先级

内联样式>内部样式表>外部样式表

6.最佳实践建议

优先使用外部样式表：对于大多数项目，这是最推荐的方式
谨慎使用内联样式：仅在必要时使用，避免滥用
避免过度使用 @import：除非必要，否则使用<link>代替
保持 CSS 模块化：将样式按功能或组件拆分到不同文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS导入方式</title><link rel="stylesheet" href="./CSS/style.css"><style>p{color: red;font-size: 16px;}</style>
</head>
<body><h1 style="color: green;">你好</h1><p>你好</p><h3>你好</h3></body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

三，CSS语法

1.选择器

选择器用于选择 HTML 文档中的元素，CSS 提供了多种类型的选择器：

1. 元素选择器

选择 HTML 元素类型：

/* 选择所有段落元素 */
p {color: red;
}/* 选择所有标题元素 */
h1, h2, h3 {font-family: Arial;
}

2. 类选择器

选择具有特定class属性的元素：

/* 选择所有class="highlight"的元素 */
.highlight {background-color: yellow;
}/* 选择所有class="btn"的元素 */
.btn {padding: 10px 20px;
}

3. ID 选择器

选择具有特定id属性的元素：

/* 选择id="main-header"的元素 */
#main-header {border-bottom: 2px solid #ccc;
}

4.通用选择器

 /* 通用选择器 */*{font-family: kaiti;}

5.子元素选择器

6.后代选择器

  /* 子元素选择器 */.father .son{font-size: large;}/* 后代选择器 */.father .grandson{font-size: small;}
<div class="father"><p class="son">这是一个子元素选择器实例</p><div><p class="grandson">这是一个后代选择器实例</p></div></div>

7.相邻兄弟选择器

 /* 相邻兄弟选择器 */h3 + p{color:blue;}
<p>祝大家天天开心</p><h3>这是一个相邻兄弟选择器实例</h3><p>平平安安</p>

8. 伪类选择器

选择处于特定状态的元素：

/* 选择鼠标悬停的链接 */
a:hover {text-decoration: underline;
}/* 选择第一个子元素 */
li:first-child {font-weight: bold;
}/* 选择偶数行的表格行 */
tr:nth-child(even) {background-color: #f2f2f2;
}

9. 伪元素选择器

选择元素的特定部分：

/* 在每个段落前添加内容 */
p::before {content: "» ";color: red;
}/* 选择文本的第一行 */
p::first-line {font-weight: bold;
}

10. 组合选择器

组合多个选择器以创建更精确的选择：

/* 后代选择器：选择article内的所有段落 */
article p {margin-bottom: 15px;
}/* 子元素选择器：选择直接子元素 */
ul > li {list-style-type: square;
}/* 相邻兄弟选择器：选择紧跟在h2后的p */
h2 + p {font-style: italic;
}/* 通用兄弟选择器：选择h2后的所有p */
h2 ~ p {color: #666;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>/* 元素选择器 */h2{color: red;}/* 类选择器 */.red{color: red;}/* ID选择器 */#red{color: red;}/* 通用选择器 */*{font-family: kaiti;}/* 子元素选择器 */.father .son{font-size: large;}/* 后代选择器 */.father .grandson{font-size: small;}/* 相邻兄弟选择器 */h3 + p{color:blue;}/* 伪类选择器 */#element:hover{background-color: pink;}/* 伪元素选择器 在选择的元素前后插入虚拟的内容*/h3::before{content: "Hello ";color: red;}p ::after{content: " World";}</style>
</head>
<body><h1>不同类型的CSS选择器</h1><h2>这是一个元素选择器实例</h2><h3 class="red">这是一个类选择器实例</h3><h4 id ="red" >这是一个ID选择器实例</h4><div class="father"><p class="son">这是一个子元素选择器实例</p><div><p class="grandson">这是一个后代选择器实例</p></div></div><p>祝大家天天开心</p><h3>这是一个相邻兄弟选择器实例</h3><p>平平安安</p>
<h3 id="element">这是一个伪类选择器实例</h3>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

四，CSS属性

CSS属性有上百个，并不需要全部学习。学一点常用的就好了剩下的要么重复要么使用频率很低。

CSS属性可以在官网菜鸟教程等查到。

属性是用于控制 HTML 元素外观和格式的指令，在前面也学了一些像字体颜色等属性。

一、文本属性

控制文本的字体、大小、颜色、对齐方式等。

/* 文本样式示例 */
p {color: #333; /* 文本颜色 */font-family: Arial, sans-serif; /* 字体族 */font-size: 16px; /* 字体大小 */font-weight: bold; /* 字体粗细 */text-align: center; /* 文本对齐 */text-decoration: underline; /* 文本装饰 */line-height: 1.5; /* 行高 */letter-spacing: 1px; /* 字符间距 */
}

二、盒模型属性

控制元素的宽度、高度、内边距、外边距和边框。

/* 盒模型示例 */
div {width: 300px; /* 宽度 */height: 200px; /* 高度 */padding: 20px; /* 内边距 */margin: 10px; /* 外边距 */border: 1px solid #ccc; /* 边框 */box-sizing: border-box; /* 盒模型计算方式 */
}

三、背景属性

控制元素的背景颜色、图片和位置。

/* 背景示例 */
body {background-color: #f5f5f5; /* 背景颜色 */background-image: url('bg.jpg'); /* 背景图片 */background-repeat: no-repeat; /* 是否重复 */background-position: center; /* 背景位置 */background-size: cover; /* 背景大小 */
}

四、定位属性

控制元素在页面中的定位方式。

/* 定位示例 */
.parent {position: relative; /* 相对定位 */
}.child {position: absolute; /* 绝对定位 */top: 10px; /* 距离顶部 */right: 10px; /* 距离右侧 */z-index: 1; /* 层级顺序 */
}.fixed {position: fixed; /* 固定定位 */bottom: 0; /* 固定在底部 */
}

五，复合属性

复合属性（Shorthand Properties）是 CSS 中用于同时设置多个相关属性的简写方式，能简化代码并提高可读性。

`font`

功能：设置字体的样式、大小、行高、粗细和字体系列。

font: italic bold 16px/1.5 Arial, sans-serif;/* 等价于 */
font-style: italic;
font-weight: bold;
font-size: 16px;
line-height: 1.5;
font-family: Arial, sans-serif;

1. `margin` 和 `padding`

功能：设置元素的外边距和内边距。
值顺序：上、右、下、左（顺时针）其他的相似的也是按照此顺序

/* 单值：四边相同 */
margin: 10px;/* 双值：上下 / 左右 */
margin: 10px 20px;/* 三值：上 / 左右 / 下 */
margin: 10px 20px 30px;/* 四值：上 / 右 / 下 / 左 */
margin: 10px 20px 30px 40px;

五、CSS元素分类

CSS 元素分类：块级元素、行内元素、行内块元素

在 CSS 中，HTML 元素根据其默认的显示行为（display属性）可分为三大类：块级元素、行内元素和行内块元素。

一、块级元素

特点

独占一行：无论内容多少，都会在页面中单独占据一行。
可设置宽度和高度：默认宽度为父元素的 100%，但可以通过width属性调整。
可包含其他元素：可以包含块级元素和行内元素。
支持盒模型属性：如margin、padding、border等。

常见块级元素

<div>、<p>、<h1>~<h6>、<ul>、<li>、<form>、<header>、<footer>

二、行内元素

特点

不换行：多个行内元素会在同一行显示，直到空间不足。
宽度和高度由内容决定：无法通过width和height属性设置。
仅包含行内元素：不能包含块级元素。
盒模型限制：水平方向的margin和padding有效，但垂直方向的margin无效，padding会显示但不影响布局。

常见行内元素

<a>、<span>、<img>、<input>、<label>、<select>、<textarea>、<b

三、行内块元素

特点

不换行：多个行内块元素会在同一行显示。
可设置宽度和高度：可以通过width和height属性调整。
支持盒模型属性：水平和垂直方向的margin、padding和border均有效。
元素间有间隙：由于 HTML 中的换行符、空格等会导致元素间出现间隙（约 4px）。

常见行内块元素

<img>、<input>、<button>、<select>、<textarea>

四、转换元素类型

可以通过display属性修改元素的类型：

/* 转换为块级元素 */
span {display: block;
}/* 转换为行内元素 */
div {display: inline;
}/* 转换为行内块元素 */
p {display: inline-block;
}

五、盒子模型

CSS 盒子模型是网页布局的核心概念，它描述了元素在页面中所占空间的计算方式。理解盒子模型对于精确控制元素大小、间距和布局至关重要。

一、盒子模型的组成部分

一个元素在页面中所占的空间由以下部分组成（从内到外）：

内容区（Content）
- 元素实际包含的文本、图片等内容。
- 通过 width 和 height 属性设置。
内边距（Padding）
- 内容区与边框之间的距离。
- 通过 padding-top、padding-right、padding-bottom、padding-left 或简写属性 padding 设置。
边框（Border）
- 围绕内容区和内边距的线条。
- 通过 border-width、border-style、border-color 或简写属性 border 设置。
外边距（Margin）
- 元素与其他元素之间的距离。
- 通过 margin-top、margin-right、margin-bottom、margin-left 或简写属性 margin 设置。

二、盒子模型的计算方式

元素的总宽度 = width + padding-left + padding-right + border-left-width + border-right-width
元素的总高度 = height + padding-top + padding-bottom + border-top-width + border-bottom-width

注意：默认情况下，width 和 height 仅包含内容区，不包含内边距、边框和外边距。

三、示例代码

.box {width: 300px;        /* 内容区宽度 */height: 200px;       /* 内容区高度 */padding: 20px;       /* 内边距：上下左右均为20px */border: 5px solid red; /* 边框：宽度5px，实线，红色 */margin: 30px;        /* 外边距：上下左右均为30px */
}/* 总宽度 = 300 + 20*2 + 5*2 + 30*2 = 410px */
/* 总高度 = 200 + 20*2 + 5*2 + 30*2 = 310px */

六，浮动

浮动`属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘,这样即
可使得元素进行浮动

注意:浮动是相对于父元素浮动,只会在父元素的内部移动

语法:

选择器{
float: left/right/none;
}

浮动没有缝隙

浮动三大特性

1.脱标：脱离标准流。
2.一行显示，顶部对齐
3.具备行内块元素特性

属性

left：元素向左浮动。
right：元素向右浮动。
none（默认值）：元素不浮动。
inherit：继承父元素的浮动值。

控制元素的浮动方向和清除浮动。

/* 向左浮动 */
.float-left {float: left;margin-right: 20px;
}/* 向右浮动 */
.float-right {float: right;margin-left: 20px;
}/* 清除浮动两种方法 还有别的方法这两种最简单*/
.clear {clear: both;
}
.clearfix::after {content: "";display: table;clear: both; /* 清除浮动 */
}

七，定位

CSS 定位是控制元素在页面中位置的核心机制。通过position属性，可以精确控制元素的位置、层级和布局方式。

**一、定位方式：

相对定位：相对于元素在文档流中的正常位置进行定位。
绝对定位：相对于其最近的已定位祖先元素进行定位，不占据文档流。
固定定位：相对于浏览器窗口进行定位。不占据文档流，固定在屏幕上的位置，不随滚动而移动

1. `position`属性的取值

static（默认值）：元素按正常文档流排列，top、left等属性无效。
relative：相对定位，相对于元素的正常位置偏移。
absolute：绝对定位，相对于最近的已定位祖先元素（position≠static）。
fixed：固定定位，相对于浏览器窗口，滚动时位置不变。
sticky：粘性定位，在滚动时固定在某个位置，直到滚动到父元素边界。

2. 偏移属性

top、right、bottom、left：控制元素的偏移位置。
z-index：控制元素的层级顺序，值越大越靠前。

二、相对定位（Relative）

特点

元素仍占据原文档流位置。
相对于正常位置进行偏移。
不会影响其他元素的布局。

示例

.relative {position: relative;top: 20px;     /* 向下偏移20px */left: 30px;    /* 向右偏移30px */
}

三、绝对定位（Absolute）

特点

元素脱离文档流，不占据空间。
相对于最近的已定位祖先元素。
宽度默认由内容决定。

示例

.parent {position: relative;  /* 作为定位参考 */
}.absolute {position: absolute;top: 10px;right: 10px;width: 200px;
}

四、固定定位（Fixed）

特点

元素脱离文档流，相对于浏览器窗口。
滚动时位置保持不变。
常用于导航栏、返回顶部按钮等。

示例

.fixed {position: fixed;bottom: 20px;right: 20px;

五、粘性定位（Sticky）

特点

元素在滚动时固定在某个位置。
初始时按文档流排列，滚动到特定位置后固定。
相对于最近的滚动祖先元素。

示例

.sticky {position: sticky;top: 0;        /* 滚动到顶部时固定 */background: white;z-index: 100;
}

OK，CSS就差不多了。

一，前言

二，CSS简介及导入方式

CSS简介

导入方式

1. 外部样式表（推荐）

2. 内部样式表

3. @import 规则

4. 内联样式

5.优先级

6.最佳实践建议

三，CSS语法

1.选择器

1. 元素选择器

2. 类选择器

3. ID 选择器

4.通用选择器

5.子元素选择器

6.后代选择器

7.相邻兄弟选择器

8. 伪类选择器

9. 伪元素选择器

10. 组合选择器

四，CSS属性

一、文本属性

二、盒模型属性

三、背景属性

四、定位属性

五，复合属性

font

1. margin 和 padding

五、CSS元素分类

一、块级元素

特点

常见块级元素

二、行内元素

特点

常见行内元素

三、行内块元素

特点

常见行内块元素

四、转换元素类型

五、盒子模型

一、盒子模型的组成部分

二、盒子模型的计算方式

三、示例代码

六，浮动

语法:

浮动三大特性

属性

七，定位

**一、定位方式：

1. position属性的取值

2. 偏移属性

二、相对定位（Relative）

特点

示例

三、绝对定位（Absolute）

特点

示例

四、固定定位（Fixed）

特点

示例

五、粘性定位（Sticky）

特点

示例

相关文章：

`font`

1. `margin` 和 `padding`

1. `position`属性的取值