|
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;
}
明天继续……
|
