CSS【二】与盒子模型
CSS权重
二个选择器 同一个样式出现二次
CSS 选择符
1 id 10000
2 class 1000
3 标签 100
4 行内样式 100000
盒模型
元素【标签】是一个盒子【现实】
组成
1 内容]
【双标签：标签体可以撑起元素的高度或宽度】
2 内边框【padding】
padding-top:上
padding-right右
padding-bottom下
padding-left左
内容到边框的距离
3 边框【border】
三要素：
1 厚度[width]
2 颜色[color]
3 效果[style]
border:10px solid[线形] 颜色默认情况下与字体颜色保持一致
4 外边框【margin】:看不见摸不着的空气墙[元素与元素之间的距离]
CSS元素类型
基本元素类型
1 块
2 行
3 行内块
<!DOCTYPE html>
<html lang="en">
<!--不在浏览器显示-->
<head>
<!-- 编码格式-->
<meta charset="UTF-8">
<!-- 文档标题-->
<title>第五节课</title>
<!-- 内部样式-->
<style>
.div文件01
{
/*宽度*/
width: 200px;
/*高度*/
height: 200px;
/*背景颜色 */
background-color: red;
}
#div文件01
{
/*背景颜色 */
background-color: black;
}
div
{
background-color: pink;
}
/*后代选择器 复杂选择器: 缩小范围
是由二个或二个以上的选择符生成
选择符1 + 空格 + 选择符2[包含关系]
{
}
*/
ul div
{
/*宽度*/
width: 200px;
/*高度*/
height: 200px;
/*背景颜色 */
background-color: black;
/*字体颜色*/
color: pink;
}
#a1
{
/*字体颜色*/
color: green;
}
</style>
</head>
<!--在浏览器显示 -->
<body>
<!-- 容器-->
<div id="div文件01" class="div文件01" style="background-color: darkblue;
width: 400px">
</div>
<!-- 无序列表-->
<ul>
<div>
<p>sdjflksjd</p>
<a href="#" id="a1">012345678910</a>
</div>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<!--不在浏览器显示-->
<head>
<!-- 编码格式-->
<meta charset="UTF-8">
<!-- 文档标题-->
<title>Title</title>
<!-- 行内样式-->
<style>
#文件1
{
/*宽度 */
width: 200px;
/*高度*/
height: 200px;
/*背景颜色*/
background-color: red;
/*字体颜色*/
color:pink;
border: 10px solid;
}
#文件2
{
/*背景颜色*/
background-color: green;
/*宽度*/
width: 500px;
/*高度*/
height: 500px;
/*内边框*/
padding: 20px;
}
#文件3
{
/*宽度*/
width: 200px;
/*高度*/
height: 200px;
/*颜色背景*/
background-color: red;
color: pink;
/*内边框 上*/
border-top:20px solid blue;
border-right:20px solid black;
border-bottom:20px solid darkorange;
border-left:20px solid darkgreen;
}
#文件4
{
/*宽度*/
width: 200px;
/*高度*/
height: 200px;
/*背景颜色*/
background-color: blue;
margin: 20px ;
/*圆角幅度*/
border-radius:50% ;
}
</style>
</head>
<!--在浏览器显示-->
<body>
<div id="文件1">
<div></div>
</div>
<div id="文件2">
</div>
<div id="文件3">
<p id="文本01">
盒子模型
</p>
</div>
<div id="文件4">
外距离
</div>
</body>
</html>
