CSS 的基本语法是:选择器{样式属性:属性值;}
h1{ color: red; font-size: 36px; }
上面的代码片段中,h1 是选择器,用来选中页面中的 h1 元素。color 和 font-size 是样式属性,而 red 和 36px 则是它们的属性值。
在 CSS 中,有三种选择器:元素选择器、类选择器和 ID 选择器。
/* 元素选择器 */ p{ font-size: 14px; } /* 类选择器 */ .red-text{ color: red; } /* id 选择器 */ #header{ background-color: gray; }
元素选择器是选中所有指定类型的元素,类选择器是选中在 HTML 中有指定类名的元素,而 ID 选择器则是选中在 HTML 中有指定 ID 名的元素。
除了单个的属性赋值外,还可以同时赋值多个属性。
.main-title{ font-size: 28px; font-weight: bold; color: blue; }
值得注意的是,在 CSS 中,选择器的权重可能影响最终的样式。权重值如下:
- ID 选择器:权重值为 100
- 类选择器、属性选择器和伪类选择器:权重值为 10
- 元素选择器和伪元素选择器:权重值为 1
如果两个选择器权重值一样,那么后定义的样式将覆盖之前定义的样式。
CSS 还有一些其他属性,例如盒模型属性(如 padding、margin、border)等等。不要被这些属性吓到,只要开始尝试一些简单的属性,并不断学习进阶的内容,CSS 就会变得轻松易懂。