CSS语言怎么使用_CSS基础语法与常见样式属性使用教程

星夢妙者

发布时间：2025-08-27 08:12:01

229人浏览过

来源于php中文网

原创

CSS通过选择器控制网页元素的样式，实现HTML内容的视觉美化。其核心应用方式包括内联样式、内部样式表和外部样式表，推荐使用外部样式表以提升可维护性。主要选择器有元素、类、ID、后代、子代和群组选择器，配合盒模型、字体、背景和显示属性等，实现网页布局与设计。

css语言怎么使用_css基础语法与常见样式属性使用教程

CSS语言的核心作用，就是为你的网页“穿上”漂亮的衣服，让原本只是骨架的HTML内容变得有血有肉，赏心悦目。它通过一套简洁的规则，精准地控制着页面上每一个元素的颜色、字体、布局、大小，甚至动画效果。简单来说，如果你想让网页不再是黑白两色的纯文本，CSS就是你不可或缺的画笔。

在深入了解CSS之前，我们得先搞清楚它究竟是怎么工作的。想象一下，你有一份HTML文档，它定义了网页上的所有内容，比如段落、标题、图片。CSS就像一本时尚杂志，里面写满了各种搭配指南和风格建议。当浏览器加载HTML时，它也会同时读取CSS文件，然后根据这些“建议”来渲染HTML元素，决定它们最终呈现的样子。这个过程听起来挺抽象的，但实际操作起来，你会发现它非常直观和强大。

如何将CSS样式应用到HTML文档中？

刚开始接触CSS时，我最困惑的就是，我写好的样式代码，到底要放在哪里才能生效？这其实有三种主要方式，每种都有它的适用场景和一些我踩过的坑。

一种是内联样式（Inline Styles）。顾名思义，就是直接在HTML元素的

style

属性里写CSS代码。比如：

立即学习“前端免费学习笔记（深入）”；

<p style="color: blue; font-size: 16px;">这段文字是蓝色的，而且字号是16像素。</p>

这种方法非常直接，改动即时可见，对于快速测试或者只需要对单个元素进行微调时很方便。但它最大的缺点是，如果你的网站有很多页面，或者一个页面里有很多相似的元素需要同样的样式，你得一遍遍地复制粘贴，这简直是维护的噩梦。我记得刚学那会儿，为了让每个段落都居中，我在每个

<p>

标签里都加了

text-align: center;

，结果后来要改，那叫一个痛苦。所以，除非有特殊情况，一般不推荐大量使用内联样式。

接着是内部样式表（Internal Stylesheet）。这种方式是将CSS代码放在HTML文档的

<head>

标签里的

<style>

标签中。

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
        p {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个示范段落。</p>
</body>
</html>

这种方式比内联样式好很多，至少样式和内容有所分离，方便管理。如果你只有一个HTML页面，或者页面的样式非常独特，不打算在其他页面复用，那么内部样式表是个不错的选择。它避免了额外的HTTP请求，对于一些小型项目或单页应用来说，性能上可能略有优势。但一旦项目规模扩大，或者你希望多个页面共享同一套样式，它就显得力不从心了，你需要在每个HTML文件里都复制一遍

<style>

标签里的内容。

最后，也是我个人最推荐、最常用的，是外部样式表（External Stylesheet）。你需要创建一个独立的

.css

文件，把所有CSS代码都写在这个文件里，然后在HTML文档的

<head>

标签中使用

<link>

标签来引入它。

styles.css

文件内容：

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f4f4;
}

.container {
    width: 80%;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    color: #333;
    text-align: center;
}

index.html

文件内容：

<!DOCTYPE html>
<html>
<head>
    <title>外部样式表示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>我的第一个外部样式表页面</h1>
        <p>这是用外部样式表美化过的段落。</p>
    </div>
</body>
</html>

这种方法将HTML结构和CSS样式彻底分离，使得代码结构清晰、易于维护和复用。你可以让多个HTML页面共享同一个

styles.css

文件，这样当你需要修改网站主题时，只需修改一个CSS文件即可。这大大提高了开发效率和可维护性。这也是现代网页开发中普遍采用的最佳实践。

CSS选择器有哪些类型？它们是如何工作的？

CSS选择器是CSS的灵魂，它们是告诉浏览器“我要给哪个HTML元素应用这些样式”的关键。没有选择器，你的样式代码就无从施展。理解选择器的工作原理，是掌握CSS的第一步。

最基础的当然是元素选择器（Type Selector）。它直接通过HTML标签名来选择元素。比如

p { ... }

会选中页面上所有的

<p>

标签，

h1 { ... }

则会选中所有的

<h1>

标签。这非常简单粗暴，但也很有效，尤其是在你希望为一类元素设置通用样式时。

然后是类选择器（Class Selector）。这是我日常开发中使用频率最高的选择器之一。你可以在HTML元素上添加一个

class

属性，然后用

加上类名来选择它。

闪念贝壳

闪念贝壳是一款AI 驱动的智能语音笔记，随时随地用语音记录你的每一个想法。

下载

<p class="highlight">这段文字会被高亮显示。</p>
<div class="highlight">这个div也会被高亮。</div>

.highlight {
    background-color: yellow;
    font-weight: bold;
}

类选择器的强大之处在于它的灵活性。你可以给多个元素应用同一个类，也可以给一个元素应用多个类（用空格隔开），这样就能实现样式的复用和组合。

接着是ID选择器（ID Selector）。与类选择器类似，但它通过HTML元素的

id

属性来选择，用

加上ID名。

<div id="main-header">网站主标题</div>

#main-header {
    color: white;
    background-color: #333;
    padding: 10px;
}

ID选择器有一个非常重要的特点：在同一个HTML文档中，每个ID值都必须是唯一的。这意味着

#main-header

只会选中页面上的一个元素。因此，ID选择器通常用于标识页面上独一无二的元素，比如页眉、页脚或某个特定的内容区域。它的优先级也比类选择器高。

除了这三种基本的，还有一些更高级但同样常用的选择器：

通用选择器（Universal Selector）：用
```
*
```
表示，它会选中页面上的所有HTML元素。比如
```
* { margin: 0; padding: 0; }
```
可以用来重置所有元素的内外边距，这在CSS初始化时很常见。
后代选择器（Descendant Selector）：用空格分隔两个选择器，表示选择某个元素的后代元素。例如
```
div p { color: blue; }
```
会选择所有在
```
<div>
```
元素内部的
```
<p>
```
元素，无论它们嵌套多深。
子选择器（Child Selector）：用
```
>
```
分隔，表示选择某个元素的直接子元素。例如
```
ul > li { list-style-type: square; }
```
只会选择
```
<ul>
```
的直接子元素
```
<li>
```
，而不会选择嵌套在更深层的
```
<li>
```
。
群组选择器（Grouping Selector）：用逗号
```
,
```
分隔，可以同时为多个选择器应用相同的样式。例如
```
h1, h2, p { text-align: center; }
```
会让所有
```
h1
```
、
```
h2
```
和
```
p
```
元素都居中显示。

理解这些选择器，特别是它们的优先级（或称“特异性”），是避免样式冲突和精准控制元素外观的关键。有时候你会发现自己写的样式没有生效，很可能就是因为被其他优先级更高的选择器覆盖了。

掌握这些CSS常见样式属性，让你的网页焕然一新

CSS的魅力在于其丰富的样式属性，它们能让你几乎无所不能地控制网页的视觉呈现。这里我挑一些最常用、最基础，也是最能快速提升网页美观度的属性来聊聊。

首先，不得不提的是盒模型（Box Model）。这是理解网页布局的基石。每个HTML元素在页面上都被渲染成一个矩形的盒子，这个盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。

width
和
height
：控制内容的宽度和高度。
padding
：内容与边框之间的空间。
```
padding: 10px;
```
表示上下左右都是10px的内边距；
```
padding: 10px 20px;
```
表示上下10px，左右20px；
```
padding-top
```
、
```
padding-right
```
、
```
padding-bottom
```
、
```
padding-left
```
可以单独设置。
border
：盒子的边框。
```
border: 1px solid #ccc;
```
是一个常见的写法，表示1像素宽、实线、颜色为浅灰色的边框。
margin
：边框与相邻元素之间的空间。用法和
```
padding
```
类似，
```
margin: 20px auto;
```
常用于块级元素水平居中。

一个让我曾经非常困惑的地方是，默认情况下

width

和

height

只计算内容区域，不包括

padding

和

border

。这导致我经常计算错误，直到我学会了使用

box-sizing: border-box;

。这个属性会改变盒模型的计算方式，让

width

和

height

包含

padding

和

border

，这样布局就变得直观多了，强烈推荐在项目开始时就全局设置它。

/* 推荐的全局设置 */
* {
    box-sizing: border-box;
}

.my-box {
    width: 200px;
    padding: 15px;
    border: 5px solid blue;
    margin: 10px;
    background-color: lightblue;
}

有了这个，

my-box

的实际宽度就是200px，而不是200px + 215px + 25px。

其次是字体和文本样式（Typography）。这直接影响了文字的可读性和页面的整体风格。

font-family
：设置字体。
```
font-family: "Microsoft YaHei", Arial, sans-serif;
```
表示优先使用微软雅黑，如果用户没有，则用Arial，再没有就用系统默认的无衬线字体。
font-size
：设置字号。可以使用像素（
```
px
```
）、em、rem等单位。
color
：设置文字颜色。可以是颜色名（
```
red
```
）、十六进制（
```
#333
```
）、RGB（
```
rgb(255,0,0)
```
）等。
font-weight
：设置字重（粗细）。
```
normal
```
、
```
bold
```
或数字（100-900）。
text-align
：文本对齐方式。
```
left
```
、
```
right
```
、
```
center
```
、
```
justify
```
。
line-height
：行高。控制行与行之间的垂直间距，对阅读体验至关重要。

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6; /* 良好的行高能提高可读性 */
    color: #333;
}

h1 {
    font-weight: 700; /* 加粗 */
    text-align: center;
    color: #0056b3;
}

再来是背景样式（Backgrounds）。背景能为页面增添色彩和纹理。

background-color
：设置背景颜色。

background-image
：设置背景图片。

background-image: url('images/bg.png');

background-repeat
：控制背景图片是否重复以及如何重复。
```
no-repeat
```
、
```
repeat-x
```
、
```
repeat-y
```
。
background-position
：设置背景图片的位置。
```
center top
```
、
```
50% 50%
```
。
background-size
：控制背景图片的大小。
```
cover
```
（覆盖整个元素）、
```
contain
```
（包含在元素内）。

.hero-section {
    background-image: url('path/to/hero-bg.jpg');
    background-size: cover; /* 让图片覆盖整个区域 */
    background-position: center center; /* 图片居中 */
    background-repeat: no-repeat;
    height: 300px; /* 给背景区域一个高度 */
    display: flex; /* 配合flexbox让内容垂直居中 */
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

最后，显示属性（Display Properties）是控制元素布局行为的关键。

display: block;
：块级元素，独占一行，可以设置宽高。
```
div
```
、
```
p
```
、
```
h1
```
等默认是块级元素。
display: inline;
：行内元素，不独占一行，不能设置宽高（宽高由内容决定），只能设置左右外边距。
```
span
```
、
```
a
```
、
```
strong
```
等默认是行内元素。
display: inline-block;
：行内块级元素，既不独占一行，又能设置宽高。这在需要将多个元素排成一行，同时又想控制它们尺寸时非常有用。