CSS3美化字体样式

1.span标签

span标签是HTML5的行内标签,被用来组合文档中的行内元素。

2.字体样式

font-family:设置字体的类型,常用的字体有宋体、微软雅黑、黑体等,可以设置多个字体中文要记得加英文“”号
font-size:设置字体的大小,常用单位是px还有其他的in,cm,mm等,但并不实用。
font-style:设置字体风格
font-weight:设置字体的粗细
font:用于对字体的综合设置
font-style属性用于设置字体风格如斜体,normal默认值显示标准的字体,italic:显示斜体的字体样式,oblique:显示倾斜体的字体
font-weight属性用于设置字体的粗细,bold定义粗体字符,bolder定义更粗的字符,lighter定义更细的字符,100~900可以自定义粗细
font可以对字体进行综合设置,语法:p{font:font-style font-weight font-size;}各属性之间以空格隔开

3.文本样式

  • color:设置文本的颜色

1.使用颜色名称来直接定义颜色,如:color:yellow
2.使用十六进制代码指定颜色,如:color:#00F;记住一定要颜色代码前加#号
3.RGB使用红绿蓝这光学三原色,只要设置好这三种颜色,就可以形成各种颜色
4.RGBA:是RGB方法的拓展,只是加了一个alpha属性,要用到有透明度的颜色时,可以用这个属性控制透明度,值为0~1,越小越透明

  • text-align:设置文本内容水平对齐

left:默认值,左对齐
right:右对齐
center:居中对齐
justify:两端对齐

  • text-indent:设置首行文本的缩进

每个段落的首行都会空出字符,属性值可以是em和px,2em表示缩进两个字符

  • line-height:设置文本的行高

行高就是行与行之间的距离,属性单位分别有px,em,和百分比,通常按字体大小的倍数表示,16px行高就可以设置为32px

  • text-decoration:设置文本的装饰

none:默认值没有装饰
underline:下划线
overline:上划线
line-through:删除线

  • vertical-align:设置文本内容的垂直对齐

文本垂直居中,属性值有middle,top,bottom

  • text-shadow:设置文本阴影效果

{text-shadow:10px 8px 5px #999;}分别是设置水平阴影位置,垂直阴影位置,模糊距离,还有阴影的颜色

4.超链接伪类

a:link{ }设置未访问前超链接的状态
a:visited{ }单击访问后的状态
a:hover{ }鼠标指针悬停时的状态
a:active{ }鼠标未释放时的状态
list-style去除列表样式的圆点符号或数字

5.背景样式

background-color:规定背景颜色
background-image:规定要使用的背景图
background-repeat:规定重复的背景图像

repeat:默认,背景会在垂直方向和水平方向重复
repeat-x:水平方向重复
repeat-y:垂直方向重复
no-repeat:背景图像仅显示一次。

background-position:规定背景图像的位置

top顶部 left,right左和右,bottom底部,如果只定义一个值,那第二个值默认为center

background:复合属性,综合设置
background-size:规定背景的尺寸,length设置宽高,percentage以父元素的百分比设置宽高,cover背景图拓展覆盖
contain把图像扩展至最大尺寸,完全适应内容区域
线性渐变
background-image:linear-gradient(方向,颜色1,颜色2);颜色至少定义两种

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值