3.CSS
1. 网页组织的两种常用方式
o 表格套表格方式定义网页结构 -- 目前不再是主流，只在一些结构简单的页面中有所使用
o DIV+CSS方式定义网页结构 -- 目前主流的网页开发方式，可以非常灵活的定义网页
2. 容器标签---div
本身没有任何特殊的能力，最主要的功能是用来包含其他标签组成一个整体。
常见的容器标签： div span p
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行，每个元素独占一行。
<span>是一个行内元素。多个行内元素不会要求独占一行
<p> 是一个块级元素。用来声明一个段落。会在当前段落前后 多出额外的空行。
3. CSS 的概念
CSS：层叠样式表
实现了网页中数据和样式的分离，使网页结构更加明细，解决了样式重复定义的问题，提高了开发效率和后期代码的可维护性，另外还增强了网页的美化能力。
页面中的多个元素都系要进行相同的样式修改，若是一个一个修改则会造成代码的冗余和维护的不便性。
~css中的注释只有一种：/* */
4. css的四种引入方式
方式一：通过style属性指定元素的样式
<p style="background-color:#FF0000; color:#FFFFFF">
p标签段落内容。
</p>
方式二：通过<style>定义样式，可以在html的<head>标签中定义<style>标签，在其中为当前页面设定样式。
<head>
<style type=”text/css”>
p { color:#FF0000;}
</style>
</head>
方式三：引入外部样式文件。可以在html的<head>标签中定义<link>标签，引入外部的css文件来修饰当前页面。
<link rel="stylesheet" href="css.css" >
方式四：可以通过@import url(xxx.css) 在css的内部引入一个css文件中定义的css样式片段。可以实现css代码的引入从而实现css代码的复用。
<style type="text/css">
@import url(div.css); 引入和样式之间要加上;做分隔！
div { color:#FF0000;}
</style>
如果有多种方式为同一个元素设定了样式，则样式起作用的原则是：由上到下，由外到内，优先级由低到高。(编辑样式的代码哪个离标签近哪个有效)，但是选择器选择的标签越具体优先级越高 详情请看3.CSS的优先级
css基本选择器
元素(标签)名选择器：
通过html标签的名字来选择标签的选择器
元素(标签)名{}
div｛
color:red;
｝
*{
Color:red;
}
类选择器：
html的所有标签都具有一个通用的属性叫做class，通过它可以为标签指定类名，通过类选择器可以选择指定类名的元素。
.类名{}
.aaa{
color:red;
}
<div class=”aaa”>hahahaha</div>
单独设置样式
<tt class="tt1">
3. id选择器：
html的所有标签都具有一个通用的属性叫做id，通过它可以为标签指定id，id必须在整个html中唯一。通过id选择器可以选择出指定id的元素。
#id{}
#bbb{
color:red;
}
<div id=”bbb”>hehehe</div>
6. css扩展选择器
1. 后代选择器
选择父元素中的后代元素.
父元素选择器 后代元素选择器{}
p { color:#00FF00;}
p b { color:#FF000;}
<p>P标签<b>刘德华</b><a href=”#”><b>段落</b>样式</a></p>
<p>P标签段落</p>
有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。
因此，ul em 将会选择以下标记中的所有 em 元素：
<ul>
<li>List item 1
<ol>
<li>List item 1-1</li>
<li>List item 1-2</li>
<li>List item 1-3
<ol>
<li>List item 1-3-1</li>
<li>List item <em>1-3-2</em></li>
<li>List item 1-3-3</li>
</ol>
</li>
<li>List item 1-4</li>
</ol>
</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
2. 子元素选择器
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1>
选择父元素中的子元素.
父元素选择器 > 子元素的选择器{}
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：
<h1>
This is <strong>very</strong> <strong>very</strong> important.
</h1>
<h1>
This is <em>really <strong>very</strong></em> important.
</h1>
3. 分组选择器
将多个选择器的选择结果进行一个 或 的操作.
选择器1,选择器2,...{}
p,div { color:#FF0000;}
<p>P标签显示段落。</p>
<div>DIV标签显示段落</div>
注：多个不同选择器要用逗号分隔开。
假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：
h2, p {color:gray;}
将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。
可以将任意多个选择器分组在一起，对此没有任何限制。
例如，如果您想把很多元素显示为灰色，可以使用类似如下的规则：
body, h2, p, table, th, td, pre, strong, em {color:gray;}
----------------------------------------------------------------------
h1, h2, h3, h4, h5, h6 {
color:gray;
background: white;
padding: 10px;
border: 1px solid black;
font-family: Verdana;
}
4. 属性选择器
选择具有指定属性，或指定属性的值等与指定值的选择器.
选择器[属性名]{}
选择器[属性名='属性值']{}
相当于 元素[属性]
如果希望把包含属性（title）的所有元素变为红色，可以写作：
*[title] {color:red;}
与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：
a[href] {color:red;}
为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}
假设只希望选择 moons 属性值为 1 的那些 planet 元素：
planet[moons="1"] {color: red;}
上面的代码会把以下标记中的第二个元素变成红色，但第一个和第三个元素不受影响：
<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>
5. 相邻兄弟选择器
选择选择器选择到的元素的相邻的兄弟元素
选择器+兄弟元素名{}
h1 + p {margin-top:50px;}
6. 伪元素选择器
其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。
:link 未点击的状态
:visited 被点击过的状态
注：在不设置visited状态时active生效，否则会出现visited覆盖active效果
:hover 鼠标移动到元素之上但是仍然未点击的状态
:active 被鼠标点击着的状态
语法
伪元素的语法：
selector:pseudo-element {property:value;}
CSS 类也可以与伪元素配合使用：
selector.class:pseudo-element {property:value;}
2）:focus ：选择获得焦点的input 元素。
提示：接收键盘事件或其他用户输入的元素都允许 :focus 选择器。
<style type="text/css">
input:focus{background-color:yellow;}</style>
:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。
在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：
实例
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
