在了解XHTML代码规范后,我们就要进行CSS布局。首先先介绍一些CSS的入门知识。
如果你已经很熟悉了,可以跳过这一节。
CSS是Cascading Style Sheets(层叠样式表)的缩写。
是一种对web文档添加样式的简单机制,属于表现层的布局语言。
1.基本语法规范
分析一个典型CSS的语句:
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
·其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
·样式声明写在一对大括号"{}"中;
·COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
·"#FF0000"和"#FFFFFF"是属性的值(value)。
2.颜色值
颜色值可以用RGB值写,例如:color : rgb(255,0,0),也可以用十六进制写,就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
3.定义字体
web标准推荐如下字体定义方法:
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
·Lucida Grande字体适合Mac OS X;
·Verdana字体适合所有的Windows系统;
·Lucida适合UNIX用户
·"宋体"适合中文简体用户;
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
4.群选择器
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
p, td, li { font-size : 12px ; }
5.派生选择器
可以使用派生选择器给一个元素里的子元素定义样式,例如这样:
li strong { font-style : italic; font-weight : normal;}
就是给li下面的子元素strong定义一个斜体不加粗的样式。
6.id选择器
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。
WEB2.0标准教程:第七天 CSS入门
时间: 2025-01-29 18:27:46
WEB2.0标准教程:第七天 CSS入门的相关文章
WEB2.0标准教程:第八天 CSS布
CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距:而现在则采用层(div)来定位,通过层的margin,padding,border等属性来控制版块的间距. 1.定义DIV 分析一个典型的定义div例子: 代码如下 复制代码 #sample{ MARGIN: 10px 10px 10px 10px; PADDING:20px 10px 10px 20px; BORDER-TOP: #CCC 2px s
WEB2.0标准教程:第八天 CSS布局入门
CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距:而现在则采用层(div)来定位,通过层的margin,padding,border等属性来控制版块的间距. 1.定义DIV 分析一个典型的定义div例子: 代码如下 复制代码 #sample{ MARGIN: 10px 10px 10px 10px; PADDING:20px 10px 10px 20px; BORDER-TOP: #CCC 2px s
WEB2.0标准教程:第一天 选择
前言 大家好!这个系列文章是W3CN阿捷编写的.是一些制作过程中的心得和经验,希望对大家有点帮助. 同时,非常感谢阿捷与我们分享经验与心得.好了,让我们开始吧 第一天 开始制作符合标准的站点,第一件事情就是声明符合自己需要的DOCTYPE. WEB2.0标准网页原代码,第一行就是: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD
WEB2.0标准教程:WEB标准是什么?
WEB标准 WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior).对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM).ECMAScript等.这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manufacturers Association
WEB2.0标准教程:第九天 第一个CSS布局实例
接下来开始要真正设计布局了.和传统的方法一样,你首先要在脑海里有大致的轮廓构想,然后用photoshop把它画出来.你可能看到有关web标准的站点大都很朴素,因为web标准更关注结构和内容,实际上它与网页的美观没有根本冲突,你想怎么设计就怎么设计,用传统表格方法实现的布局,用DIV也可以实现.技术有一个成熟的过程,把DIV看成和TABLE一样的工具,如何运用就看你的想象力了. 注:在实际应用过程中,DIV在有些地方的确不如表格方便,比如背景色的定义.但任何事情都有得有失,取舍在于你的价值判断.好
WEB2.0标准教程:如何应用WEB标准改善现有网站?
我们大部分的设计师依旧在采用传统的表格布局.表现与结构混杂在一起的方式来建立网站.学习使用XHTML+CSS的方法需要一个过程,使现有网站符合网站标准也不可能一步到位.最好的方法是循序渐进,分阶段来逐步达到完全符合网站标准的目标.如果你是新手,或者对代码不是很熟悉,也可以采用遵循标准的编辑工具,例如Dreamweaver MX 2004,它是目前支持CSS标准最完善的工具. 1.初级改善 为页面添加正确的DOCTYPE 很多设计师和开发者都不知道什么是DOCTYPE,DOCTYPE有什么用.D
WEB2.0标准教程:第五天 head区的其他设置
这些技巧主要讲meta标签设置的,其实与符合web标准关系不大,只要注意在最后加"/"关闭标签就可以,但是既然是入门教程,就写得详细一点吧.收藏夹小图标首先制作一个16x16的icon图标,命名为favicon.ico,放在根目录下.然后将下面的代码嵌入head区:<link rel="icon" href="/favicon.ico" type="image/x-icon" /><link rel=&quo
WEB2.0标准教程:应用WEB标准建设网站有什么好处?
我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站.例如1996-1999年典型的"浏览器大战",为了兼容Netscape和IE,网站不得不为这两种浏览器写不同的代码.同样的,每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来支持这种新技术或新设备,例如支持手机上网的WAP技术.类似的问题举不胜举:网站代码臃肿.繁杂浪费了我们大量的带宽:针对某种浏览器的DHTML特效,屏蔽了部分潜在的客户:不易用的代码,残障
WEB2.0标准教程:第三天 定义
第三步是定义你的语言编码:<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />为了被浏览器正确解释和通过W3C代码校验,所有的XHTML文档都必须声明它们所使用的编码语言,我们一般使用gb2312(简体中文),制作多国语言页面也有可能用Unicode.ISO-8859-1等,根据你的需要定义.通常这样定义就可以了.但是要补充说明的是,XML文档并不是这样定义语言编码的