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)    收藏  举报

导航