一、选择符
选择符指的是要修改的元素。CSS中常用的选择符包括HTML选择符、类选择符、id选
择符。
1. HTML选择符
所有的HTML标签都可以作为CSS的选择符,HTML选择符后是对应的元素的属性及属
性值,指定了HTML选择符的样式后,当前页面中的相应元素会自动套用定义的样式。
实例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>CSS使用示例-HTML选择符</title>
<style type="text/css">
body {
background-color: yellow;
}
h1,h2,p {
background-color: #00FF00;
color: red
}
</style>
</head>
<body>
这是body内的文字<br/>
<h1>这是标题1文字</h1>
<h2>这是标题2文字</h2>
<p>这是段落文字</p>
</body>
</html>
显示结果
2. 类选择符
如果要对页面中的元素定义不同的格式,仅使用标签选择符是不够的,还需要类选择符。类选择符在选择符之前需要加一个实心的圆点,表示选择符的类型是类选择符。其格式为:
selector.classname{
property1:value;
property2:value;
…
}
使用类选择符时,也可以不指定具体的选择符,直接使用“.”加类名,或者在“.”前添加“*”。这样可以使不同的选择符共享样式,提高代码的重用性。如果要对页面中的多种元素分类定义不同的格式,可以使用这种方式。其语法为:
.classname{
property1:value;
…
propertyN:value;
}
实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>CSS使用示例-类选择符</title>
<style type="text/css">
.one {
color: red;
font-size: 12pt;
}
.two {
color: green;
font-size: 14pt;
}
.three {
color: #800080;
font-size: 16pt;
}
</style>
</head>
<body>
<h1 class="one">这是引用one类样式的标题1</h1>
<p class="one">这是引用one类样式的段落</p>
<p class="two">这是引用two类样式的段落</p>
<p class="three">这是引用three类样式的段落</p>
</body>
</html>
显示结果
例题:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
span{
font-size:80px;
font-family:Arial,helvetica,sans-serif;
}
.g1, .g2{
color:#1648EE;
}
.o1, .e{
color:#D7162E;
}
.o2{
color:#F4AA15;
}
.l{
color:#42c34a;
}
</style>
</head>
<body>
<span class="g1">G</span>
<span class="o1">o</span>
<span class="o2">o</span>
<span class="g2">g</span>
<span class="l">l</span>
<span class="e">e</span>
</body>
</html>
显示结果:
例题:
<html>
<head>
<style>
.cal{
vertical-align:10px
}
</style>
</head>
<body>
101-102=1 怎样移动一个数字,使等式成立??<br>
答案是 101-10<span class="cal">2</span> = 1
</body>
</html>
显示结果:
3.id选择符
当需要为某一个元素单独设计样式时,可以使用id选择符。使用id选择符可以为每个元素的具体对象定义不同的模式,使用id选择符要先为设计样式的对象定义一个id属性。id选择符是唯一的,不同的元素的id值是不能重复的。例如:
<div id=“top”></div>
然后使用以下方式定义top的样式:
#top{
property1:value;
property2:value;
…
}
例题:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>CSS使用示例-id选择符</title>
<style type="text/css">
#top {
color: blue;
font-size:18pt;
font-family: 黑体;
background-color: #FFB6C1;
}
</style>
</head>
<body>
<div id="top">
白日依山尽<br />
黄河入海流<br />
欲穷千里目<br />
更上一层楼</div>
</body>
</html>
显示结果:
4.组合选择符
组合选择符是使用逗号将各个选择符隔开,使多类元素共享样式。
例题:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>CSS使用示例-包含选择符</title>
<style type="text/css">
p em {
color: red;
font-size:16pt;
}
</style>
</head>
<body>
<p><em>p元素中的em元素,红色,16pt</em></p>
<em>非p元素中的em元素,黑色,默认大小</em>
</body>
</html>
效果:
二、 继承
CSS的继承指的是当标签具有嵌套关系时,内部标签自动拥有外部标签的不冲突的
样式的性质。
例题:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>CSS使用示例-CSS的继承</title>
<style type="text/css">
div {
color: red;
font-size: 10pt;
font-weight: bold;
font-family: 黑体;
border: 1px solid#000;
}
p {
color: blue;
font-size : 12pt;
font-style: italic;
}
em{
color:green;
}
</style>
</head>
<body>
<p>这是蓝色,12pt,斜体,默认宋体</p>
<div><p>这是蓝色,12pt,斜体,加粗,黑体
</p></div><br/>
<div>这是红色,10pt,加粗,黑体,有边框</div><br/>
<div>这是红色,10pt,黑体<br/>
<em>我是em元素的文字,绿色文字周围无边框</em></div>
</body>
</html>
显示结果:
三、 CSS的使用方式
在HTML页面中使用CSS主要有四种方法,即内嵌方式、内部样式表、使用<link>标记
链接外部样式表、使用CSS的@import标记导入样式表。
1、内嵌方式指的是将CSS规则混合在HTML标签中使用的方式。CSS规则作为HTML标签的style属性值。例如:
<a style=“font-family:黑体;font-style:italic;font-size:16pt;color:red”>
这是使用样式的超级链接 </a>
内嵌样式只对其所在的标签起作用,其它的同类标签不受影响。
例题:
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>CSS使用示例-内嵌样式表</title>
</head>
<body>
<a style="font-family:黑体;font-style:italic;font-size:16pt;color:red">使用内嵌样式的超级链接</a>
<br/>
<br/>
<a>普通的超级链接</a>
</body>
</html>
显示结果
2.内部样式表
内部样式表指的是在HTML文档的<head>标记内嵌入样式表,格式如下:
<style type=“text/css”>
selector{
property1:value;
property2:value;
…
}
…
</style>
3.使用<link>标记链接外部样式表
body{
font-family: 楷体;
font-size: 16pt;
color: green;
}
style.css:
a{
font-family: 黑体;
font-size: 14pt;
color: #FF9600;
}
div{
color: red;
font-size: 10pt;
font-weight: bold;
font-family: 黑体;
border: 1px solid#000;
}
p{
color: blue;
font-size: 12pt;
font-style: italic;
}
css8.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>CSS应用示例-外部样式表</title>
<link href="css/style.css" rel="stylesheet"type="text/css"/>
</head>
<body>
<a>我是超级链接</a>
<div>我是DIV</div>
<p>我是段落</p>
</body>
</html>
联系客服