CSS基础：样式表简明教程学习

⊕ 网站首页 ⊕注册会员 ⊕ 本站免费电影 ⊕ 留言板 ⊕ 繁體中文

您现在的位置：陈鹏个人网站 >> 电脑应用 >> 网络应用 >> 网页制作 >> 正文

专题栏目

最新热门

最新推荐

相关文章

Adobe Flash CS4 试用版
 Photoshop CS3新特性概览
 腾讯TT4.5版发布 RSS可订
 Win Live Messenger 安全
 Adobe Illustrator CS3蓄
 闪客一族看过来 FlashCS
Live Messenger8.2支持多
 雅虎发布Messenger 9.0正
 最大规模 Adobe CS4套装
 Adobe Photoshop CS4最新

CSS基础：样式表简明教程学习

CSS基础：样式表简明教程学习

作者：陈鹏文章来源：eNet 点击数：更新时间：2009-9-12 8:45:30

样式表CSS在网页中占着极重要的地位，它的使用一直是热门讨论的话题。CSS是Cascading Style Sheet的简写，译为“层叠样式表单”。CSS几乎可以定义所有的网页元素，CSS虽然功能强大，但平时我们用到的是很少的，最常见的有：定义字体大小(用CSS定义的字体大小不会浏览器的字体设置而改变)、去掉超链下划线、超链接变色等等。下面详细、简练地讲如何使用CSS。
　　1.CSS加在什么位置？编辑CSS时候，强烈建议使用记事本之类的文本编辑工具打开你的网页代码。找到<head>和</head>，在<head>和</head>之间加入这句，<STYLE></STYLE>，然后所有的样式表都定义在<STYLE>和</STYLE>之间。
　　有很多网站喜欢把样式表写成一个CSS文件，然后所有文件都指向这里来调用它。我个人不喜欢这样做，因为每页的CSS都不一样，这样做的缺点还有，当由于网速慢、或服务器负担重CSS文件连接不上时，网页就变得很乱。直接把CSS嵌在网页中，是比较明智的做法。如果你的许多网页几乎完全一样，坚持想使用CSS文件，可使用这句<link href=***.css rel=stylesheet>来连接CSS文件。
　　实例1：<STYLE>td{font-size:9pt;line-height:150%}</STYLE>这句表示网页的字体大小为9磅字，行距150%，td是“单元格”元素，这句也就是对单元格内的字体起作用。这里的<style>后面的td，表示选择符，网页内所有的td元素都会起作用。这些选择符可以是所有的html标记，例如p、table、hr等等，只有少数的br除外。
　　实例2：<STYLE>a{color:FF0000}input{font-size:9pt}</STYLE>表示超链接都为红色，单行文本框的字体是9磅。
　　2.CSS作用很大的一方面就是可以用来大量减少网页代码，从而为网页减肥，原理就是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符。目前大部分网站都是使用class来引用的。
　　CSS中，class和id的作用是完全一样的，“class”单词比“id”多3个字母。id的使用方法，在网页<STYLE>和</STYLE>之间定义选择符名，选择符名前加#，这些选择符名可以是字母或数字、或组合，然后在网页的元素中使用id=**来引用它。
　　实例3：<STYLE>#8{color:000080}#p2{margin-left:20}#14{font-size:14pt}</STYLE>，然后在网页使用这句引用它：<a id=8>黑蓝色</a>，<a id=14>14磅的字</a>。段落……
　　也就是说，<a id=8>黑蓝色的字</a>等价于<a style=color:000080>黑蓝色的字</a>；<a id=14>14磅的字</a>等价于<a style=font-size:14pt>14磅的字</a>，以此类推。这里的介绍可能有点不太好理解，你可以多实践。
　　注意：在一定条件下，使用id来引用可能不起作用或报错、或与javascript的id发生冲突，这种情况下，你可以使用class来引用。class的使用方法与id一样，所不同的是：在网页的<STYLE>和</STYLE>之间定义选择符名，名前加.(即点)。例如<STYLE>.a1{color:FF0000}</STYLE>，然后用class=a1引用它。
　　3.样式表语法。样式表的项和它的值应该用冒号连接，例如color:FF00000。样式表也可直接嵌在段落当中，而不用class或id引用，例如<a style=font-size:12pt>12磅字</a>。也就是使用<* style=*:*>的语法。
　　4.小技巧。可根据需要灵活掌握，同一个选择符名可以多次给它定义，也可以多个选择符名定义同一句。例如<style>#a1{color:FF0000}#a1{font-size:9pt}</style>，它等效于#a1{color:FF0000;font-size:9pt}。多个选择符名定义同一句的方法是，各选择符名之间加逗号，例如<style>#a1,#b1{color:FF0000}#b1{font-size:9pt}</style>这句等效于#a1{color:FF0000}#b1{color:FF0000;font-size:9pt}。可能这里不太好理解，你只要自己稍微实践一下就可以灵活自己定义了。
　　5.样式表手册。下面列举最常用的样式表语句：
　　1)color (颜色，例如FF0000代表红色，000000代表黑色……)
　　2)font-size (字体大小)
　　3)font-family (字体类型)
　　4)width和height (宽度和高度)
　　5)line-height (段落行距，建议使用百分比的形式，例如150%)
　　6)margin-top表示段前；margin-bottom表示段后。margin-left表示整个段落向右缩进，margin-right表示段落右边距离右边的边框的距离。例如这句。而且也可直接定义在图片中，例如<img src=**.jpg align=right style=margin-right:9>表示这张图片向右对齐，并且图片再向左移动9像素。
　　7)text-align (段落的对齐方式，例如left、center、right)
　　8)background-color (背景颜色)
　　9)position:absolute;top:30;left:50 表示绝对定位(DW中的层)
　　总之，最常用的就是以上这几种了，需要多多实践。
　　6.最常用的样式表代码实例。
　　实例4：去掉超链接下划线，<style>a{TEXT-DECORATION:none}</style>
　　实例5：超链接变色，<style>a{COLOR:000000}a:hover{COLOR:FF0000}</style>
　　实例6：超链接变色且去掉下划线，<style>a{TEXT-DECORATION:none;COLOR:000000}a:hover{COLOR:FF0000}</style>
　　实例7：超链接变色且鼠标停在超链接上有下划线，鼠标离开下划线消失，<style>a{color:000000;TEXT-DECORATION:none}a:hover{color:FF0000;TEXT-DECORATION:underline}</style>
　　实例8，请再翻回头实例1：<STYLE>td{font-size:9pt;line-height:150%}</STYLE>，这句可以让你网页的字体擂打不动，不随IE浏览器的“查看→文字大小”的设置而改变。
　　如果您需要从网页中复制代码到FP或DW中，复制请注意：一定要先从这里复制到记事本，然后再从记事本复制到FP或DW的html模式下，切记切记，否则无效。

文章录入：陈鹏责任编辑：陈鹏

上一篇文章： CSS进阶：使用不同的CSS写法

下一篇文章：企业网站是否发挥作用的三个因素

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】