第五章 CSS3美化网页元素

编辑网页文本

<span>标签的作用

能让某几个文字或者某个词语凸显出来

<p>享受<span class="show">“北大式”</span>教育服务</p>
<p>在北大青鸟，有一群人默默支持你成就
      <span id="dream">IT梦想</span></p>
<p class="bird">选择<span>北大青鸟</span>，成就你的梦想</p>

字体样式（font）
在这里插入图片描述

font-size:

px（像素）
em、rem、cm、mm、pt、pc

font-style:normal、italic、oblique

font-weight:normal(400)、bold(700)、lighter

font属性
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

p span{font:oblique bold 12px "楷体";}

排版网页文本

在这里插入图片描述

color:RGB(16进制，红、绿、蓝)、RGBA（增加了alpha透明度的参数0~1）
textalign: left、right、center、justify(实现两端对齐文本效果)
text-decoration文本装饰:none、underline（文本下划线）、overline（文本上划线）、line-through(文本删除线)
vertical-align垂直对齐方式：middle、top、bottom
(文本阴影):text-shadow : color x-offset y-offset blur-radius;

使用CSS的超链接样式设置伪类超链接在不同状态下的样式

设置伪类的顺序：a:link->a:visited->a:hover->a:active

在这里插入图片描述

列表样式:list-style

list-style-type

list-style-image

在这里插入图片描述

背景样式

背景属性

   background: url("../img/logo.png")gray 50px center no-repeat ;

背景颜色（background-color）
背景图像（background-image:url）
背景定位(background-position)
在这里插入图片描述

背景重复方式(background-repeat)

background-repeat属性
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺

背景尺寸（background-size）不同取值的作用

在这里插入图片描述

CSS3渐变

线性渐变
颜色沿着一条直线过渡：从左到右、从右到左、从上到下等

linear-gradient ( position,  color1,  color2,…)

径向渐变
圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

渐变兼容

IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
加前缀：-ms-
Firefox浏览器是Mozilla内核，加前缀：-moz-

标签