css和文档

元素(Element)是文档结构的基础。

替换元素和非替换元素。
  • 替换元素:用来替换内容的部分并非由文档内容直接表示。例如,img没有具体内容,它是由文档本身之外的一个图像文件来替换。
  • 非替换元素:元素内容由用户代理(浏览器)在元素本身生成的框中显示。例如hello,文本"hello"将由用户代理显示。
块级元素(block-level)和行内元素(inline-level)。

可用display来改变一个元素的显示方式。例如可以将行内元素以块级方式显示span { display:block ;},也可以将块级元素以行内元素显示p { display: inline ;}

  • 块级元素:块级元素生成一个元素框,(默认的)它会填充父元素的内容区,旁边不能有其他的元素。也就是,它会在元素框之前和之后生成“分隔符”。例如pdivli等,都是块级元素。
  • 行内元素:行内元素在一个文本行内生成元素框,而不会打断这行文本。例如aspan,等。块级元素不能继承自行内元素(即块级元素不能嵌套在行内元素中)。
css样式引入方式

css样式引入方式一般有三种方式:link标签,style元素,元素内联style。
link与@import的相同点:

  1. 都可以通过绝对或相对URL引入外部样式表。
  2. 都可以有多个,例如多个link,多个@import。
  3. 都可以选择样式表所应用的媒体,link标签中通过media指定,@import通过url后指定,例如:
    //link 标签方式

    //@import方式
    @import url(sheet2.css) all;

link与@import不同点:

  1. link标签必须在head中,@import指令可以在style中或则外部样式表中,并且@import指令必须放在其他css规则前面,否则不起作用(IE总会起作用)。
  2. head中有多个link时,浏览器会默认只应用rel="stylesheet"的指定的外部样式表,而不会应用rel="alternate stylesheet"的外部样式表(备用样式表);而多个@import时,都会被加载并应用。
向后可访问性

有些老的浏览器可能不识别style标签,就会将忽略掉,但是,style的css规则声明不一定会被忽略,因为,它们看上去就是正常的文本,会被原样显示出来,而这个不是我们想要的结果。为了解决这个问题,建议将css规则声明放在一个注释标签中。这样,即使老的浏览器不识别style标签,也会将注释内的css规则声明忽略。而能识别style的浏览器依旧可以识别注释内的css规则声明。例如:

你可能感兴趣的:(css和文档)