您的位置：首页 > Web前端 > CSS

css_day7---块元素和行内元素

2013-11-22 00:04 204 查看

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">梁山英雄排行榜 

<spanclass="s2">宋江 

<spanclass="s3">卢员外 

<spanclass="s4">吴用 

<spanclass="s3">豹子头 

<spanclass="s3">大刀关胜 

 

<ahref="#">goto
sohu1到搜狐</a> 

<ahref="#">goto
sohu2到搜狐</a> 

<ahref="#">goto
sohu3到搜狐</a> 

<ahref="#">goto
sohu4到搜狐</a> 

<ahref="#">goto
sohu5到搜狐</a> 

</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），又叫内联元素

 行内元素只能容纳文本或者其他内联元素，常见的内联元素<a>

行内元素特点：文字有多大、多长就占多宽，只占内容宽度，默认不会换行。

 块元素（block
element）：

 块元素一般都是从新行开始，可以容纳文本、其他内联元素和其他块元素，即使内容不能占满一行，块元素也要把整行占满(默认情况下)，并且换行。常见的块元素有<div>

☞块元素和行内元素区别总结

行内元素只占内容宽度，块元素内容不管内容多少要占全行。
行内元素只能容纳文本和其他行内元素，块元素可以容纳文本，行内元素和块元素(与浏览器类版本和类型有关)
一些css属性对行内元素不生效，比如margin，left，right，width，height。建议尽可能使用块元素定位。（与浏览器类版本和类型有关）

●块元素和行内元素相互转换

请注意：行内元素和块元素可以相互转换

Display:inlineà转为行内元素（比如div）

Display:blockà转为块元素（比如a）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航