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.
百分比都是相对父元素的