零基础网页开发第一步之HTML&CSS4️⃣（CSS作用方式）
|
admin
2025年7月17日 0:6
本文热度 14
|
经过前三篇的实践，我们的网页已经有了一些基本的HTML内容。这篇我们接着来看如何用CSS进行版面设计及网页美化。一、CSS定义与作用
层叠样式表（Cascading Style Sheets）是描述HTML或XML文档呈现的样式表语言。核心功能：
• 🎨 视觉设计：控制颜色、字体、间距等视觉属性
• 📐 布局控制：实现响应式布局、定位排版
• 🔄 设备适配：为不同屏幕尺寸提供优化显示
比如如果你想将<h2>标题改成红色，可以在<h2>标签中输入style属性,后续接上CSS语法。<h2 style="color:red">健康谷物面包新鲜出炉！</h2>
此种方式易上手，但有一个缺点，即每个标签样式都需单独设置，若你的网页中有很多标签，操作起来非常耗时耗力。这时你只要在<style>标签中清楚指明对应的标签名称-->{CSS语法};以<h2>标签为例，这样就可以一次修改网页中所有<h2>标题。<head> <style> h2{ color:red; } </style> </head>
h1 { color: #2c3e50; font-size: 2.5rem; margin-bottom: 1.5rem; }
这种方式依然有一定的局限性：因为一个网站可能是由多个网页组成的如果每个网页都需单独维护CSS样式，会是个不切实际的做法。外部CSS样式表是将CSS规则存储在独立文件中（扩展名为.css),通过HTML的<link>元素引入。主要优势：
创建与引用步骤
1. 创建CSS文件，在vscode左侧项目目录，单击右键新建文件（如styles.css）
项目根目录/├── index.html└── css/ └── styles.css <
2. 编写CSS规则
在styles.css中写入样式内容（无需<style>标签）,示例：
body { font-family: 'Segoe UI', sans-serif; background: #f8f9fa;}
.container { max-width: 1200px; margin: 0 auto;}
同时，我们还必须把这个样式表链接至原来的HTML网页中。
3. HTML文件引入
在HTML的<head>内添加链接标签，示例：
<!DOCTYPE html><html><head> <title>示例页面</title> <link rel="stylesheet" href="css/styles.css"></head><body> <div class="container"> </div></body></html>
其中，rel="stylesheet"代表文件类型，href="css/styles.css"是文档名称和路径。
| | |
| | |
| | index.html→css/styles.css |
| | |
| | |
通过这第三种方式，你就可以用一个CSS样式表，同时控制多个网页的外观，也更方便于网站后期的维护与更新。
阅读原文：原文链接
该文章在 2025/7/18 10:20:14 编辑过
400 186 1886
