第三章 css属性

css属性
　　css属性：width/height/background/color/border...
　　css的属性值：
　　　　常规属性值：100px/200px/300px
　　　　法定属性值：官方指定一个单词，具有某种意义

文本属性:
　　1.font-size: ;控制文本大小
　　　　a.为了消除系统之间显示差异。规定：16px为标准字体大小。
　　　　b.文本大小设置为偶数
　　　　c.pc端项目，设置最小不要低于12px;
　　　　d. 从ps获取文本大小，汉字量取文本高度
　　　　e.文本单位： px/em/pt（磅）（常用于印刷领域）
　　　　　　12px==9pt
　　　　　　em（相对大小单位。相对于父元素的font-size值而定。
　　　　　　　　默认情况下，1em==16px）
　　2.color: ;文本颜色
　　　　颜色值：
　　　　　　十六进制颜色值：0-9 a-f
　　　　RGB(255,0,0)模式
　　3.font-family: ;网页中的字体类型
　　　　默认字体类型：“微软雅黑”
　　　　系统支持字体：web安全字体：微软雅黑、宋体、楷体...
　　　　默认英文字体：Arial
　　　　语法：
　　　　　　font-family：字体一，字体二，字体三，...
　　　　注：
　　　　　　a:中文字体需放在引号里
　　　　　　b:一个字体由多个字体组成也需加引号
　　　　　　c:字体为一个单词不需要引号
　　　　　　d:先写英文字体，再写中文字体
　　4.font-weight: ; 控制文本是否加粗
　　　　属性值：
　　　　　　bold 加粗
　　　　　　bolder 加粗
　　　　　　normal 不加粗
　　　　100-900
　　　　100-500:不加粗
　　　　600-900：加粗
　　5.font-style：；控制文本倾斜
　　　　属性值：
　　　　　　italic 倾斜
　　　　　　oblique 倾斜（幅度更大，变化不明显）
　　　　　　normal 恢复常规文本
　　6. line-height: ; 控制文本行高
　　　　a.从ps设计图上获取行高：从第一行开始量到第二行开始
　　　　b.单行文本
　　　　　　让单行文本在容器里上下居中。line-height设置容器高度
　　　　　　大于容器高度时：文本往上移动
　　　　　　小于容器高度时：文本往下移动
　　7. text-align: ; 文本水平对齐方式
　　　　属性值：
　　　　　　center 居中对齐
　　　　　　left
　　　　　　right
　　　　　　justify 两端对齐
　　8. text-decoration: ;文本修饰（下划线、上划线、删除线）
　　　　属性值：
　　　　　　none 清除下划线
　　　　　　underline 添加下划线
　　　　　　overline 添加上划线
　　　　　　line-through 添加删除线
　　9.text-indent: ; 首行缩进
　　　　text-indent: 2em; 首行缩进
　　　　能设置负值：文字往左走。（悬挂式结构）
　　10. 字间距、词间距
　　　　letter-spacing：；字间距
　　　　word-spacing: ; 词间距
　　11. text-transform: ; 控制文本大小写
　　　　属性值：
　　　　　　uppercase 大写
　　　　　　lowercase 小写
　　　　　　capitalize 首字母大写
列表属性
　　1.list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；
　　2.list-style-image：url(所使用图片的路径及全称)；把一张图片当做列表符号
　　3.list-style-position:outside(外边)/inside(里边)；列表符号的位置
　　4.list-style:none; 清除列表符号

边框属性
　　border
　　　　1.border-width：边框宽度
　　　　2.border-color: 边框颜色
　　　　3.border-style: 边框线条类型
　　　　　　solid 实线
　　　　　　dashed 虚线
　　　　　　dotted 点状线
　　　　　　double 双线
　　　　　　none 无
　　　　4.单独设置一方向边框
　　　　　　border-left: 宽度 类型 颜色；
　　　　　　border-right: 1px solid pink;
　　　　　　border-top:
　　　　　　border-bottom:
　　　　5.border的其他设置方法：
　　　　　　border-width/border-style/border-color 都可单独拿出来进行设置，每个最多能接收4个属性值
　　　　　　eg：
　　　　　　　　border：10px solid
　　　　　　　　border-color: 1-4个属性值
　　　　　　　　　　1个属性值 四周
　　　　　　　　　　2个属性值 上下 左右
　　　　　　　　　　3个属性值 上 左右 下
　　　　　　　　　　4个属性值 顺时针上 右 下 左
　　　　6.用css实现三角形
　　　　　　width:0px;
　　　　　　height:0px;
　　　　　　border-top:200px solid red;
　　　　　　border-left:200px solid transparent;
　　　　　　border-right:200px solid transparent;
　　　　　　border-bottom:200px solid transparent;

背景属性
　　background
　　　　1.background-color: 背景颜色
　　　　2.background-image:url(路径)
　　　　　　背景图显示状态：
　　　　　　　　1）背景图不占据空间
　　　　　　　　2）容器尺寸等于图片尺寸，背景图片正好显示在容器中
　　　　　　　　3）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；
　　　　　　　　4）容器尺寸小于图片尺寸，只显示元素范围以内的背景图。
　　　　3.控制背景图是否平铺
　　　　　　background-repeat: ;
　　　　　　　　repeat 平铺
　　　　　　　　no-repeat 不平铺
　　　　　　　　repeat-x 横向平铺
　　　　　　　　repeat-y 纵向平铺
　　　　4. 背景图位置
　　　　　　background-position: ;
　　　　　　属性值：
　　　　　　　　第一个值：水平位置 第二个值：垂直位置
　　　　　　eg：
　　　　　　　　100px 200px; 距离左侧100px,距顶端200px
　　　　　　　　-100px -30px; 往左移动100px,往上移动30px
　　　　　　　　10% 20% 支持百分比
　　　　　　　　left bottom 背景图的左侧和底部贴着容器的左侧和底部
　　　　　　　　right center 背景图右侧贴着容器右侧，上下居中
　　　　　　　　center bottom 左右居中，背景图底部贴着容器底部
　　　　　　　　center 水平和垂直都居中

　　　　5.背景图的固定
　　　　　　background-attachment: ;
　　　　　　属性值：fixed(固定)/scroll(滚动)

　　　　　　简写：
　　　　　　　　background：red url(背景图路径) no-repeat 200px bottom;

　　　　　　背景图和导入图片区别：
　　　　　　　　背景图：网页渲染；不占空间
　　　　　　　　img导入图片：html的结构；占据空间
　　　　　　　　图片类型
　　　　　　　　JPG 图片无透明无动画
　　　　　　　　PNG 支持透明
　　　　　　　　JIF 支持透明和动画

 

浮动
　　属性: float
　　　　属性值: left
　　　　　　　  right
　　　　　　　  none
　　特点：
　　　　a.添加浮动之后，元素不占据空间（脱离文档流）
　　　　b.如果让多个元素横向进行排列，所有排列的元素都需添加浮动
　　　　c.如果子元素宽度大于父元素的时候，后面的元素会被挤到下一行

　　浮动注意：
　　　　只要子元素有浮动，父元素必须添加高度

　　网页版心：960-1200