• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS中的文本属性学习指南

CSS中的文本属性学习指南

作者:dopppler 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS,文本属性等相关知识,dopppler 希望在学习及工作中可以帮助到您

文本缩进 text-indent

值:长度值(正、负均可)
示例:p {text-indent:3em;}
 字符间距 letter-spacing

值:任何长度值(正、负值均可)。
示例:p {letter-spacing:.2em;}
单词间距 word-spacing

值:任何长度值(正、负值均可)。
示例:p {word-spacing:.2em;}
文本装饰 text-decoration

值:underline、overline、line-through、blink、none。
示例:.retailprice {text-decoration:line-through;}
文本对齐 text-align

值:left、right、center、justify
示例:p {text-align:right;}
行高 line-height

值:任何数字值(不用指定单位)
示例:

  1. p {line-height:1.5;}  

说明:

    CSS中的行高平均分布在一行文本的上方和下方。比如,如果字体大小是12像素,行高是20像素,则浏览器会在文本上方和下方各加4像素的空白,以凑足20像素的行高。
    修改默认行高最简单的方式就是使用font快捷属性,以复合值的形式把 font-size 和 font-height 的值写在一起,比如:div#intro {font: 1.2em/1.4 helvetica, arial, sans-serif;} 在上面的一行代码,行高就是字体大小12em的1.4倍。注意这里不用给line-heightz 值指定单位,只要一个数值就可以。

文本转换 text-transform

值:none、uppercase、lowercase、capitalize。
示例:

  1. p {text-transform:capitalize;}  

说明:capitalize 值会将每个词的首字母装换为大写,这种效果在很多广告、报道、杂志的标题中很常见。
垂直对齐 vertical-align

值:任意长度值以及 sub、 super、 top、 middle、 bottom 等。
示例:

  1. span {vertical-align:60%;}  

说明:

    vertical-align 以基线为参照上下移动文本,但这个属性只影响行内元素。
    如果想在垂直方向上对齐块级元素,必须把其display属性设定为inline。
    该属性较为常用于公式或化学分子式中的上下标,或用于文本中脚注的角标。
    HTML 标签<sup>和<sub>有默认的上标和下标样式,但重新设定一下vertical-align 和 font-size 属性能得到更美观的效果。例如:p.custom {font-size:.8em; vertical-align:1em;}

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06用CSS3将你的设计带入下个高度
  • 2017-08-06CSS3制作ajax loader icon实现思路及代码
  • 2017-08-06CSS进阶指引
  • 2017-08-06web前端优化时为什么不建议使用css @import
  • 2017-08-06CSS强制性换行的方法区别详解
  • 2017-08-06彻底掌握CSS中的percentage百分比值使用
  • 2017-08-06CSS中的table-cell属性使用实例教程
  • 2017-08-06CSS清除浮动的方法详解
  • 2017-08-06三角形向下方向垂直翻转效果
  • 2017-08-06chrom浏览器设置不了小于12px的文字大小的解决方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS3实现的闪烁跳跃进度条示例(附源码)
    • css3中transition属性详解
    • CSS中边框使用负边距值的奇技淫巧
    • CSS在移动网站开发的前端技术和技巧
    • CSS3中使用RGBa来调节透明度的教程
    • 固定Table第一行或某几行不随滚动条滚动而滚动
    • CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
    • css移动端实现与pc端一样的:acitve效果
    • 一款基于css3麻将筛子3D翻转特效的实例教程
    • 利用class、id对元素进行分类、标识实例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有