第五章 CSS3美化网页元素

第五章 CSS3 美化网页元素

编辑网页文本

标签的作用

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

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-