CSS样式-文本

作者: baiying | 来源:发表于2016-12-13 21:07 被阅读32次

缩进文本

text-indent
例:p {text-indent:5em}

  • 注:text-indent可应用于所有块级元素,但不能应用于行内元素。关于行内元素和块级元素请戳进去块级元素&行内元素,此属性也可以继承。

水平对齐

text-align

  • left:左对齐
  • right:右对齐
  • center:居中(元素内的文本)
  • <center>:居中(整个元素居中)
  • justify:两端对齐文本,文本行的左右两端都放在父元素的内边界上通过调整单词和字母间的间隔,使各行的长度恰好相等。

举例如下:

<html>
  
  <head>
    <style type="text/css">.spread {text-align:left} .tight {text-align:justify} .text{ background:green; width:80px; }</style></head>
  
  <body>
    <div class="text">
      <p class="spread">This is some text. This is some text.</p>
      <br>
      <p class="tight">This is some text. This is some text.</p></div>
  </body>

</html>
运行结果

字间隔

word-spacing

  • 设置正值增大字间距,设置负值减小字间距
    p{word-spacing:20px}

字母间隔

letter-spacing

  • 注:理解字间隔&字母间隔,用法与字间隔相同。

文本装饰

text-decoration

  • none
  • underline:下划线
  • overline:顶部一条线
  • line-through:一条贯穿线
  • blink:文本闪烁

字符转换

text-transform

  • none
  • uppercase:转大写
  • lowercase转小写
  • capitalize:每个单词首字母大写

处理空白符

white-space

具体如下:

white-space各值对应的处理

文本方向

direction

  • ltr(默认):从左到右
  • rtl:从右到左

相关文章

  • 5、CSS文本样式

    CSS文本样式

  • CSS选择器与文本样式

    CSS选择器以及文本样式 CSS学习 CSS 层叠样式表(Cascading Style Sheets)CSS可用...

  • css基础知识

    CSS概述 css指层叠样式列表(Cascading Style Sheets)样式定义如何显示HTML文本把样式...

  • Css样式--文本样式详解

    Css样式--文本样式详解 文本样式包括所谓的文本缩进:text-indent水平对齐:text-align:ce...

  • 从零开始学CSS - 样式

    样式 CSS 背景属性 CSS 文本属性 CSS 字体属性 链接 常见的链接样式,text-decorat...

  • day03

    A今天学了什么? 1.CSS基本样式讲解 1.1css背景样式 1.2CSS文本 1.3CSS字体 1.4.css...

  • css 01

    css 初识 css 通常称为css样式或层叠样式表(级联样式),主要用于设置html页面中的文本内容(字体,大小...

  • web前端入门到实战:css选择器和css文本样式相关

    css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import...

  • day03

    A今天学到了什么 1.css基本样式 1.css背景 2.css 文本 3.css 字体 4.css 列表样式...

  • DAY04

    1、CSS样式 1.1、CSS背景样式 1.2、背景的简写 1.3、背景吸附 1.4、背景大小 2、文本样式 2....

网友评论

    本文标题:CSS样式-文本

    本文链接:https://www.haomeiwen.com/subject/fmhbmttx.html