一、CSS简介
CSS(层叠样式表,Cascading Style Sheets)是一种用于描述HTML或XML文档表现的样式语言。它允许开发者将网页的内容(HTML)与样式(CSS)分离,从而提高代码的可维护性和可重用性。CSS的主要特点包括:
分离内容与样式
:通过将HTML内容和CSS样式分离,可以轻松地通过修改CSS文件来改变整个网站的外观。
层叠性
:多个样式规则可以应用于同一个元素,最终效果由这些规则按优先级顺序叠加而成。
灵活性
:提供了丰富的选择器和属性,可以精确控制元素的各个方面。
响应式设计
:使得网页能够在不同设备和屏幕尺寸上自适应显示。
性能优化
:合理使用CSS可以减少页面加载时间,提高用户体验。
二、CSS基本语法
CSS的基本语法包括选择器和声明。选择器用于指定要应用样式的HTML元素,声明则包含具体的样式属性和值。
1. 选择器
选择器分为以下几类:
元素选择器
:基于HTML标签名称选择元素。
示例:
p
选择所有段落元素。
类选择器
:基于类名选择元素。
示例:
.text
选择所有具有
text
类的元素。
ID选择器
:基于ID选择元素。
示例:
#id
选择具有特定ID的元素。
复合选择器
:结合多个选择器,如后代选择器、子代选择器等。
示例:
.parent .child
选择
.parent
类元素的
.child
类子元素。
2. 声明
声明由属性和值组成,用冒号隔开,多个声明用分号分隔。
示例:
color: red; font-size: 16px;
三、CSS引入方式
CSS可以通过以下三种方式引入:
行内样式
:在HTML标签的
style
属性中直接定义样式。
内部样式
:在HTML文档的