1、先说css，什么是css?
我们搭建的网页，通过html进行网页骨架的搭建，就像盖房子，骨架搭建完了，就该搞装修了，美化一下。CSS就是这个作用，对网页的样式进行设置。使用CSS，首先需要掌握的就是选择器。
2、什么是选择器？
一个网页上有很多标签元素，如何快速、准确的定位到一个元素，或者对多个元素进行统一的样式设置，这时候就是使用选择器的时间。常用的选择器包括 元素(标签)选择器、id选择器、类选择器、后代选择器、子选择器，还可以对选择器进行分组。更详细的介绍可以查看W3School官网。
选择器使用演示：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style> /* 选择器的优先级：id选择器>类选择器>标签选择器 */ /* 标签选择器 直接以标签名+{} */ h1{ /* 在大括号里边设置标签及标签里边内容的样式 */ border:1px solid red; /* 设置h1标签的边框样式 */ color:pink; /* 设置字体颜色 */ } /*id选择器 #+id名+{} */ #p1{ border:1px solid red; /* 设置h1标签的边框样式 */ color:pink; /* 设置字体颜色 */ font-size:26px; /* 设置字体大小 */ } /*类选择器 .+类名+{} */ .p2{ border:3px solid black; } /* 后代选择器 */ p>a>span{ font-family:楷体; } /* 子选择器 子选择器只能选中某元素的直接子元素 */ h1>strong{ color:red; } /* 选择器分组 */ #p1,.p2{ /* 里边写属性 */ } </style> <body> <div> <h1>太阳系</h1> <p id="p0"><a href="http://www.baidu.com"><span>太阳</span></a></p> <!-- id：为标签设置id，每个标签只能设置一个id class:为标签设置类名，一个标签可以有多个类名 id和class可以在一个标签中同时存在，但是全文中id名和class名只能时唯一的 --> <p id="p1" class="p1">金星</p> <p id="p2" class="p2">火星</p> <h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1> </div> </body> </html>
3、部分标签样式设置示例（边框、字体、超链接样式）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>边框、字体、超链接样式</title> <style> div{ width:200px; height:200px; /* 边框样式综合来写 */ /* border:1px solid pink; */ /* 边框样式属性分开写 */ /* border-5px; border-style:solid; border-color:red; */ /*边框样式属性分位置写 */ border-bottom:2px dashed pink; /* 字体样式 */ font-family:楷书; font-size:16px; font-style:italic; /* italic:斜体 */ color:red; font-weight:100; /* 100~900:越来越粗 hold:粗体 holder:更粗 */ } a{ /* 设置文本线的位置 */ text-decoration:line-through; /* none、underline :下划线在文本下方 overline:上 line-through:中 */ } </style> </head> <body> <div>大漠孤烟直，长河落日圆</div> <a href="http://www.baidu.com">百度一下</a> </body> </html>