码迷,mamicode.com
首页 > Web开发 > 详细

css(1)

时间:2018-09-30 14:44:49      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:添加   行修改   如何   hover   ref   nbsp   风格   字体颜色   文件中   

一个元素最多只能有一个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;
}

 

css(1)

标签:添加   行修改   如何   hover   ref   nbsp   风格   字体颜色   文件中   

原文地址:https://www.cnblogs.com/liaoxiaolao/p/9728976.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!