一个元素的样式,可以通过多种方式来定义,而多种定义方式之间通过复杂的影响关系决定了元素的最终样式。这种复杂既造就了CSS的强大,也导致CSS显得如此“混乱”而且难以调试。
对于层叠来说,共有三种主要的样式来源:浏览器对HTML定义的默认样式,用户定义的样式,开发者定义的样式
其中, 开发者定义的样式可以有三种形式:定义在外部文件(外链样式);定义在外部文件(外链样式):本教程中案例主要是通过这种形式定义样式;定义在特定的元素身上(行内样式):这种形式多用于测试,可维护性较差。
用户定义的样式表会覆盖浏览器定义的默认样式,然后网页开发者定义的样式又会覆盖用户样式。
在浏览器中打开前面写的例子页面,你会发现 元素中的文字会比其他文字粗一些。这些样式就是在浏览器定义的默认HTML样式。
而 元素是红色的,这是你在自己的样式表中定义的样式。
同时, 作为
的子元素,也继承了
的样式。同样的,
也从
中继承了许多的样式。
再来看看优先级,从高到低依次为:网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式。
对继承的元素来说,子元素自身的样式优先级高于从父级继承来的样式。
选择器(Selectors)
来源
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors#
一、标签名称
strong {
color: red; }
花括号中的部分称为声明(declaration)
关键字color是一个属性
, red
是其对应的值.
同一个声明中的 属性和值组成一个名值对(property-value pairs),名值对用分号分隔.
这个教程中将类似strong的选择器称为标签选择器(tag selector)
.CSS规范中称之为类型选择器(type selector).
除了标签名称,你还可以在选择器中使用属性值。这样你就可以更具体的描述你的规则.
其中 class
和 id 两个属性具有比较重要的地位。
类选择器(Class selectors)
通过设置元素的 class
属性,可以为元素指定类名。类名由开发者自己指定。 文档中的多个元素可以拥有同一个类名。
在写样式表时,类选择器是以英文句号(.)开头的。
ID选择器(ID selectors)
通过设置元素的 id
属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。
在写样式表时,ID选择器是以#开头的。
下面的p标签同时具有 class
属性和id
属性:
class="key" id="principal">
id 属性值 principal
必须在文档中是唯一的;但文档中的其他标签可以有和p相同的 class 属性值 key
.
在一个CSS样式表中, 下面的规则将使所有class属性等于key的元素文字颜色呈现绿色。(这些元素不一定都是 元素。)
.key {
color: green; }
下面的规则将使 id 等于 principal 的那个元素的文字变为粗体
:
#principal {
font-weight: bolder; }
如果多余一个规则指定了相同的属性值都应用到一个元素上,CSS规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度, 而类选择器比标签选择器(tag selector)更具确定度。
伪类选择器(Pseudo-classes selectors)
CSS伪类(pseudo-class)是加在选择器后面的用来指定元素状态的关键字。比如,:hover
会在鼠标悬停在选中元素上时应用相应的样式。
伪类和伪元素(pseudo-elements)不仅可以让你为符合某种文档树结构的元素指定样式,还可以为符合某些外部条件的元素指定样式:浏览历史(比如是否访问过 (:visited
), 内容状态(如 :checked
), 鼠标位置 (如:hover
).
基于关系的选择器
CSS还有多种基于元素关系的选择器。通过它们你可以更精确的选择元素。
选择器 | 选择的元素 |
A E |
任何是元素A的后代元素E (后代节点指A的子节点,子节点的子节点,以此类推) |
A > E |
任何元素A的子元素 |
E:first-child |
任何元素的第一个子元素E |
B + E |
任何元素B的下一个兄弟元素E |
你可以任意组合以表达更复杂的关系。
你还可以使用星号(*)来表示”任意元素“。
文本样式
CSS提供了几个属性用来操作字体。
我们先来看一个简写属性 font
,使用这个属性可以很方便的指定其他的字体属性。比如:
1、字体加粗,字体的风格:斜体和字体变形:小型大写字母
2、字体的大小
3、行高
4、字体
p {font: italic 75%/125% "Comic Sans MS", cursive;}
这条规则定义了字体的几个属性,使整个段落文本都变成斜体。
字体大小设置为每个段落父元素字体大小的3/4,行高设置为125%(比常规的间隔稍大一些)。
文本字体设置为 Comic Sans MS,假如该字体不被浏览器支持则使用默认字体:cursive。
这条规则还把bold和small-caps这些效果给去掉了(设置它们的值为normal)。
盒模型
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_Started/Boxes