《CSS权威指南》双鱼书概述——第一章CSS和文档

走远了吗. 提交于 2019-12-01 07:33:15

前言:CSS即层叠样式表 主要是影响一个或者一组文档的表现,没有文档,CSS毫无用处。

一、web的衰落

完全结构化的文本太过古板,太平常,虽然有N个理由要求使用结构化标记,但HTML已然走到了今天。

二、CSS做救星

丰富的样式,易于使用,在多个页面上使用样式,层叠,缩减文件大小,为未来做准备,所以CSS有更加丰富的外观,在一个位置上就能修改和创建整个文档的外观,可将样式表链接到网站上所有的文档,同时还规定了冲突规则,这些规则统称为层叠。 同时可以缩减文件大小,为将来做准备。

三、元素

元素时文档结构的基础,可以分为如下几类:

1》替换元素和非替换元素。

替换元素时指用来替换元素内容的部分并非由文档内容直接表示。如img元素。 input元素等。

大部分的HTML和Xhtml元素都是非替换元素,如span,h1~h6标题标签,表单元格,列表和Xhtml中的几乎所有的元素都是非替换元素。

2》元素显示角色

块级元素和行内元素。

块级元素生成一个元素框,会填充父元素的内容区,在元素框之前和之后生成了“分隔符”。如p,div元素,替换元素可以是块级元素,但通常都不是。

行内元素

行内元素在文本行内生成元素框,而不会打断这行文本,如a标签,strong和em也属于。

区别:在HTML和XHTML中,块级元素不能继承自行内元素,级不能嵌套在行内元素中。但是在CSS中,对于显示角色符合嵌套不存在任何限制。 即行内元素可以继承块元素,块元素可包含行内元素,反之不行。

四、结合CSS和XHTML。

即如何引用css,方法有:

1》link 标记

即 < link rel="stylesheet" type="text/css" href="sheet1.css" media="all"> 利用外部样式表,需要注意的是link必须放到head元素中,这个外部样式表中不能包含XHTML或任何其他标记语言,只能有样式规则和css注释。

属性

rel代表关系relation,关系为stylesheet,type总是设置为text/css ,href="外部样式表的位置" media的值是all表示要应用于所有表现媒体。aural 用于语音合成器,屏幕阅读器,和文档的其他声音表现等等。

如果一个文档要关联多个样式表,需要加载多个link标记。

候选样式表

将rel的值设为 alternate stylesheet,可以供用户进行选择。

2》style元素,在文档中单独出现

<style type="text/css> ...</script> 成为文档样式表或者嵌套样式表。

3》@import 指令

@import url(sheet2.css)用于加载外部样式表。 @import 出现在style容器中,还要放到其他的CSS规则之前,否则根本不起作用。

link和@import的区别:

每个@import指令的样式都会加载并使用。

4》内联样式

<p style="color:gray";>,除了body外部出现的标记,如title何head等,style属性可以与其他任何的HTML标记关联。

5》CSS注释

单行注释,多行注释,CSS注释不能嵌套。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!