文档流
文档流,就是HTML元素会按照它们各自在标记中出现的先后顺序,依次从页面上方“流向”下方。
元素
显示元素
块级元素
相互堆叠在一起沿页面向下排列,每个元素分别占一行。块级元素盒子会扩展到与父元素同宽,所有块级元素的父元素都是body,而它的宽度默认与浏览器的窗口一样宽(当然有少量边距)。行内元素
相互并列,只有在空间不足以并列的情况下才会折到下一行显示。行内元素盒子会“收缩包裹”其内容,并且会尽可能包紧。
可替换元素和不可替换元素
可替换元素
可替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。替换元素一般有内在尺寸,所以具有widht和height,可以设定。
比如:<img src="logo.png">
,没有指定img的width和height,就按照内在尺寸显示,也可以通过设置width和height来显示图片。
不可替换元素
大多数元素是不可替换元素,即其内容直接表现给浏览器。
文档添加样式的三种方法
行内样式
行内样式是写在html标签上的style,比如:
<div style="font-size: 12px; color: red;">inline css styling</div>
嵌入样式
嵌入的css样式是防在html文档的head元素中,比如:
<head>
<style type="text/css">
div {
font-size: 12px;
color: red;
}
</style>
</head>
链接样式
将样式表文件引到当前文档中,比如:
<link rel="stylesheet" type="text/css" href="style.css">
样式表中链接其他样式
@import url(css/style2.css)
@import指令必须出现在样式表中其他样式之前,否则@import引用的样式表不会被加载。
CSS命名惯例
CSS规则由选择符和声明两部分组成,其中选择符用于指出规则所要选择的元素,声明则又由两部分组成:属性和值。属性指出要影响元素哪方面的样式,值就是属性的一个新状态。
p {color: red;}
p:选择符
{color: red;}:声明
color:属性
red:值
对这个基本结构,有三种方法进行扩展:
多个声明包含在一条规则里
p {color: red; font-size: 12px; font-weight: bold;}
多个选择符组合在一起
h1, h2, h3 {color: red; font-weight: bold;}
多条规则应用给一个选择符
h1, h2, h3 {color: red; font-weight: bold;}
h3 {font-style: italic;}
特定元素选择符
上下文选择符:就是一组以空格分隔的标签名,用于选择作为指定祖先元素后代的标签。
article p {font-size: 14px;}
只有article后代的p元素才会应用后面的样式。
* *特殊的上下文选择符*
* 子选择符 >
标签1 > 标签2,标签2必须是标签1的子元素。 section > h2 {font-weight: bold;}
* 紧邻同胞选择符 +
标签1 + 标签2,标签2必须紧跟在其同胞标签1的后面。 h2 + p {font-size: 14px;}
* 一般同胞选择符 ~
标签1 ~ 标签2,标签2必须跟(不一定紧跟)在其同胞标签1后面。 h2 ~ a {color: red;}
* 通用选择符 \*
匹配任何一个元素。 * {margin: 0; padding: 0;}
ID和类选择符
同一个页面中的每一个id属性都必须只能用一次。
同一个页面中相同的类可以有多个,类的目的是为了标识一组具有相同特征的元素。
<div id="nav" class="logo "></div>
#nav {
width: 100%;
}
.logo {
width: 80px;
height: 80px;
}
-
属性选择符
属性名选择符
标签名[属性名]
选择任何带有属性名的标签名。img[title] {border: 1px solid green;}
属性值选择符
标签名[属性名="属性值"]
选择任何带有值为属性值的属性名的标签名。img[title="flower"] {border: 1px solid red;}
在html5中属性值的引号可加可不加
伪类
伪类这个叫法源自它们与类相似,但实际上并没有类会附加到标记中的标签上。伪类分两种:UI伪类和结构化伪类。
-
UI伪类
UI(User Interface,用户界面)伪类会在HTML元素处于某个状态时,为该元素应用CSS样式。链接伪类
链接还未点击
visited 链接已经点击过
hover 鼠标悬停在链接上
active 链接正在被点击a:link {color: red;} a:visited {color: blue;} a:hover {color: green;} a:active {color: yellow;}
:focus伪类
表单中的文本字段获取焦点时
input:focus {border: 1px solid red;}
:target伪类
如果用户点击一个指向页面中其他元素的链接,则那个元素就是目标(target),可以用:target伪类选中它。
例如:用户点击链接转向ID为more的元素时,为该元素添加红色背景。
<a href="#more">more information</a> <p id="more">This is the information</p>
#more:target {background: red;}
-
结构化伪类
结构化伪类会在标记中存在某种结构上的关系时,为相应元素应用CSS样式。:first-child 和 :last-child
:first-child代表一组同胞元素中的第一个元素,而:last-child则代表最后一个。:nth-child
:nth-child(n), n代表一个数值,一组同胞元素中第n个元素。
伪元素
伪元素就是你的文档中若有实无的元素。
::first-letter
选中首字母
p::first-letter {font-size: 300%;}
::first-line
可以选中文本段落(一般情况下是段落)的第一行
p::first-line {font-variant: small-caps;}
::before 和 ::after伪元素
可用于在特定元素前面和后面添加特殊内容。
<p class="age">18</p>
.age::before {content: "Age: ";}
.age::after {content: " years.";}
搜索引擎不会取得伪元素的信息(因为它在标记中并不存在)。因此,不要通过伪元素添加你想让搜索引擎索引的重要内容。
继承
CSS中的元素会继承其祖先元素中一部分CSS属性的值。
字体和文本样式是可以继承的。
层叠
层叠,就是层叠样式表中的层叠,是一种样式在文档层次中逐层叠加的过程,目的是让浏览器面对某个标签特定属性值的多个来源,确定最终使用哪个值。
浏览器层叠各个来源样式的顺序:
浏览器默认样式表
用户样式表
作者链接样式表(按照它们链接到页面的先后顺序)
作者嵌入样式
作者行内样式
层叠规则:
层叠规则一:找到应用给每个元素和属性的所有声明。
层叠规则二:按照顺序和权重排序。
层叠规则三:按特指度排序。
标记规则:
优先级顺序:ID、类、元素(标签)名
比如:
div .nav 特指度:0 1 1
div ul.nav .item 特指度:0 2 2
#nav li.item 特指度:1 1 1
div#nav li.item 特指度:1 1 2
比较时从特指度高向特指度低方向比较
层叠规则四:顺序决定权重。
如果两条规则都影响某元素的同一属性,而且它们的特指度也相同,则位置最靠下(或后声明)的规则胜出。
注:!import的优先级最高
规则声明
文本值
所有CSS的属性都有文本值。如:visibility属性有visible和hidden值。
数字值
数字值用于描述元素的各种长度。数字值主要分两类:绝对值和相对值。
绝对值 | 单位缩写 |
---|---|
英寸 | in |
厘米 | cm |
毫米 | mm |
点 | pt |
皮卡 | pc |
像素 | px |
相对值 | 单位缩写 |
---|---|
Em | em |
Ex | ex |
百分比 | % |
颜色值
1. 颜色名,如red
2. 十六进制颜色(#RRGGBB或#RGB),如#ff803a
3. RGB颜色值(R, G, B),如rgb(255, 255, 255)
4. RGB百分比值(R%,G%,B%),如100%, 0%, 0%
5. HSL(色相,饱和度%,亮度%),如HSL(0, 0%, 0%)
6. Alpha通道,1表示完全不透明,0表示完全透明