222
发新话题
打印

css基础教程属性篇之通用器

本主题由 大漠孤狼 于 2008-9-6 15:30 加入精华

css基础教程属性篇之通用器

本教程主要介绍CSS常用选择器与CSS的颜色(color)属性

每个网页都有它们的CSS源文件,我们可以点击“右键”--->“查看页面源代码”或者在菜单栏里点击“查看”--->”查看页面源代码“,这样我们就能看到这个页面的源代码了,有写页面的CSS代码也包含在页面里,但是有些却是通过外部引用CSS的,把CSS文件放置到外置文件里,可以有效减少搜索引擎的阅读,能更快的进入到正题。

一般情况下通过下面的方法引用外置CSS文件:
复制内容到剪贴板
代码:
<link href="外置CSS的路径" rel="stylesheet" type="text/css" media="screen"/>
把这段代码放到标签<head></head>里,如果你感觉放在外置文件里比较麻烦,你可以把它也放置的<head></head>标签里,格式如此:
复制内容到剪贴板
代码:
<style type="text/css">
内容
</style>
CSS常用选择器:
1>类型选择器(也称:元素选择器或简单选择器)
引用:
        例:
                p {color:black;}
                a {text-decoration:underline;}
                h1 {font-weight:bold;}
2>后代选择器(由两个选择器之间的空格表示,用来寻找特定元素或元素组成的后代)
复制内容到剪贴板
代码:
        例:
                li a{text-decoration:undeline}
3>ID选择器:由一个#号表示
复制内容到剪贴板
代码:
        例:
                #mainContent{
                        font-size:1.8em;
                        padding:10px 0px 10px 0px;
                        }
在页面中引用<div id="mainContent"></div>
4>类选择器:由一个“.”表示
复制内容到剪贴板
代码:
        例:
                .mainContent{
                        font-size:1.8em;
                        padding:10px 0px 10px 0px;
                        }
在页面中引用<div class="mainContent"></div>
5>伪类选择器:根据文档结构之外的其它条件对元素应用样式[表单元素或链接的状态使用伪类]
复制内容到剪贴板
代码:
例:
                      a:link {color:blue;}
                      a:visited {color:red;}
                      a:hover,a:active {color:green;}
6>通用选择器:类似于通配符

              *{
                padding:0;
                marging:0;
        }

CSS的颜色(color)属性
css能够控制的颜色主要包括文本颜色,边框颜色等,对于背景颜色和边框颜色会在以后说明,在这主要解释文本颜色的表现.color表示的颜色属性值为#FF0000(一个#加上十六进制值),简写为#F00. 我们甚至可以用英文单词red表示属性值: color: red; 效果是一样的. 颜色的其他属性值还有RGB值,在css中不太常用,这里就不再叙述.
复制内容到剪贴板
代码:
        例:
        a {   
            color: #545454;
            text-decoration:none;
        }
        a:hover {
            color: #919191;
        }
在选择器a中,文本颜色的属性值为#545454, 即存在超级链接的文本颜色为#545454; 而a:hover为伪类选择器(表现依赖于浏览器的状态), 它的属性值为#919191, 即鼠标在超级链接上悬停时文本的颜色.
成功只有努力去奋斗!

TOP

干脆你申请这个版块的斑竹吧

TOP

呵呵,做自由攒稿人
教程有不对之处,还望斧正
成功只有努力去奋斗!

TOP

发新话题