unit5 CSS3美化网页元素
1、span标签
无任何格式的行级标签
能让某几个文字或者某个词语凸显出来
2、字体样式
font-style 属性
设置字体风格 ：斜体oblique\italic、normal
font-weight 属性
设置字体的粗细 ：normal、bold、bolder、lighter
100、200、300、400（normal）、500、600、700、800、900
font-size 属性
设置字体大小 ：12px
绝对单位：px(像素)
相对单位：em、rem
font-family 属性
设置字体类型 :"楷书"
font
在一个声明中设置所有 字体属性。
字体属性的顺序：字体风格→字体粗细→字体大小 →字体类型
顺序：风粗大类
font：italic bold 36px "宋体";
3、文本样式
color属性
设置文本颜色 ：
color:#A983D8;
color:rgb(0,255,255);
color:rgba(0,0,255,0.5);
- RGB
1、十六进制方法表示颜色：前两位表示红色分量，中间两位 表示绿色分量，最后两位表示蓝色分量
2、rgb(r,g,b) : 正整数的取值为0～255
- RGBA
在RGB基础上增加了控制alpha透明度的参数，其中这个 透明通道值为0～1
text-align 属性
设置元素水平对齐方式
left：把文本排列到左边。默认值：由浏览器决定
right ：把文本排列到右边
center：把文本排列到中间
justify：实现两端对齐文本效
果
text-indent 属性
设置首行文本的缩进
text-indent：em或px
line-height 属性
设置文本的行高
line-height：px
text-decoration属性
设置文本的装饰
text-decoration属性：
none：默认值，定义的标准文本
underline:设置文本的下划线
overline :设置文本的上划线
line-through:设置文本的删除线
vertical-align属性
垂直对齐方式:
vertical-align属性：middle、top、bottom
4、文本阴影
text-shadow属性
text-shadow：color x-offset y-offset blur-radius ；
5、伪类样式
标签名:伪类名{声明;}
设置伪类的顺序：a:link->a:visited->a:hover->a:active
a:link
未单击访问时超链接样式
a:link{color:#9ef5f9;}
a:visited
单击访问后超链接样式
a:visited {color:#333;}
a:hover
鼠标悬浮其上的超链接样式
a:hover{color:#ff7300;}
a:active
鼠标单击未释放的超链接样式
a:active {color:#999;}
6、列表样式
1、list-style-type属性
- none
无标记符号
list-style-type:none;
- disc
实心圆，默认类型
list-style-type:disc;
- circle
空心圆;
list-style-type:circle
- square
实心正方形
list-style-type:square;
- decimal
数字
list-style-type:decimal
2、list-style-position属性
list-style-position: inside/outside
- inside
列表项目标记放置在文本以内，且环绕文本根据标记对齐
- outside
默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外.
3、list-style-image属性
list-style-image: url("bang.gif");
- URL
图像的路径
- none
默认。无图形被显示。
4、list-style属性
li {
list-style:decimal inside url("bang.gif");
}
可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。
默认值：disc outside none
7、背景样式
1、background-color属性
背景颜色
- 背景颜色值：十六进制方法表示
- transparent透明
2、background-image属性
背景图像
background-image:url(“图片路径“);
- none
默认值。不显示背景图像
- url('URL')
指向图像的路径
3、background-position属性
背景定位
1、Xpos Ypos：单位：px， Xpos表示水平位置，Ypos表示垂直位置 。
2、X% Y%：使用百分比表示背景的位置
3、X、Y方向关键词：
1）水平方向的关键词：
left、center、right
2）垂直方向的关键词：
top、center、bottom
4、background-repeat属性
背景重复方式：
repeat：默认；沿水平和垂直两个方向平铺
no-repeat：背景图像将仅显示一次
repeat-x：背景图像将在水平方向重复。
repeat-y：背景图像将在垂直方向重复。
5、background属性
background:#C00（背景颜色） url(../image/arrow-down.gif) （背景图像）205px 10px （背景定位）no-repeat（背景不重复显示）;
可以不按顺序设置
6、background-size属性
- auto
默认值，使用背景图片保持原样
- percentage
当使用百分值时，以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。
- cover
整个背景图片放大填充了整个元素
- contain
让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域
- length
设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
8、CSS3渐变
线性渐变
颜色沿着一条直线过渡：从左到右、从右到左、从 上到下等
linear-gradient ( position(渐变方向), color1（第一种颜色）, color2（第二种颜色）,…)
兼容Webkit内核的浏览器
-webkit-linear-gradient ( position, color1, color2,…)
- linear-gradient()函数
- position
• to left
to left：设置渐变为从右到左。
• to right
to right：设置渐变从左到右。
• to top
to top：设置渐变从下到上。
• to bottom
to bottom：设置渐变从上到下。
径向渐变
圆形或椭圆形渐变，颜色不再沿着一条直线变化， 而是从一个起点朝所有方向混合
浏览器兼容性
- IE浏览器
IE浏览器是Trident内核，加前缀：-ms-
- Chrome浏览器
Chrome浏览器是Webkit内核，加前缀：-webkit-
- Safari浏览器
Safari浏览器是Webkit内核，加前缀：-webkit-
- Opera浏览器
Opera浏览器是Blink内核，加前缀：-o-
- Firefox浏览器
Firefox浏览器是Mozilla内核，加前缀：-moz-