CSS的外观属性

CSS的外观属性

CSS外观属性
1、color:文本颜色
color属性用于定义文本的颜色,其取值方式有如下3种:
(1) 预定义的颜色值,如red、green,blue等,
(2)十六进制,如#FF0000,#FF6600,#29D794等,实际工作中,十六进制是最常用的定义颜色的方式。
(3)RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%0%)。
需要注意的是,如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分号,必须写为0%
代码:
.red { color:red; }
li:nth-child(2){ color:#FF6600; }
#rgb { color:rgb(0,0,255); }
2、line-height:行间距
line-height属性用于设置行间距,就是行与行之间的距离,即字符的垂直距离,一般称为行高。line-height常用的属性值单位有三种,分别为像素px,相对值em和百分比%,实际工作中使用最多的是像素px.
一般情况下,行距比字号大7、8像素左右就可以。
代码:
p { line-height:25px;
text-indent:2em;}
h3 { text-align:center; }
3、text-align:水平对齐方式
text-align属性用于设置文本内容的水平对齐方式,相当于html中的align对齐方式。其可用属性值有:left(左对齐,默认值)、right(右对齐)、center(居中对齐)。
4、text-indent:首行缩进
text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值,建议使用em作为设置单位。
1em就是一个字的宽度,如果是汉字的段落,1em就是一个汉字的宽度。
5、letter-spacing:字间距
letter-spacing属性用于定义字间距,所谓字间距就是字符与字符(字与字)之间的空白。其属性值可为不同单位的数值,允许使用负值,默认为normal。
6、word-spacing:单词间距
word-spacing属性用于定义英文单词之间的间距,对中文字符无效。
word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距,而word-spacing定义的为英文单词之间的间距。
代码: div { letter-spacing:5px; } /* 字间距 /
p {word-spacing:4px; } /
单词间距 /
7、颜色半透明(CSS3)
语法格式如下:
color: rgba(r,g,b,a) a是alpha透明的意思 取值范围在0~1之间
比如: color:rgba(0,0,0,0.3)
代码: h1 { color:rgba(0,0,0,0.2); }
/
a是alpha 透明的意思,取值范围在0~1之之间 四个参数*/
8、文字阴影(CSS3)
给文字添加阴影效果 shadow 影子
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
h-shadow 必需,水平阴影的位置。允许负值。
v-shadow 必需,垂直阴影的位置。允许负值。
blur 可选,模糊的距离
color 可选,阴影的颜色。
代码: h1 { text-shadow:12px -1px 4px rgba(0,0,0,0.5); } /*水平位置和垂直位置 前2个参数是必须要写的,后面2个参数可省略 默认值 */

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值