1.外部CSS固定写法：
<link href="base.css" rel="stylesheet" type="text/css" />
外部样式表文件不能包含任何的 html 标签。
优先级：内联式 > 嵌入式 > 外部式
2.选择器补充
2.1子选择器
大于符号(>),用于选择指定标签元素的第一代子元素：
.food>li{border:1px solid red;} 2.2包含（后代）选择器
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素：
.first span{color:red;} 2.1与2.2区别：子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。2.3通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
* {color:red;} 2.4伪类选择符
伪类选择符给html不存在的标签（标签的某种状态）设置样式，
比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
a.red: visited {color: #FF0000}//伪类选择器与类选择器结合使用
<a class="red" href="css_syntax.asp">CSS Syntax</a> 其他的还有：
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
- a:foucs-向拥有键盘输入焦点的元素添加样式
并且：
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
first-child 伪类：用来选择元素的第一个子元素。
注意：本知识点常被误会 要看下面的例子：
<div> <p>These are the necessary steps:</p> <ul><li>Intert Key</li> <li>Turn key<strong>clockwise</strong></li> <li>Push accelerator</li> </ul> <p>Do<em>not</em>push the brake at the same time as the accelerator.</p> </div>以上程序中，作为第一个元素子元素的有第一个p 第一个li 第一个strong 第一个em
所以
p:first-child {font-weight: bold;} 选择的是第一个p 不是p中的第一个元素 :lang 伪类：为不同的语言定义特殊的规则
在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型：
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}</style>
</head>
<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html> 2.5属性选择器
下面的例子为带有 title 属性的所有元素设置样式：
[title]{
color:red;
}
多个时：
a[href][title] {color:red;} 下面的例子为 title="W3School" 的所有元素设置样式： [title="W3School"]{
border:5px solid blue;
} 下面的例子为title属性中包含hello的元素设置样式，适用于由空格分隔的属性值： [title~="hello"]{ color:red; }
<h2 title="hello world">Hello world</h2> 更高级的例子有：
| 类型 | 描述 |
|---|---|
| [abc^="def"] | 选择 abc 属性值以 "def" 开头的所有元素 |
| [abc$="def"] | 选择 abc 属性值以 "def" 结尾的所有元素 |
| [abc*="def"] | 选择 abc 属性值中包含子串 "def" 的所有元素 |
[lang|="en"] { color:red; }
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p> 属性选择器在为不带有 class 或 id 的表单设置样式时特别有用2.6相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;} 这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
3.CSS的权值规则
浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式：
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100
p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/ 若权值仍旧一样，使用层叠： 根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用
若需要设置最高权重，使用!important：
p{color:red!important;}//要写在分号的前面 p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p> 4.盒子模型
盒子模型就算是一个文本框
注：由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果希望边框出现，就必须声明一个边框样式。
外边距合并：
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
几个例子：
5.布局模型
5.1流动模型
具有2个比较典型的特征：
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
5.2浮动模型
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
通过设置元素浮动可以将块状元素并排显示，如下代码可以实现两个 div 元素一行显示： div{
width:200px;
height:200px;
border:2px red solid; float:left; }
<div id="div1"></div>
<div id="div2"></div> 如下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间：
如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
如果不允许某一个元素的周围出现其他浮动元素 就用clear
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
5.3层模型
层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，有三种形式：
1、绝对定位(position: absolute)
需要设置position:absolute(表示绝对定位)
如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px:
div{
width:200px;
height:200px;
border:2px red solid; position:absolute;
left:100px;
top:50px; }
<div id="div1"></div> 即元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。 2、相对定位(position: relative)
需要设置position:relative（表示相对定位）
如果将 top 设置为 50px，那么框将在原位置顶部下面 50 像素的地方。如果 left 设置为 100 像素，那么会在元素左边创建 100 像素的空间，也就是将元素向右移动。
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div> 通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置仍旧保留，空出来一块。 3、固定定位(position: fixed)
与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身，类似于窗口广告，不管怎么拖动滚动条，它的位置都不变#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
.... 4、Relative与Absolute组合使用 可以通过这种方式，实现box2相对于box1的地位
- 参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div> - 参照元素必须加入position:relative;
#box1{
width:200px;
height:200px; position:relative; } - 定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
#box2{ position:absolute;
top:20px;
left:30px; } 6.长度单位总结
1、像素
像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）
2、em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
p{font-size:12px;text-indent:2em;} 上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）
下面注意一个特殊情况：
但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下：
p{font-size:14px}
span{font-size:0.8em;}
<p>以这个<span>例子</span>为例。</p>
3、百分比
p{font-size:12px;line-height:130%} 设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）
7.一些CSS样式设置技巧
行内元素（文本、图片）的水平居中：通过给父元素设置 text-align:center
定宽块状元素（宽度width为固定值）的水平居中：通过设置“左右margin”值为“auto”来实现居中的
width:200px;/定宽/ margin-left:auto; margin-right:auto;/左右margin/ 以上两者缺一不可
不定宽块状元素（宽度不固定）的水平居中：
- 加入 table 标签：利用table标签的长度自适应性，以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
<div> <table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody> </table> </div>
<style> table{ border:1px solid; margin:0 auto; } </style>
- 改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body> <style>
.container
{ text-align:center; } /* margin:0;padding:0（消除文本与div边框之间的间隙）*/ .container ul{
list-style:none;
margin:0;
padding:0; display:inline; } /* margin-right:8px（设置li文本之间的间隔）*/ .container li{
margin-right:8px;
display:inline;
}
</style> - 通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body> <style>
.container{ float:left;
position:relative;
left:50% }
.container ul{
list-style:none;
margin:0;
padding:0; position:relative;
left:-50%; }
.container li
{float:left;
display:inline;
margin-right:8px;}
</style> 父元素高度确定的单行文本的垂直居中：通过设置父元素的 height 和 line-height（指行与行之间的 基线间的距离 ） 高度一致来实现的
<div class="container">
hi,imooc!
</div> <style>
.container{ height:100px;
line-height:100px; background:#999;
}
</style> 父元素高度确定的多行文本的垂直居中：
- 使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。
<body> <table><tbody><tr><td class="wrap"> <div> <p>看我是否可以居中。</p> </div> </td></tr></tbody></table> </body>
table td{height:500px;
background:#ccc} 因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。 - 该方法兼容性较差，不太好。虽然不用添加多余的标签
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div> <style>
.container{
height:300px;
background:#ccc; display:table-cell;
/*IE8以上及Chrome、Firefox*/ vertical-align:middle;
/*IE8以上及Chrome、Firefox*/
}
</style> 8.隐形改变display
设置以下 2 个句之一时，元素就会变为 display:inline-block（块状元素）的方式，就可以设置元素的 width 和 height 了，且默认宽度不占满父元素：
2. float : left 或 float:right
10.伪元素
| 属性 | 描述 | CSS |
|---|---|---|
| :first-letter | 向文本的第一个字母添加特殊样式 只能用于块级元素 | 1 |
| :first-line | 向文本的首行添加特殊样式。 只能用于块级元素 | 1 |
| :before | 在元素之前添加内容 比如图片 | 2 |
| :after | 在元素之后添加内容 比如图片 | 2 |
| |
|---|
11.一些补充的属性
设置透明度：opacity=0-1
京公网安备 11010502036488号