初学者应该先来了解的CSS网页知识

css|初学|网页

Cascading Style Sheets(简称CSS),翻译为“层叠样式单”或“级联样式单”,又简称“样式表”。

CSS的引入是用来扩展HTML的,而不是用来替代HTML的。也就是说CSS离不开HTML,它只是一项辅助工具,是对HTML功能的一种补充。

CSS的优势

在CSS标准里,不仅重新定义了HTML原有的样式,如文字的大小、颜色等;更加入了重叠文字、区块变化及任意位置放置等多项新属性。通过CSS可以使用更丰富、更灵活的样式,更简单地设计出更美观的网页。同时,也让网页的设计与维护更有效率。

减少图像文件的使用:很多网页为求设计效果,而大量使用图像,以致网页的下载速度变慢。CSS提供了很多文字样式的设定,且再加上IE内建的滤镜特效,因此可轻松取代原来图像才能表现的视觉效果。这样的设计方式让修改网页内容变得更方便,也大大提高了下载速度;

集中管理样式信息:CSS的基本概念在于可将网页要展示的内容与其表现的样式设定分开,也就是将网页的外观设定信息从网页的内容中独立出来,并集中管理。这样,当要改变网页外观时,只需更改样式设定的部分,HTML文件本身并不需要任何的更改;

共享样式设定:网页的样式设定和内容分离的好处,除了可集中管理外,如果进一步将CSS样式的信息存储成独立的文件,还可让多个网页文件共同使用它。这样,可省却在每一个网页文件中都要重复设定样式的麻烦;

将样式分类使用:相对于多份HTML文件可套用同一个CSS样式文件,也可以在一份HTML网页文件上套用多个CSS样式文件。

CSS的规则

CSS的样式规则由两部分组成:选择器和声明。

选择器就是样式的名称,包括自定义的类,HTML标签和CSS选择器样式。比如“.mycss”为自定义的类,“td”为标准HTML标签,而“a:link”则是CSS选择器样式;

声明则是用于定义样式元素的。声明由分两部分:属性(如font-size)和值(如12px)。对于一个选择器而言,可以有多个声明。比如一个声明是表示颜色,一个声明是表示大小等。

以下为CSS样式的代码片段:

td {
    font-size: 12px;
    color: #666666;
}
.cnbruce {
    background-color: #000033;
}
其中“td”和“.cnbruce”都属于选择器,“font-size”、“color”以及“background-color”都属于声明中的属性,而“12px”、“#666666”及“#000033”即为属性对应的值。每个选择器的声明都采用{…}包含。

CSS的形式

从CSS代码的标签形式来看,分如下3种CSS样式:

1,自定义CSS样式,又称类样式。可应用于任何标签,名称必须带有句点“.”,比如“.cnbruce”;

2,HTML标签样式。虽说自定义CSS样式可应用任何标签,但对于HTML固有的标签,每次都要选用自定义的样式就显得比较麻烦。所以HTML标签样式的出现就是为了扩展HTML标签的;

3,CSS选择器样式。此为高级选项,可用来定义标签的组合,比如“a”表示对超级链接样式的选择,“td”表示对单元格样式的选择,而如果对单元格中超级链接样式的选择则使用“td a”。

a {
    color: #3366CC;
}
td a{
    color: #FF0000;
}
如上代码的定义,对于普通插入的超级链接的颜色,和在单元格中使用的超级链接的颜色,将进行不同的显示。

CSS的应用范围

CSS无处不在,它可以分为以下两种。

外部CSS样式表:以扩展名为.css的文件而存在,文件中内容即是所有样式的选择和声明。该文件可做为共享文件,让多个文档共同引用并应用,达到站点文件样式的一致性。同时,如果修改该样式表文件,所有引用的文档都将改变其样式,达到网站迅速改版的目的。

内部CSS样式表:只存在于当前文档中,并只针对当前页进行样式应用的方法。一般存在于文档head部分的style标签内。

外部CSS样式表和内部CSS样式表可同时作用于一个页面,但当两种样式表出现对同一选择对象进行样式修饰时,浏览器将按照如下规则来应用样式效果:

若两者所声明的属性不相冲突,则显示为该两种样式的全部属性;
若两者所声明的属性直接相冲突,则采用内部样式表的样式。
所谓“求同存异,内部优先”。

时间: 2024-07-28 12:28:18

初学者应该先来了解的CSS网页知识的相关文章

CSS网页布局的意义与副作用

  随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+CSS制作方法,52CSS.com也成为了CSS网页布局技术学习的先锋站点,从实际应用情况来看,此种方法绝对好于表格制作页面的方法. 如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉.比较上手;但是,它却阻碍了一种更好的.更有亲和力的.更灵活的,而且功能更强大的网站设计方法--DIV+CSS. CSS网页布局的意义体现在如下方面: 一.使页面载入得更快 由于将大部分页面代码写在了C

CSS网页布局副作用分析

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 最近网络上流行CSS在网页布局时的好处与坏处,八度对作者分析的css网页布局的意义表示认同,但文中提到的副作用八度认为完全可以解决. 八度用引用原文和八度分析结合给大家分析一下 原文: 一.DIV+CSS尽管不是高不可及,但至少要比表格定位复杂的多,即使对于网站设计高手也很容易出现问题,更不要说初学者了. 八度分析:复杂是相对的,对你来说是很

实践DIV+CSS网页布局入门指南

css|网页 你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义.结构添加CSS.这篇文章将告诉你应该怎样把HTML结构化. 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,.hspace.align="left"等等)束手无策,不知道该转换成对 应的什么CSS语句. 当你解决了第一种问题,知道了如何结构

DIV+CSS网页制作布局技术漫谈

css|网页 CSS布局常用的方法:float : none | left | right 取值: none : 默认值.对象不飘浮 left : 文本流向对象的右边 right : 文本流向对象的左边 它是怎样工作的,看个一行两列的例子 xhtml: <div id="wrap">     <div id="column1">这里是第一列</div>     <div id="column2"&g

DIV+CSS网页制作布局技术

css|网页 CSS布局常用的方法:float:none|left|right 取值:none:默认值.对象不飘浮left:文本流向对象的右边right:文本流向对象的左边 它是怎样工作的,看个一行两列的例子 xhtml:<div id="wrap"><div id="column1">这里是第一列</div><div id="column2">这里是第二列</div><di

实例详细讲解DIV+CSS网页制作布局技术

css|网页 CSS布局常用的方法:float:none|left|right 取值:none:默认值.对象不飘浮left:文本流向对象的右边right:文本流向对象的左边 它是怎样工作的,看个一行两列的例子 xhtml:<div id="wrap"><div id="column1">这里是第一列</div><div id="column2">这里是第二列</div><di

DIV+CSS网页布局中margin优化的一种思路

css|网页|优化 margin是我们在进行CSS布局中非常常用的属性之一,但如果运用不得当,往往会产生过多的垃圾代码,让我们的编码体积不断增加.今天我们介绍一种编码优化的小实例,通过此例希望大家能意识到代码优化的途径是多种多样的,也算是一个抛砖引玉的引子吧. 看XHTML代码: <div id="main">     <div id="body1">          <div id="content1"> 

DIV+CSS网页布局之边框的设置方法

css|网页 CSS Borders 边框 边框可以运用到body里的大部分HTML元素. 制作一个元素的边框,你需要border-style边框样式.值可以是: solid, dotted, dashed, double, groove, ridge, inset and outset,具体样式大家可以实际下. border-width设定宽度,通常使用pixels即单位是px,同样有四边属性:border-top-width, border-right-width, border-botto

新手入门:来理解一下所谓的DIV+CSS网页布局

css|网页 什么是标准?各位慢慢理解. 而标准的核心就是内容,表现,行为,三者分离,这一点已是共识. CSS是其中一个重要的标准,这一点大家都没有异意的. 而HTML最终是向XML发展的,大家应该也没有什么意见. 而XHTML是发展中的过渡产物,这一点大家都是知道的. 对于DIV,只是XHTML中的一个标签,是在实现标准的网站重构过程中,非常重要的一个标签.对于重构,对于楼主,可以不用DIV,而继续用你的TABLE,这是你自己的事情.但用TABLE布局的落后状况及局限性,大家都有所知晓. 到底