1 - 认识CSS样式
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等用于设置页面的表现。CSS3 并不是一个完整的独立版本而是将不同的功能拆分成独立模块（例如，选择器模块，盒模型模块），这有利于不同功能的及时更新与发布也利于浏览器厂商的实际使用。
2 - 为何使用CSS？
CSS帮助您将文档信息的内容 和如何展现它的细节相分离。众所周知，如何展现文档的细节即为样式(style)。您可以将样式从它的内容分离出来，以便您能够：
避免重复
更容易维护
为不同的目的，使用不同的样式而内容相同
例如:
您的网站可能有成千上万的页面外观相似。使用CSS，您可以将样式信息存储在公共的文件中以供所有的页面共用。
当用户显示页面时，用户的浏览器将样式信息和页面内容一同加载。
当用户打印页面时，您可以提供不同的样式信息，以便于打印出来的页面更易于阅读。
总之，在HTML中，您使用标记语言来描述文档的内容而不是它的样式。您可以使用CSS来指定它的样式而不是它的内容。
3 - CSS语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器：指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成红色，而其他的元素（如ol）不会受到影响。
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：
CSS 注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束, 实例如下:
4 - CSS样式引入
4.1 - 内联式css样式
内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：
<p style="color:red">这里文字是红色。</p>
注意要写在元素的开始标签里，下面这种写法是错误的：
<p>这里文字是红色。</p style="color:red">
并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：
<p style="color:red;font-size:12px">这里文字是红色。</p>
4.2 - 嵌入式css样式
嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色：
嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。
4.3 - 外部式css样式
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
<link href="base.css" rel="stylesheet" type="text/css" />
4.3 - simport url
导入方式指的是使用 CSS 规则引入外部 CSS 文件。
5 － css选择器
什么是选择器？
每一条css样式声明（定义）由两部分组成，形式如下：
在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。比如右侧代码编辑器中第7行代码中的“body”就是选择器。
5.1 － 简单选择器
简单选择器可组合使用。
5.1.1 － 标签选择器
标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码：
上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。
5.1.2 － 类选择器
类选择器在css样式编码中是最常用到的
.className 以 . 开头，名称可包含字母，数字，-，_，但必须以字母开头。它区分大小写并可出现多次。
语法：
.类选器名称{css样式代码;}
注意：
1.英文圆点开头
2.其中类选器名称可以任意起名（但不要起中文噢）
使用方法：
第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>胆小如鼠</span>
第二步：使用class="类选择器名称"为标签设置一个类，如下：
<span class="stress">胆小如鼠</span>
第三步：设置类选器css样式，如下：
5.1.3 － ID选择器
#idName以 # 开头且只可出现一次，其命名要求于 .className 相同。在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：
1.为标签设置id="ID名称"，而不是class="类名称"。
2.ID选择符的前面是井号（#）号，而不是英文圆点（.）。
3.ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
4.可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
栗子：
5.1.4 － 通配符选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
* {color:red;}
5.1.5 － 属性选择器
对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
网友评论