本教程主要介绍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, 即鼠标在超级链接上悬停时文本的颜色.