css常用属性
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-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;
}
明天继续……