Day7
●关于选择器的使用
先用类选择器,后选用Id选择器,因为类选择器的优先级低,以防止后面有特别的要求,方便后面的修改
●选择器两个练习题
☞Exam1.html:
<!DOCTYPEHTMLPUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN">
<html>
<head>
<title>day7</title>
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="this is my page">
<metahttp-equiv="content-type"content="text/html; charset=UTF-8">
<linkrel="stylesheet"type="text/css"href="./exam1.css">
</head>
<body>
<fontclass="s1">梁山英雄排行榜</font><br/>
<spanclass="s2">宋江</span><br/><br/>
<spanclass="s3">卢员外</span><br/>
<spanclass="s4">吴用</span><br/>
<spanclass="s3">豹子头</span><br/>
<spanclass="s3">大刀关胜</span><br/>
<br/><br/><br/>
<ahref="#">goto sohu1到搜狐</a><br/>
<ahref="#">goto sohu2到搜狐</a><br/>
<ahref="#">goto sohu3到搜狐</a><br/>
<ahref="#">goto sohu4到搜狐</a><br/>
<ahref="#">goto sohu5到搜狐</a><br/>
</body>
</html>
☞对应的exam1.css文件:
.s1{
font-size:50px;
color:blue;
}
.s2{
font-style:italic;
color:red;
}
.s3,.s2,.s4{
font-weight:bold;
background-color:gray;;
}
.s4{
font-style:italic;
text-decoration:underline;
}
/*使用HTML元素选择器*/
a:LINK{
color:red;
font-size:24px;
font-family:"华文新魏";
text-decoration:none;
}
a:HOVER{
color:green;
font-size:40px;
text-decoration:underline;
}
a:VISITED{
color:gray;
}
●块元素和行内元素
行内元素(Inline element),又叫内联元素
行内元素只能容纳文本或者其他内联元素,常见的内联元素<span><a>
行内元素特点:文字有多大、多长就占多宽,只占内容宽度,默认不会换行。
块元素(block element):
块元素一般都是从新行开始,可以容纳文本、其他内联元素和其他块元素,即使内容不能占满一行,块元素也要把整行占满(默认情况下),并且换行。常见的块元素有<div><p>
☞块元素和行内元素区别总结
- 行内元素只占内容宽度,块元素内容不管内容多少要占全行。
- 行内元素只能容纳文本和其他行内元素,块元素可以容纳文本,行内元素和块元素(与浏览器类版本和类型有关)
- 一些css属性对行内元素不生效,比如margin,left,right,width,height。建议尽可能使用块元素定位。(与浏览器类版本和类型有关)
●块元素和行内元素相互转换
请注意:行内元素和块元素可以相互转换
Display:inlineà转为行内元素(比如div)
Display:blockà转为块元素(比如a)