HTML中放置CSS的三种方式和CSS选择器(一)在HTML中使用CSS样式的方式一般有三种：1 内联引用2 内部引用3 外部引用。第一种：内联引用（也叫行内引用）就是把CSS样式直接作用在HTML标签中。<p style="font-size: 10px; color: #FFFFFF;">
使用CSS内联引用表现段落.
</p>
特点：内联的样式比其他方法更加灵活，但需要和展示的内容混淆在一起，内联样式会失去一些样式表的优点。 第二种：内部引用（也叫内嵌式）使用style标签直接把CSS文件中的内容加载到HTML文档内部的<head>标签里。<head>
……
<style type="text/css">
/* 设置本页面p标签中的文字为以下样式*/
p{
font-size: 10px;
color: #FFFFFF;
}
</style>
</head>
特点 : 适合用于一个HTML文档具有独一无二的样式时。 第三种：外部引用CSS外部引用使用了外接的CSS文件,一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件.外部引用相对于内部引用和内联引用来说是高效的是节省宽带的.外部引用是W3C推荐使用的实现外部引用有两种方式：(1)使用link标签引用CSS(2)使用@import导入CSS<head>
……
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style type="text/css">
@import "mystyle2.css"
……. /*其它CSS定义*/
</style>
</head>注 : 如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准。(二)CSS选择器有六种选择符:1 HTML选择符2 类选择符3 ID选择符4 关联选择符5 组合选择符6 伪元素选择符1 HTML选择符 : 即是HTML标签，用来改变一个指定标签的样式，任何HTML元素都可以是一个CSS的选择符。语法：HTML标签名{属性：值}p { text-indent:3em; } /*当中的选择符是p*/
h1{ color:red; } /*当中的选择符是h1*/
2 类选择符 : 匹配文档中元素E的class属性的属性值为classname的元素语法：标记名.类名{属性：值} 或 .类名{属性：值}类选择符名称的定义方式是,"."符号，英文"dot"，后加类名称classname类选择符的定义需要有.符号（.符号标明是类选择符），但是HTML文档中的标签的class属性名不能出现.符号，见下面示例：p.dark-row{ background:#EAEAEA; }/*设置p标签中class属性为dark-row的*/
.note{ font-size:small } /*为note的类可以被用于任何元素*/
<p class="dark-row">第一段</p> <!– 具有类dark-row样式 -->
<span class="dark-row">第二段</span> <!– 没有类dark-row样式 -->
<span class="note">第三段</span> <!– 具有类note样式 -->
<div class="note">第四段</div> <!– 具有类note样式 -->3 ID选择符 : 匹配文档中元素E的id属性的属性值为idname的元素语法：ID名称{属性：值}ID选择符名称的定义方式是，#符号，英文"pound"，后加ID名称idnameID选择符的定义需要有#符号（#符号标明是ID选择符），但是HTML文档中的标签的id属性名不能出现#符号，见下面示例id属性的特殊之处在于，一个文档中只能有一个元素使用一个ID选择符（与class属性正好相反），id属性可以用来单一地标识一个元素 。#main{ text-indent:3em; } /*ID名称main前加上一个#号*/
… …
<p id=“main”>文本缩进3em</p> <!– 在html的p标签中指定id属性main -->
4 关联选择符 : 也称包含选择符,可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义语法：选择符1 选择符2...{属性：值}table a{font-size:12px} 在表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。5 组合选择符：也叫选择符组，可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义。语法：选择符1,选择符2,.,..{属性：值}h1, h2, h3, h4, h5, h6 { color: green }p, table{ font-size: 9pt }
效果完全等效于：p { font-size: 9pt }table { font-size: 9pt }
6 伪元素选择符是指对同一个HTML元素不同状态的一种定义方式。例如对于<a>标签的正常状态、访问状态、选中状态、光标移到超链接文本上的状态，就可以使用伪元素选择器来定义。语法：标签:伪元素{属性:值;}a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */提示：a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。提示：a:active 必须被置于 a:hover 之后，才是有效的。最近整理的所学的浅显知识,若有错误,敬请指正.
