css中各种代码的属性所表示的效果

1.设置文字的字体
font-family:黑体,Arial,“Times New Roman”
含义:首先在访问者的计算机中寻找黑体的字体,如果没有再寻找Arial的字体,最后寻找Times New Roman字体
注意:字体之间用逗号隔开,如果字体名字中有空格隔开,则需要用双引号括起来

2.设置文字的倾斜效果
font-style:italic 或者 oblique
平常所指的斜体即为italic(意大利斜体)
oblique为真正的斜体,在Windows系统中并不能实现oblique方式的字体

3.设置文字的加粗效果
font-weight:normal(正常粗细),bold(粗体),bolder(加粗体),lighter(比正常粗细还细)
在html中,b标记和strong这两个标记表面上是相同的
但是b标记只有加粗效果,而strong有加粗效果还有强调的效果

4.转换英文字母中的大小写
text-transform:capitalize,uppercase,lowercase;
capitalize:英文段落中所有的英文单词的开头都为大写
uppercase:英文文字为全部大写
lowercase:英文文字全部为小写

5.控制文字的大小
font-size:像素(px),宽度(em),百分号(相对大小,要有父级)

6.设置文字装饰效果
text-decoration:none(无修饰),underline(下划线),line-through(删除线),overline(加顶线),blink(文字闪烁,仅部分浏览器支持)
text-decoration该属性可以有多个属性值
eg:text-decoration:underline overline

7.设置段落首行缩进
text-indent:用各种长度为属性值,
eg:text-indent:2em or text-indent:2px;

8.设置字词间距
letter-spacing:设置字母之间的间距
word-spacing:设置单词之间的间距
注意:如果要调整汉字之间的距离,需要设置letter-spacing属性,word-spacing则不能用来设置汉字之间的距离

9.设置段落之间的距离
用margin值设置

10.控制文本的水平位置
text-align:left(左对齐,也是浏览器默认的),right(右对齐),center(居中对齐),justify(两端对齐)

11.文字的阴影效果
text-shadow
eg:text-shadow:0.1em 0.1em 0.3em表示右下角出现了阴影效果
在text-shadow属性中第一个数表示左右方向,正值为右,负值为左;
第二个数表示上下方向,正值为上,负值为下;
第三个数表示阴影的模糊程度

12.设置文本布局
column-width:设置列宽度
column-count:设置分栏效果
column-gap:设置列间距
column-rule-color:设置列边框颜色
column-rule-width:设置列边框宽度
column-rule-style:设置列边框样式,与border属性值相同,包括none,dashed,hidden,dotted,dashed,solid

13.设置跨栏显示
column-span,需要通过span来标记所需要的跨列显示的文字

☆在设置文本布局的时候,在编写代码的时候应该加上浏览器兼容性的以避免一些代码的效果在一些浏览器上显示不出效果
eg:-webkit-+属性:兼容谷歌浏览器引擎
-moz-+属性:兼容火狐浏览器引擎等等

若此文章有纰漏,希望广大网友发现问题之后在评论区积极留言,谢谢!(此文章仅供参考)

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值