HTML第三课——css盒子
请关注公众号：自动化测试实战
css常用属性
-
width
宽 -
height
高 -
color
字体颜色 -
border
边框 -
background
背景
lesson3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Css</title>
<meta name="keywords" content="key1, key2">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div id="div">
<span>
这是一个span标签
</span>
</div>
</body>
</html>index.css
/*
px:意为像素;
*/
div#div{
color:red;
width: 100px;
height: 100px;
background: pink;
}上面代码大家会发现我们只定位到`div`层，但是下面的`span`标签也有相同的样式，这就是`css具有继承性`。
现在我们精确到span层，修改字体颜色为绿色：
index.css
/*
px:意为像素;
*/
div#div{
color:red;
width: 100px;
height: 100px;
background: pink;
}
div#div span{
color: green;
}我们发现字体颜色变为精确设置的颜色，但样式仍然是继承过来的。
边框，边框有上下左右四个属性，如果不需要设置或者四个边框相同，只需要写一条border即可：
/*
px:意为像素;
*/
div#div{
color:red;
width: 100px;
height: 100px;
background: pink;
border: 1px solid #0000ff;
}或
/*
px:意为像素;
*/
div#div{
color:red;
width: 100px;
height: 100px;
background: pink;
border-top: 1px solid #0000ff;
border-bottom: 2px solid #000fff;
border-left: 3px solid #00000f;
border-right: 4px solid #000000;
}之前我们的background都是简单的颜色，如果要用图片该怎么办呢？我们需要先知道background的几个写法
-
background-color
背景颜色 -
background-image
背景图片 -
background-repeat
如果图片较小，会将图片反复平铺在页面上，通过这个属性可设置图片效果：- background-repeat：repeat-X; 图片在水平方向重复 - background-repeat: repeat-Y; 图片在垂直方向重复 - background-repeat：no-repeat； 图片只显示一次 -
background-position
图片位置。
background-positon: center center;居中；第一个
backgroung-position: 0px 0px;第一个值为水平方向值，第二个值为垂直方向值；
项目结构：
/*
px:意为像素;
*/
div#div{
color:red;
width: 100px;
height: 100px;
background-image: url("../imgs/pic.png");
border: 1px solid #0000ff;
}明天继续……
