第五章 css美化网页元素

CSS美化网页元素详解

最新推荐文章于 2025-11-25 09:44:12 发布

原创最新推荐文章于 2025-11-25 09:44:12 发布 · 746 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

第五章 css美化网页元素

1.字体

<spam>标签能让某几个文字或者某个词语凸显出来

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

在这里插入图片描述

1.字体类型

p{font-family:Verdana,"楷体";}
body{font-family: Times,"Times New Roman", "楷体";}

2.字体大小

单位 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;}

3.字体风格

font-style属性：normal italic oblique

4.字体粗细

在这里插入图片描述

5.字体属性

font属性

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

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

2.文本样式

在这里插入图片描述

1.文本颜色

rgb：十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量

rgb（r，g，b）：正整数的取值为0~255

RGBA：在rgb基础上增加了控制alpha透明度的参数，其中这个透明通道值为0~1

color:#A983D8;
color:#EEFF66;
color:rgb(0,255,255);
color:rgba(0,0,255,0.5);

2.排版文本段落

left 把文本排列到左边。默认值：由浏览器决定

right 把文本排列到右边

center 把文本排列到中间

justify 实现两端对齐文本效果

3.文本修饰和垂直对齐

文本装饰：text-decoration属性

在这里插入图片描述

垂直对齐方式：vertical-align属性：middle，top，bottom

4.文本阴影

text-shadow : color  x-offset  y-offset  blur-radius;

//color:阴影颜色 x-offset：x轴位移，用来指定阴影水平位移量
//v-offset：y轴位移，用来指定阴影垂直位移量 
//blur-radius：阴影模糊半径，代表阴影向外模糊的模糊范围

3.超链接伪类

伪类样式：标签名：伪类名{声明；}

a:hover {
	color:#B46210;
	text-decoration:underline;
}

使用css设置超链接

在这里插入图片描述

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

4.列表样式

list-style-type

list-style-image

在这里插入图片描述

li {
	list-style:none;
}
//去除列表前面的小黑点

5.背景样式

背景颜色：background-color

背景图像：background-image

background-image:url(图片路径);

背景重复方式

background-repeat属性

Ørepeat：沿水平和垂直两个方向平铺

Øno-repeat：不平铺，即只显示一次

Ørepeat-x：只沿水平方向平铺

Ørepeat-y：只沿垂直方向平铺

背景定位

background-position属性

在这里插入图片描述

设置背景

.title {
	font-size:18px;
	font-weight:bold;
	color:#FFF;
	text-indent:1em;
	line-height:35px;
	background:url(../image/arrow-down.gif) 205px 10px no-repeat;
}

背景尺寸

background-size

在这里插入图片描述

6.css3渐变

线性渐变

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

径向渐变

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

css3渐变兼容

IE浏览器是Trident内核，加前缀：-ms-

Chrome浏览器是Webkit内核，加前缀：-webkit-

Safari浏览器是Webkit内核，加前缀：-webkit-

Opera浏览器是Blink内核，加前缀：-o-

Firefox浏览器是Mozilla内核，加前缀：-moz-

线性渐变

linear-gradient ( position,  color1,  color2,…)
//position渐变方向  color1第一种颜色 color第二中颜色
///兼容webkit内核的浏览器
-webkit-linear-gradient ( position,  color1,  color2,…)

zilla内核，加前缀：-moz-

线性渐变

linear-gradient ( position,  color1,  color2,…)
//position渐变方向  color1第一种颜色 color第二中颜色
///兼容webkit内核的浏览器
-webkit-linear-gradient ( position,  color1,  color2,…)