一个元素最多只能有一个id选择器,但是可以有多个类选择器。
my.css中添加
.style4{
font-size:italic;
text-decoration:underline;
color:green;
}
.style1{
font-weight:bold;
font-size:30px;
background-color:pink;
}
html文件中如何使用多个class选择器:
<span class="style1 style4">新闻3</span>
在引用多个class选择器的时候,用空格隔开,
当class选择器发生冲突时,以在css文件中,最后出现的class选择器样式为准。
优先级:id选择器(#style1{})>类选择器(.style2{})>hmtl选择器(body{})>通配符选择器(*{})
html选择器和通配符选择器都是没有名字的,作用域可能就是html文件中的所有标签。
在css文件中,如果多个类/id选择器它们有相同的部分,我们可以把相同的css样式放在一起。
在有些css文件中,我们可以把多个类选择器或者id选择器共同的部分提取出来,写在一起。
这样可以节省带宽,使css文件更加简洁。
HTML <font> 标签
定义和用法
<font> 规定文本的字体、字体尺寸、字体颜色。
写css文件的时候,优先选择类选择器,以防止后面修改时,可以添加id选择器,而且id选择器一个元素只能使用一次。需要对网页进行修改时,可以添加id选择器,因为它的优先级比较高。
font-style表示字的风格,如italic
font-style表示字的字体,如华文新魏.
确实可以使用子类选择器让局部html元素标签的样式发生改变,而不需要像html选择器一样让所有元素的样式都发生改变。
如:
.style1{
font-size:30px;
}
.style1 a{
text-decoration:none;
}
但是hover,visited等属性却不知道怎么分别设置。
<span class="style1"><a href="#">go to sohu1</a></span><br/>
sohu1就没有下划线。
练习题:
exam.html:
<!DOCTYPE html>
<html>
<head>
<title>exam.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="exam.css" type="text/css" rel="stylesheet">
</head>
<body>
<font class="s1">梁山排行榜</font><br/>
<span class="s2">宋江</span><br/><br/>
<span class="s3">卢员外</span><br/><br/>
<span class="s4">吴用</span><br/><br/>
<span class="s3">豹子头</span><br/><br/>
<span class="s4">大刀关胜</span><br/><br/>
<span class="style1"><a href="#">go to sohu1</a></span><br/>
<a href="#">go to sohu2</a><br/>
<a href="#">go to sohu3</a><br/>
<a href="#">go to sohu4</a><br/>
<a href="#">go to sohu5</a><br/>
</body>
</html>
exam.css:
.s1{
font-size:30px;
color:yellow;
}
.s2{
font-style:italic;
color:red;
/*font-weight用来表示轻重的*/
}
.s3,.s2,.s4{
font-weight:bold;
background-color:gray;
}
.s4{
font-style:italic;
text-decoration:underline;
}
/* a:link{
color:red;
font-size:24px;
font-family:华文新魏;
text-decoration:none;
} */
.style1{
font-size:30px;
}
.style1 span{
text-decoration:none;
}
a:link{
color:red;
font-size:24px;
font-family:"华文新魏";
text-decoration:none;
}
a:hover{
color:green;
font-size:40px;
font-family:宋体;
text-decoration:underline;
}
a:visited{
color:gray;
}