CSS快速上手教程

一 选择符

1

通配：*{}

所有元素

类：p{}

如 p 标签等相应元素

ID：#id{}

使用相应 id 属性的元素样式

类：.类名{} 使用相应 class 属性的元素样式

包含：div p{} 被某些元素包含的子元素的样式

选择符分组： #content2 , .STYLE{} 一次定义几个选择符的样式

2

行内样式表：<p style=””>（CSS 里间隔是冒号、分号；HTML 里是等号、空格）

内部样式表：<style type=”text/css”> </style>

外部样式表：<link href=”skin.css” rel=”stylesheet” type=”text/css”>

二 CSS 字体属性

font: font-family font-size font-style font-weight font-variant（转换大小写）

三 CSS 文本属性

color text-decoration text-align vertical-align direction text-indent（文本缩进属性） line-height white-space（文本空白显示效果 nowrap 强制同行）

四 CSS 背景属性

background: background-color background-img（url()） background-repeat  background-attachment（滚动方式） background-position（背景图片位置属性，两个取值——前为水平方向、后为垂直方向；

注意：先定义一个相框，原点在相框，移动的是图片。

实例如下：

.pic{width:28px;height:28px;background:url(../images/icon.gif) no-repeat;}

.pic2{background-position:-40px 0px;}

.pic3{background-position:-80px 0px;}

.pic4{background-position:-120px 0px;}

-------样式与内容的分割线-----------

<li class="pic pic1"></li> （类名写前面，表示后面的类继承了前面类的属性，

省重写了）

<li class="txt"><a href="buy.htm" target="_parent">购物车</a></li>

<li class="pic pic2"></li>

<li class="txt"><a href="help.htm" target="_parent">帮助中心</a></li>

<li class="pic pic3"></li>

<li class="txt"><a href="JavaScript:void(0);" onclick="addFav();"> 加 入 收 藏

</a></li>

<li class="pic pic4"></li>

）

五 CSS 边框属性

border: border-style border-width border-color

六 CSS 边距属性

padding 内边距：内容与边框之间的宽度

margin 外边距：元素周围的边界宽度

七 CSS 链接属性

例：<a class=”a1” href=””></a>

.a1:link{} （这是伪类）

未访问链接：link

已访问链接：visited

悬停链接：hover

激活链接：active

八 CSS 布局属性

定位属性 position

位置属性 top、right、bottom、left

层叠顺序属性 z-index 默认为 1，值越大越在顶

透明度属性 opacity 1 为饱和，值越小越透明

超出内容属性 overflow

显示属性 visibility

浮动属性 float（只有左、右；默认的文档流是向下排列，使用 float 可以让他们挨个往左上方排列；比如布局时前面两个是文档流排列，第三个写了 float,那么从第四个开始，才是横向排列的，所以 float 是给它后面的元素看的）

清除浮动属性 clear（不想继续往左上排了，就 clear 左）

九 DIV+CSS 布局

宗旨：内容与样式分离

优点：灵活

核心：用 DIV 时，把所有元素都当成一个方块，给它精确的宽高，再 float 它！

十 课堂笔记

1 css 通配符 "*" 可以消除浏览器的默认属性，比如：

*{margin:0;padding:0;}

推荐这样 html,body,div,span,applet,object,iframe,h1,h2,p,a{margin:0;padding:0;}

而不是 *{margin:0;padding:0;}

因为 css 通配符 “*”会将网站内所有元素的默认值重设，这在大型网站会加重客户端的负担，浏览器运行速度变慢。但如果开发的是小型站点或企业网站，页面元素不是很多，使用 CSS 通配符造成的性能影响可以忽略。

2 display ：inline块拥有行属性；block行拥有块属性。

3

弹幕般滚动<marquee behavior=””direction=””scrollamout=”数值越大滚得越快”onmouseover=””onmouseout=””>  此为块级元素，用时要加宽高。

4

盒子属性：margin padding border

CSS难点总结

n 盒子模型

ü margin（外边距）

ü padding（内边距）

n 居中

ü 块级元素的位置居中：Margin作为盒子间的距离，在布局中，扮演着较为重要的角色。典型的应用为布局块级元素的水平居中，如：“margin：0 auto;”

ü 文字内容的水平居中：文字内容水平居中：例如段落<p>内的文字对齐等设置，则设置块级元素的 “text-align：center”，实现文字水平居中；

ü 垂直居中：常见的是单行文字垂直居中问题，可以设置文字所在的行的高度 height 与文字行高属性 line-height 一致，使用“vertical-align：middle;”实现垂直居中。

n 布局属性

ü position（定位）

Ø static

默认属性，按照常规文档流（从上到下，从左到右）进行定位，不能使用 top、left 等类似其他属性定位，如需要使用以上属性，必须使用除了static以外的三种定位方式。

Ø absolute（绝对定位）

指定某元素是相对于它包含的元素进行定位，绝对定位的元素是独立定位的，脱离了静态定位元素中文档流的一部分，它的定位要么是相对最近的定位祖先元素，要么是相对于文档本身。

Ø fixed（固定定位）

相对于浏览器窗口进行定位

Ø relative（相对定位）

当 position 属性设置为 relative，元素按照常规文档流进行布局，它的定位相对于它文档流中的位置进行调整。系统保留着元素在常规文档流中的空间，不会因为要填充空间而将其各边合拢，也不会将元素从新的位置“推开”。

Ø z-index

设置元素的堆叠顺序，拥有更高堆叠顺序的元素总会处于堆叠顺序较低的元素前面，z-index可以拥有负数值，且仅能在定位元素上奏效（例如 position：absolute；）

Ø display

规定元素应该生成的框的类型，常用属性值有 none，block，inline等

Ø none

此元素不被显示；

Ø block

让元素按块级元素显示，前后带换行符，自己占一行，可以用在行级元素上使其拥有块级元素的特点；

Ø inline

让元素按照行级元素（内联元素）显示，一个挨一个，可以用在块级元素上，使其拥有行级元素的特点；

Ø  overflow

规定当内容溢出元素框时发生的事情；

默认值：visible（内容不会被修剪，如果超出会呈现在元素框之外），还有 hidden（内容会被修剪，并且其余内容是不可见的），scroll（超出内容会被修剪，但是可以通过滚动条来查看超出的部分）

Ø  visibility

设置元素是否可见，visible为可见；hidden为不可见，不同于“display：none；”的是“visibility：hidden;”的元素虽然不可见但是也会占据页面上的空间，前者则不会。（通俗讲，用 display会被挤。所以 display常用于多级菜单显示隐藏）

Ø opacity(透明度)

CSS3的属性，可以代替了之前 CSS中的滤镜属性，可以使用 value直接表示元素的透明度，0.0为完全透明到 1.0为完全不透明，例如：opacity：0.5；