CSS中的样式表和标签的显示模式
2019-07-09 本文已影响0人
追逐_chase
web.jpeg
1. CSS之行内样式
<!-- 行间样式 -->
<!-- 就是在标签上添加 属性样式 -->
<div style="width: 100px;height: 200px;background: red;"></div>
image.png
2.CSS之内联样式表
- 在
html页面上, 写上style,对应的是一个json格式
<style>
div {
width: 200px;
height: 200px;
background: purple;
}
</style>
<body>
<!-- 内联样式表:是指样式没有写在标签 的属性上 -->
<div>
测试新世纪拗口
</div>
</body>
image.png
3.外联样式表
- 使用
link标签引用你的css文件
<link rel="stylesheet" href="css/04-color.css">引用外部的css文件来，更改html标签的而样式
image.png
4.标签的显示方式
4.1 块级元素
特点：
1.单独占一行，可以给这个元素
设置宽高,默认的宽度是100%
2.高度，行高，外边距及内边距都可以控制
3.可以存放任务元素
4.显示方式(display)：block
5.所属的标签有：div,p,h,ul,lo,ol,dl,最经典的就是div容器级标签
<style>
div{
height: 40px;
background: palevioletred;
}
</style>
image.png
4.2 行内元素
1.和相邻的行内元素在一行上
2.默认的宽度就是它本身内容的宽度
3.设置宽高是无效的，但水平方向的padding和margin可以设置，垂直方向是无效的
4.行内元素只能容纳文本或者其他的行内元素
5.所属的标签有：span,b,u,i,ins,strong,em,最经典的就是span容器级标签
6.显示方式是:display: inline;
<style>
span{
color: red;
background: #000000;
}
</style>
image.png
4.3 行内块级元素
- 即拥有
块级元素的特点也拥有行内元素的特点 - 显示方式：
display: inline-block;
<style>
div{
height: 40px;
background: palevioletred;
}
span{
color: red;
background: #000000;
display: inline-block;
width: 200px;
height: 200px;
}
</style>
image.png
注意:
1.p和h1-h6的标签是文字类的块级元素，在这些标签内不能存放块级元素
- 在a链接标签里面
不能再存放a链接, - a链接里面可以存放
块级元素
