CSS基础

CSS概述

解决内容与表现分离: 样式单独存在.css中

多个样式定义是层叠的: 1个HTML可以引入多个.css样式表.层叠显示.

层叠次序

a 内联<p style= xxx>

b 内部样式<head> <link style = "xxx.css"> <\head>

c 外部样式

d 浏览器缺省样式

选择器

选择 标识符 : h1, body, p.

选择 嵌套标识符 : li storng         

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

选择器 属性

body, h1, h2 {
color
: #000;
background
: #fff;
margin
: 0;
padding
: 0;
font-family
: Georgia, Palatino, serif, "sans serif";
text-align: center;
}

选择器 数值

数值: #ff0000=#f00;

   rgb(255,0,0); rgb(100%,0%,0%);

   "sans serif"(记得加引号)

大小写敏感

class, id 敏感, 其他不敏感.

继承               Netscape 4不支持继承

body{font-family: Verdana, sans-serif; }    所有body 包含的子元素 均继承了 该字体

定位

三种  :普通流,浮动,绝对定位。

三种 + 1: static,relative, absolute,fixed

层叠顺序

js : object.style.zindex = 1

在有position属性的定位元素上奏效

块框, 行内元素, 行内框         display属性控制

div,h1, p;   span, strong; 所站的位置是一个框.

无法对无名框或行框应用样式

看到的所有东西, 都形成某种框

间距可框调, 高度只可设: 水平框, 边框, 外边框。

文本

1. 颜色, 装饰, 缩进, 字间距, 对齐等等

2. 悬挂缩进{text-indent : 5em}

3. 可继承. 缩进父元素width的百分比           块级元素   行内元素

4. text-align:center  与 <CENTER> 区别

    文本居中  与 整个元素居中

5. justify 两端对齐

6. word-space字间距

CSS字体

1. 指定字体

2. 指定字体族

3. 按顺序选择字体

4. size, weight, variant, style等设置

框结构

boarder, padding, margin. 图略

用户可设置: 防止浏览器自动定义。

有兼容性问题。

margin: right, left, top, bottom.

百分比都是相对父元素的


posted on 2011-04-24 19:03  oleeceo  阅读(218)  评论(0)    收藏  举报

导航