css中关于文字排版的一些小知识点

 

1.要换行,且不让文字超过边框:
 
{
word-wrap:break-word; word-break:break-all; overflow:hidden; }

 

2.首行缩进

正确地缩进两个汉字的宽度就需要使用相对单位。em是相对长度单位,而且是相对于当前对象内文本的字体大小的单位,那么两个汉字的宽度就是2em
 
p{text-indent:2em;}


3.行高line-height属性值具有一个特性

 可以不设置单位,也可以使用小数点(line-height:1.5)。但不设置单位的时候会以段落中某个最大的文字字体为基准做行高处理。
  注:在应用到块级元素时,line-height定义了元素中文本基线之间的最小距离,而不是一个绝对数值,文本基线拉开的距离可能比line-height值更大。此外line-height并不影响替换元素的布局,不过确实可以应用到替换元素。
 
4.首字下沉
 
p:first-letter{ 

        float:left;

        font-weight:bold;  

         font-size:2em   //设置段落p标签的首字为其他字体的2倍

  }

p{clear:both }  //清除首字的浮动,避免影响p标签的高度与其叠加

 

5.首行文字进行操作
:first-line伪对象仅影响标签元素中第一行的文本,而无论标签元素中第一行内容有多长:
 
p:first-line{ font-weight:bold; }

 

注:在css2中,:first-letter和:first-line伪元素只能应用于标记或段落之类的快元级元素,而不能应用于超链接等行内元素。
 
 
6.字体右对齐(编写华为电子书的时,客户要求页面中的文字右边也好对齐,细节很重要)
 
<p style="text-align:justify;text-justify:inter-ideograph;>

没有添加<p>标签之前的效果:

 

添加了p标签之后:

7.镂空的文字
 
h1 {
color: transparent;
-webkit-text-stroke: 1px red;
}

 

8.大小写字母转换text-transform

默认值为none对文本不做任何改动;参数upper-case和lowercase将文本转换为全大写活小写字符;capital只对每个单词的首字母大写。

<style>
      h1{text-transform: capitalize;}
</style>
<body>
      <h1>This is an H1 element</h1>    
</body>


结果如图:

9.文字阴影

text-shadow: 1em 1em 5px gray,-1em -1em silver;

 

第一组参数 ‘1em 1em 5px gray ’中第一个值控制阴影的左右位置(可为负),第二个值控制阴影的上下位置(可为负),第三个参数控制阴影的模糊程度(模糊度随着数值的增大而增大),第四个参数表示阴影的颜色。第二组参数‘-1em -1em silver’,和第一组类似,只是省略了模糊度。

应用了此属性的文字效果如下:

 

 

 

 

转载于:https://www.cnblogs.com/grapefruitskin/p/5292487.html

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值