CSS属性定义 文本修饰 边框效果 背景修饰

一、CSS属性定义
1、css颜色表示方法【重点】
rgb（红绿蓝3个颜色通道 强度值为0-255）rgb（0,0,0）
rgba（alpha a是透明度 值为0-1）rgba（123,123,123,0）

hsl
hsla（h:色相，色环上（ppt78页）的角度值，0-360
s:饱和度，0—100%
l:明度，0—100%
a:不透明度，0-1之间的小数）
color:hsla(30,100%,50%,0.8);

十六进制（一般格式为#ffffff）(字母范围从A-F,数字从0-9 )

opacity:0-1设置元素的不透明级别 效果作用于整体
background:transparent; 完全透明

总结：
十六进制（#ffffff） 兼容性好
在需要做半透明背景或文字效果时使用rgba与hsla
opacity属性会影响对象的所有组成部分，即全部半透明

二、css文本修饰【重点】
font-family 字体名称
font-size 尺寸大小
font-weight 粗细
color 颜色

line-height 行高
letter-spacing字符间距
white-space:nowrap;强制一行显示
word-break:break-word;自动换行

@font-face 嵌入字体(网络绝对地址)
font（family size weight @font-face）
@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。
@font-face {
font-family : 字体名称;
src : URL（）字体文件在服务器上的相对或绝对路径;
}

text-decoration 上划线 中划线 下划线 无
text-align 水平对齐方式
text-indent 文本块中第一行的缩进
text-overflow 文本溢出
text-shadow 文本阴影效果

文字纵向居中的简易设法
#a{height:100px;line-height:100px;}

text-shadow 用来设置文本的阴影效果
text-shadow: 2px 2px 0 red;
水平 垂直 模糊 颜色

text-overflow设置是否使用一个省略标记（...）标示对象内文本的溢出。
white-space:nowrap文本在一行内显示

p{width: 200px;
height: 40px;
overflow: hidden;
text-overflow: ellipsis;以什么方式显示
}

一行文本溢出省略标记（...）

多行文本溢出省略标记（...）

三、css边框效果【重点】
border
border-top
border-right
border-bottom
border-left
border-style 边框类型dashed solid
border-width
border-color

border-radius 倒圆角
box-shadow 投影
outline 轮廓线 在边框的外边
border（top bottom right left style（类型） width color radius（圆角））

border-style 边框类型dashed虚线 solid实线

border: 1px dotted #ffff30;/*推荐写法*/
border-top: 1px solid #f90; /*推荐写法*/

圆角 border-radius【重点】
border-radius: 50%;

投影 box-shadow（兼容）
box-shadow:#000 5px 5px 10px;

Firefox通过私有属性-moz-box-shadow支持。
Chrome通过私有属性-webkit-box-shadow支持。
兼容写法
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
box-shadow:2px 2px 10px #06C;

总结：
圆角、投影与轮廓线属性是css3属性，低版本的浏览器不能支持，要注意目标浏览器
一般的边框属性兼容性很好

4、css背景修饰【重点】
background
background-color
background-image
background-repeat
background-position
background-size
background-attachment  定义背景图片随滚动轴的移动方式

注意：
背景图片优先于背景颜色显示
以下各属性的默认值是：
background-color：transparent;
background-image:none;
background-repeat:repeat;
background-position:left top;

拓展：
渐变效果实现（兼容性不好，只做了解）：
线性渐变（Linear-Gradient）- 向下/向上/向左/向右/对角方向
径向渐变（Radial-Gradient）- 由它们的中心定义
background:linear-gradient(to bottom,#ff3dd6,#00A0D9,#1A00FF);
background: radial-gradient(#ff3dd6,#1A00FF,#00FFDB);
http://www.runoob.com/css3/css3-gradients.html

background-image （none）
背景图片优先于背景颜色显示

background-attachment {fixed，scroll} 定义背景图片随滚动轴的移动方式
background-repeat（repeat）{repeat-x，repeat-y，no-repeat}
background-position（left top）背景负位置技巧

背景图片适配：
background-size
background-size:auto; （默认值）
background-size:contain; （将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。）
background-size:cover; （将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。）
background-size:300px 400px; （自定义背景图像大小）