2019-04-21

CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

<pre>selector {declaration1; declaration2; ... declarationN }</pre>

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

<pre>selector {property: value}</pre>

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。

在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。

<pre>h1 {color:red; font-size:14px;}</pre>

下面的示意图为您展示了上面这段代码的结构:

CSS 语法

提示:请使用花括号来包围声明。

CSS 元素选择器

最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。

如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

ID选择器

首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。

请看下面的规则:

*#intro {font-weight:bold;}

与类选择器一样,ID 选择器中可以忽略通配选择器。前面的例子也可以写作:

#intro {font-weight:bold;}

这个选择器的效果将是一样的。

第二个区别是 ID 选择器不引用 class 属性的值,毫无疑问,它要引用 id 属性中的值。

以下是一个实际 ID 选择器的例子:

<p id="intro">This is a paragraph of introduction.</p>

CSS选择器.png

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容