css小结

css选择样式

css基本语法

• 行内样式：开始标签内添加style标签，如：<p style= "color:red;">内容</p>
• 选择器{属性:值;属性:值}
• css内部样式<style type= "text/css">css样式</style>
• <style type= "text/css">css样式</style>
• css外部样式，如<link href= "XX.css" rel="stylesheet" type="text/css"/>
• 如：30px值与单位之间不能有空格
• css导入式，如：在style标签内@import “XX.css”;或@import url(XX.css);
• 相同属性值的选择器用,隔开，如：h1,h2,h3{}
• 行内样式优先于内（外）部样式，内部样式和链入外部样式按就近原则
• html注释css注释/注释/

css选择器

• 标签选择器，如：p{}
• 类选择器，如：.red{}在其作用标签内添加class属性，如：<p class="red">内容</p>
• ID选择器，如：#p1{}在其作用标签内添加id属性，如：<p id="p1">内容</p>
• 全局选择器（通配符选择器），如：*{color:blue;}
• 伪类，链接伪类有三种状态：未访问状态link、已访问状态visited、鼠标悬浮状态hover、激活状态active，如：a:link{}
• 后代选择器，如：对于<p><em>CSS</em>层叠样式</p>可以p em{}来设置p中em样式

css继承、层叠、优先级

• 继承：父元素设置样式，子元素可以继承部分属性
• 层叠：对同一段内容可以定义多个样式，不冲突时，多个样式可显示为一个，冲突时，按不同样式优先级来应用样式。
• 优先级：ID>class>标签，对同一段内容的同类选择器按就近原则
• css优先级规则：权值相同按就近原则；权值不同，权值高优先级高
• 提高优先级，在相应的样式规则后加空格!important，如：div{color:red !important;}!important优先级最高。

css应用

• css样式命名规范，由字母数字-_组成，使用有意义命名（单词、连字符、下划线、驼峰式）

css文本样式

字体样式

1. 行内样式设置字体可使用font标签，如：<h1><font face="宋体" color="red" size="20px">内容</font></h1>
2. font-family字体属性，语法font-family:"字体","字体";（依次在本机寻找字体以显示，末尾通常追加一个字体集，使用常用字体）
3. 字体大小font-size:绝对单位/相对单位

• 绝对单位：英寸（in）厘米（cm）毫米（mm）磅（pt）PICA（pc）
• 相对单位：像素px、em、百分比、larger（相对父元素变大）、smaller（相对父元素变小）（em和百分比都是对父元素的相应大小）（子元素继承父元素的字体大小计算值）

4. 字体颜色color:颜色名/十六进制/RGB

• 颜色名，如：red
• rgb(,,)三参数为红绿蓝，可为数字（0_{255）、百分比（0%}100%）
• #十六进制，如#008800（当六位中每相邻两位相同时可简写，如：#080）不区分大小写字母

5. 字体加粗

• 使用b标签strong标签，如：<p><b>内容</b></p>或<p><strong>内容</strong></p>
• 文字粗细font-weight:normal/bold/bolder/lighter/100~900
  6.设置斜体
• 使用em标签i标签，如：<p><em>内容</em></p>或<p><i>内容</i></p>
• font-style:normal/italic/oblique

7. 字体变形（设置文本为小型大写字母）font-variant:normal/small-caps

文本样式

1. 文本的水平对齐方式

• 元素内文本的水平对齐方式，在文本标签的开始标签中添加align="left"/"right"/"center"/"justify"（两端对齐）
• css元素内文本的水平对齐方式text-align:left/right/center/justify

2. 宽度width：数字/百分比
3. 纵横边距margin：0 auto
4. 元素内容垂直方式vertical-align:baseline/sub/super/top/text-top/middle/bottom/text-bottom/长度/百分比

• sub下标super上标
• 几个固定值分别与不同的准线对齐
• 长度值为相对于基线baseline上移+、下移-多少距离
• 百分比为相对于基线移动行高的比例距离
• 设置块级元素在块级元素内垂直对齐，更改父元素子元素属性为表格、单元格

5. 行高line-height=高度/百分比

• px较为固定，不推荐使用
• 使用em和百分比与字体大小有关

6. 首行缩进text-indent:2em
7. 单词之间间距word-spacing:数值，单词的判断以空格为准
8. 字母之间间距letter-spacing:数值
9. 文本大小写text-transform:capitalize（首字母大写）/uppercase（大写）/lowercase（小写）/none（不做设置）
10. 文本的装饰text-decoration:underline（下划线）/overline（）上划线/line-through（贯穿线）/blink（闪烁）/none（不做设置）块级元素行内元素均可使用

样式应用

1. 网页开发从整体到局部
2. 借助网络和书籍

css背景和列表

css背景样式

1. 背景颜色background-color:颜色/transparent

• transparent为全透明黑色（透明色）
• 颜色可以是颜色值名/十六进制/RGB

2. 背景图片background-image:URL/none

• URL可为绝对地址、相对地址；none为无
• 元素背景占据元素全部尺寸，包括内边距、边框，不包括外边框
• 默认背景图像位于元素左上角，并在水平竖直方向重复
• 图像重复background-repeat：repeat/no-repeat/repeat-x/repeat-y
• 背景图片显示方式background-attachment:scroll(随着滚动条而滚动)/fixed(不随滚动条滚动)
• 背景图片定位background-position:百分比/值/top/right/bottom/left/center

3. 背景缩写background:[background-color] [background-image] [background-repeat] [background-attachment] [background-position]

css列表样式

1. 列表项标记list-style-type:关键字/none
2. 使用图片设置列表项标记list-style-image:URL/none
3. 列表项标记位置list-style-position:inside(标记放在文本以内，根据文本对齐)/outside（标记放在文本以外，不根据文本对齐）（默认）
4. 列表样式的缩写list-style:[list-style-type] [list-style-position] [list-style-image]

css盒子模型

盒子模型的概念

• 盒子模型用来放网页中的各元素（DIV嵌套）

盒子模型的属性

1. （内容）宽度属性width:长度值/百分比/auto

• 最大宽度max-width:长度值/百分比/auto
• 最小宽度min-width:长度值/百分比/auto

2. （内容）高度属性height:长度值/百分比/auto

• 最大高度max-height:长度值/百分比/auto
• 最小高度min-height:长度值/百分比/auto

3. 边框属性

• border-width:thin（窄）/medium（中）/thick（厚）/长度值
• border-color:颜色/transparent
• border-style:关键字
• 边框缩写border:[宽度] [样式] [颜色] 不同方向，如：border-top:[宽度] [样式] [颜色]

4. 内填充属性

• padding-方向:长度/百分比（不能为负）
• 内填充属性缩写padding:值（四个方向同一值）；值1 值2（上下一值，左右一值）；值1 值2 值3（上，左右，下）；值1 值2 值3 值4（上，右，下，左）

5. 外边距属性

• margin-方向:长度/百分比（可为负）/auto
• 外边距属性缩写margin:值（四个方向同一值）；值1 值2（上下一值，左右一值）；值1 值2 值3（上，左右，下）；值1 值2 值3 值4（上，右，下，左）
• margin:auto可使盒子水平居中

6. 盒模型计算

• IE盒子模型：高宽包括内容、内填充、边框

盒子模型的应用

1. 块级元素、内联元素
2. display:inline/block/inline-block/none

float浮动

1. float属性float：left(左浮动)/right（右浮动）/inherit（继承父元素浮动）/none（无）
2. 通过设置图片的float可实现，文字左（右）环绕图片的效果
3. 父元素塌陷（子元素添加float属性，父元素将无法正常检测子元素高度）
4. 解决父元素塌陷

• 手动设置父元素高度
• 设置父元素来清除浮动clear：left/right/both/none
• overflow:hidden;zoom=1;
• 设置父元素同样float

css定位

标准流：块级元素独行、内联元素同行的方式顺序排列

定位：position:关键字

1. static（默认）元素按标准流排列
2. relative（相对定位）元素仍处于正常的文档流中，可以通过top、bottom、left、right改变元素位置，设左向右移，设上向下移；设右向左移，设下向上移
3. absolute（绝对定位）元素脱离了正常的文档流，可以用top、bottom、left、right定位元素位置（边距）（设置哪个方向就以页面（而非整个网页）哪一边沿，页面中心为正方向，进行定位）
4. fixed（固定定位）元素不随页面滚动而移动，元素脱离了正常的文档流，可以用top、bottom、left、right定位元素位置（边距）（设置哪个方向就以页面（而非整个网页）哪一边沿，页面中心为正方向，进行定位）
5. inherit:继承父元素的position属性值

z-index：auto/inherit/值

1. 值大的覆盖值小的
2. 负值将被普通流覆盖
3. auto不参与层级比较
4. 子元素的会覆盖比父元素层级低的元素

cursor:pointer光标变成小手

css页面布局

行布局（固定、自适应）

列布局（固定、自适应）

混合布局（固定、自适应）

圣杯布局

• 布局要求：三列布局，中间宽度自适应，两边定宽；中间栏要在浏览器中优先展示渲染；允许任意列的高度最高；用最简单的css、最少的HACK语句；

双飞翼布局

• 去掉圣杯布局的相对布局，只需要浮动和负边距