<style>
p{
color:red; <!--CSS语法-->
}
<!-- 选择器{属性：值}-->
</style>元素选择器，id 选择器，类选择器
<style>
p{
color:red;
}
</style>
<p>p元素</p>
<p>p元素</p>
<p>p元素</p>
<style>
p{
color:red;
}
#p1{
color:blue;
}
#p2{
color:green;
}
</style>
<p>没有id的p</p>
<p id="p1">id=p1的p</p>
<p id="p2">id=p2的p</p>
<style>
.pre{
color:blue;
}
.after{
color:green;
}
</style>
<p class="pre">前3个</p>
<p class="pre">前3个</p>
<p class="pre">前3个</p>
<p class="after">后3个</p>
<p class="after">后3个</p>
<p class="after">后3个</p>用style设置尺寸大小
<style>
p#percentage{
width: 50%;
height: 50%;
background-color:pink;
}
p#pix{
width: 180px;
height: 120px;
background-color:indianred;
}
</style>
<p id = "percentage">我的</p>
<p id = "pix">asdf</p>
css制表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
.style{background-color:antiquewhite;}
.style2{border-bottom: 2px darkgray solid;}
.style3{border-bottom-color: darkgray;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.my_table_style{
border-bottom-color: darkgray;
border-bottom-style: solid;
border-bottom-width: 1px;
border-collapse: collapse;
}
</style>
<table width="400px" height="100px" class="my_table_style " >
<tr height="20%" class="style2">
<th>id</th>
<th>名称</th>
<th>血量</th>
<th>伤害</th>
</tr>
<tr height="20%" class="style style3">
<th>1</th>
<th>gareen</th>
<th>340</th>
<th>58</th>
</tr>
<tr height="20%" class="style3">
<th>2</th>
<th>teemo</th>
<th>320</th>
<th>76</th>
</tr>
<tr height="20%" class="style style3">
<th>3</th>
<th>annie</th>
<th>380</th>
<th>38</th>
</tr><tr height="20%" class="style3">
<th>4</th>
<th>deadbrother</th>
<th>400</th>
<th>90</th>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
.style{background-color:antiquewhite;}
.style2{border-bottom: 2px darkgray solid;}
.style3{border-bottom-color: darkgray;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.my_table_style{
border-bottom-color: darkgray;
border-bottom-style: solid;
border-bottom-width: 1px;
border-collapse: collapse;
}
div.reverse-triple{
width: 0px;
height: 0px;
/* border: 10px solid red;
border-left: 10px solid white;
border-right: 10px solid white;
border-bottom: 10px solid white; */
border-top: solid red 20px;
border-left: white solid 15px;
border-right: white solid 15px;
}
td{
/* width: 10px;
height: 10px; */
text-align: center;
width: 100px;
border-bottom: blue 4px solid;
}
</style>
<table width="400px" height="100px" class="my_table_style " >
<tr height="20%" class="style2">
<th>id</th>
<th>名称</th>
<th>血量</th>
<th>伤害</th>
</tr>
<tr height="20%" class="style style3">
<th>1</th>
<th>gareen</th>
<th>340</th>
<th>58</th>
</tr>
<tr height="20%" class="style3">
<th>2</th>
<th>teemo</th>
<th>320</th>
<th>76</th>
</tr>
<tr height="20%" class="style style3">
<th>3</th>
<th>annie</th>
<th>380</th>
<th>38</th>
</tr><tr height="20%" class="style3">
<th>4</th>
<th>deadbrother</th>
<th>400</th>
<th>90</th>
</tr>
</table>
<div class="reverse-triple"></div>
<table>
<tr>
<td>商品</td>
<td>价格</td>
<td>数量</td>
<td>小计</td>
</tr>
</table>
</body>
</html>CSS倒三角 两种方法，一种是border 一个边框，将其填满，然后 left right bottom切割，另一种可以是 top 然后用left 和 right切割即可。
