元素(Element)是文档结构的基础。
替换元素和非替换元素。
- 替换元素:用来替换内容的部分并非由文档内容直接表示。例如
<img src="howdy.gif">
,img没有具体内容,它是由文档本身之外的一个图像文件来替换。 - 非替换元素:元素内容由用户代理(浏览器)在元素本身生成的框中显示。例如
<span>hello</span>
,文本”hello”将由用户代理显示。
块级元素(block-level)和行内元素(inline-level)。
可用display
来改变一个元素的显示方式。例如可以将行内元素以块级方式显示span { display:block ;}
,也可以将块级元素以行内元素显示p { display: inline ;}
- 块级元素:块级元素生成一个元素框,(默认的)它会填充父元素的内容区,旁边不能有其他的元素。也就是,它会在元素框之前和之后生成“分隔符”。例如
p
,div
,li
等,都是块级元素。 - 行内元素:行内元素在一个文本行内生成元素框,而不会打断这行文本。例如
a
,span
,等。块级元素不能继承自行内元素(即块级元素不能嵌套在行内元素中)。
css样式引入方式
css样式引入方式一般有三种方式:link标签,style元素,元素内联style。
link与@import的相同点:
- 都可以通过绝对或相对URL引入外部样式表。
- 都可以有多个,例如多个link,多个@import。
- 都可以选择样式表所应用的媒体,link标签中通过
media
指定,@import通过url后指定,例如:
//link 标签方式
<link rel=”stylesheet” type=”text/css” href=”sheet1.css” media=”all”>
//@import方式
@import url(sheet2.css) all;
link与@import不同点:
- link标签必须在
head
中,@import指令可以在style
中或则外部样式表中,并且@import指令必须放在其他css规则前面,否则不起作用(IE总会起作用)。 - 当
head
中有多个link时,浏览器会默认只应用rel="stylesheet"
的指定的外部样式表,而不会应用rel="alternate stylesheet"
的外部样式表(备用样式表);而多个@import时,都会被加载并应用。
向后可访问性
有些老的浏览器可能不识别style
标签,就会将<style></style>
忽略掉,但是,style的css规则声明不一定会被忽略,因为,它们看上去就是正常的文本,会被原样显示出来,而这个不是我们想要的结果。为了解决这个问题,建议将css规则声明放在一个注释标签中。这样,即使老的浏览器不识别style
标签,也会将注释内的css规则声明忽略。而能识别style
的浏览器依旧可以识别注释内的css规则声明。例如:
<style type="text/css"><!--
@import url(sheet2.css);
h1{ color:red ;}
--></style>