1.继承问题：

当高一级的元素定义了属性，低级元素默认继承。

如body与h1,p之间 。 若是不希望其继承，则针对其自定义属性。

2.派生选择器 ：

针对于某一个元素定义样式。改样式只针对该元素。

如：

li strong {   font-style: italic;font-weight: normal; }

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li> 

<li>我是正常的字体。</li>  

 上面例子中，<strong>定义只在于li的属性中有效。  

strong { color: red;}

h2 { color: red;}

h2 strong {color: blue;}

The strongly emphasized word in this paragraph is red
This subhead is also red.
The strongly emphasized word in this subhead isblue.

上面例子中，定义只在于h2的属性中并且使用了标签才有效。

3.id选择器：

通过用# 来定义，用id="" 来调用的选择器,可以用于派生选择器

如：

#sidebar p {  font-style: italic;  text-align: right; margin-top: 0.5em;}

上面的例子中，如果是使用了id选择器下的 p元素就属于派生选择器，将拥有自己的定义.

4.类选择器：

一般以“.”定义，调用则以class=""

注意：类选择器第一个字母不能使用数字。

可以作为派生选择器：

如：

.fancy td {

  color: #f60;

  background: #666;

  }

    上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字 

可以元素基于类而选择:

如：

td.fancy {

  color: #f60;

  background: #666;

  }

    上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。

5.属性选择器：

对带有指定属性的html元素设置样式 定义使用【】。

如：

[title=W3School]

{

     color:red;

}

上面的例子为 title="W3School" 的所有元素设置样式：

6.创建Css:

1)通过链接外部链接表

       <link rel="stylesheet" type="text/css" href="xxx.css" />

2)内部样式表

   <style type="text/css">

  hr {color: sienna;}

  p {margin-left: 20px;}

  body {background-image: url("images/back40.gif");}

</style>

7.背景定义

1）背景色：

ex: background-color: #000000；

2）背景图片：

ex: background-imge:url();

3) 背景重复：

属性background-repeat: no-repeat(不重复，拉伸的形式)/repeat-x(x方向重复)/repeat(y方向重复)

4）背景定位：

background-position：center/top/bottom/left/right;

5) 背景关联：

backround-attachment:fixed；

当文档比较长时，文档向下滚动，文档滚动到图像的位置，图像就会消失。

默认是：scroll 图片长度随着滚动增长

8.文本

1）水平对齐：

text-align:center/justfy

ps：只对内容有影响 不对元素有影响。

2）文本的字间隔：

可以改变字之间的间隔。

word-spacing:normal;(默认normal为0)

3）字母间隔：

letter-spacing：narmal;

4）字符转换：

text-transform：none/uppercase(全大写)/lowercase（全小写）/capitalize（首字母大写）

5）文本装饰：

text-decoration:none/underline（加下划线）/overline（加上划线）/line-through(中间贯穿线)/blink（文本闪烁）

6）处理空白符：

white-space 将所有的空白符并为一个空格。

7）文本方向：

durection：ltr（左到右）/rtl（右到左）

9.字体

1）指定字体系列

font-family:sans-serif（默认用户代理字体）

2）字体风格

font-style:narmal（文本正常显示）/italic（文本斜体显示）/oblique（文本倾斜显示）

3）字体变形

`font-variant:small-caps(小型大写字母，不同于大小写的区别)`

4）字体加粗

font-weight:bold(粗体)

5) 字体大小

font-size:10px (文本字体大小)

10.链接

1）设置链接的样式

       a:link{  color:#ffffff}  //未访问的链接

       a:visited{  color:#ffffff} //已经访问的链接

       a:hover{  color:#ffffff}//鼠标移动到链接上

       a:active{  color:#ffffff}//正在被点击的链接

2）去除下滑线

      a:link{ decoration:none}

      a:visited{ decoration:none }

      a:hover{ decoration:none }

      a:active{ decoration:none }

3) 设定链接的背景色

      a:link{ background:#ffffff }

      a:visited{ background:#ffffff }

      a:hover{ background:#ffffff }

      a:active{ background:#ffffff }

11.列表

1）列表类型

 ul{ list-style-type:square(方形)、marker(圆点)}` 

2）列表项图像

ul li { list-style-image:url(xxx.gif) }

3）列表标志的位置

list-style-position 

可以将上面三个属性同时使用

如

li{ list-style:url(xxx.png) square inside}

12.表格

1）表格边框

border: 1px solod blue （表示1px的实心蓝色线条）

2）折叠边框

border-collapse：collapse

可以将表格边框折叠成单一的边框

注：如果对th和td设置了边框 那么每个元素与元素之间就会有两条线 该属性可以合并为一条线 同理 对table的作用也一样

3） 表格的宽度跟高度

width和height

4） 表格文本对齐

     text-align:right(水平对齐)

  vertical-align:botton（垂直对齐）

5）表格内边距

      padding：10px

6）表格颜色

         边框颜色：border:1px solid green;

         背景颜色：background-color:green;

         表格字体颜色：color：green;

7）设置分割单元格边框的距离

border-spacing

8）设置是否显示空单元格

empty-cells

13.轮廓

1）设置轮廓的颜色

outline-color

2）设置轮廓的样式

outline-style

3）设置轮廓的宽度

outline-width

4）在一个声明中设置所有轮廓

outline

14.Css框模型概述

1）边框

border

a:

p.aside {border-style: solid dotted dashed double;}

top-right-bottom-left

    定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。

b：

border-width:thin(浅的)/medium(默认)/thick（浓的)

border-width:10px,10px,10px,10px;

c:

无边框 border-style:none(默认)

d:颜色：

border-color:red;

border-color:blue,red;

border-color:blue,red,red,blue;

border-color:transparent;(透明)

2）外边距

margin 在边框之外的

可以接受任何长度单位，可以是像素、英寸、毫米或 em 使用负值

3）内边距

padding

在边框之内的 只要是强调里面的元素与边框之内的距离 可以使用百分比 但是不能使用负值

写法：

     a:  `padding :10px`  

       b:  `padding :10px,10px,10px,10px`  

                             c:  

                                 `padding-top:10px;`  

                                 `padding-left:10px; `  

                                 `padding-right:10px;`  

                                 `padding-bottom:10px;`  

4）外边距合并

当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

15.Css定位

1）position 属性

static(矩形框)/relative(相对原来的相对布局，在原来的位置上做相应的移动)/absolute（根据页面进行布局）/fixed

2）溢出内容

overflow:scroll(滚动)/hidden(隐藏)

3）图片在文本的位置

img.top{ vertical-align:text-top/text-bottom/text-center}

<img class="top" border="0" src="/i/eg_cute.gif" />

4）浮动

float:left/right/top/bottom

clear：

   left   在左侧不允许浮动元素。

  right   在右侧不允许浮动元素。

  both   在左右两侧均不允许浮动元素。

  none   默认值。允许浮动元素出现在两侧。

  inherit   规定应该从父元素继承 clear 属性的值。

16.选择器

1）元素选择器

2）类型选择器

如选择字体，UTF-8等

3）选择器分组

ex： h1, h2, h3, h4, h5, h6 {color:blue;}

4）类选择器

class=""

5）id选择器

6）属性选择器

7）后代选择器（包含选择器）

8）子元素选择器（类似后代选择器）

  如：h1 > strong { color:red; }   <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>

9）伪类

      a:focus   焦点

10）伪元素：

    first-line:第一行  

  ex: 

   p:first-line

{

color:#ff0000;

font-variant:small-caps;

}

17.高级

1）对齐

1.使用块对齐

2.使用margin属性水平对齐

可以将margin属性设计auto来对齐块与阿森纳

    如：

    把左和右外边距设置为 auto，规定的是均等地分配可用的外边距。结果就是居中的元素，注，如果width=100%则无效

.center

{

margin-left:auto;

margin-right:auto;

width:70%;

background-color:#b0e0e6;

}

3.使用 position 属性进行左和右对齐

4.使用 float 属性来进行左和右对齐

2）尺寸

1. 使用像素值px

2. 使用百分比

3. 最大高度/宽度

max-height/max-width

4. 最小高度/宽度

   max-height/max-width

height   设置元素的高度。

line-height   设置行高。

max-height   设置元素的最大高度。

max-width   设置元素的最大宽度。

min-height   设置元素的最小高度。

min-width   设置元素的最小宽度。

width   设置元素的宽度。

3） 分类

  clear   设置一个元素的侧面是否允许其他的浮动元素。

cursor 规定当指向某元素之上时显示的指针类型。

display 设置是否及如何显示元素。

float 定义元素在哪个方向浮动。

position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

visibility 设置元素是否可见或不可见。

4） 导航

1.垂直

<ul>

<li><a href="default.asp">Home</a></li>

<li><a href="news.asp">News</a></li>

<li><a href="contact.asp">Contact</a></li>

<li><a href="about.asp">About</a></li>

</ul>

         注:具体要不要设置圆点  参考列表的用法

2.水平

           li

{

display:inline;

}

float:left - 使用 float 来把块元素滑向彼此。

display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。

width:60px - 由于块元素默认占用全部可用宽度，链接无法滑动至彼此相邻。我们需要规定 60 像素的宽度。

5）透明效果

        img

{

opacity:0.4;

filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */

}

6）媒介类型

@media screen,print

{

p.test {font-weight:bold}

}

all 用于所有的媒介设备。

aural 用于语音和音频合成器。

braille 用于盲人用点字法触觉回馈设备。

embossed 用于分页的盲人用点字法打印机。

handheld 用于小的手持的设备。

print 用于打印机。

projection 用于方案展示，比如幻灯片。

screen 用于电脑显示器。

tty 用于使用固定密度字母栅格的媒介，比如电传打字机和终端。

tv 用于电视机类型的设备