本文介绍了CSS样式表的基础知识，包括CSS规则的组成、选择器类型（如标记选择器、类别选择器和id选择器）及如何在HTML页面中包含CSS样式表。同时，还提供了在页面中使用CSS样式的三种常见方式：行内样式、内嵌样式和链接式。
一、CSS规则：
在CSS样式表中包括3部分内容：选择符、属性和属性值。语法格式如下：
选择符{属性1:属性值1；
属性2:属性值2；}
eg：<style>
h2{//选择器
font-family:宋体；//font-family:属性。宋体：属性值。
}
</style>
CSS选择器：
1、标记选择器
HTML页面是由很多标记组成的，而CSS标记选择器就是声明页面中那些标记采用哪些CSS样式。
例如：a选择器就是用于声明页面中所有有<a>标记的样式风格。
<style>
a{
font-family:9px;
color:#F93;
}
</style>
2、类别选择器
使用标记选择器很快捷，但是会有一定局限性，如果声明标记选择器，那么页面中的所有该标记就都会发生相应变化。
如果页面中有两个<h2>，想要使每个<h2>标记显示的效果都不一样，这时就需要引入类别选择器。
类别选择器名称由用户自己定义，并以“.”号开头，要应用类别选择器，只需使用class属性来声明即可。
eg：
<style>
.one{ //定义类名为one的类别选择器
font-family:宋体； //设置字体
font-size:24px; //设置字体大小
color:red; //设置字体颜色
}
.two{ //定义类名为two的类别选择器
font-family:宋体； //设置字体
font-size:16px; //设置字体大小
color:red; //设置字体颜色
}
</style>
</head>
<body>
<h2 class="one">应用了选择器one</h2>
<p>正文1</p>
<h2 class="two">应用了选择器two<h2>
<p>正文内容2</p>
</body>
3、id选择器
id选择器是通过HTML页面中的id属性来选择增添样式，与类别选择器基本相同，但由于HTML页面中不能
包含两个相同的id标记，因此定义的id选择器也只能被使用一次。
命名id选择器要以“#”号开始，后加HTML标记中的id属性值。
eg：<style>
#first{
font-size:19px;
}
</style>
<body>
<p id ="first">ID选择器</p>
</body>
二、在页面中包含CSS
在页面中包含CSS有3种方式：
1、行内样式
2、内嵌样式
3、链接式
行内样式很直接，但是太繁琐；内嵌样式使用广泛，而且内嵌样式表更加便于维护；链接式是最常用 的一种引用样式表的方式。将CSS样式定义在一个单独的文件中，然后在HTML页面中通过<link>标记引 用，是一种最为有效的使用css样式的方式。
eg：
①创建名称为css的样式表，在表中定义页面 中<h1>、<h2>、<h3>、<p>标记的样式代码如下：
h1,h2,h3{
color:#6CFw;
font-family:"Trebuchet MS",ARIAL,Helvetica;
}
p{
color:#F)Cs;
font-weight:200;
font-size:24px;
}
②在页面中通过<link>标记将样式表引入到页面中，此时css样式表将自行加载到页面中。
<title>通过链接形式引入样式表</title>
<link href="css.css">
</head>
<body>
<h2>页面文字一</h2>
<p>页面文字二</p>
</body>
CSS3也引入了一些新特性，可自行了解。
扫一扫
829
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
