你我学习网
完成笔记链接：https://www.niwoxuexi.com/blog/web/article/1245
——5 CSS3美化网页——
32.CSS3设置文本样式：
(1)<span>标签：用来设置行内元素(或几个文字)的样式。
(2)字体样式：
- font-size：常用单位px
- font-family：若同时设中英文字体，英文字体要设置在中文字体前面
- font-style：normal标准、italic斜体、oblique倾斜
- font-variant：small-caps; 字体设置为新型的大写字母，所有小写字母都转换为大写。
- font-weight：normal标准、bold粗、bolder更粗、lighter细、100-900数字越大越粗
- font：一次设置字体所有属性，顺序为"字体风格-粗细-大小-类型"
如 font:italic bold 36px "宋体";
(3)用font简写方式至少要指定 font-size和 font-family 属性，其他的属性(如font-weight、font-style、font-variant、line-height)如未指定将使用默认值。缩写时 font-size 与 line-height中间要加"/"斜扛如 "12px/1.5em"
32.Text-transform：控制文本的大小写：
- none 默认，定义既有小写字母也有大写字母的标准文本(原文)
- capitalize 每个单词以大写字母开头
- uppercase 全部为大写字母
- lowercase 全部小写字母
- inherit 从父元素继承text-transform属性的值。
32.direction属性：规定文本的方向/书写方向。
- ltr 文本方向从左到右
- rtl 方向从右到左
- inherit 继承父元素direction属性的值。
32.文字排版
(1)适用大多数浏览器：
- 从左向右 writing-mode: vertical-lr;
- 从右向左 writing-mode: vertical-rl;
(2)只适用IE浏览器:
- 从左向右 writing-mode: tb-lr;
- 从右向左 writing-mode: tb-rl
33.排版网页文本
(1)color文本颜色:
- RGB：如color:#FF0000; 另一种方法rgb(r,g,b)其中三个参数取整0~255
- RGBA：在RGB基础上加控制alpha透明度的参数，取值0~1，0表示完全透明
(2)text-align水平对齐:
- left左(默认)、center中间、right右、justify两端对齐
(3)text-indent首行缩进：2em或2px 缩进两个字符
(4)text-height文本行高: 单位px或 按倍数(行高是字体大小的倍数)
(5)text-decoration文本装饰：
- none默认无、underline下划线、overline上划线、line-through删除线
(2)vertical-align垂直对齐：只能作用于<table>表格单元格的对象:
- top顶、middle居中、bottom底
(4)text-shadow文本阴影：
- 语法"text-shadow:阴影颜色 x轴位移(x-offset) y轴位移(y-offset) 模糊半径(blur-radius);"
- 如text-shadow: blue 10px 10ox 2px;
(5)查询浏览器是否支持HTML5及CSS3属性的网址www.caniuse.com
33.CSS3设置超链接样式：
伪类:根据标签处于某种行为或状态来修饰超链接样式。其他标签如p可以使用hover
和active。
语法"标签名:伪类名{声明;}"
(1)a:link 未访问前的超链接
(2)a:visited 访问过后
(3)a:hover 鼠标移到链接上
(4)a:link 鼠标点击未释放
(5)设置伪类的顺序：a:link - a:visited - a:hover - a:active
(6)虽有四种样式,但实际开发中只设置<a>标签选择器样式、鼠标悬浮链接样式
34.CSS3设置列表样式
(1)list-style-type：列表项标记类型
none无符号、decimal数字、disc实心圆(默认)、circle空心圆、square实心正方形
(2)list-style-image：用图像做列表项标记
(3)list-style-position：设置列表项标记的位置
(4)list-style：一次设置列表的所有属性 (属性值为none时说明列表无样式)
顺序为 list-style-type + list-style-position + list-style-image
35.<div>标签：用于网页布局，把HTML文档分成独立不同的部分。
36.CSS3设置背景样式：
(1)background-color：背景色不能继承，其默认值是透明transparent
(2)background-image：url(图片路径)、none(不显示背景图像)
(3)background-repeat：背景图像重复平铺
- repeat(沿水平和垂直方向)、no-repeat(不平铺,只显示一次)、
- repeat-x(只沿水平方向)、repeat-y(只沿垂直方向)、
(4)background-position：背景图的位置(X水平Y垂直方向的偏移量，如果只有一个方向关键字，则默认另一个关键字为center)
1.Xpos Ypos:如 0px 0px：默认无偏移,从左上角出现
- 30px 40px：正向偏移,图像向右和向下出现
- -50px -60px：反向偏移,图像向左和向上出现
2.X% Y%：如30% 50%(水平方向偏移30%，垂直方向居中)
3.X水平关键词(left,center,right)、Y垂直关键词(top,center,bottom)
(5)background：一次设置背景的所有属性
(6)background-size背景图片尺寸：
- auto(保持图片原尺寸,不易失真)、cover(放大填满容器标签)、
- 百分比percentage、contain(按照图片本身的宽高比例适应定义背景的区域)
37.gradient线性渐变：颜色沿着一条直线方向过渡
(1)常规语法：" linear-gradient(position, color1, color2,...)"
(2)浏览器兼容语法：" -兼容前缀-linear-gradient(position,color1,color2,...)"
(3)渐变的直线方向：
- to left 从右向左、to top left 向左上方、to bottom left 向左下方、
- to right 从左向右、to top right向右上方、to bottomo right向右下方、
- to bottom从上向下、to top 从下向上、
