替换和非替换元素
替换元素
替换元素的展现不是由CSS来控制的。这些元素是一类外观渲染独立于CSS的 外部对象。
典型的可替换元素有:
- < img>
- < object>
- < video>
- 表单元素,如< textarea>、 < input> 。
某些元素只在一些特殊情况下表现为可替换元素,例如 < audio> 和 < canvas> 。
通过 CSS content 属性来插入的对象 被称作 匿名可替换元素(anonymous replaced elements)。
CSS在某些情况下会对可替换元素做特殊处理,比如计算外边距和一些auto值。
非替换元素
其他大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)。
块级元素和行内元素
块级元素(block-level)
块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。
行内元素
一个行内元素只占据它对应标签的边框所包含的空间。元素前后不会换行。
下面的元素都是行内元素:
- b, big, i, small, tt
- abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
- a, bdo, br, img, map, object, q, script, span, sub, sup
- button, input, label, select, textarea
行内元素与块级元素对比
内容
一般情况下,行内元素只能包含数据和其他行内元素。
而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。格式
默认情况下,行内元素不会以新行开始,而块级元素会新起一行。
引入CSS
link标记
通过link链接引入的css文件成为外部样式表。
为了成功地加载一个外部样式表,link必须放在head元素中,但不能放在其他元素内部(如title)。这样,浏览器就能找到并加载样式表,然后使用其中包含的样式来显示文档。
属性
- rel:代表关系,在这里为stylesheet
- type:描述了使用link标记加载的数据类型,这里为text/css
- href:样式表的URL,可以是绝对的也可以是相对的。
候选样式表
将rel属性值设置为alternate stylesheet,就可以定义候选样式表,只有用户选择这个样式表时才会用于文档表现。
如果浏览器能使用候选样式表,它会使用link元素的title属性值生成一个候选样式列表。
如果没有为样式表指定title,那么它将作为一个永久样式表,始终用于文档的显示。
内联样式
style元素应用在文档头部中,一定要有type属性,其值为text/css。
内联样式只在本页面生效。
@import
@import url(sheet2.css)
与link类似,@import也用于加载一个外部样式表,只是@import必须出现在style元素中,并且必须要在其他css规则之前,否则根本不起作用。
如果有一个外部样式表,它需要使用其他外部样式表中的样式,此时@import就非常有用。
@import url(a.css);
@import url(b.css);
@import url(c.css);
body{
color:red;
}
注意,@import一定要出现在样式表的开头、出现在其他规则之前,才会起作用。
行内样式
为单个元素添加style属性,指定样式。
style属性中只能放一个声明块,不能放整个样式表,因此,不能在style属性中使用@import。