《CSS权威指南》笔记0.1:CSS和文档

1.起源

早起HTML最初只作为结构化标记语言,但随着人们对页面展现需求的不断增加,迫于无奈只能增加一些类似font、big之类的展现类的标签。随后出现一片混乱,页面被大量的table和font标签充斥,毫无语义。页面为了和设计保持一致,页面的结构只能做出妥协,结构化的HTML从此是路人。这样会引发几个问题:

  • 非结构化的页面简历索引困难,不利于搜索引擎检索
  • 降低可访问性
  • 高级页面只能应用某种结构
  • 不利于维护

既要使用结构化的标签,又要展示丰富的样式,基于以上的这些问题,一颗璀璨的明星CSS应运而生了,W3C于95年提出计划,96年已经演化为推荐草案。HTML负责结构,CSS负责展现。

2.CSS的几大特点

  • 丰富的样式,具备更丰富的表现力,可以修改任何元素的外观
  • 易用,集中定义规则,容易维护,可以被多个页面引用
  • 可以层叠,可继承
  • 结构、表现分离,减少html页面大小
  • 可兼容未来web发展

3.元素

3.1替换元素和非替换元素

3.1.1替换元素

替换元素包含例如img,input,可以理解为显示的内容并非来自文档本身内容。

3.1.2非替换元素

非替换元素包含例如span、div等几乎所有元素

3.2元素显示角色

包含块级元素和行内元素

3.2.1块级元素

块级元素默认会生成一个元素框,默认会填充父元素的内容区,旁边不能有其他元素。会在元素之前和之后生成分隔符。特例:列表项会生成一个标记符,此标记符会关联到元素框。例如div、p

3.2.2行内元素

行内元素不会在自身前后生成分隔符。例如a、strong、em。一般而言,XHTML中块级元素是不能嵌套在行内元素里面的(块级元素不能继承行内元素,反之可以)。display的默认值为inline

3.3CSS的引入方式

3.3.1link标记

格式如:<link rel="stylesheet" href="example.css" type="text/css" media="all" / >,添加到head标签内部。外部的样式文件中只能包含样式和注释,如果包含标签,则样式内容部分会被忽略。

属性:rel(relation)为stylesheet,type为加载的数据类型,href为资源地址。media表示支持的媒体,常见的3种,all、screen、print,多个属性使用逗号分隔。

rel为alternate stylesheet(候选样式表),此时link需要指定title,浏览器会显示带有指定title的样式表,以供用户切换,link中的title一般不指定,如果为多个首选样式表增加title,结果只能加载其中一个样式。

3.3.2style元素

格式如:<style type="text/css">具体样式、@import外部样式</style>

import指令:import url(sheet.css);

import必须出现在css规则之前,无法加载候选样式表,对于link和import的分析,见http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

<style type="text/css"><!-- import url();--></style>,当老版本浏览器无法识别style标签,标签内部的内容也不显示

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。