一、CSS的基本结构
CSS规则由选择器和声明块组成,基本结构如下:
selector {
property: value; /* more properties and values */
}
- 选择器(Selector):指定要应用样式的HTML元素。
- 声明块(Declaration Block):包含一个或多个声明,每个声明由属性和值组成,属性与值之间用冒号(:)分隔,每个声明以分号(;)结束。
二、选择器类型
CSS提供了多种选择器来定位HTML元素,包括:
- 元素选择器 :选择所有指定的HTML元素,如
p { color: red; }选择所有<p>元素。 - 类选择器 :选择所有指定类名的元素,使用
.表示,如.className { color: blue; }选择所有类名为className的元素。 - ID选择器 :选择具有指定ID的元素,使用
#表示,如#idName { color: green; }选择ID为idName的元素。 - 复合选择器 :
- 后代选择器 :选择某个元素内的所有指定元素,使用空格分隔,如
div p { color: yellow; }选择所有在<div>内的<p>元素。 - 子选择器 :选择某个元素的直接子元素,使用
>分隔,如ul > li { color: purple; }选择所有<ul>的直接子元素<li>。 - 相邻兄弟选择器 :选择紧接在某元素后的指定元素,使用
+分隔,如h1 + p { color: orange; }选择紧接在<h1>后的第一个<p>元素。 - 通用兄弟选择器 :选择某元素后面的所有指定元素,使用
~分隔,如h1 ~ p { color: pink; }选择<h1>后的所有<p>元素。
- 后代选择器 :选择某个元素内的所有指定元素,使用空格分隔,如
- 伪类选择器 :选择特定状态的元素,如
:hover选择鼠标悬停状态的元素,:first-child选择父元素的第一个子元素。 - 伪元素选择器 :选择元素的特定部分,如
::before和::after用于在元素内容的前后插入内容。
三、常用CSS属性
CSS提供了丰富的属性来控制网页的样式,包括但不限于:
- 字体样式 :
font-family、font-size、font-weight、font-style等。 - 文本样式 :
color、text-align、text-decoration、text-indent、line-height等。 - 背景样式 :
background-color、background-image、background-repeat、background-position、background-size等。 - 盒模型 相关:
border、margin、padding、width、height等。 - 布局与定位 :
display(如block、inline、flex、grid)、position(如static、relative、absolute、fixed)、top、right、bottom、left、z-index等。
四、CSS单位
CSS支持多种单位,包括:
- 绝对单位 :如
px(像素)、cm(厘米)、mm(毫米)、in(英寸)、pt(磅)、pc(派卡)。 - 相对单位 :如
em(相对于元素的字体大小)、rem(相对于根元素<html>的字体大小)、vw(视口宽度的百分比)、vh(视口高度的百分比)、vmin、vmax(相对于视口较小或较大的那一个百分比)。
五、CSS的编写位置
CSS的编写位置主要有三种:
- 行内样式 :直接写在HTML元素的
style属性中,只影响当前元素。 - 内部样式 :将CSS代码写在HTML文档的
<head>部分内的<style>标签中,影响当前页面的所有元素。 - 外部样式 :将CSS代码写在单独的
.css文件中,然后在HTML文件中通过<link>标签引入,可以跨页面复用样式,实现结构与样式的分离。