7.29笔记 深入理解CSS

71 阅读2分钟

什么是CSS

层叠样式表 — 也就是CSS — 是你在HTML之后应该学习的第二门技术。HTML 用于定义内容的结构和语义,CSS 用于设计风格和布局。比如,您可以使用 CSS 来更改内容的字体、颜色、大小、间距,将内容分为多列,或者添加动画及其他的装饰效果。

CSS有什么用

CSS 可以用于给文档添加样式 —— 比如改变标题和链接的颜色及大小。它也可用于创建布局 —— 比如将一个单列文本变成包含主要内容区域和存放相关信息的侧边栏区域的布局。它甚至还可以用来做一些特效,比如动画。查看本段内容中所给出的特定案例。

CSS语法

语法由一个 选择器(selector)起头。它选择了我们将要用来添加样式的 HTML 元素。

接着输入一对大括号 { }。在大括号内部定义一个或多个形式为属性(property)—值(value)对的声明。每个声明都指定了我们所选择元素的一个属性,之后跟一个我们想赋给这个属性的值。

冒号之前是属性,冒号之后是值。不同的 CSS 属性对应不同的合法值。

例如:有一个ID为box的盒子,我们想让这个盒子的背景颜色是红色,那么代码如下:

<div id="box">这是一个盒子</div>
#box {
    background:red;
}

其中#box是选择器(ID选择器),background是属性,red是值。

你会发现你已经很快掌握了一些属性的值,但是属性可以接受的值远不止这些。在 MDN 上每个属性都有单独的页面,不论你是忘记了某个属性,还是想要知道一个属性还能接受什么其他的值,这些页面都可以帮助你。CSS - 学习 Web 开发 | MDN (mozilla.org)

阅读