CSS 基础知识入门

前言

CSS（层叠样式表）全称Cascading Style Sheets，是用于描述 HTML 文档外观和格式的语言。本文将介绍 CSS 的基本概念、选择器及其应用，帮助初学者快速入门。

1. CSS 基本概念

CSS 用于控制网页的布局、颜色、字体等视觉效果。它可以与 HTML 结合使用，通过选择器选择 HTML 元素并应用样式规则。一个简单的 CSS 规则如下：

1
2
3
4



selector {
    property: value;
}

selector：选择器，指定要应用样式的 HTML 元素。
property：属性，指定要设置的样式属性，如颜色、字体大小等。
value：值，指定属性的具体值。

2. 常用 CSS 选择器

通配选择器

通配选择器使用 * 符号，选择所有元素。

1
2
3
4


* {
    margin: 0;
    padding: 0;
}

元素选择器

元素选择器直接使用 HTML 标签名来选择元素。

1
2
3
4
5



p {
    color: blue;
    font-size: 16px;
}

类选择器

类选择器使用 . 符号，选择具有特定类名的元素。

1
2
3
4
5
6
7



.button {
    background-color: green;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}

ID 选择器

ID 选择器使用 # 符号，选择具有特定 ID 的元素。

1
2
3
4
5
6



#header {
    background-color: lightgray;
    text-align: center;
    padding: 20px;
}

组合选择器

组合选择器可以同时使用多种选择器来选择元素。

1
2
3
4
5



div.container p {
    margin: 10px 0;
    line-height: 1.5;
}

3. CSS 应用方式

CSS 可以通过三种方式应用到 HTML 文档中：

内联样式

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

1

<p style="color: red; font-size: 14px;">This is a red paragraph.</p>

内部样式表

内部样式表在 HTML 文档的 <head> 部分使用 <style> 标签定义样式。

1
2
3
4
5
6
7
8


<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
    </style>
</head>

外部样式表

外部样式表将 CSS 代码放在单独的 .css 文件中，并通过 <link> 标签引入。

1
2
3


<head>
    <link rel="stylesheet" href="styles.css">
</head>

其中rel属性指定链接类型，href属性指定CSS文件路径。

4. 常用 CSS 属性

颜色属性

1
2


color: blue; /* 文字颜色 */
background-color: yellow; /* 背景颜色 */

字体属性

1
2
3


font-size: 16px; /* 字体大小 */
font-family: 'Arial', sans-serif; /* 字体类型 */
font-weight: bold; /* 字体粗细 */

布局属性

1
2
3
4
5


margin: 10px; /* 外边距 */
padding: 15px; /* 内边距 */
border: 1px solid black; /* 边框 */
width: 100%; /* 宽度 */
height: 200px; /* 高度 */

5. 总结

css 是网页设计中不可或缺的技术，掌握其基本概念和常用选择器对于前端开发十分有帮助。现代的前端开发中，还会使用css预处理器（如Sass、Less）和框架（如Bootstrap、Tailwind CSS）来提高开发效率。能够熟练运用css，将大大提升网页的视觉效果和用户体验。

6. 参考资料

MDN Web Docs - CSS