CSS学习总结

原本我们通过对HTML元素加一些附加属性进行改变页面的外观，比如width、height、bg-color、padding、spacing等属性。

现在有了CSS能够把页面布局和页面外观完全分离开来。只需要把css链接到文本里就可以实现改变外观。

css相对于传统的方法最明显的优势：如果你想要把所有的h1元素全部设置成统一的样式，传统的方法需要一个一个设置，而css则只需要一个设置即可。

CSS的形式如下：

元素或类{     特性：值;     特性：值;     ............ } 比如： 对于元素： body{     background-color:white; } 对于类： td.code{     font-size:10px; } 这是对于td这个元素中class值为code的元素进行描述。

外部链接css的方式：

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

内部css的使用方式：

<style type = "text/css">     css代码; </style>

外部的CSS的好处：

(1)重用。

(2)修改同步更新，不需要一个一个修改。

(3)设置不同的输出设备。

<link rel = "stylesheet" type = "text/css" href = "1.css" media = "screen"/>

<link rel = "stylesheet" type = "text/css" href = "2.css" media = "handheld"/>

在一个样式表中引入另一个样式表：

@import "1.css";

选择器的使用：

(1)一般选择器：直接用元素。比如直接h1；

(2)通用选择器：适用于全部的元素。*{...}

(3)类选择器：指定特定的class。

        -   h1.classname：这种适用于h1元素中class属性的值为classname的元素。

        -  .classname：这种适用于任何元素中class属性的值是classname的元素。

(4)子选择器：选择某种依赖关系的元素。比如td>b，表示td元素的直接子元素b的元素。

(5)后继选择器：某种依赖关系的元素。比如 table b,表示table中的b元素。

接下来就具体介绍css的一些用法：

1.字体类别：

(1)font-family:这是字体，比如serif,monospace等。

    具体用法：font-family : arial,sans-serif;表示首选arial字体，如果机器中没有arial字体，则选用sans-serif字体。

(2)font-size：大小。

    具体用法：font-size：12px;表示字体大小为12像素.

(3)font-weight：表示是否为粗体。

    具体用法：font-weight：bold；表示为粗体。

(4)font-style：表示是否是斜体。

    具体用法：font-style：italic；表示为斜体。

2.文本类别：

(1)text-align：表示文本的位置。可选为left,right,center;

    具体用法：text-align：center；表示文本在中央。

(2)text-decoration：表示文本是否要下划线、删除线等。可选为underline\line-through;

    具体用法：text-decoration：underline;表示文本下方有下划线。

(3)color：表示文本的颜色。

    具体用法：color：red；表示颜色是红色。

(4)text-indent：文本缩进多少。

    具体用法：text-indent：2px；表示缩进2个像素。

(5)line-height：表示行之间的宽度。

    具体用法：line-height：2px;表示行之间间隔2像素。

补充：文本伪类：

(1)first-letter：对于第一个字母特别着重。

    形如：open；

    具体用法：p：first-letter{....}

(2)first-line：对于第一行特别着重。

    形如：I am

              xiazdong；

    具体用法：p：first-line{...}

 

3.背景类别：

(1)background-color：

line-height:2px  表示行间距.

padding:

border-style：边框的形状，比如solid表示实线。

border-color：边框的颜色。

border-width：边框的宽度。

4.边框类别：可用于任何元素的边框。

(1)border-width：表示边框的宽度。

    具体用法：border-width：2px;表示边框的宽度为2px。

(2)border-style：表示边框的类型。可选：solid,dotted

    具体用法：border-style：solid；表示边框是实线。

(3)border-color：表示边框的颜色。

    具体用法：border-color：red；表示边框的颜色为红色。

(4)padding：表示边框和文本的距离。

    具体用法：padding：2px；表示边框和文本距离为2像素。

(5)margin：表示边框的距离。

    具体用法：margin：2px；表示边框之间距离为2像素。

大小类别：

(6)width：框的宽度。

(7)height：框的高度。

(8)max-height和min-height：框的最大高度和最小高度。

(9)max-width和min-width：框的最大宽度和最小宽度。

(10)overflow：表示框是否要滚动条。

    具体用法：overflow：scroll；表示边框需要滚动条。

5.背景类别：

(1)background-color：表示背景颜色。

    具体用法：background：blue;

(2)background-image：表示背景的图片。

    具体用法：background-image：url("apple.jpg")；表示背景来自apple.jpg文件。

(3)background-position：表示背景图片的位置。可选:(1)20%,30%(2)left(3)center....

    具体用法：background-position：center;表示图片在中心。

(4)background-attachment：表示图片是否会随着滚动条移动而变化。可选：fixed,scroll

    具体用法：background-attachment：fixed;表示图片不会变化。

(5)background-repeat：表示图片是否会重复。可选：no-repeat,repeat,repeat-x,repeat-y;

    具体用法：background-repeat：no-repeat；表示不会重复。

常用颜色：

(1)#cccccc：深灰色。

(2)#efefef：浅灰色。

(2)#ffffff：白色。

(3)#000000：黑色。

6.列表类别：

(1)list-style-type：表示前标的样式。可选：disc(默认),circle,square,none,decimal,lower-roman;

    具体用法：list-style-type：square；表示用方块进行标号。

(2)list-style-position：表示标号的位置。可选：inside,outside;

    具体用法：list-style-position：outside;

7.表类别：

(1)border-collapse：是否应该显示每一个边框；可选：collapse或separate;

    具体用法：border-collapse：separate；表示每个边框都会显示，不会合并。

(2)border-spacing：边框之间的距离；

    具体用法：border-spacing：15px;表示边框之间距离为15像素。

8.外边框类别：和边框的区别是不占用空间。

(1)outline-style：

(2)outline-color：

(3)outline-width：

9.:before和:after伪元素：

(1):before:用于指定在哪些元素之前加哪些内容。

    具体用法：h1:before{content:"这里是h1内容：";}这样在h1的前面会加上这个字符串。

(2):after和：before正好相反。

**计数器函数counter():

这个计数器是能够遇到某种情况自动让数字递增。

比如：

body{     counter-reset:chapter; } h1:before{     content:counter(chapter); } h1{     counter-increment:chapter; } 这个例子表明，当进入body时，先清零计数器chapter，在h1之前添加计数器，每次遇到h1，计数器就加一。

10.链接类别：

伪类：能够使得链接在不同状态下的样式不同。

(1)link：当一般状态下。

(2)visited：访问完后。

(3)active：当激活链接时。

(4)hover：当停留在链接上时。
    具体用法：

a:link{     color:red; } a:hover{     color:blue; } a:visited{     color:black; } 链接一般状态为红色，鼠标停留在链接上时是蓝色，访问完后是黑色。

11.其他类别：

(1)display:用于将内联框显示为外部框或反过来。

    具体用法：display:block；

(2)cursor：用于指定鼠标指针的样式。

(3)visibility：某个元素是否显示。

 

布局：

position特性，有static(默认),relative,absolute,fixed;可选。

如果选了后面三个，则可以附加left,top,right,bottom进行移位，但是有一个规则，如果left:30px;则表明向右移，top:30px;表明向下移。

1.普通定位：没有特殊的，平时的按html代码顺序布局。

2.相对定位（relative）：相对于普通定位进行偏移，但是这个相对定位的元素没有剥离出普通定位，即如果有三个段落，如果第二个段落移开了，但是空间还是依然保留，不会被第三个段落占用。

    具体用法：

position:relative; top:30px; left:30px;

注意：如果想要让一个段落遮掉另一个段落，则需要设置background-color；

3.绝对定位（absolute）：被排除在普通定位之外，其他类似相对定位。如果有三个段落，如果第二个段落移开了，则空间被第三个段落占用。

具体用法：

position:absolute; top:30px; left:30px;

4.固定定位（fixed）：完全脱离普通定位，而是固定在窗体的某一个位置，不论滚动条移动也不会变化。

注意：z-index特性可以设置多个元素重叠时，元素的叠放次序，z-index越大，则越靠顶。

    具体用法：

position:fixed; top:0px; left:0px; 表明这个框不动，并且在最顶部。

5.浮动定位float：脱离普通定位，并且包含在框中，但不会重叠。指定float后，需要指定width特性，为了确定框的宽度。

    具体用法：

float:left; width:100px; 表明某个元素放在左边，并且宽度为100像素。

 

 转自：http://blog.csdn.net/xiazdong/article/details/6838612