导航分类

CSS 教程 CSS 语法

CSS 简介

主题

默认模式
浅蓝色模式
淡红色模式
深夜模式

你需要具备的知识

在继续学习CSS之前，你需要对HTML 教程和HTML5 教程有个基本的了解。

HTML/HTML5 负责网页的内容和结构，CSS负责网页的外观和布局，两者相辅相成，共同打造精美网页。

CSS的基本语法：

选择器 {
    属性1: 值1;
    属性2: 值2;
}

什么是 CSS?

CSS是 Cascading Style Sheets 的缩写，中文译为"层叠样式表"。
CSS是一种样式表语言，专门用于描述 HTML 或 XML 文档的呈现方式。
CSS控制网页内容的外观和布局，包括颜色、字体、间距等视觉表现。
CSS与 HTML 配合使用，HTML 负责网页结构，CSS 负责网页样式。
CSS由 W3C 组织制定标准，1996年发布 CSS1，目前主流版本是 CSS3。

CSS 的作用

功能分类	相关CSS属性	功能说明
控制网页样式	font-family, color, margin, padding等	控制文本字体、颜色、元素间距等基础样式
实现页面布局	position, float, flex, grid等	实现各种页面布局方式，包括传统布局和现代布局方案
适配不同设备	@media, viewport, rem/vw单位等	使网页能够响应不同屏幕尺寸和设备特性
添加动画效果	transition, transform, animation等	为元素添加过渡效果、变形和动画

CSS 使用实例

接下来用多种实例演示CSS样式的用法，来深化您对CSS样式的理解。

1. 内联样式（行内样式）

实例代码运行代码

复制

<p style="color: red;">这是红色文字</p>

2. 内部样式表

实例代码运行代码

复制

<head>
    <style>
        p {color: blue;}
    </style>
</head>

3. 外部样式表（推荐）

实例代码运行代码

复制

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

常用 CSS 选择器

选择器类型	语法示例	功能描述
元素选择器	p { ... }	选择所有指定HTML元素
类选择器	.class-name { ... }	选择所有class属性匹配的元素
ID选择器	#id-name { ... }	选择id属性匹配的唯一元素
后代选择器	div p { ... }	选择div内部所有层级的p元素
子元素选择器	div > p { ... }	仅选择div直接子元素的p元素
相邻兄弟选择器	h1 + p { ... }	选择紧接在h1后的第一个p元素
通用选择器	* { ... }	选择页面所有元素
属性选择器	[type="text"] { ... }	选择具有特定属性值的元素
伪类选择器	:hover, :focus, :nth-child(n)	选择元素的特定状态或位置
伪元素选择器	::before, ::after	创建并选择元素的虚拟子元素

CSS 文本样式属性

CSS 属性	功能描述	示例值
`color`	文字颜色	red, #FF0000, rgb(255,0,0)
`font-family`	字体	Arial, "Microsoft YaHei", sans-serif
`font-size`	字号	16px, 1em, 100%
`font-weight`	字重	normal, bold, 700
`text-align`	对齐方式	left, center, right, justify
`line-height`	行高	1.5, 24px, normal
`text-decoration`	文本装饰	none, underline, line-through

CSS 背景样式属性

CSS属性	功能描述	常用值
`background-color`	设置元素的背景颜色	red, #FF0000, rgba(255,0,0,0.5), transparent
`background-image`	设置元素的背景图片	url("image.jpg"), linear-gradient(to right, red, yellow)
`background-repeat`	设置背景图片的重复方式	repeat, no-repeat, repeat-x, repeat-y, space, round
`background-position`	设置背景图片的起始位置	center, left top, 50% 50%, 10px 20px

CSS 盒模型属性

CSS属性	功能描述	常用值/示例
`width/height`	设置元素的宽度/高度	100px, 50%, auto, 10em
`padding`	设置元素内容与边框之间的内边距	10px, 1em 2em, 5px 10px 15px 20px
`margin`	设置元素与其他元素之间的外边距	20px, auto, 10px 20px, 5px 10px 15px 20px
`border`	设置元素边框样式	1px solid black, 2px dashed #ccc, 3px dotted red

CSS 布局属性

CSS属性	功能描述	属性值/示例
`display`	设置元素的显示方式	block, inline, inline-block, flex, grid, none
`position`	设置元素的定位方式	static, relative, absolute, fixed, sticky
`float`	设置元素的浮动方式	left, right, none
`flex`	弹性盒布局相关属性	flex-direction, flex-wrap, justify-content, align-items
`grid`	网格布局相关属性	grid-template-columns, grid-template-rows, grid-gap

CSS 教程 CSS 语法

评论区 0

发表评论

教程介绍

CSS 层叠样式表（Cascading Style Sheets），一种用于为 HTML 或 XML 添加样式的语言。

36 章节

128 阅读

0 评论

CSS 简介

你需要具备的知识

什么是 CSS?

CSS 的作用

CSS 使用实例

1. 内联样式（行内样式）

2. 内部样式表

3. 外部样式表（推荐）

常用 CSS 选择器

CSS 文本样式属性

CSS 背景样式属性

CSS 盒模型属性

CSS 布局属性

CSS 基础教程

CSS3 教程

CSS 简介

你需要具备的知识

什么是 CSS?

CSS 的作用

CSS 使用实例

1. 内联样式（行内样式）

2. 内部样式表

3. 外部样式表（推荐）

常用 CSS 选择器

CSS 文本样式属性

CSS 背景样式属性

CSS 盒模型属性

CSS 布局属性

CSS 基础教程

CSS3 教程

意见反馈

反馈提交成功