CSS(层叠样式表,Cascading Style Sheets)是一种用于控制HTML文档外观和格式的样式语言。它可以让你轻松地设计和调整网页的布局、颜色、字体等样式。本教程将带你学习CSS的基础知识和实战技巧。
一、CSS基础
CSS的引入方式
在HTML文档中,有三种方式可以引入CSS:
- 内联样式(Inline style):在HTML标签内使用
style属性。 - 内部样式表(Internal stylesheet):在
标签内使用标签。 - 外部样式表(External stylesheet):使用
标签引入外部css文件。
- 内联样式(Inline style):在HTML标签内使用
选择器(Selectors)
CSS选择器用于选择需要应用样式的HTML元素。常见的选择器有:
- 元素选择器:直接使用HTML标签名。
- 类选择器:以
.开头,后跟类名。 - ID选择器:以
#开头,后跟ID名。 - 属性选择器:用
[]包裹属性名。
属性与值
CSS属性用于定义HTML元素的样式特性,如颜色、字体、布局等。属性和值之间用冒号
:分隔,值之后用分号;结束。
二、CSS实战
字体样式
font-family:设置字体。font-size:设置字体大小。font-weight:设置字体粗细。color:设置字体颜色。
示例:
p { font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; color: #333;}背景样式
background-color:设置背景颜色。background-image:设置背景图片。background-repeat:设置背景图片平铺方式。background-position:设置背景图片位置。
示例:
body { background-color: #f5f5f5; background-image: url('bg.jpg'); background-repeat: no-repeat; background-position: center;}布局
width和height:设置元素的宽度和高度。margin和padding:设置元素的外边距和内边距。border:设置元素的边框。display:设置元素的显示类型(如block、inline、inline-block等)。position:设置元素的定位类型(如static、relative、absolute、fixed等)。
示例:
.container { width: 960px; margin: 0 auto; padding: 20px; border: 1px solid #ccc;}伪类与伪元素
- 伪类(Pseudo-classes):表示元素的特殊状态,如
:hover、:active、:nth-child()等。 - 伪元素(Pseudo-elements):表示元素的特定部分,如
::before、::after等。
示例:
a:hover { color: red;}p::first-letter { font-size: 24px;}- 伪类(Pseudo-classes):表示元素的特殊状态,如
响应式设计
使用媒体查询(Media query)实现响应式设计,根据设备屏幕宽度应用不同的样式。
示例:
@media screen and (max-width: 768px) { .container { width: 100%; }}
通过以上基础知识和实战技巧,你应该可以开始编写简单的CSS样式了。不断实践和学习,你会更加熟练地掌握CSS。

