标签：
第六章
一、文字
font-family:
一、常用的英文字体
（1）serif字体：用于冗长的文字信息
（2）sans-serif字体： 经常用在标题上
（3）monospaced字体： 经常用于显示计算机代码
二、常见的中文字体
三、网络字体
1自托管（买断字体）
（1）语法：
@font-face: 高速浏览器字体名称及需要到哪里去下载
@font-face {
font-family: " PTSansRegular "; 给字体进行命名
src: url(‘fonts/PTSansRegular.eot‘);
url(‘fonts/ PTSansRegular.eot?#iefix‘) format(‘embedded-opentype‘) ;
url(‘fonts/ PTSansRegular t.woff‘) format(‘woff‘),
url(‘fonts/ PTSansRegular.ttf‘) format(‘ttf‘),
url(‘fonts/ PTSansRegular.svg‘) format(‘svg‘),
font-weight: bold;
font-family: italy;
}
注意：
1)针对不同的字体样式，适配不同的url
2)高速浏览器到服务器的什么位置去查找
3)红色部分表示兼容IE6~IE8
4)format:表示适配的字体类型
p {
font-family: "League Gothic";
}
注意：浏览器不会下载所有的字体文件，而是先看一下字体列表类型，下载它能够理解的第一种字体
附注：如何兼容IE8 p146
（2）字体类型，适用的浏览器
EOT 只适用于IE
TRE Type（.ttf） 和OPEN Type（.otf ） 大多浏览器广泛支持
WOFF TRE Type和OPEN Type的压缩版 大多浏览器广泛支持
SVG 较早版本ios唯一能理解
（3）寻找web字体常用的网站
www.google.com/webfonts
（4）转换字体类型的网站
www.fontsquirrel.com/fontface/generator
2、web字体服务（远程字体服务）
www.google.com/webfonts
生成的<link href=" " family="" >添加到<head>标记中
注意：
1、多个单词的字体名称，应该用（单引号或者双引号）包围起来 "Gill Sans"
2、是继承属性
3、指定替代字体：用，隔开
如：font-family: "Gill Sans","Gill sans MT"
font-syte: italic/normal;
font-weight: bold; 也可以是100的倍数
font-size:
单位：
（1）像素 px
（2）关键字
XX-small、x-small、small、medium、large、x-large、xx-large
例：fong-size: large;
（3）百分比
（4）em
1em=16px;
font-variant 使用小型大写字母
font-variant:
samll-caps /none;
简写形式：
font:bold italic 24px 黑体；
特别注意:至少要包括字体大小，和字体系列属性
二、文本颜色
1、十六进制
color: #fff;
2、RGB
color: rgb(89,0,127);
用0-255中的数字表示
3、RGBA（IE9之前的浏览器不支持）
alpha越接近0，越透明，1表示完全不透明
例如：bockground-color: rgba(89,0,127,1);
4、HSL
hue(色相) saturation（饱和度）lightness(亮度）
例：color: hsl(282, 100%, 25%);
5HSLA（IE9之前的浏览器不支持）
例：color: hsla(95,100%,28%,.4);
三、文本修饰
（1）文本缩进text-indent
（2）文本修饰线text-decoration： underline/overline/lline-through/blink
（3）大写化 text-transform: uppercase/lowercase/capitalize
（4）字母间距和字词间距
letter-spacing: 2px;
word-spacing: 2px;
四、列表
|
列表类型 |
父元素 |
子元素 |
|
有序列表 |
ol |
li |
|
无序列表 |
ul |
li |
|
描述列表 |
dl |
dt和dd |
一、无序列表
无序列表：使用较多，例如：主导航链接、指向一组视频或相关报道的链接、页脚中的一组链接等
<ul>
<li></li>
<li></li>
</ul>
二、有序列表
有序列表：强调顺序 ，应用于提供完成某一任务的分布说明，或创建大型的文档类型
三、描述列表
<dl>
<dt></dt> 名称或者术语
<dd></dd> 具体的值
</dl>
属性：
（1）选择标记
list-style-type: disc(圆点) circle(圆圈) square(方块)
6种不同的数字类型：
decimal(十进制)、 decimal-leading-zero （十进制-前面置零）
upper-alpha(大写字母)、lower-alpha(小写字母)、upper-roman( 大写罗马数字)
lower-roman
（2）控制文本的标记
list-style-position:inside/outside
(3) 图形项目符号
1)添加背景
background: url
例如：
ul{
list-style: none;
margin-left: 0;
padding-left: 0;
}
li{
background:url() no-repeat x y;
line-height: 1.8;
padding-left: 1.75em;
}
2）使用list-style-image属性
使用list-style-image: url(img/bullet.gif);
注：这种方式很难达到预期效果，而且不同浏览器显示效果并不一致
（4）选择列表的起始编号
1）设置整个列表编号方案的初始值
在ol开始标签中输入start="n"
2）修改有序列表中某列项目的编号
在li项目内输入value="n"
五、边框
1、常用属性
1)、定义边框的风格：border-style:
none、dotted（点线）、dashed(虚线)、solid（实线）、double(双线)等
2)、定义边框宽度
border-width
3)、定义边框颜色
borer-color
4)、简计法：
border: 1px solid #FF0000;
2、单独格式化各条边框
border-top、border-bottom、border-left、border-right
第七章、maigin、padding控制元素位置
一、行内元素和块元素
（1）块级元素：display: block
（2）行内元素：display:inline 注：设置行内元素会忽略任何width、height、margin-top 和 margin-bottom设置。但是接受padding的设置，但是padding-top和padding-bottom会越面进入相邻元素的区域
注：两种元素的区别
（1）行内标签不会在其前后产生空格
（2）块级标签在其前后会产生空格
二、控制元素的显示类型和可见性
1、display 控制元素显示类型
（1）display: block
（2）display:inline
（3）混合显示方式： display: inline-block 让元素与其他内容出现在同一行，同时具有块级元素的属性
注：
css对行内盒子和块级盒子的marigin和padding处理方式不同
1）行内盒子可以用 left/right padding或left/right margin
但是不能用top/bottom padding或top/bottom margin
<img /> 标记除外
2）块级元素均可
li元素：display: list-item 默认情况下li元素都是从上往下排列，但设置了display: inline;或者是display:inline-block；覆盖后，每个链接列表中的元素都在一个行内。
2、visibility(能见度) 控制元素的可见性
隐藏元素时，元素及其内容应该出现的位置会留下一个空白区域。隐藏元素的空白区域仍然会在文档流中占据位置
三、理解盒模型
1、IE和w3c情况下的两种盒模型 p194
注：background color 一直会延生到border,包括padding
2、用margin和padding控制空间
（1）
padding简写的四种方式：
padding: 5px; 全部应用于四个边
padding: 5px 9px; 第一个值：上下 第二个值：左右
padding: 5px 9px 11px; 上，左右，下
padding: 5px 9px 11px 9px； 上，右，下，左 和时钟的方向一致
分开的写法：
padding-top;
padding-right;
padding-bottom;
padding-left;
（2）
margin:
注意：边距冲突问题
1、如果元素位于另一个元素的上面，对于相互接触的两个margin,仅使用其中较大的一个，另一个外边距会被叠加。
2、边距折叠：两个边距实际上变成一个边距
p226
四、理解浮动
1、浮动方式
float:left/right/none
注：
1）浮动后的元素当成块级元素对待，因此不会有margin、padding常常困然行内元素的问题
2）边框（border、background）不会包围浮动
2、清除浮动的方式
标签：
原文地址：http://www.cnblogs.com/nankeyimeng/p/5027656.html
