1. CSS之行内样式
<!-- 行间样式 -->
<!-- 就是在标签上添加 属性样式 -->
<div style="width: 100px;height: 200px;background: red;"></div>
2.CSS之内联样式表
- 在
html
页面上, 写上style
,对应的是一个json
格式
<style>
div {
width: 200px;
height: 200px;
background: purple;
}
</style>
<body>
<!-- 内联样式表:是指样式没有写在标签 的属性上 -->
<div>
测试新世纪拗口
</div>
</body>
3.外联样式表
- 使用
link
标签引用你的css
文件
<link rel="stylesheet" href="css/04-color.css">
引用外部的css
文件来,更改html
标签的而样式
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>
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>
4.3 行内块级元素
- 即拥有
块级元素的特点
也拥有行内元素的特点
- 显示方式:
display: inline-block;
<style>
div{
height: 40px;
background: palevioletred;
}
span{
color: red;
background: #000000;
display: inline-block;
width: 200px;
height: 200px;
}
</style>
注意:
1.p
和h1-h6
的标签是文字类的块级元素,在这些标签内不能存放块级元素
- 在a链接标签里面
不能再存放
a链接, - a链接里面可以存放
块级元素