今天跟小常来给大家继续说一下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垂直对齐：只能作用于
表格单元格的对象: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)虽有四种样式,但实际开发中只设置标签选择器样式、鼠标悬浮链接样式
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.
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：圆形渐变，颜色从一个起点朝所有方向混合，语法和线性渐变相似。
———6 盒子模型———
39.盒子模型的组成：
content网页内容、border边框、padding内边距、margin外边距
(1)边框border：
border-color 边框颜色：如border-color:#369 #000 #111 #F00;按“上右下左顺时针”设置
border-width 边框粗细：如细thin、中等medium、粗的thick
border-style 边框样式：常用none无边框、dotted点线边框、dashed虚线边框、solid实线边框
border 简写:如下边框border-bottom:9px red dashed;四条边框border:9px blue solid;
(2)margin外边距：盒子边框以外和其他盒子间的距离
margin-top:上外边距、margin-bottom：下外边距
margin-left：左外边距、margin-right：右外边距
margin：简写"上右下左"
auto：设置盒子在它的父容器里居中显示。如margin:0px auto;让整个盒子居中。
如果将元素的 margin设为负值，则元素会变大。
(块元素可以把左右页边距设置为"自动"中心对齐。margin:auto;但前提宽度不能是100%)
注意：很多标签都有自身默认的外边距，所以一般用并集选择器统一设置这些标签的外边距为0px,这样不会产生不必要的空隙。
如清除body和h2自带的外边距 body,h2{margin:0px;}
(3)padding内边距：
padding-left、padding-right、padding-top、padding-bottom、
padding"上右下左"
40.盒子模型的尺寸：
增加边框、内边距、外边距后不会影响内容区域的尺寸，但会增加盒子模型的总尺寸。
(1)内盒总尺寸 = border(上下/左右)+padding(上下/左右)+内容宽/高度
(2)整个盒子的宽度 = 内容宽度+左右padding+左右边框border+左右margin
41.box-sizing拯救布局
(语法)box-sizing:content-box、border-box、inherit
(1)content-box：盒子的宽度或高度=border+padding+(margin)+width/height
(2)border-box：盒子的宽或高度等于元素内容的宽或高度
(即 该内容宽/高度=盒子宽/高度-border-padding )
(3)inherit：使元素继承父元素的盒子模型模式。
42.border-radius圆角边框：语法和边框相似，只是四个边框带圆角
(语法)border-radius:length{1~4个数字};
(1)用border-radius制作特殊图形
圆形：元素的宽度和高度必须相同。圆角半径为元素宽度的一半，或直接设圆角半径为50%
半圆形：元素的高度是宽度的2倍，且圆角半径为元素的宽度值。
扇形：即制作四分之一圆形。"三同"元素宽度、高度、圆角半径 “一不同”
43.盒子阴影：和文本阴影相似
(语法)box-shadow:inset x-offset y-offset blur-radius color;
inset：内部阴影，可选。
x-offset：X轴水平位移，正值在右，负值在左。
y-offset：Y轴垂直位移，正值在下，负值在上。
blur-radius：模糊半径可选，只能>=0 值越大阴影向外面积越大,边缘越模糊。
——7 浮动——
44.标准文档流：元素根据块元素或行内元素的特性从上到下，从左到右的方式自然排列。
45.display属性：用于指定标签的显示方式
block：块元素的默认值，该元素前后自带换行符
inline：行内元素的默认值，元素会显示为行内元素
inline-block：行内块元素，兼具行内元素和块元素的特性
none：元素不会显示
46.Float：指定网页元素向哪个方向浮动
left左、right右、none默认无(元素不浮动 显示在其文本出现的位置)
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果是右浮动，后面的文本流将环绕在它左边：
47.clear清除浮动：当子元素全部浮动了，父级将包不住子元素会造成边框塌陷，所以要清除浮动元素对其他元素的影响。
48.clear属性：规定元素的哪一侧不允许其他浮动元素。
left(左侧不允许浮动元素)、right(右侧不允许)、
both(左右都不允许，常用于文本在图片下方显示)、
none(允许浮动元素出现在两侧)
49.解决父级边框塌陷
(1)浮动元素后加空的div，该div样式要设置clear:both;margin:0px;padding:0px;
(2)设置父元素固定高度把边框撑开。
(3)父级添加overflow属性:设置外层盒子的overflow:hidden。但此方法不能用于有下拉列表框的场景。
(4)父级添加伪类after，推荐。
50.Overflow属性：溢出处理，也可用于扩展盒子高度。
- visible 默认溢出内容可见，显示在盒子外面
- hidden 多出来的内容被隐藏且没有滚动条
- scroll 有垂直水平2条滚动条，可查看多余内容
- auto 如果内容溢出，自动显示滚动条(只有垂直条)查看
- inherit 继承父特性
今天的HTML CSS笔记就整理到这里吧，嘿嘿，一起记一下吧，明天我们继续呦！
