CSS学习(三)

最新推荐文章于 2024-11-10 23:23:33 发布

原创最新推荐文章于 2024-11-10 23:23:33 发布 · 178 阅读

0 ·

CC 4.0 BY-SA版权

读书笔记专栏收录该内容

3 篇文章

订阅专栏

[color=red][b]类选择器[/b][/color]：以点号开头，针对所有拥有某一类的元素。
/*所有拥有center类的元素均居中*/
.center {text-align:center; }
<p class="center">居中显示</p>
<h1 class="center">居中显示</h1>

[color=red]类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。[/color]
[b]和 id 一样，class 也可被用作派生选择器.[/b]
.center p {
text-align:center;
}
[b]元素也可以基于它们的类而被选择.[/b]
p .center {
text-align:center;
}

[color=red][b]属性选择器[/b][/color]：对带有指定属性的HTML元素指定样式。
/*带有title属性的所有元素设置为红色*/
[title] {
color:red;
}
/*title属性值="abc"的所有元素设置为红色*/
[title=abc] {
color:red;
}
/*包含指定值的title属性的所有元素设置为红色,适用于由空格分隔的属性值*/
[title~=abc] {
color:red;
}
/*带有包含指定值的 lang 属性的所有元素设置为红色,适用于由连字符分隔的属性值*/
[lang|=en] {
color:red;
}

[color=red][b]插入样式表的三种方法[/b][/color]
外部样式图：当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <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自[url]http://www.w3school.com.cn/css/index.asp[/url]。