CSS(Cascading Style Sheets)是用于描述HTML或XML(包括如SVG、MathML等衍生技术)文档的样式的语言。它可以用来为元素设置颜色、字体、大小、布局等样式。
CSS基础
选择器
CSS选择器用于选中HTML中的元素，以便对其应用样式。常见的CSS选择器有：
- 元素选择器：通过HTML标签名来选中元素，如
p、.classname、#idname等。 - 类选择器：通过
.classname来选中元素，可以同时选中多个类。 - ID选择器：通过
#idname来选中唯一的元素。 - 属性选择器：通过
[attribute=value]来选中具有特定属性和值的元素。 - 伪类选择器：通过
:pseudo-class来选中特定的状态的元素，如hover、active等。 - 伪元素选择器：通过
::pseudo-element来选中元素的特定部分，如::before、::after等。
/* 选择所有段落 */
p { color: red; }
/* 选择类名为example的元素 */
.example { font-size: 16px; }
/* 选择ID为myElement的元素 */
#myElement { background-color: yellow; }
/* 选择属性为href且值为http://example.com的a标签 */
a[href="http://example.com"] { text-decoration: none; }
/* 选择鼠标悬停在链接上时改变颜色 */
a:hover { color: blue; }
盒模型
盒模型是用来描述元素在页面中所占空间的大小和位置的一种模型。一个元素通常由内容区和边框、内边距、外边距组成。
div { /* 所有div元素都应用以下样式 */
width: 200px; /* 宽度 */
height: 100px; /* 高度 */
padding: 10px; /* 内边距 */
border: 5px solid black; /* 边框 */
}
CSS布局
CSS布局是指如何将页面上的各个元素放置到合适的位置，并控制它们之间的相对位置。常见的CSS布局有：块级布局、行内布局、浮动布局、定位布局等。
CSS进阶知识
Flexbox布局
Flexbox是一种一维布局模型，可以用来轻松地实现各种复杂的布局需求。使用Flexbox需要添加display: flex;属性，然后可以使用一系列相关的属性来控制子元素的位置和大小。
.container { /* 所有容器元素都应用以下样式 */
display: flex; /* 将容器设置为flex布局 */
}
