css基础概要

《css基础概要》由会员分享，可在线阅读，更多相关《css基础概要（51页珍藏版）》请在金锄头文库上搜索。

1、4.1 CSS概述 4.2 样式表语法 4.3 CSS的属性单位 4.4 CSS与HTML文档的结合方法 4.5 样式表的层叠、特殊性与重要性 4.6 元素分类 4.7 实训制作什锦果园业界资讯页面,第4章 CSS基础,4.1.1 CSS的基本概念 CSS（Cascading Style Sheets，层叠样式表单）简称为样式表，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。样式就是格式，在网页中，像文字的大小、颜色以及图片位置等，都是设置显示内容的样式。层叠是指当在HTML文档中引用多个定义样式的样式文件（CSS文件）时，若多个样式文件间所定义的样式发生冲突，将依

2、据层次顺序处理。 建立一个定义样式的CSS文件，并让所有HTML都调用这个CSS文件所定义的样式即可，如图4-1所示。,4.1 CSS概述,4.1.2 CSS的发展历史 在HTML迅猛发展的90年代，CSS也以各种形式应运而生，用户可以使用这些样式语言来调节网页的显示方式。 1996年12月W3C推出了CSS规范的第一个版本CSS1.0。这一规范立即引起了各方的积极响应，随即MicroSoft公司和Netscape公司纷纷表示自己的浏览器能够支持CSS1.0，从此CSS技术的发展几乎一马平川。1998年W3C发布了CSS2.0/2.1版本，这也是至今流行最广并且主流浏览器都采用的标准。 早在2

3、001年5月，W3C就着手开发CSS第三版规范，CSS3规范被分为若干个相互独立的模块。,4.1 CSS概述,4.1.3 CSS的代码规范 1目录结构命名规范 存放CSS样式文件的目录一般命名为style或css。 2CSS样式文件的命名规范 在项目初期，会把不同的类别的样式放于不同的CSS文件，是为了CSS编写和调试的方便；在项目后期，为了网站性能上的考虑会整合不同的CSS文件到一个CSS文件，这个文件一般命名为style.css或css.css。,4.1 CSS概述,3CSS选择符的命名规范 所有CSS选择符必须由小写英文字母或“_”下划线组成，必须以字母开头，不能为纯数字。 设计者要用有

4、意义的单词或缩写组合来命名选择符，做到“见其名知其意” 。,4CSS代码注释 为代码添加注释是一种良好的编程习惯。注释可以增强CSS文件的可读性，后期维护也将更加便利。 在CSS中添加注释非常简单，它是以“/*”开始，以“*/”结尾。注释可以是单行，也可以是多行，并且可以出现在CSS代码的任何地方。 例： .news_list li span float:left; /* 设置新闻发布时间向左浮动，与新闻标题并列显示*/ width:80px; color:#999; /*设置新闻发布时间为灰色*/ ,4.1 CSS概述,4.1.4 CSS的工作环境 1CSS的显示环境 浏览器是CSS的显示环

5、境。目前，浏览器的种类多种多样，虽然IE、Opera、Chrome、Firefox等主流浏览器都支持CSS，但它们之间仍存在着符合标准的差异。 2CSS的编辑环境 能够编辑CSS的软件很多，例如Dreamweaver、Edit Plus、EmEditor和topStyle等，这些软件有些还具有“可视化”功能，但本书不建议读者太依赖“可视化”。本书中所有的CSS样式均采用手工输入的方法，不仅能够使设计人员对CSS代码有更深入的了解，还可以节省很多不必要的属性声明，效率反而比“可视化”软件还要快。,4.1 CSS概述,4.1.5 体验CSS 要亲身体验CSS功能的强大之处，读者可以访问一个名为“C

6、SS禅意花园”的网站（,4.1 CSS概述,4.2.1 CSS规则 CSS规则由两部分构成：选择符（selector）和声明，而声明又由属性（attribute）和属性的取值（value）组成。其语法为： selector属性:属性值;属性:属性值,4.2 样式表语法,css选择符的分类,4.2.2 选择符 1类型选择符 类型选择符是指以文档对象模型（DOM）作为选择符，即选择某个HTML标签为对象，设置其样式规则。类型选择符就是网页元素本身，定义时直接使用元素名称。其格式为： E /*CSS代码*/ ,4.2 样式表语法,其中，E表示网页元素。,类型选择符的应用：,【HTML选择器】 三者中

7、优先级最低的选择器。 用于最基础样式的定义，比如定义页面整体的字体（给body定义font），链接的样式（给a定义颜色、下划线等属性），列表项的符号样式（给li定义list-style），段落的间距（给p定义padding或者margin）等等。这种声明优先级最低。 举例： body, table td font:normal 12px/1.8 Arial; a color:#ff0; text-decoration:none; a:hover color:#ff6; p text-indent:2em; ,4.2.2 选择符 2class类选择符 在应用时只要在标签中指定它属于哪一个类，就可

8、以使用该类的样式了。其格式为： ,4.2 样式表语法,【类选择器】 用于来定义一类可以在同一个页面内重复利用的样式。 如比较常用的.clearfix（一般是用于清除浮动），或者自己定义的用于新闻列表的样式，详细的写好链接、列表、边框以及背景等属性，有些人还会习惯把一些常用的属性作为一个类。 举例： .clearfix clear:both; content:.; height:0; overflow:hidden; zoom:1; .fl float:left; .red color:red; .box border:1px solid #ccc; .box li padding-left:1

9、5px; background:url(arrow.png) 5px center no-repeat ,4.2.2 常用的选择符 3id选择符 id选择符用来对某个单一元素定义单独的样式。定义id选择符时要在id名称前加上一个“#”号。 格式一（定义非特定标签的id选择符）： ,4.2 样式表语法,格式二（定义特定标签的id选择符）： ,【ID选择器】 三者中优先级最高的选择器。 一般用于一个页面中仅出现一次的容器，也常常作为js的接口。例如页面上的导航条（#nav）、页脚（#footer）、侧边栏（#sider）、主要内容（#mainBody）等等。 举例： #nav padding:10

10、px 0; background:url(/images/nav.png) 0 -124px repeat-x; #footer border-top:3px solid #630; #sider float:right: width:298px; border:1px solid #ccc; ,W3C标准这样规定的， 其一：在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class. 其二：当页面中用到js或者要动态调用对象的时候，要用到id,class类选择器和id选择器区别,ID选择器在某一个HTML页面中只能使用一次(当然也可以用好几次，不过就不符合 W3C标准了，那

11、页面也就不是标准页面喽，咱们的目的不就是为了做标准的页面么，所以建议大家不要在同一个html页面中多个标签拥有共同的ID)，就像在你所处的环境中，你只有一个ID(身份证)，不可能重复！相信大家也能看出来，ID选择器更具有针对性.,class选择器更容易理解了，就是使页面中的某些标签(可以是不同的标签)具有相同的样式，就像国庆中某个方阵中，肯定都是不同的人，却均穿红色衣服，手中高举花环，样式都是一样的，如果想让这一类人都有共同的样式，该怎么做呢呵呵，和ID选择器的用法类似，只不过把id换做class.,4.2.2 常用的选择符 4span选择符 标签也可以用来定义区域，但一般用于网页中某一个小问

12、题段落。其格式为： 或 5div选择符 div（division，部分的简写）在功能上与span相似，最主要的差别在于，div是一个块级标签。其格式为： 或 ,4.2 样式表语法,4.2.2 常用的选择符 6通配符选择符 是一种特殊的选择符，其作用是定义页面所有元素的样式，用“*”表示通配符选择符。其格式为： *CSS代码 例：将页面中所有元素的外边距和内边距设置为0，代码如下：,4.2 样式表语法,7包含选择符（见实例） 包含选择符能够简化代码，大范围的样式控制。其格式为： E1 E2 /*对子层控制规则*/ 8分组选择符（见实例） 分组选择符指的是对多个标签设置同一样的样式。格式为： E1

13、,E2,E3 /*CSS代码*/,4.2 样式表语法,9伪类选择符 所指定的对象文档中并不存在，它指定的是一个或与其相关选择符的状态。 伪类可以让用户在使用页面的过程中增加更多的互交效果，例如应用最为广泛锚点标签的几种状态（未访问链接状态、已访问链接状态、鼠标指针悬停在链接上的状态以及被激活的链接状态）。,4.2 样式表语法,【演练4-1】伪类的应用。当鼠标悬停在超链接的时候背景色变为其他颜色，并且添加了边框线，待鼠标离开超链接时又恢复到默认状态，这种效果就可以通过伪类实现。本例文件4-1.html在浏览器中的显示效果如图4-11所示。,4.2 样式表语法,CSS引用方法,1. 内嵌样式,CS

14、S引用方法,xxxxxxxxxx,只对当前tag里的内容有效,例：内嵌样式,CSS引用方法,例：内嵌样式DEMO运行结果,CSS引用方法,？,2. 内部样式表,CSS引用方法,在HTML的里面。只对当前页面有效,例：内部样式表,CSS引用方法,例：内部样式表DEMO运行结果,CSS引用方法,* 3. 外部样式表 （实际工作使用最广泛的一种形式）,CSS引用方法,解决当很多页面需要用到同样的样式！,CSS核心基础,在HTML中引入CSS的方法 将CSS样式代码保存在一个样式文件中，在页面中使用标签链接到这个样式文件，实现多个页面同调用一个样式文件。（同一页面可根据需要链接多个样式文件） ,例：外

15、部样式表,CSS引用方法,rel是Relations的缩写 指关联到一个stylesheet（样式表单）,例：外部样式表DEMO运行结果,CSS引用方法,4.5.1 样式表的层叠 样式表的优先级别从高到低为： 内嵌样式-内部样式表外部样式表 高优先级样式将继承低优先级样式未重叠定义，但覆盖重叠定义。（见实例4-7） 样式表的层叠性就是继承性，样式表的继承规则是：外部的元素样式会保留下来，由这个元素所包含的其他元素继承；所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把多层嵌套的样式叠加在一起，除非进行更改；遇到冲突的地方，以最后定义的为准。（见实例4-8）,4.5 样式表的层叠、特殊性与重要性,4.5.2 特殊性 特殊性描述了不同规