一. 基本语法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel = "stylesheet" href = "page1.css"> <!--连接要渲染该页面的CSS文件-->
</head>
<body>
<h1>标题一 </h1>
<p id="p1">段落一</p> <!--一个元素只能对应一个id-->
<p>段落二</p>
<p>段落三</p>
<p class="pp">段落四</p> <!--多个元素可以对应同一个class,每个元素可以对应多个class-->
<p class="pp">段落五</p>
<h1>标题二 </h1>
<div> <!-- <div>可以将多个元素划分为一个区域 -->
<p>段落六</p>
<p>段落七</p>
</div>
<div>
段落八<br/>
段落九<br/>
段落十<br/>
</div>
<div id="div1">
内容1
</div>
<div id="div2">
内容2
</div>
</body>
</html>
/* 将所有段落的
字体样式设置为sans_serif
字体大小设置为3px
*/
p{
font-family:sans_serif; /*字体样式*/
font-size:15px; /*字体样式大小:px(像素)、%、em(相对大小)等方式*/
}
/* 将段落一的
字体大小设置为20px
背景颜色设置为蓝色
斜体
下划线 */
#p1{ /* #id名:表示修改html中对应的id*/
font-size:20px;
background-color:blue; /*背景颜色*/
font-style:italic; /*斜体*/
text-decoration:underline; /*text-decoration可以设置underline(下划线)、overline(上划线)、
line-through(中间线)、none(去除装饰线)*/
}
/* 将段落四和段落五的
字体颜色设置为绿色
字体粗细为:bold */
.pp{ /* .class名:表示修改html中对应的class*/
color:green; /*字体颜色*/
font-weight:bold; /*字体粗细font-weight可以设置为lighter、normal、bold、bolder*/
}
/* 将段落六到段落十的字体颜色设置为红色
并将段落六和段落七的文字设置为斜体 */
div{
color:red;
}
div p{
font-style:italic;
}
/*设置div包裹区域的样式*/
#div1{
width:400px; /*设置div包裹区域的宽度*/
height:400px; /*设置div包裹区域的高度*/
background-color:greenyellow;
/* border设置边框样式*/
border-color:red; /* 边框颜色*/
border-width:4px; /* 边框粗细*/
border-style:dotted; /* 边框样式有:solid(实线)、dotted(虚线)、double(双线)等等*/
}
#div2{
width:300px;
height:300px;
background-color:yellow;
border: blue 2px solid; /*可以合在一起写*/
/*设置某一个边框的样式:border-top(上边框)、border-bottom(下边框)
border-left(左边框)、border-right(右边框)*/
border-top: pink 5px groove;
}
二. 盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel = "stylesheet" href = "page1.css"> <!--连接要渲染该页面的CSS文件-->
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4"></div>
</div>
</div>
</div>
</body>
</html>
#div1{
width:400px;
height:400px;
background-color:greenyellow;
border:red 2px solid;
}
#div2{
width:300px;
height:300px;
background-color:yellow;
margin-top:50px; /*设置div2区域的上边框到div1区域的上边框的长度*/
margin-left:50px; /*设置div2区域的左边框到div1区域的左边框的长度*/
overflow: hidden; /*防止父元素随着子元素设置的margin变化,即防止div2会随着div3的margin-top移动*/
}
#div3{
width:150px; /*一个div模块的大小 = width + border-width + padding*/
height:150px; /*由于设置了padding,所以要减小width*/
background-color:pink;
margin-top:50px; /*设置div3区域的上边框到div2区域的上边框的长度*/
margin-left:50px; /*设置div3区域的左边框到div2区域的左边框的长度*/
overflow: hidden;
padding-top:50px; /*设置div3区域的上边框到div4区域的上边框的长度*/
padding-left:50px; /*设置div3区域的左边框到div4区域的左边框的长度*/
} /*padding表示填充*/
#div4{
width:100px;
height:100px;
background-color:blue;
}
三. CCS表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel = "stylesheet" href = "page1.css">
</head>
<body>
<div id="div_container">
<table id="user_table">
<tr>
<th class = "cell_width">名字</th>
<th class = "cell_width">年龄</th>
<th class = "cell_width">性别</th>
<th class = "cell_width">身高</th>
<th class = "cell_width">体重</th>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
<td>178</td>
<td>130</td>
</tr>
<tr>
<td>李四</td>
<td>21</td>
<td>男</td>
<td>182</td>
<td>135</td>
</tr>
<tr>
<td>王二</td>
<td>22</td>
<td>男</td>
<td>174</td>
<td>120</td>
</tr>
<tr>
<td>总数</td>
<td colspan = "4">3</td>
</tr>
</table>
</div>
</body>
</html>
body{
margin:0;
padding:0;
background-color:MintCream;
}
div{
position:relative;
float:left;
}
#div_container{
width:80%;
height:600px;
border:1px solid red;
margin-top:70px;
margin-left:10%;
float:left;
background-color:Beige;
}
#user_table{
width:60%; /*表格的宽度*/
line-height:30px; /*单元格行高*/
margin-top:225px;
margin-left:20%;
}
#user_table, #user_table tr, #user_table th, #user_table td{
border:1px solid black; /*设置表格边框*/
border-collapse:collapse; /*合并表格边框线*/
text-align:center; /*文字居中*/
font-size:16px;
font-family:仿宋;
color:MidnightBlue;
}
.cell_width{
width:20%; /*单元格宽度*/
}