css

标签：隐藏元素   尺寸   场景   poi   之间   hone   through   transform   模型   

css简介
css（Cascading Style Sheets）层叠样式表
作用 修饰网页信息的显示样式
层叠性 给同一个元素添加相同的css属性，属性值会存在覆盖问题
从上往下 下面代码覆盖上面代码

css语法
选择符+声明
选择符{属性：属性值}
eg：div{width：500px；}
注意
属性 属性值用：号
声明用；号结尾
属性有多个属性值时，属性值彼此不分先后

css的三种方法
1、内部样式表 在里写
2、外部样式表 创建外部css文件，通过link标签引入

3、内联样式表 直接在标签里写css

css的作用域
1、内联css是当前标签（小部分情况）
2、内部css是当前文件
3、外部css是关联的所有文件（大部分情况）

css的优先级
1、内联css优先级最高
2、优先级与代码顺序有关，后写的代码优先级高

css选择器
定义 表示要定义的对象，可以是元素本身，也可以是一类元素或者制 定名称的元素
类型
1、元素选择器

2、id选择器
语法 在标签里加属性id=“名字”
#名字{属性：属性值；}
只能起一个名字，只能用英文，不能用关键字（所有标签和属性都是关键字）
作用 创建网页的外围结构

3、class选择器 （类名）
语法 在标签里加属性class=“名字”
.名字{属性：属性值；}
可以起多个名字

4、群组选择器
语法 标签1，标签2，标签3{属性：属性值；}

5、包含选择器
语法 标签1 标签2{属性：属性值；}
标签1包含标签2

6、伪类选择器
例如 元素名：hover{属性：属性值；} （鼠标划过改变效果）
用hover改变另一个元素，必须是父子关系

7、通配选择器
语法 *{属性：属性值；} 选中页面上所有元素
作用 清除页面上所有元素的默认边距

选择器的权重

css的权重表达方式 0000（二进制）
元素选择器 0001
class选择器 0010
id选择器 0100

子选择符 0000
属性选择符 0010
伪类选择符 0010
伪元素选择符 0001
包含选择符 为包含选择符的权重之和
行内样式 1000
继承样式 0000

代码注释
ctrl + /
html
css /*--内容--*/

浮动的简单应用 float
div 块级元素
独占一行显示，可以直接写大小
span 行内元素
多个在一行显示，不可以直接写大小

语法 float：left；左浮动
float：right；右浮动

fireworks的用法
1.把图片拖拽到FW图标上
2.视图-标尺
3.ctrl+滚轮 放大缩小 ctrl+z返回
4.按住标尺拉出一条线，到指定位置放手
5.保证在指针工具处，按住shift键测量最近的两条线之间的距离。
6.锁住图层 （图层->位图上锁）
7.滴管工具-取色板复制颜色 自己添加#+复制色值
8.微调，双击线，改数字
9.按住空格 拖动图片

1000phone网页设计（色块）
1、分区域 外围+版心 div（id）>div（class），起名字class（css清除默认样式 margin 0 padding 0），版心 通用css 宽 居中
注释>logo （css宽高 背景颜色 居中margin auto）
注释>banner 轮播图
注释>ad广告
注释>news新闻
注释>links链接
注释>bottom底部
注意
提出重复代码 群组选择器 多起一个class名
版心里继续分块 div（class）

css核心属性

属性值包括 法定属性值 和 数值+单位

一、文本的相关属性

1、字体大小 （默认16px）
font-size：数值+单位；
注意 单位有 px（像素） em（参考当前字体大小） pt（point-磅）
默认情况下 1em=1ppi=16px 9pt=12px

2、文本颜色
color：#颜色值；
十六进制 黑0-F白
R G B
00 00 00 黑

3、字体
font-family：“字体1”，“字体2”
注意 中文字体加“” 英文字体中有空格时加“”

4、字体加粗
font-weight：100-500（正常）600-900（加粗）；

5、检索或设置文本大小写
text-transform：none 没有
capitalize 首字母大写
uppercase 将单词全部变成大写
lowercase 将单词全部变成小写

6、字体风格-倾斜
font-style：normal 常规
italic 倾斜小
oblique 倾斜大
注意 倾斜区别一般不明显

7、水平对齐方式
text-align：left 左
center 居中
right 右
justify 两端对齐（中文不支持）
注意
图片 支持 text-align：center

8、垂直对齐方式
vertical-align:top 顶部
middle 中部
bottom 底部（默认）

9、行高
line-height：数值+单位；
注意
当行高 大于 容器高度时，内容摆放位置 中间偏下
当行高 等于 容器高度时，内容摆放位置 垂直居中
当行高 小于 容器高度时，内容摆放位置 中间偏上

行高是由 文字大小 + 上行间距 + 下行间距

10、首行缩进
text-indent：数值+单位；（最好写em）
注意
可以写负值
只对第一行起作用

11、文本修饰
text-decoration：none 无
underline 下划线
overline 上划线
line-through 删除线

12、字间距（英文或中文）
letter-spacing：数值+单位；

13、词间距（英文）
word-spacing：数值+单位；

二、列表的相关属性 ul>li

1、基本符号样式
list-style-type：none 无
disc 实心圆
circle 空心圆
square 实心方块

2、图片符号样式
list-style-image：url（路径）；

3、定义符号位置
list-style-position：outside 外面
inside 里面
注意
简写 list-style

1000phone-1网页设计

css清除默认样式
*{margin：0；padding：0；}
ul，li{list-style：none；}
a{text-decoration：none；}

1、图片
上填充 padding-top：数值
左填充 padding-left：数值

2、导航
无序列表 ul>li>a
display：block；变成块元素

3、广告
图片+h3+h4+span或p
非规则的边框用切图

盒模型
组成 content（内容）+padding（填充）+border（边框厚度）+margin（盒子间距）

1、padding
作用
改变子元素（文字）在父元素的位置
注意
如果想保证原来尺寸不变，在宽高上减去相应的值
padding区域可以加背景图片
语法
一个值 上下左右 padding：20px；
两个值 上下+左右 padding：20 40
三个值 上+左右+下 padding：20 40 60
四个值 上+右+下+左（顺时针）padding:20 40 60 80
单独方向
padding-top 上
padding-bottom 下
padding-left 左
padding-right 右

2、border
语法
border：2px（宽度） soild（样式） blue（颜色）；
全称 border-width border-style border-color
边框类型
solid（实线）
dashed（虚线）
dotted（点状线）
double（双线）
none（无）
单独方向
border-top（上）
border-bottom（下）
border-left（左）
border-right（右）

3、margin（盒子间距）
作用
改变盒子与盒子之间的距离
语法
一个值 上下左右 margin：20px；
两个值 上下+左右 margin：20 40
三个值 上+左右+下 margin：20 40 60
四个值 上+右+下+左（顺时针）margin:20 40 60 80
单独方向
margin-top（上）
margin-bottom（下）
margin-left（左）
margin-right（右）

解决margin塌陷办法
1、给父元素添加overflow：hidden；
2、给父元素加padding

三、背景的相关属性

1、背景颜色
语法 background-color：颜色；

2、背景图片
语法 background-image：url（“路径”）；

背景图片的实现原则
容器尺寸等于图片尺寸，背景图片正好显示在容器中
容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素（一个靓仔变四个靓仔）
容器尺寸小于图片尺寸，只显示容器/元素/范围以内的背景图

3、背景图片的平铺属性
语法 background-repeat：no-repeat；（不平铺）
repeat（平铺）
repeat-x（横向平铺）
repeat-y（纵向平铺）

4、背景图定位
语法 background-position：水平方向（正值为右）+垂直方向（正值为下）
水平方向取值 left/center/right/数值 左中右
垂直方向取值 top/center/bottom/数值 上中下

5、背景图固定
语法 background-attachment：scroll；（滚动）默认
fixed（固定）
注意
容器要产生滚动条

6、背景图的缩写
语法 background：属性值1 属性值2 属性值3 ...；

img和background的区别

1、双 html的标签
需要src引入图片

2、background-images：url（“路径”） css的属性
通过url（）引入背景图
容器需要有大小才能添加

怪异盒模型（IE盒）
语法 box-sizing：border-box；
注意 要算进 border 和 padding

标准盒模型
语法 box-sizing：content-box；

float浮动
图片和文字进不去浮动区域

元素类型

1、块状元素（div、p、h1-h6、hr、列表ul ol dl、表单form）
特点
1.可以设置宽高（width、height）
2.独占一行摆放显示
3.一般作为容器，要正确嵌套标签 如：div>p、p>span

2、内联元素-行内元素（a、br、span、em、i、strong、b）
特点
1.不可以写宽高（width、height）
2.多个在一行摆放显示
3.padding：上下 margin：上下 不能正常显示
注意
img、input、textarea 可以设置宽高

元素类型的转换
盒子模型可通过 display 属性来改变默认的显示类型

语法 dispaly：block；（块状）常用，有显示功能
inline （内联）
inline-block（内联+块状）可设置宽高、一行多个
none （隐藏元素）
float（浮动）相对于inline-block
注意
大部分内联元素 display 属性默认为 inline，其中img，input，textarea 默认为 inline-block

伪类选择器
元素：hover{}（鼠标滑过）
元素：nth-child（数字）{}（第几个元素）

background：url（）
可以插入多个背景图片

元素的定位
语法 position：static；（默认值，默认没有定位）
absolute（依据父元素的绝对定位，若父元素没有定位，则依据根元素html定位） 会脱离布局流 原来位置不占位
relative（相对定位，相对本身的位置定位 口诀：子绝对，父相对） 不会脱离布局流，原来的位置占位
fixed（固定定位，固定在窗口的指定位置，无论窗口怎么滚动）
注意
后三个可配合 top bottom left right

让子元素在父元素上下左右居中
语法
position：absolute；
left：50%；
right：50%；
margin-left：负子元素尺寸一半；
margin-right：负子元素尺寸一半；

层叠属性
语法 z-index：数字（可负数）；（默认0）
作用 让重叠的元素 比较大小 数值越大 就在最上层显示

子选择器
语法 父元素>子元素{} 如 ul>li
作用 只能选择第一代子元素

锚点（锚链接）
作用 网页中的超链接，实现同一页面内的不同位置进行跳转 （不同页面也行）
语法 给目标元素起名字 如