css书写位置
1.内嵌式
css样式写在html文件head内。
<head>
<style type="text/css">
样式表内容
</style>
</head>
※特点:样式只作用于当前文件,没有真正实现结构表现分离。
2.外链式写法
css样式为单独的文件,然后html文件链接到此css文件。
<head>
<link rel="stylesheet" href="1.css">
<head>
※特点:作用于链接到它的文件,范围广,真正实现结构表现分离。
3.行内样式表
直接写在标签内的样式。
<body>
<h1 style="font-size:30px; color:red;">博客</h1>
</body>
※特点:作用范围仅限于当前标签,范围小,结构表现混在一起。(不推荐使用)
标签分类(按标签在页面的显示方式分类)
块元素
典型代表:div , h1-h6 , p , ul ,li
特点:
1.独占一行(不用使用换行标签就可以独自在一行显示);
2.可以设置宽高(并非文字大小的宽高,而是元素的宽高,可设置背景颜色看效果);
3.嵌套(包含)关系下,子块元素宽度(没有定义的情况下),和父块元素的宽度默认一致。
<head>
<style type="text/css">
.box{
width:300px;
height:100px;
background-color:#888;
}
.box p{
height:50px;
background-color;red;
}
</style>
</head>
<body>
<div class="box">
<p></p>
</div>
</body>
行内元素
典型代表:span ,a ,strong,em, del, ins
特点:
(1)若几个行内元素写在一起,则在同一行显示;
(2)不能直接定义元素宽高,元素宽高是由内容撑开的。
(3)嵌套(包含)关系下,子块元素宽度(没有定义的情况下),和父块元素的宽高没有关系,因为它的宽高是由内容撑开的。
<head>
<style type="text/css">
.box{
width:500px;
height:500px;
background-color:#888;
}
.box span{
background-color:red;
}
</style>
</head>
<body>
<div class="box"><span>书写位置</span></div>
</body>
行内块元素(内联元素)
典型代表:input img
特点:
(1)既有行内元素的在一行显示的特点;
(2)又有块元素的可设置宽高的特点。
<head>
<style type="text/css">
img{
width:300px;
}
input{
width:300px;
height:200px;
background-color:blue;
}
</style>
</head>
<body>
<img src="top.jpg"><input type="text">
</body>
块元素与行内元素之间的转换
- 块元素转行内元素:
display:inline;
<head>
<style type="text/css">
div,p{
display:inline;
width:500px;
height:500px;
background-color:blue;
}
</style>
</head>
<body>
<div>指南</div>
<p>权威</p>
</body>
- 行内元素转块元素:
display:block;
<head>
<style type="text/css">
span{
display:block;
width:500px;
height:500px;
background-color:blue;
}
</style>
</head>
<body>
<span>指南</span>
<span>权威</span>
</body>
- 块和行内元素转行内块:
display:inline-block;
<head>
<style type="text/css">
div,a,span,strong{
display:inline-block;
width:500px;
height:500px;
background-color:blue;
}
</style>
</head>
<body>
<div>指南</div>
<a href="#">权威</a>
<span>出版</span>
<strong>发表</strong>
</body>