类选择器:以点号开头,针对所有拥有某一类的元素。
/*所有拥有center类的元素均居中*/
.center {text-align:center; }
<p class="center">居中显示</p>
<h1 class="center">居中显示</h1>
类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。
和 id 一样,class 也可被用作派生选择器.
.center p {
text-align:center;
}
元素也可以基于它们的类而被选择.
p .center {
text-align:center;
}
属性选择器:对带有指定属性的HTML元素指定样式。
/*带有title属性的所有元素设置为红色*/
[title] {
color:red;
}
/*title属性值="abc"的所有元素设置为红色*/
[title=abc] {
color:red;
}
/*包含指定值的title属性的所有元素设置为红色,适用于由空格分隔的属性值*/
[title~=abc] {
color:red;
}
/*带有包含指定值的 lang 属性的所有元素设置为红色,适用于由连字符分隔的属性值*/
[lang|=en] {
color:red;
}
插入样式表的三种方法
外部样式图:当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。
<head>
<link rel="stylesheet" type="text/css" rel="fileName.css" />
</head>
内部样式图:当单个文档需要特殊的样式时,就应该使用内部样式表。可以使用 <style> 标签在文档头部定义内部样式表。
<head>
<style type="text/css">
p {color:red; font-size:10px}
</style>
<head>
内联样式:要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。
注:大部分内容均参考copy自
http://www.w3school.com.cn/css/index.asp。