第7天:CSS入门_基础教程

在了解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选择器"来定义。例如我们首先定义一个层

<div id="menubar"></div>

然后在样式表里这样定义:

#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

其中"menubar"是你自己定义的id名称。注意在前面加"#"号。

id选择器也同样支持派生,例如:

#menubar p { text-align : right; margin-top : 10px; }

这个方法主要用来定义层和那些比较复杂,有多个派生的元素。

6.类别选择器

在CSS里用一个点开头表示类别选择器定义,例如:

.14px {color : #f60 ;font-size:14px ;}

在页面中,用class="类别名"的方法调用:

<span class="14px">14px大小的字体</span>

这个方法比较简单灵活,可以随时根据页面需要新建和删除。

7.定义链接的样式

CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:

a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}

以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。

呵呵,看了这么多,有点头晕吧,实际上CSS的语法规范还有很多,这里列的只是一些常用的,毕竟我们是循序渐进,不可能一口吃成胖子:)

时间: 2024-10-25 05:30:49

第7天:CSS入门_基础教程的相关文章

第8天: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 solid;BORDER-R

CSS网页布局入门教程12:纵向导航菜单_基础教程

CSS css入门 css进阶 css高级 webUI 理论知识 实战应用 高级技巧 DOM DOM入门 DOM应用 DOM与浏览器 XHTML 参考手册 交流论坛

CSS教程之CSS的应用_基础教程

  一.In-line 行内  行内样式是在html标签里直接使用style属性     <p style="color: red">text</p>  设定段落文字红色.  但要记住,最后的HTML应该是独立出来,使用表现文档,所以行内样式应该在任何地方避免.  二.Internal 内部  使用于整个页面的植入内部样式在head标签里面,style标签包围样式.     <!DOCTYPE html PUBLIC "-//W3C//DTD X

第11天:不用表格的菜单_基础教程

布局初步搭建起来,我开始填充里面的内容.首先是定义logo图片: 样式表:#logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}页面代码:<div id="logo"><a title="网页设计师" href="http://www.w3cn.org/" ><img height="80" alt="链接到w3cn.org首页

CSS网页布局入门教程14:纵向下拉及多级弹出式菜单_基础教程

文章 CSS教程 DOM教程 XML教程 FLASH教程 参考 XHTML XML CSS BLOG 全部 网页技术 UI技术 FLASH技术 摇滚 纯音乐 古典金曲 电影原声

CSS网页布局入门教程13:下拉及多级弹出式菜单_基础教程

文章 CSS教程 DOM教程 XML教程 FLASH教程 参考 XHTML XML CSS BLOG 全部 网页技术 UI技术 FLASH技术 摇滚 纯音乐 古典金曲 电影原声

CSS网页布局入门教程11:带当前标识的标签式横向导航图片美化版_基础教程

主页 DIV+CSS教程 常用代码 水晶图标 幻灯图片 软件下载 CSS2.0实用手册

CSS网页布局入门教程10:带当前标识的标签式横向导航_基础教程

主页 DIV+CSS教程 常用代码 水晶图标 幻灯图片 软件下载 CSS2.0实用手册

CSS网页布局入门教程9:用CSS设计网站导航——横向导航_基础教程

网站导航是网站中最重要的元素,是网站提供给用户的最直接最方便的访问网站内容的工具.网站导航从形式上主要由横向导航.纵向导航.下拉及多级菜单导航第三种形式. 横向导航 作为门户网站的设计而言,主导航一般采用横向导航.由于门户网站下方文字较多,且每个频道均有一同的样式区分,因此在顶部固定一个区域设计统一风格且不占用过多空间的导航是最理想的选择,国内大部分门户均采用这种形式. 纵向导航 目前在门户网站的设计中已经不再流行,纵向导航更倾向于表达产品分类. 下拉导航 主要用于功能复杂的网站.在有些网站上也