css小白一枚。对于css是真心不懂，所以这篇文章也是看着网上的资料，边理解边整理的，受益良多。
1 css样式控制html文件的方式
1.1 内嵌式
CSS一般位于HTML文件的头部，即<head>与</head>标记内，并且以<style>开始，以</style>结束，例如如下的代码定义了<body>标记使用的字号:
<style type="text/css">
body {
font-size: 10px;
}
</style>
1.2 行内样式
采用<style=" ">的格式把样式写在HTML中的任意行内，“=”右边的属性设置放入双引号中，多个属性用“;”分隔。
例如，下面的样式控制段落文字的字号和颜色：
<div style="font-size: 10pt; color: #FF6600;"></div>
1.3 链接式
CSS的定义既可以在HTML文档内部，也可以单独在外部文件（例如style.css）中定义。把编辑好的CSS文档保存成外部文件，然后在<head>中添加如下所示的代码：
<link rel="stylesheet" href="style.css" type="text/css">
1.4 导入式
导入样式和链接样式的功能基本相同,只是语法和运作方
式上略有区别.
导入的样式表在HTML文件初始化时,会被导入到HTML
文件内,作为文件的一部分,类似内嵌式的效果。
链接式样式表则是在HTML的标记需要格式时才以链接的方式引用。
导如样式表常用格式：
@import url(sheet1.css)
@import url(“sheet1.css”)
@import url(‘sheet1.css’)
@import sheet1.css
@import “sheet1.css”
@import ‘sheet1.css’
Css样式四种嵌入方式优先级
行内样式优先级最高,
其次是采用<link>标记的链接式,
再次是位于<style></style>之间的内嵌式,
最后是@import导入式.
2 css选择器
选择器(selector)是CSS中很重要的概念,所有HTML
语言中的标记都是通过不同的CSS选择器进行控制的。
2.1 标记选择器
一个HTML页面由很多不同标记组成，而CSS标记选择器就是声明哪些标记采用哪种CSS样式。
2.2 类别选择器
所有标记都可通过class属性设置类选择器
例如：
<html>
<head> <title>class选择器</title>
<style type="text/css">
.one{
color:red; /* 红色 */
font-size:18px; } /* 文字大小 */
.two{
color:green; /* 绿色 */
font-size:20px; } /* 文字大小 */
.three{
color:cyan; /* 青色 */
font-size:22px; } /* 文字大小 */
</style>
</head>
<body>
<p class="one">class选择器1</p>
<p class="two">class选择器2</p>
<p class="three">class选择器3</p>
<h3 class="two">h3同样适用</h3>
</body>
</html>
显示如下：
2.3 ID选择器
ID选择器的使用方法跟class选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此其针对性更强。在HTML的标记中只需要利用id属性，就可以直接调用CSS中的ID选择器，格式如下：
例如：
<html>
<head>
<style type="text/css">
#cuti {font-weight:bold;}
</style>
</head>
<body>
<p id="cuti">这是一行加粗的文本</p>
<p>这是一行普通文本</p>
</body>
</html>
显示如下：
网友评论