样式表主要分为三类：内联式、内嵌式和外部样式表。
内联式样式表是跟html联合显示，写在body标签里边，属于控制精确，但是可用性差。在三种样式中会优先显示作用。
内嵌式是作为独立区域写在head标签里边。body标签中有对应的标签：<div id/name/class=" "></div>。
外部样式表是新建一个css文件，用来放样式表，在html中用link链接。
<link type="text/css" rel="stylesheet" href="../../css/new_file.css"/>
<html> <head> <meta charset="UTF-8"> <title></title> <style> /*网页内容边距*/ *{ margin: 10px; padding:10px ; } /*id选择器*/ #div1{ width: 100px; height: 100px; background-color: red; } /*class选择器*/ .div-class{width: 200px; height: 200px; background-color: black; } /*标签选择器*/ div{ border: 5px; solid salmon; } /*属性选择器 名称可以自定义*/ [name=n]{ width: 300px; height: 300px; background-color: blueviolet; } /*复合选择器*/ /*并列选择器*/ .c,.c2{ width: 200px; height: 200px; background-color: brown; } /*子代选择器*/ .cc span{ color: red; } /*其他*/ .x1{ width: 500px; } .x2{height: 500px; background-color: cadetblue; } </style> <link type="text/css" rel="stylesheet" href="../../css/new_file.css"/> </head> <body> <!--第一种直接引用（优先）--> <div style=" 100px; height: 100px; background-color: darkblue;">ssddd</div> <!--第二种--> <div id="div1"></div> <!--第三种--> <div id="div2"></div> <div class="div-class"></div> <!-- id 不可重复 class 可以重复 name 可以重复 --> <div sb=n></div> <div class="c"></div> <div class="c2"></div> <div class="cc"> <span>ffddsssssssd</span> </div> <span>ffddsssssssd</span> <div class="x1 x2"></div> </body> </html>
在样式表中表示大小要有px。网页编辑过程中可将内嵌式样式表与对应的标签写在一起，完成后统一排版写在head里，或者移到外部样式表css文件中。在css文件中样式表不带style标签。