html第五章css3美化网页总结,HTML CSS整理笔记(五) CSS3美化网页

——5 CSS3美化网页——

32.CSS3设置文本样式：

(1)标签：用来设置行内元素(或几个文字)的样式。

(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垂直对齐：只能作用于

(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)虽有四种样式,但实际开发中只设置标签选择器样式、鼠标悬浮链接样式

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.

标签：用于网页布局，把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 从下向上、

38.CSS3径向渐变radial-gradient：圆形渐变，颜色从一个起点朝所有方向混合，语法和线性渐变相似。

HTML CSS整理笔记更多笔记