字體屬性
<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>