首页 前端知识 CSS3美化网页元素

CSS3美化网页元素

2024-09-18 23:09:27 前端知识 前端哥 420 792 我要收藏

1.字体样式

在这里插入图片描述

1.1字体类型font-family
p{font-family:Verdana,"楷体";}
body{font-family: Times,"Times New Roman", "楷体";}
1.2字体大小font-size
h1{font-size:24px;}
h2{font-size:16px;}
h3{font-size:2em;}
span{font-size:12pt;}
strong{font-size:13pc;}

font-size属性单位

px(像素)

em、rem、cm、mm、pt、pc

1.3字体风格font-style

normal、italic和oblique

normal:‌表示默认的字体样式,‌即不倾斜。‌这是font-style属性的默认值,‌用于指定文本不应用任何特殊的倾斜效果。‌

italic:‌表示对字体进行倾斜处理。‌当设置为italic时,‌文本会呈现为斜体,‌这是一种常见的字体样式,‌用于强调文本或改变其视觉表现。‌

oblique:‌表示使用斜体字体显示字符。‌与italic类似,‌oblique也使文本呈现为斜体,‌但它是通过调整字体角度而不是使用专门的斜体字体来实现的。‌在某些情况下,‌如果系统中没有对应的斜体字体,‌oblique可以作为italic的替代选项

1.4字体的粗细font-weigh

在这里插入图片描述

1.5字体属性font

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

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

2.文本样式

在这里插入图片描述

2.1color属性
RGB

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

rgb(r,g,b) : 正整数的取值为0~255

RGBA

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

2.2文本修饰

text-decoration属性

说明
none默认值,定义的标准文本
underline设置文本的下划线
overline设置文本的下划线
line-through设置文本的删除线
2.3排版文本的段落

text-align

说明
left把文本排列在左边
right把文本排列在右边
center把文本排列到中间
justify实现两端对齐文本效果
2.4文本阴影
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;
}

在这里插入图片描述

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

4.列表样式

list-style

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

5.背景样式

5.1背景颜色

background-color

背景颜色值:十六进制方法表达

5.2背景图像

background-color

属性

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

背景重复方式

background-repeat属性

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

no-repeat:不平铺,即只显示一次

repeat-x:只沿水平方向平铺

repeat-y:只沿垂直方向平铺

5.3背景定位

background-position

在这里插入图片描述

.title{
	text-indent:1em;
	line-height:35px;
	background:url(../image/arrow-down.gif) 205px 10px no-repeat;
}

6.css渐变

6.1线性渐变

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

linear-gradient ( position,  color1,  color2,)

position 渐变的方向

color1 第一种颜色

color2 第二种颜色

6.2径向渐变

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18430.html
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!