CSS学习笔记：基础知识

替换和非替换元素

替换元素

替换元素的展现不是由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。