CSS层叠样式表

一、使用CSS样式的方式

1. HTML 声明标签

1） 定义和用法

• 声明必须是HTML 文档的第一行，位于 标签之前。
• 声明不是HTML 标签；它是指示web 浏览器关于页面使用哪个HTML 版本进行编写的指令。
• 在HTML 4.01 中， 声明引用DTD，因为HTML 4.01 基于SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
• HTML5 不基于SGML，所以不需要引用DTD。

2）各版本的声明

HTML5

HTML 4.01

该DTD 包含所有HTML 元素和属性，包括展示性的和弃用的元素（比如font）。不允许框架集（Framesets）。

注意的规则

• 单标记必须闭合
  比如
  必须写为
  
• 单属性必须添加属性值
  必须写为
• 标记和属性必须使用小写
  是错的必须写为
• 属性的属性值必须使用""
  在HTML4.01之前可以使用,HTML4.01必须写为

2. 内链样式表

3. 嵌入式样式表

需要将样式放在中

4. 引入式样式表

二、定义样式表

1. HTML标记定义

...

p { 属性:属性值 ；属性1:属性值1 }
p可以叫做选择器，定义那个标记中的内容执行其中的样式
一个选择器可以控制若干个样式属性，他们之间需要用英语的“;”隔开，最后一个可以不加“;”

2. Class定义

...

class定义是以“.”开始
.p { 属性:属性值 ；属性1:属性值1 }

3. ID定义

...

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. 单独定义某一方向的边框样式

1. border-bottom-style 下边边框样式
2. border-top-style 上边边框样式
3. border-left-style 左边边框样式
4. border-right-style 右边边框样式

c. 边框风格样式的属性值

1. none 无边框
2. solid 直线边框
3. dashed 虚线边框
4. dotted 点状边框
5. double 双线边框
6. groove 凸槽边框
7. ridge 垄状边框
8. inset inset边框
9. outset outset边框
10. inherit继承

依托border-color的属性值

2) 边框宽度 border-width

a. 统一风格

border-width：

b. 单独风格

1. border-top-width 上边边框宽度
2. border-bottom-width 下边边框宽度
3. border-left-width 左边边框宽度
4. border-right-width 右边边框宽度

c. 边框宽度的属性值：

1. thin 细边框
2. medium 中等边框
3. thick 粗边框
4. px 固定值的边框
5. inherit继承

3) 边框颜色 border-color

a. 统一风格

border-color

b. 单独风格

1. border-top-color 上边边框颜色
2. border-bottom-color 下边边框颜色
3. border-left-color 左边边框颜色
4. border-right-color 右边边框颜色

c. 属性值

• 颜色值的名称 red、green、blue
• RGB rgb(255,255,0)
• RGBA rgba(255,255,0,0.1)
• 十六位进制 #ff0、#ff0000
• 继承inherit

d. 属性值的四种情况

1. 一个值：border-color：（上、下、左、右）；
2. 两个值：border-color：（上下） （左右）；
3. 三个值：border-color:（上） （左、右） （下）;
4. 四个值：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 !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显示
• 仅
  如果是IE8

注意⚠️：条件注释只有在IE浏览器下才能执行，这样就达到了我们的效果！

6.《DIV+CSS网页布局实战》

分析+切图+搭建框架

循序渐进>解决兼容>大功告成