css 概述
css 指层叠样式表 (cascading style sheets)
样式定义如何显示 html 元素
样式通常存储在样式表中
把样式添加到 html 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 css 文件中
多个样式定义可层叠为一个
html 标签原本被设计为用于定义文档内容。通过使用 4a249f0d628e2318394fd9b75b4636b1、dc6dce4a544fdca2df29d5ac0ea9906b、f5d188ed2c074f8b944552db028f98a1 这样的标签，html 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。
所有的主流浏览器均支持层叠样式表
div和span的理解
div是一个html标签, 一个块级元素(单独显示一行), 单独使用没有任何意义, 必须结合css来使用, 主要用于页面的布局;
span是一个html标签, 一个内联元素(显示一行), 它单独使用没有任何意义, 必须结合css使用, 主要对括起来的内容进行样式的修饰;
类选择器
使用类选择器前要对世纪文档做标记，才能发挥类选择器作用。
.name{text-align:center}
在文档后面的部分，通过包含与样式相关的'class'属性，且将其中一个预定义的样式指定为'name'值，就一块明确选择要对该标签的特定情况用何种样式
2050d68a3fa369004812fcd2bedf7cb1
76c82f278ac045591c9159d381de2c57100db36a723c770d327fc0aef2ce13b193f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 b2386ffb911b14667cb8f0f91ea547a7类选择器6e916e0f7d1e588d4f442bf645aedb2f c9ccee2e6ea535a969eb3f532ad9fe89 .sheen{font-size: large;color: salmon} 531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86ddc6dce4a544fdca2df29d5ac0ea9906b sie sprechen gut deutsch.16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906b was machen sie hier in berlin?arbeiten sie hire?16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906b nein,ich studiere.16b28748ea4df4d9c2150843fecfba6836cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e
id选择器
id 选择器类似于类选择器，id 选择器前面有一个 # 号 - 也称为棋盘号或井号。与类选择器一样，id 选择器中可以忽略通配选择器。
id是唯一标识，只能被使用一次
76c82f278ac045591c9159d381de2c57100db36a723c770d327fc0aef2ce13b193f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 b2386ffb911b14667cb8f0f91ea547a7id选择器6e916e0f7d1e588d4f442bf645aedb2f c9ccee2e6ea535a969eb3f532ad9fe89 #sheen{font-size: x-large;color: rosybrown} #star{font-size: large;color: #c0ffff} #clotho{font-size: xx-large;color: darkgreen} 531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86d 605aeb7caf9ad8da829b45e015e4719f sheen:sie sprechen gut deutsch. 16b28748ea4df4d9c2150843fecfba68 6cd525881e8e91bf3dfbe90cd29c101d star:was machen sie hier in berlin?arbeiten sie hire? 16b28748ea4df4d9c2150843fecfba68 f1ba3e4baeedfbf6edc242cc58d46258 clotho:nein,ich studiere. 16b28748ea4df4d9c2150843fecfba6836cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e
标签选择器
76c82f278ac045591c9159d381de2c57100db36a723c770d327fc0aef2ce13b193f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 b2386ffb911b14667cb8f0f91ea547a7标签选择器6e916e0f7d1e588d4f442bf645aedb2f c9ccee2e6ea535a969eb3f532ad9fe89 div{margin: 0 auto;border: 1px;color: darkgreen;font-size: larger;text-align: center} 531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86d684271ed9684bde649abda8831d4d355使用css39528cedfa926ea0c01e69ef5b2ea9b0dc6dce4a544fdca2df29d5ac0ea9906b 类选择器16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906bid选择器16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906b标签选择器16b28748ea4df4d9c2150843fecfba6836cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e
设置链接的样式
能够设置链接样式的 css 属性有很多种（例如 color, font-family, background 等等）。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
css样式的引入
引入方式:
1). 行内引入: 091fabe8bd631fcdef9c9babeb9405a0
2). 内部引入: 写在head标签里面的style标签里面的样式;
3). 外部引入: 将css样式独立成一个文件， 通过70e4be86a4c62f440015f2bdc15d4930与当前html文件链接在一起.
三种引入方式的优先级: 就近原则
//css文件div { width: 80%; margin: 0 auto; padding: 0;}ul { list-style-type: none}li { display: inline-block; width: 20%; background: snow; color: #333333; padding-top: 10px; padding-bottom: 10px; text-align: center; font-size: large; text-transform: capitalize;}li:hover { background: green; color: snow;}a:hover { color: snow;}
<!--html文件--><!doctype html><html><head> <meta charset="utf-8"> <title>title</title> <style> li { background: red; } </style> <link rel="stylesheet" href="css/main.css"></head><body><div> <ul> <li style="background: blue"> <a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">html</a> </li> <li>css</li> <li>js</li> <li>python</li> </ul></div></body></html>
以上就是css样式类的讲解（附实例）的详细内容。