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

一，前言

第二天，今天看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就差不多了。