字体属性
<pre>
<!DOCTYPE html>
<html>
<head>
<title>09-CSS选择器5.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
```
<style type="text/css">
/* p{
font-family: 黑体;
font-size: 25px;
font-style:oblique;
font-weight:900;
font-variant:small-caps;
} */
p{
font:oblique small-caps 900 25px 黑体;
}
</style>
</head>
<body>
<p class="two" >
hello itcast! itheima!
床前明月光,疑是地上霜</a>
</body>
</html>
</pre>
背景属性
<pre>
<!DOCTYPE html>
<html>
<head>
<title>11-背景属性.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
/*
background : background-color || background-image || background-repeat || background-attachment || background-position
body{
background-image: url("mn.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}
*/
body{
background: url("mn.jpg") no-repeat fixed center;
}
</style>
</head>
<body>
<p>
itheima<br>
itheima<br>
itheima<br>
itheima<br>
itheima<br>
</p>
<p>
itheima<br>
itheima<br>
itheima<br>
itheima<br>
itheima<br>
</p>
</body>
</html>
</pre>
块&行标签
<pre>
<!DOCTYPE html>
<html>
<head>
<title>12-块&行标签.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
itheima<div>itheima</div>itheima
itheima<span>itheima</span>itheima
</body>
</html>
</pre>
盒子模型
<pre>
<!DOCTYPE html>
<html>
<head>
<title>12-块&行标签.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
/*
盒子模型的属性
一. 边框系类属性
二. 尺寸属性
三. 边距
*内边距
*外边距
border-color:边框颜色
border-width:边框宽度
border-style:边框样式
border-color: red;
border-width: 1px;
border-style: solid;
margin-left:100px;左外边距
margin-top:100px;
padding-left:100px; 左内边距
padding-top:100px; 上内边距
注意:内边距会延长所在盒子的长或宽
*/
div{
border: 1px solid red;
}
#one{
height: 300px;
width: 300px;
}
#two{
height: 100px;
width: 100px;
margin-left:100px;
margin-top:100px;
}
</style>
</head>
<body>
<div id="one" >
<div id="two"></div>
</div>
</body>
</html>
</pre>
盒子模型边距属性
<pre>
<!DOCTYPE html>
<html>
<head>
<title>14-盒子模型-边距属性.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
/*
padding : 1个值 上下左右
2个值 1.上下 2.左右
3个值 1.上 2.左右 3.下
4个值 1.上 2.右 3.下 4.左
*/
div{
border: 1px solid red;
height: 300px;
width: 300px;
}
#one{
padding: 10px 30px 50px 80px;
}
</style>
</head>
<body>
<div id="one" >
<div id="two"></div>
</div>
</body>
</html>
</pre>
网友评论