CSS美化页面元素
为什么使用CSS
有效的传递页面信息
使用CSS美化过的页面文本,使页面漂亮、美观,吸引用户
可以很好的突出页面的主题内容,使用户第一眼可以看到页面主要内容
具有良好的用户体验
<span>标签 的作用
能让某几个文字或者某个词语凸显出来
示例:
<p>享受<span class="show">“北大式”</span>教育服务</p>
<p>在北大青鸟,有一群人默默支持你成就
<span id="dream">IT梦想</span></p>
<p class="bird">选择<span>北大青鸟</span>,成就你的梦想</p>
字体样式
- font-family属性 字体的类型
p{font-family:Verdana,"楷体";}
body{font-family: Times,"Times New Roman", "楷体";}
-
font-size属性 字体的大小
-
单位
- px(像素)
- em、rem、cm、mm、pt、pc
-
单位
示例:
h1{font-size:24px;}
h2{font-size:16px;}
h3{font-size:2em;}
span{font-size:12pt;}
strong{font-size:13pc;}
- font-style属性 字体的风格
normal(默认)、italic(使用电脑斜体库)和oblique(系统自己把子变斜体,)
- font-weight属性 字体的粗细
-
font属性 字体的属性
- 字体属性的顺序:字体风格→字体粗细→字体大小→字体类型
示例:
p span{font:oblique bold 12px "楷体";}
- 文本属性 文本样式
上下对齐top middle bottom
文本颜色
color属性
-
-
RGB
- 十六进制方法表示颜色:前两位表示红色分量,中间两位表示绿色分量,最后两位表示蓝色分量
- rgb(r,g,b) : 正整数的取值为0~255
-
RGBA 透明度
- 在RGB基础上增加了控制alpha透明度的参数,其中这个透明通道值为0~1
-
RGB
示例:
color:#A983D8;
color:#EEFF66;
color:rgb(0,255,255);
color:rgba(0,0,255,0.5);
排版文本段落
text-align: center
文本修饰和垂直对齐
- 文本装饰
- text-decoration属性
-
垂直对齐方式
- vertical-align属性:middle、top、bottom
文本阴影
浏览器兼容性
- 伪类样式
使用CSS设置超链接
设置伪类的顺序:a:link->a:visited->a:hover->a:active
列表样式
list-style-type
list-style-image
示例:
list-style
li {
list-style:none; //去除列表前面的小黑点
}
网页背景
背景颜色
background-color //背景颜色值:十六进制方法表 transparent
背景图像
background-image
-
背景图像
- background-image属性
background-image:url(图片路径);
-
背景重复方式
-
background-repeat属性
- repeat:沿水平和垂直两个方向平铺
- no-repeat:不平铺,即只显示一次
- repeat-x:只沿水平方向平铺
- repeat-y:只沿垂直方向平铺
-
background-repeat属性
设置背景图像
背景定位
background-position属性
强调在设置背景图像时,这三个属性通常同时使用,只有在设置了背景图像时,背景重复方式和定位才有
设置背景
-
背景属性
- background属性
背景尺寸
-
设计师如何对背景图片的大小进行控制呢?
- 背景尺寸 background-size
线性渐变
-
- 颜色沿着一条直线过渡:从左到右、从右到左、从上到下等
径向渐变
-
- 圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个起点朝所有方向混合
浏览器兼容性
CSS3渐变兼容:
IE浏览器是Trident内核,加前缀:-ms-
Chrome浏览器是Webkit内核,加前缀:-webkit-
Safari浏览器是Webkit内核,加前缀:-webkit-
Opera浏览器是Blink内核,加前缀:-o-
Firefox浏览器是Mozilla内核,加前缀:-moz-
线性渐变
背景颜色值:十六进制方法表背景颜色
值:十六进制方法表
背景颜色值:十六进制方法表