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的将会被选择