CSS基础知识（一）

CSS简介

• CSS指层叠样式表(Cascading Style Sheets)
• 样式定义如何显示html元素
• 样式通常储存在样式表中
• CSS是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常储存在CSS文件中
• 多个样式定义可以层叠为一
• 样式对网页中的元素位置的排版进行像素级精确控制

多页面应用同一个样式

对一个元素多次设置同一个样式，这将使用最后一次设置的属性值

样式层叠次序

内联样式>内部样式表>外部样式表>浏览器缺省设置

CSS语法

选择器，以及一条或多条声明
selector {property: value}

值的不同写法和单位

采用十六进制的颜色值：
p { color: #ff0000; }
可以采用rgb值
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

注意

• 如果值为若干单词，则要给值加引号
• 如果要定义不止一个声明，则需要用分号将每个声明分开。
• CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的

CSS选择器的分组

你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。

 p,h1{color:red; }

p标签和h1标签的元素就变成了红色

继承问题

根据 CSS，子元素从父元素继承属性。

body{color: rgb(0, 3, 161)}

此时，大多数浏览器body的所有元素都会继承该属性（部分浏览器不支持）,
但如果子类不想要继承这个属性，就可以写出子类专门的样式

label{color: lime}

这样标签的样式会根据它特定的执行

派生选择器

选择器

最前面的的就是选择器
优先级：id>属性>类>元素>通用

通用选择器（全局选择器)

选择器位置用‘*’

*{color:red;}

优先级最低

元素选择器

也可以叫标签选择器

标签{属性：属性值；}
p{color:red;}

p标签的元素就变为红色
但是有多个p标签呢，我们该如何选定其中一个p标签？(可以用类选择器和id选择器)

类选择器

在 CSS 中，类选择器以一个点号显示，需要有定义类属性

• 类名不能为数字开头
• 可以重复使用一个类名

.center {text-align: center}
<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

可以配合派生选择器使用

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 “#” 来定义。

#red {color:red;}
#green {color:green;}
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

也可以配合派生选择器进行使用

属性选择器

下面的例子为带有 title 属性的所有元素设置样式：

[title]
{
color:red;
}

属性和值选择器

[title="h"]{color: green}

属性和值选择器 - 多个值

[title~=hello] { color:red; }

title包含hello的将会被选择