CSS 大纲速记

概述

CSS（层叠样式表）是一种用于描述Web文档展示方式的标记语言。它可以用来对HTML网页进行格式化和布局，例如改变字体、颜色、间距、背景图片等。

语法

CSS规则集由选择器和一条或多条声明组成。

selector {
  property: value;
}

• 选择器指定要添加样式的HTML元素。
• 属性是要样式化的元素的特征，例如 font-size, color, background-image 等。
• 值是要应用于属性的具体值，例如 12px, #000000, url('image.jpg') 等。

选择器

标签选择器

通过元素的名称来选择元素。例如，p {color: blue;}将会选择所有的<p>标签，并改变他们的颜色。

ID 选择器

通过元素的ID属性来选择元素。例如，#myDiv {color: red;}将会选择id为 myDiv 的元素，并改变他们的颜色。

类选择器

通过元素的 class 属性来选择元素。例如，.btn {background-color: blue;}将会选择所有的带有btn类的元素，并改变他们的背景颜色。

后代选择器

通过层级关系选择元素。例如，div p {color: red;}将会选择所有嵌套在<div>元素中的<p>元素，并改变他们的颜色。

相邻兄弟选择器

选择紧贴着在同一父元素下的元素。例如，h1 + p {color: red;}将会选择所有直接紧跟在<h1>元素后的<p>元素，并改变他们的颜色。

伪类选择器

表示元素的特定状态。例如，:hover 伪类会在元素被鼠标悬停时应用样式。例如，a:hover {text-decoration: underline;}将会在鼠标悬停在超链接上时显示下划线。

属性

这里列出了一些常用的CSS属性及其用法。

背景属性

• background-color：元素的背景颜色。例如，body {background-color: #fff;}将会将整个文档的背景颜色设置为白色。
• background-image：将图像设置为元素的背景。例如，.hero-image {background-image: url('hero-img.jpg');}将会将一个 id 为 hero-image 的元素的背景设置为一个名为 hero-img.jpg 的图片。
• background-size：设置背景图像的大小。例如，.hero-image {background-size: cover;}将会将背景图像的大小设置为覆盖整个元素。

尺寸和间隔属性

• width：元素的宽度。例如，.container {width: 80%;}将会将类为 container 的元素的宽度设置为其父元素的80%。
• height：元素的高度。例如，.hero-image {height: 500px;}将会将一个 id 为 hero-image 的元素的高度设置为500像素。
• padding：元素内部的填充。例如，.box {padding: 10px;}将会将类为 box 的元素的内部填充设置为10像素。
• margin：外部填充。例如，.box {margin: 20px;}将会将类为 box 的元素的边距设置为20像素。

字体属性

• font-family：设置字体的名称。例如，body {font-family: Arial, sans-serif;}将会将整个文档的字体设置为 Arial，Sans-serif。
• font-size：设置字体大小。例如，h1 {font-size: 36px;}将会将所有标题1元素的字体大小设置为36像素。
• font-weight：设置字体的粗细。例如，h1 {font-weight: bold;}将会将所有标题1元素的字体设置为粗体。

结论

CSS是Web开发中不可或缺的一部分，可以大大改善用户的体验。学习以上速记内容可以让开发更高效、简洁。