CSS3美化网页元素（字体样式文本样式超链接伪类列表样式背景样式 css渐变）

一二小选手

于 2024-08-08 11:16:10 发布

阅读量542

点赞数 8

分类专栏：前端文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_66584716/article/details/141021843

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

页面使用CSS有什么好处？

1、有效的传递页面信息
2、使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户
3、可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容
4、具有良好的用户体验

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

<p>
    span标签能让某几个文字或者某个词语<span class="show">凸显</span>出来
</p>

1.字体样式

属性名	含义	举例
font-family	设置字体类型	font-family:“隶书”;
font-size	设置字体大小	font-size:12px;
font-style	设置字体风格	font-style:italic;
font-weight	设置字体的粗细	font-weight:bold;
font	在一个声明中设置所有字体属性	font:italic bold 36px “宋体”;

font-family 字体类型

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

font-size 字体大小

h1{font-size:24px;}
h2{font-size:16px;}
h3{font-size:2em;}
span{font-size:12pt;}
strong{font-size:13pc;}
/* 单位：
px（像素）
em：父元素字体大小倍数
rem：根元素字体大小倍数<html></html>默认大小16px
cm、mm、pt、pc */

font-style 字体风格

normal(默认标准)
italic(斜体)
oblique(倾斜)
inherit(继承父元素)

font-weight 字体粗细

值	说明
normal	默认值，定义标准的字体 (400)
bold	粗体字体 (700)
bolder	更粗的字体
lighter	更细的字体
100、200、300、400、500、600、700、800、900	定义由细到粗的字体

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

p span{font:oblique bold 12px "楷体";}
/*
字体风格 和 字体粗细 可省略可互换位置
字体大小 和 字体类型 不可省略不可换位置
*/

2.文本样式

属性	含义	举例
color	设置文本颜色	color:#00C;
text-align	设置元素水平对齐方式	text-align:right;
text-indent	设置首行文本的缩进	text-indent:20px;
line-height	设置文本的行高	line-height:25px;
text-decoration	设置文本的装饰	text-decoration:underline;

文本颜色 color

RGB：十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量
rgb(r,g,b)：正整数的取值为0～255
RGBA：在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1

color:red; /* 英文单词 */
color:#EEFF66; /* 十六进制 */
color:rgb(0,255,255); /* rgb */
color:rgba(0,0,255,0.5); /* rgba */

排版文本段落 text-align（适用于块级元素）

left：把文本排列到左边。默认值：由浏览器决定
**right：**把文本排列到右边
center：把文本排列到中间
justify：实现两端对齐文本效果

文本装饰 text-decoration

none：默认，定义的标准文本
underline：下划线
overline：上划线
line-through：删除线

垂直对齐方式 vertical-align（用于图片）

middle
top
bottom

文本阴影 text-shadow

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

3.超链接伪类

语法

标签名:伪类名{声明;}

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

使用CSS设置超链接

伪类名称	含义	示例
a:link	未单击访问时超链接样式	a:link{color:#9ef5f9;}
a:visited	单击访问后超链接样式	a:visited {color:#333;}
a:hover	鼠标悬浮其上的超链接样式	a:hover{color:#ff7300;}
a:active	鼠标单击未释放的超链接样式	a:active {color:#999;}

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

4.列表样式

list-style-type

none：无标记符号
disc：默认，实心圆
circle：空心圆
square：实心正方形
decimal：数字

list-style-image

list-style

none：去除列表前的实心圆

5.背景样式

background-color 背景颜色

背景颜色值：十六进制方法表示
transparent

background-image 背景图像

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

background-repeat 背景重复方式

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

background-position 背景定位

值	含义
Xpos Ypos	单位：px， Xpos表示水平位置，Ypos表示垂直位置
X% Y%	使用百分比表示背景的位置
X、Y方向关键词	水平方向的关键词：left、center、right 垂直方向的关键词：top、center、bottom

background 背景样式简写

background:url(../image/arrow-down.gif) 205px 10px no-repeat;
/* 颜色 图片 定位 平铺方式 */

background-size 背景尺寸

**auto：**默认值，使用背景图片保持原样
**percentage：**当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
**cover：**整个背景图片放大填充了整个元素
contain：让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

6.CSS渐变

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

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

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

线性渐变

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

background: linear-gradient(to bottom, #1190ea, #a2d4f7); 
/* 从上到下深蓝到浅蓝(第一个颜色到第二个颜色) */

一二小选手

关注

8
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS3美化网页元素（字体样式文本样式超链接伪类列表样式背景样式 css渐变）

字体属性的顺序：字体风格→字体粗细→字体大小→字体类型。
复制链接

扫一扫

专栏目录