CSS层叠样式表
一、使用CSS样式的方式
1. HTML <!DOCTYPE> 声明标签
1） 定义和用法
- <!DOCTYPE> 声明必须是HTML 文档的第一行，位于<html> 标签之前。
- <!DOCTYPE> 声明不是HTML 标签；它是指示web 浏览器关于页面使用哪个HTML 版本进行编写的指令。
- 在HTML 4.01 中，<!DOCTYPE> 声明引用DTD，因为HTML 4.01 基于SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
- HTML5 不基于SGML，所以不需要引用DTD。
2）各版本的声明
HTML5
<!DOCTYPE html>
<meta charset="utf-8">
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[http://www.w3.org/TR/html4/loose.dtd](http://www.w3.org/TR/html4/loose.dtd)">
该DTD 包含所有HTML 元素和属性，包括展示性的和弃用的元素（比如font）。不允许框架集（Framesets）。
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
注意的规则
- 单标记必须闭合
比如<br>必须写为<br /> <input /> - 单属性必须添加属性值
<input typr="radio" checked >必须写为<input typr="radio" checked="checked" /> - 标记和属性必须使用小写
<Body><BODY>是错的必须写为<body> - 属性的属性值必须使用""
在HTML4.01之前可以使用<body bgcolor=red>,HTML4.01必须写为<body bgcolor="red">
2. 内链样式表
<body style="background-color:green; margin:0; padding:0;"></body>
3. 嵌入式样式表
<style type="text/css"></style>需要将样式放在<head></head>中
4. 引入式样式表
<link rel="StyleSheet" type="text/css" href="style.css">
二、定义样式表
1. HTML标记定义
<p>...</p>
p { 属性:属性值 ；属性1:属性值1 }
p可以叫做选择器，定义那个标记中的内容执行其中的样式
一个选择器可以控制若干个样式属性，他们之间需要用英语的“;”隔开，最后一个可以不加“;”
2. Class定义
<p class="p">...</p>
class定义是以“.”开始
.p { 属性:属性值 ；属性1:属性值1 }
3. ID定义
<p id="p">...</p>
ID定义是“#”开始的
#p { 属性:属性值 ；属性1:属性值1 }
4. 优先级问题
- *** ID>Class>HTML***
-
同级时选择离元素最近的一个的
#p { color: red }
#p { color: #f60 }
执行颜色为#f60的
5. 组合选择器（同时控制多个元素）
h1,h2,h3 { font-size: 14px; color: red; }
选择器组合可以使用“,”隔开
6. 伪元素选择器
a) a:link 正常连接的样式
b) a:hover 鼠标放上去的样式
c) a:active 选择链接时的样式
d) a:visited 已经访问过的链接的样式
三、常见属性
1.颜色属性
color属性定义文本的颜色
- color：green
- color：#ff6600
- color：#f60 简写式
- color：rgb（255,255,255） 红(R)、绿(G)、蓝(B) 每个的取值范围0~255
- color：rgba（255,255,255,1）
RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的(色彩空间)透明度
2.字体属性
1) font-size 字体大小
a. px：设置一个固定的值
b. %：父元素的百分比
c. smaller：比父元素更小
d. larger：比父元素更大
e. inherit：继承父元素
2) font-family 定义字体
font-family：微软雅黑，serif；
可以使用“，”隔开，以确保当字体不存在的时候直接使用下一个
3) font-weight 字体加粗
normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细)
100、200、300~900
400 = normal，而 700 = bold
4) font-style 字体样式
- normal 正常（标准）
- italic 斜体
- oblique 倾斜
- inherit 继承
5) font-variant 小型大写字母显示文本
- normal 标准
- small-caps 小型大写字母显示文本
- inherit 继承
3.背景属性
1) 背景颜色 background-color
2) 背景图片 background-image
background-image:url(图片路径)
background-image:none
3) 背景重复 background-repeat
- repeat 重复平铺满
- repeat-x 向X轴重复
- repeat-y 向Y轴重复
- no-repeat 不重复
4) 背景位置 background-position
- 横向（left,center,right）
- 纵向（top,center,bottom）
用数值来表示位置：background-position：20px 20px;
background-position：X轴 Y轴;
*left center 左居中
简写方式
background:背景颜色 url(图像) 重复 位置
background:#f60 url(images/bg,jpg) no-repeat top center
4.文本属性
1. text-align 横向排列
left，center，right
2) line-height 文本行高
- %基于字体大小的百分比行高
- 数值 来设置固定值
3) text-indent 首行缩进
- %父元素的百分比
- px固定值，默认0
- inherit继承
4) letter-spacing 字符间距
- normal 默认
- length设置具体的数值（可以设置负值）
- inherit 继承
5) word spacing 单词间距
- normal标准间距
- px固定值
- inherit继承
6) direction 文本方向
靠左对齐？靠右对齐？
- ltr从左到右 默认值
- rtl从右到左
- inherit继承
7) text-transform 文本大小写
- capitalize
每个单词以大写字母开头 - uppercase
定义仅有大写字母 - lowercase
定义无大写字母，仅有小写字母 - inherit
规定应该从父元素继承text-transform 属性的值
5.边框属性
1) 边框风格 border-style
a. 统一风格（简写风格）
border-style
b. 单独定义某一方向的边框样式
- border-bottom-style 下边边框样式
- border-top-style 上边边框样式
- border-left-style 左边边框样式
- border-right-style 右边边框样式
c. 边框风格样式的属性值
- none 无边框
- solid 直线边框
- dashed 虚线边框
- dotted 点状边框
- double 双线边框
- groove 凸槽边框
- ridge 垄状边框
- inset inset边框
- outset outset边框
- inherit继承
依托border-color的属性值
2) 边框宽度 border-width
a. 统一风格
border-width：
b. 单独风格
- border-top-width 上边边框宽度
- border-bottom-width 下边边框宽度
- border-left-width 左边边框宽度
- border-right-width 右边边框宽度
c. 边框宽度的属性值：
- thin 细边框
- medium 中等边框
- thick 粗边框
- px 固定值的边框
- inherit继承
3) 边框颜色 border-color
a. 统一风格
border-color
b. 单独风格
- border-top-color 上边边框颜色
- border-bottom-color 下边边框颜色
- border-left-color 左边边框颜色
- border-right-color 右边边框颜色
c. 属性值
- 颜色值的名称 red、green、blue
- RGB rgb(255,255,0)
- RGBA rgba(255,255,0,0.1)
- 十六位进制 #ff0、#ff0000
- 继承inherit
d. 属性值的四种情况
- 一个值：border-color：（上、下、左、右）；
- 两个值：border-color：（上下） （左右）；
- 三个值：border-color:（上） （左、右） （下）;
- 四个值：border-color：（上）（右）（下）（左）;
简写方式
border：solid 2px #f60
6.列表属性
1.标记的类型
list-style-type
- none 无标记
- disc 默认 标记是实心圆
- circle 标记是空心圆
- square 标记是实心方块
- decimal 标记是数字
- decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等)
- lower-roman 小写罗马数字(i, ii, iii, iv, v, 等)
- upper-roman 大写罗马数字(I, II, III, IV, V, 等)
- lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等)
- upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等)
- lower-greek 小写希腊字母(alpha, beta, gamma, 等)
- lower-latin 小写拉丁字母(a, b, c, d, e, 等)
- upper-latin 大写拉丁字母(A, B, C, D, E, 等)
- hebrew 传统的希伯来编号方式
- armenian 传统的亚美尼亚编号方式
- georgian 传统的乔治亚编号方式(an, ban, gan, 等)
- cjk-ideographic 简单的表意数字
- hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
- katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
- hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
- katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）
2.标记的位置
list-style-position
- inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
- outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
- inherit 规定应该从父元素继承 list-style-position 属性的值。
3.设置图像列表标记
list-style-image
- URL 图像的路径
- none 默认。无图形被显示
- inherit 规定应该从父元素继承 list-style-image 属性的值
4.简写方式
list-style:类型 位置 图像
list-style:square inside url('/i/arrow.jpg');
四、DIV+CSS布局
1.div和span
DIV和SPAN在整个HTML标记中，没有任何意义，他们的存在就是为了应用CSS样式
DIV和span的区别在与，span是内联元素，div是块级元素
* DIV占据整个一行；span只占用一小部分，内容多少占用位置多少
2.盒模型
- margin 盒子外边距
- padding 盒子内边距
- border 盒子边框宽度
- width 盒子宽度
- height 盒子高度
3.布局相关的属性
1) position 定位方式
- 正常定位 relative
- 根据父元素进行定位 absolute
- 根据浏览器窗口进行定位 fixed
* 滚动页面其位置不变，如部分网页中的客服 - 没有定位 static
- 继承inherit
2) 定位
left（左），right（右），top（上），bottom（下）离页面顶点的距离
3) z-index 层覆盖先后顺序（优先级）
z-index:1
1 2 3 4 5 6...表示优先级
4) display 显示属性
display:none 层不显示
display:block 块状显示，在元素后面换行，显示下一个块元素
display:inline 内联显示，多个块可以显示在一行内
5) float 浮动属性
- left 左浮动
- right 右浮动
6) clear 清除浮动
clear：both
7) overflow 溢出处理
- hidden 隐藏超出层大小的内容
- scroll无论内容是否超出层大小都添加滚动条
- auto 超出时自动添加滚动条
4.兼容问题及高效开发工具
1) 兼容性测试工具
- IE Tester
- Multibrowser
2) 常用的浏览器
- Google chrome
- Firefox
- opera
3) 高效的开发工具
根据自己的需要来选择
轻量级的： Notepad++、sbulime Text、记事本
重量级的：WebStorm、 Dreamweaver
4) 网页设计工具
- fireworks
- photoshop
5.判断IE的方法
条件判断格式
<! --[if 条件 版本]> 那么显示 <![endif]-->
- 不等于
[if !IE 8]除了IE8都可以显示 - 小于
[if lt IE 5.5]如果IE浏览器版本小于5.5的显示 - 大于
[if gt IE 5]如果IE浏览器版本大于5的显示 - 小于或者等于
[if lte IE 6]如果IE浏览器版本小于6的显示 - 大于或等于
[if gte IE 7]如果IE浏览器版本小于7的显示 - 大于和小于之间
[if (gt IE 5)&(lt IE 7)]如果IE浏览器版本大于IE5小于7的显示 - 或
[if (IE 6)|(IE 7)]如果是IE6或者IE7显示 - 仅
<! --[if IE 8]>如果是IE8
注意⚠️：条件注释只有在IE浏览器下才能执行，这样就达到了我们的效果！
6.《DIV+CSS网页布局实战》
分析+切图+搭建框架
循序渐进>解决兼容>大功告成
