【CSS3】练气篇

hrrrrb2025-03-09 14:06

目录

CSS 基本概念

CSS 的定义

CSS（Cascading Style Sheets）即层叠样式表，是一种用于描述网页呈现样式的标记性语言，主要用于定义 HTML（超文本标记语言）或 XML（可扩展标记语言）文档的显示风格。

CSS 的作用

CSS 可以用来设置网页元素的字体、颜色、大小、布局、背景等各种样式属性。通过将样式与内容分离，使得网页的维护和更新更加容易，同时也提高了网页的性能和用户体验。例如，通过 CSS 可以将整个网站的标题字体统一设置为某种特定的字体和大小，而无需在每个 HTML 文件中单独设置。

CSS 语法

CSS 语法由选择器（Selector）和声明块（Declaration Block）组成。

css 复制代码 
选择器{
    属性名 : 属性值;
}

选择器用于指定要应用样式的 HTML 元素，声明块则包含一个或多个属性 - 值对，用于定义元素的样式。

css 复制代码 
p {
  color: blue;
  font-size: 16px;
}

上述代码中，p是选择器，表示要选择所有的<p>标签元素；color: blue;和font-size: 16px;是声明块中的属性 - 值对，分别设置了文本颜色为蓝色和字体大小为 16 像素。

CSS 引入方式

内部样式表

将 CSS 代码写在 HTML 代码中：

html 复制代码 
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            p{
                color: red;
            }
        </style>
    </head>
    <body>
        <p>内部样式表</p>
    </body>
</html>

注意事项：

  1. CSS 应该写在 HTML 中 title 标签的下方
  2. CSS 代码要写在 <style></style> 块中

外部样式表

CSS 代码写在单独的 CSS 文件中（.css），在 HTML 中使用 link 标签引入：<link rel = "stylesheet" href = "css文件相对路径">：

css 复制代码 
p{
    color: green;
}
html 复制代码 
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="./CSS/style.css">
    </head>
    <body>
        <p>外部样式表</p>
    </body>
</html>

行内样式表

CSS 写在标签的 style 属性值里：

html 复制代码 
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
    </head>
    <body>
        <p style="color: purple;">外部样式表</p>
    </body>
</html>

选择器

基础选择器

标签选择器

标签选择器：使用标签名 作为选择器 → 选中同名标签 设置相同样式

语法格式：

css 复制代码 
标签名{
    属性名 : 属性值;
}

代码示例：

html 复制代码 
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            p{
                color: red;
            }
        </style>
    </head>
    <body>
        <p>这是第一行字</p>
        <div>这是第二行字</div>
        <p>这是第三行字</p>
        <div>这是第四行字</div>
        <p>这是第五行字</p>
    </body>
</html>

注意事项：选中同名标签设置相同的样式，无法差异化同名标签的样式

类选择器

作用：查找标签，差异化设置标签的显示效果

步骤：

  1. 定义类选择器 → .类名
  2. 使用类选择器 → 标签添加 class = "类名"

语法格式：

css 复制代码 
.类名{
    属性名 : 属性值;
}

代码示例：

html 复制代码 
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            .red{
                color: red;
            }
        </style>
    </head>
    <body>
        <p>这是第一行字</p>
        <p class="red">这是第二行字</p>
        <p>这是第三行字</p>
        <p class="red">这是第四行字</p>
        <p>这是第五行字</p>
    </body>
</html>

注意事项：

  1. 一个类选择器可以给多个标签使用
  2. 一个标签可以使用多个类名，class 属性值写多个类名，类名之间用空格隔开

id 选择器

作用：查找标签，差异化设置标签的显示效果

步骤：

  1. 定义 id 选择器 → #id 名
  2. 使用 id 选择器 → 标签添加 id = "id 名"

语法格式：

css 复制代码 
#id 名{
    属性名 : 属性值;
}

代码示例：

html 复制代码 
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            #red{
                color: red;
            }
        </style>
    </head>
    <body>
        <p>这是第一行字</p>
        <p id="red">这是第二行字</p>
        <p>这是第三行字</p>
        <p>这是第四行字</p>
        <p>这是第五行字</p>
    </body>
</html>

注意事项：同一个 id 选择器在一个页面只能使用一次

通配符选择器

作用：查找页面所有标签，设置相同样式

通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

语法格式：

css 复制代码 
*{
    属性名 : 属性值;
}

代码示例：

html 复制代码 
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            *{
                color: yellow;
            }
        </style>
    </head>
    <body>
        <p>这是第一行字</p>
        <p>这是第二行字</p>
        <p>这是第三行字</p>
        <p>这是第四行字</p>
        <p>这是第五行字</p>
    </body>
</html>

画盒子

目标：使用合适的选择器画盒子

新属性：

属性名 说明
width 宽度
height 高度
background-color 背景色

如图，《关雎》的宽为 360、高为 125，背景色为红色；《蒹葭》的宽为 700、高为75，背景色为蓝色，按照该要求画盒子

代码示例：

html 复制代码 
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            .first{
            width: 360px;
            height: 125px;
            background-color:red;
        }
            .second{
                width: 700px;
                height: 75px;
                background-color:blue;
            }
        </style>
    </head>
    <body>
        <div class="first">
            <ul>
                <li>关关雎鸠，在河之洲。窈窕淑女，君子好逑。</li>
                <li>参差荇菜，左右流之。窈窕淑女，寤寐求之。</li>
                <li>求之不得，寤寐思服。悠哉悠哉，辗转反侧。</li>
                <li>参差荇菜，左右采之。窈窕淑女，琴瑟友之。</li>
                <li>参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</li>
            </ul>
        </div>
        <div class="second">
            <ul>
                <li>蒹葭苍苍，白露为霜。所谓伊人，在水一方。溯洄从之，道阻且长。溯游从之，宛在水中央。</li>
                <li>蒹葭萋萋，白露未晞。所谓伊人，在水之湄。溯洄从之，道阻且跻。溯游从之，宛在水中坻。</li>
                <li>蒹葭采采，白露未已。所谓伊人，在水之涘。溯洄从之，道阻且右。溯游从之，宛在水中沚。</li>
            </ul>
        </div>
    </body>
</html>

文字控制属性

字体大小

属性名：font-size

属性值：文字尺寸，PC 端网页最常用的单位 px（像素）

格式：

css 复制代码 
选择器{
    font-size: 30px;
}

代码示例：

html 复制代码 
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            .bigger{
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <p>这是一段普通文字</p>
        <p class="bigger">这是一段加大了的文字</p>
    </body>
</html>

结果如下：

字体粗细

属性名：font-weight

属性值：

  • 正常：normal（400）
  • 加粗：bold（700）

格式：

css 复制代码 
选择器{
    font-weight: normal;
    font-weight: 400;
    font-weight: bold;
    font-weight: 700;
}

代码示例：

html 复制代码 
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            h3{
                font-weight: normal;
            }
            p{
                font-weight: bold;
            }
            h4{
                font-weight: 400;
            }
            div{
                font-weight: 700;
            }
        </style>
    </head>
    <body>
        <h3>这是h3标签</h3>
        <p>这是一句文字</p>
        <h4>这是h4标签</h4>
        <div>这是一段文字</div>
    </body>
</html>

结果如下：

字体倾斜

作用：清除文字默认的倾斜效果

属性名：font-style

属性值：

  • 正常：normal
  • 倾斜：italic

格式：

css 复制代码 
选择器{
    font-style: normal;
    ront-style: italic;
}

代码示例：

html 复制代码 
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            .normaldemo{
                font-style: normal;
            }
            .italicdemo{
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <em>这是一段倾斜的字</em>
        <br>
        <em class="normaldemo">这是一段倾斜的字使用 font-style 后的效果</em>
        <div>这是一段正常的字</div>
        <div class="italicdemo">这是一段正常的字使用 font-style 后的效果</div>
    </body>
</html>

结果如下：

行高

作用：设置多行文本的间距

属性名：line-height

属性值：

  • 数字 + px
  • 数字（当前标签 font-size 属性值的倍数）

格式：

css 复制代码 
选择器{
    line-height: 2;
    line-height: 30px;
}

代码示例：

html 复制代码 
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            .style1{
                line-height: 40px;
            }
            .style2{
                line-height: 2;
            }
        </style>
    </head>
    <body>
        <div style="width: 400px;background-color: red;">生命的意义就是在于奋斗，人生的意义则在于积累。不要乞求太多，每天一点点就足够了。所有的失望和不满都是来自于我们自身的贪婪。保持一个平静的心态，我们就会拥有整个世界</div>
        <div style="width: 400px;background-color: gray;" class="style1">生命的意义就是在于奋斗，人生的意义则在于积累。不要乞求太多，每天一点点就足够了。所有的失望和不满都是来自于我们自身的贪婪。保持一个平静的心态，我们就会拥有整个世界</div>
        <div style="width: 400px;background-color: green;" class="style2">生命的意义就是在于奋斗，人生的意义则在于积累。不要乞求太多，每天一点点就足够了。所有的失望和不满都是来自于我们自身的贪婪。保持一个平静的心态，我们就会拥有整个世界</div>
    </body>
</html>

结果如下：

注意事项：

  • 行高 = 文本高度 + 上间距 + 下间距
  • 行高测量方法：从一行文字的最顶端（最低端）量到下一行文字的最顶端（最低端）

利用行高进行垂直居中：

技巧：行高属性等于盒子高度属性

代码示例：

html 复制代码 
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div{
                height: 100px;
                background-color: red;
                line-height: 100px;
            }
        </style>
    </head>
    <body>
        <div>生命的意义就是在于奋斗，人生的意义则在于积累。不要乞求太多，每天一点点就足够了。所有的失望和不满都是来自于我们自身的贪婪。保持一个平静的心态，我们就会拥有整个世界</div>
    </body>
</html>

结果如下：

注意事项：只能是单行文字垂直居中

字体族

属性名：font-family

属性值：字体名

格式：

css 复制代码 
选择器{
	font-family: "楷体";
}

代码示例：

html 复制代码 
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div{
                font-family: "楷体";
            }
        </style>
    </head>
    <body>
        <div>将进酒</div>
    </body>
</html>

结果如下：

font 复合属性

复合属性：属性的简写方式，一个属性对应多个值的写法，各属性值之间用空格隔开

font：是否倾斜 是否加粗 字号/行高 字体（必须按照顺序书写）

注意事项：字号和字体值必须书写，否则 font 属性不生效

代码示例：

html 复制代码 
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div{
                font: italic bold 30px/2 "楷体";
            }
        </style>
    </head>
    <body>
        <div>君不见黄河之水天上来，奔流到海不复回。</div>
        <div>君不见高堂明镜悲白发，朝如青丝暮成雪。</div>
        <div>人生得意须尽欢，莫使金樽空对月。</div>
        <div>天生我材必有用，千金散尽还复来。</div>
        <div>烹羊宰牛且为乐，会须一饮三百杯。</div>
    </body>
</html>

结果如下：

文本缩进

属性名：text-indent

属性值：

  • 数字 + px
  • 数字 + em（推荐：1em = 当前标签的字号大小）

格式：

css 复制代码 
选择器{
    text-indent: 2em;
}

代码示例：

html 复制代码 
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            p{
                text-indent: 2em;
            }
        </style>
    </head>
    <body>
        <p>我们可以度过美好时光，也可以虚度光阴，但我希望你活得精彩。
            我希望你能看到令你惊叹的事物，我希望你体会从未有过的感觉，
            我希望你遇见具有不同观点的人，我希望你的一生能让自己过得自豪。
            如果你发现你的生活并非如此，我希望你能有勇气重新来过。 
            你是独特的，但你必须向统一让步；
            你是自由的，但你必须向禁忌妥协。
            因为你渴望亲近群体，渴望他们的接受。
            你害怕被群体驱逐。因而你是孤独的，你是独特但孤独的心魂。
            生来如此。
            生，就是这样，永远都是这样。</p>
    </body>
</html>

结果如下：

文本对齐

作用：控制内容水平对齐方式

属性名：text-align

属性值：

  • left：左对齐（默认）
  • center：居中对齐
  • right：右对齐

格式：

css 复制代码 
选择器{
    text-align: center;
}

代码示例：

html 复制代码 
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            p{
                text-indent: 2em;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <p>我要留下昨晚做的梦，</p>
        <p>把它保存在冰箱里。</p>
        <p>很久很久以后的一天，</p>
        <p>当我变成一个白发老翁，</p>
        <p>便要取出我冻结的美梦，</p>
        <p>把它融化，把它烧开，</p>
        <p>然后我就慢慢坐下，</p>
        <p>用它来浸泡我的一双苍老冰冷的脚。</p>
    </body>
</html>

结果如下：

注意事项：居中的是文字内容，并不是标签

图片水平居中方式：

text-align本质是控制内容的对齐方式，属性要设置给内容的父级

代码示例：

html 复制代码 
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="./img/image.png" alt="">
        </div>
        
    </body>
</html>

结果如下：

文本修饰线

属性名：text-decoration

属性值：

  • none：去掉文本修饰线
  • underline：下划线
  • line-through：删除线
  • overline：上划线

格式：

css 复制代码 
选择器{
    text-decoration: none;
}

代码示例：

html 复制代码 
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            a{
                text-decoration: none;
            }
            p{
                text-decoration: underline;
            }
            div{
                text-decoration: line-through;
            }
            span{
                text-decoration: overline;
            }
        </style>
    </head>
    <body>
        <a href="https://www.baidu.com">去掉a标签访问百度的下划线</a>
        <p>给这行字加下划线</p>
        <div>把这行字删了</div>
        <span>给这行字加上划线</span>
    </body>
</html>

结果如下：

文字颜色

属性名：color

属性：

颜色表示方式 属性值 说明 使用场景
颜色关键字 颜色英文单词 red、green、blue... 学习测试
rgb 表示法 rgb(r, g, b) rgb 表示红绿蓝三原色，取值：0 - 255 了解
rgba 表示法 rgba(r, g, b, a) a 表示透明度，取值：0 - 1 开发使用，实现透明色
十六进制表示法 #RRGGBB #000000，#ffcc00，简写：#000，#fc0 开发使用（从设计稿复制）

代码示例：

html 复制代码 
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            h1{
                color: red;
            }
            h2{
                color: rgb(0, 0, 255)
            }
            h3{
                color: rgba(4, 94, 67, 0.5)
            }
            h4{
                color: #FFAACC;
            }
        </style>
    </head>
    <body>
        <h1>颜色关键字</h1>
        <h2>rgb表示法</h2>
        <h3>rgba表示法</h3>
        <h4>十六进制表示法</h4>
    </body>
</html>

结果如下：

相关推荐
Fantasywt3 小时前
THREEJS 片元着色器实现更自然的呼吸灯效果
前端·javascript·着色器
IT、木易3 小时前
大白话JavaScript实现一个函数，将字符串中的每个单词首字母大写。
开发语言·前端·javascript·ecmascript
张拭心5 小时前
2024 总结，我的停滞与觉醒
android·前端
念九_ysl5 小时前
深入解析Vue3单文件组件：原理、场景与实战
前端·javascript·vue.js
Jenna的海糖5 小时前
vue3如何配置环境和打包
前端·javascript·vue.js
星之卡比*6 小时前
前端知识点---库和包的概念
前端·harmonyos·鸿蒙
灵感__idea6 小时前
Vuejs技术内幕：数据响应式之3.x版
前端·vue.js·源码阅读
烛阴6 小时前
JavaScript 构造器进阶：掌握 “new” 的底层原理，写出更优雅的代码！
前端·javascript
Alan-Xia6 小时前
使用jest测试用例之入门篇
前端·javascript·学习·测试用例
浪遏6 小时前
面试官😏 ：文本太长，超出部分用省略号 ,怎么搞？我：🤡
前端·面试
热门推荐
01DeepSeek各版本说明与优缺点分析02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03如何在WPS和Word/Excel中直接使用DeepSeek功能04苍穹外卖面试总结05DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具06本地部署DeepSeek教程（Mac版本）07Coze扣子平台完整体验和实践（附国内和国际版对比）08Windows 11 安装 Dify 完整指南 非docker环境09保姆级教程：利用Ollama与Open-WebUI本地部署 DeedSeek-R1大模型10macOS 上部署 RAGFlow