CSS样式表一席谈之CSS快速入门

css|快速入门|样式表

  在当今的网页制作中,几乎所有漂亮的网页都用了CSS。 CSS是 Cascading Style Sheet的缩写,有些书上把它译为 “层叠样式表”。有了CSS的控制,我们的网页便会给人一种赏心悦目、工工整整的感觉,同时字体的色彩变化也使主页变得更加生动活泼。虽然只短短的十几行代码,得到的效果却不同凡响。其基本用法是在网页中插入如下格式的一段代码:

  下面以一段比较典型的CSS代码为例介绍其具体用法。

  例:这段代码 中间的部分共七行,可看出有这样的特点:前两行的格式分别为P {……} 和 TD {……} 。后五行均是 A:命令词 {……} 的格式。其中前两行的作用是对网页文字的字体、大小、颜色等的控制,而后五行则是对链接的色彩及下划线的控制。

  1.文字控制

  例中的前两行:

  P {FONT-FAMILY: 宋体; FONT-SIZE: 9pt; LINE-HEIGHT: 12pt; color:#000000} TD {FONT-FAMILY: 宋体; FONT-SIZE: 9pt} 说明:FONT-FAMILY:宋体;(指定网页文字的字体) FONT-SIZE:9pt;(指定网页文字的字号大小,pt是表示大小的单位)LINE-HEIGHT:12pt;(指定行与行的垂直距离,即行高)color:#000000(指定网页文字的颜色,#000000 代表黑色,为十六进制数)TD {FONT-FAMILY:宋体;FONT-SIZE:9pt}(对网页表格里的文字进行控制)

  2.链接色彩变化及下划线的控制

  例中的后5行说明:

  A:hover {BACKGROUND-COLOR: #ffccff; COLOR: #0080ff}

  (hover表示鼠标指示时,链接文字背景色为#ffccff;前景色为#0080ff)

  A:link {color:#000000;TEXT-DECORATION: none}

  (link表示未被访问时,链接颜色为黑色,链接无下划线.)

  A:visited {color:gray;TEXT-DECORATION: none}

  (visited表示被访问后,链接颜色为灰色,链接无下划线.)

  A:active {color:green;text-decoration: none}

  (active表示鼠标点击时,链接颜色为绿色,链接无下划线.)

  A:hover {TEXT-DECORATION: underline}

  (hover表示鼠标指示时,链接显示下划线)

  注释:

  none——没有下划线

  underline——下划线

  overline——上划线

  line-through——中划线

  以上是比较典型的一段CSS代码,代码中的参数值可随意更换调试。有了CSS的预先设置,你会发现制作网页变得更轻松了。

时间: 2024-11-01 21:24:28

CSS样式表一席谈之CSS快速入门的相关文章

CSS样式表一席谈之利用CSS改变字体

css|样式表 在过去页面上的字体是一成不变的,静静的呆在那.当DHTML(动态网页)出现后,我们能有更多方式控制字体了.一般来说,动态字体的实现核心是CSS(层叠样式表)加JavaScript.使用了以上两项技术后,字体就能产生许多变化. 1.CSS定义字体的标签元素 font-family: 设置字体字族. <span style="font-family: 黑体, 宋体(GB)">田涛</span> font-sytle:设置字体类型. <span

CSS样式表一席谈之绝对定位与相对定位

css|样式表 定位属性将是网虫们打开幸福之门的钥匙: 绝对定位 H4 { position: absolute; left: 100px; top: 43px } 这项CSS规则让浏览器将起始位置精确地定在距离浏览器左边100象素,距离其顶部43象素的位置,请观看代码的执行效果. 注意这里唯一设置了的是左边和顶部,也就说,文字将从左到右,从上到下载入浏览窗口. 左边和顶部属性很直观,左边(left)设定要素距浏览器窗口左边的距离,顶部(top)设定距离浏览器窗口顶部的距离. 设定这些距离时,你

CSS实战:写CSS样式表的参考标准实战

文章简介:点分离(SoC).他已经让我们接受膨胀.报废.冗余.缓存甚至更多.现在,我确信唯一的方法是远离这一原则来改善我们的作者样式表. 当谈到CSS,我相信神圣的原则--点分离(SoC).他已经让我们接受膨胀.报废.冗余.缓存甚至更多.现在,我确信唯一的方法是远离这一原则来改善我们的作者样式表. 对于从未听说过SoC原则在Web设计中的上下文,它涉及到一些俗称"三层分离": 结构 表现 行为 为了避免一些担忧,将它划分成独立的资源:一个HTML文档,一个或多个样式文件和一个或多个Ja

网页每次加载调用不同CSS样式表

在上一篇文章中曾提到要给自己的微博客制作多个样式,然后用户每次访问时随机载入样式,让微博在视觉上保持新鲜感.虽然思路与实现都比较简单,但还是想记录下来,与大家分享. [明确需求] 网页加载样式表default.css,会展现默认风格.同时为实现多种风格,制作了skin1.css,skin2.css,skin3.css三种定制样式.如果在加载default.css后,再加载其中某一样式表,则会覆盖默认风格,展示新风格: 每次随机加载skin1.css.skin2.css.skin3.css,或者使

推荐:常用CSS样式表缩写语法总结

css|样式表|语法 常用CSS缩写语法总结 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1; property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2

如何在网页中插入CSS样式表

  本例为CSS入门系列教程,在这一课中我们将学习如何在网页中插入CSS样式表,主要学习在页面中插入链入外部样式表.内部样式表.导入外表样式表和内嵌样式的四种方法,另外作者还讲解了多重样式表的叠加的运用以及如何在xml中插入CSS,希望能给对网页制作感兴趣的朋友带来帮助~~ CSS入门教程之如何在网页中插入CSS样式表 前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用.当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表.内

如何用JavaScript实现动态修改CSS样式表_javascript技巧

看过我写的<用JavaScript动态建立或增加CSS样式表的实现方法>之后,你就很容易想明白如何修改CSS样式表了. 正好今天在论坛碰到一位朋友问这样的一个问题: <style> .ls{width=120px;} </style> <script> //在这里加一句来改变.ls中width的值,如何写 </script> 有的朋友回答:"如果使用.ls的对象很多的话,用JS确实不方便, jquery方便,$(".ls&qu

CSS样式表技巧总结

一.关于注释 在创建xhtml+CSS网站时,CSS中的注释非常重要.在创建CSS样式时,应当保持随手注释的习惯.一般的,我习惯于使用"/* 注释内容 */"的格式来写注释,因为在EditPlus等具有高亮功能的编辑器里,使用C语言中常用的"/***************/"之类的注释是无意义的,没有必要填充大量无意义内容作为分隔.带有注释的文档作为网站的原始CSS文档,在发布网站的时候,可以使用CSS压缩工具压缩CSS,在输出的CSS中去掉注释以提高文件传输效率

网页添加CSS样式表的四种方式

核心提示:网页添加CSS样式表的四种方式 一.使用STYLE属性: 将STYLE属性直接加在个别的元件标签里. <元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}例如: <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二