CSS用来定义HTML页面中文字显示样式,还有类、层等特性,还可以对文字重叠、定位等。引入CSS到HTML中,主要是因为在传统的HTML上控制文字显示样式和版面非常难,引入CSS之后,控制方式变得简单,页面也变得更加美观、丰富。
所以CSS主要就是用来提供样式,样式一般用样式表来描述,每一种样式对应一种样式表。
一 样式表
一个样式表的组成有三部分:选择符、属性、属性值。看下面代码中注释:
<style>
h2 { <!--h2是选择符,又称选择器,样式表的标记-->
font-size:宋体; <!--font-size是属性,宋体就是它的值,两者通过:号隔开-->
}
</style>
属性:可以指定字体,背景,布局,边界等。
注:样式表包含在<style>中,<style>标签可以位于<head>标签中,也可以与<head>标签并列。
二 CSS选择器
CSS常用选择器有标记选择器,类别选择器,ID选择器等。使用选择器可以对不同HTML标记进行控制,从而实现各种效果。
1)标记选择器
标记选择器定义的代码示例:
<style>
a {
font-size:9px; <!--设置字体大小-->
color:#F93; <!--设置字体颜色-->
}
</style>
标记选择器声明哪些标记采用对应的CSS样式。比如上面代码中的a选择器,声明页面中所有的<a>标记的样式风格。如果选择器是img,则对应<img>;如果选择器是table,则对应<table>标记。浏览器解析时,会自动为这些标记应用对应的标记选择器,不需要再HTML文本编辑时显式指定。
2)类别选择器
标记通过class属性来应用类别选择器。
演示类别选择器:(注意类别选择器的定义形式)
<!--演示类别选择器-->
<html>
<head>
<title>演示类别选择器</title>
</head>
<!--一下为定义的CSS样式-->
<style>
.one { <!--定义类名为one的类别选择器-->
font-family:宋体; <!--设置字体-->
font-size:24px; <!--设置字体大小-->
color:yellow; <!--设置字体颜色-->
}
.two {
font-family:宋体;
font-size:16px;
color:red;
}
.three {
font-family:宋体;
font-size:12px;
color:red;
}
.four {
color:green;
}
</style>
<body>
<h2 class="one">
应用了选择器one <!--定义了样式后页面会自动加载样式-->
</h2>
<p> 正文内容1 </p>
<h2 class="two">
应用了选择器two
</h2>
<p>正文内容2</p>
<h2 class="three four">
应用了选择器three
</h2>
<p>正文内容3</p>
</body>
</html>
浏览器效果:
注:HTML标记可以应用多种类别选择器。比如<h2 class="three four">(上述演示代码中有)。
3)ID选择器
HTML标记通过id属性来应用ID选择器,因为每一个标记的id都不同,所以一个ID选择器只能应用一次。
ID选择器演示代码如下:
<!--演示ID选择器-->
<html>
<head>
<title>演示ID选择器</title>
</head>
<!--定义ID选择器-->
<style>
#first {
font-size:18px;
}
#second {
font-size:24px;
}
#three {
font-size:36px;
}
</style>
<body>
<p id="first">ID选择器</p>
<p id="second">ID选择器</p>
<p id="three">ID选择器</p>
</body>
</html>
浏览器打开文件截图: