letter-spacing

letter-spacing：normal | <length>  指定字符之间的额外间隙

  • normal：默认间隔。计算值为0
  • <length>：用长度值指定字符间隔。可以为负值
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .test p {

                /*边框*/

                border: 1px solid #000;

            }

            .normal p {

                letter-spacing: normal;

                color: #FF0000;

            }

            .length p {

                letter-spacing: 10px;

                color: #0000FF;

            }

        </style>

    </head>

    <body>

        <ul class="test">

            <li class="normal">

                <strong>默认间隔</strong>

                <p>默认情况下的文字间间隔</p>

            </li>

            <li class="length">

                <strong>自定义的间隔大小</strong>

                <p>自定义的文字间隔大小Hello world</p>

            </li>

        </ul>

    </body>

</html>

text-align

text-align：start|end| left | right | center |justify|match-parent|justify-all  定义元素内容的水平对齐方式

  • left：内容左对齐
  • center：内容居中对齐
  • right：内容右对齐
  • justify：内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理
  • start：内容对齐开始边界
  • end：内容对齐结束边界
  • match-parent：这个值和inherit表现一致，只是该值继承的start或end关键字是针对父母的direction值并计算的，计算值可以是 left 和 right 
  • justify-all：效果等同于justify，不同的是最后一行也会两端对齐
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .test p {

                border: 1px solid #000;

            }

            .left p {

                text-align: left;

            }

            .center p {

                text-align: center;

            }

            .right p {

                text-align: right;

            }

            .justify p {

                width: 200px;

                text-align: justify;

            }

            .start p {

                text-align: start;

            }

            .end p {

                text-align: end;

            }

        </style>

    </head>

    <body>

        <ul class="test">

            <li class="left">

                <strong>left</strong>

                <p>我是左对齐内容</p>

            </li>

            <li class="center">

                <strong>center</strong>

                <p>我是居中对齐内容</p>

            </li>

            <li class="right">

                <strong>right</strong>

                <p>我是右对齐内容</p>

            </li>

            <li class="justify">

                <strong>justify</strong>

                <p>我 是一段可以两端对齐的文字， 你 仔细看看， 我 的对齐方式都贴着 容器左右的边缘。</p>

            </li>

            <li class="start">

                <strong>start</strong>

                <p>start效果</p>

            </li>

            <li class="end">

                <strong>end</strong>

                <p>end效果</p>

            </li>

        </ul>

    </body>

</html>

CSS文本(Text)属性-----letter-spacing和text-align的更多相关文章

  1. css 文本外观属性(text) 和 字体样式属性(font)

    css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距 对中文无效 line ...

  2. css 之 文本缩进属性(text-indent)

    文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 文本缩进属性(text-indent) 这个属性设定文本 ...

  3. 4 CSS文本属性

    CSStext(文本)属性可定义文本外观,比如文本颜色,对齐文本,装饰文本,文本缩进,行间距等 4.1文本颜色 color属性用于定义文本颜色. div { color: red; } 颜色表示方法: ...

  4. [CSS]文本属性（Text）

      CSS 文本属性(Text) 属性 描述 CSS color 设置文本的颜色. 1 direction 规定文本的方向 / 书写方向. 2 letter-spacing 设置字符间距. 1 lin ...

  5. 解读CSS文本（text）样式

    通过文本属性,您可以改变文本的颜色.字符间距.对齐文本.装饰文本.文本缩进,等等. color: 该属性用于改变文本的颜色,注意区分background-color. Line-height: 该属性 ...

  6. css——letter spacing

    letter spacing属性是用来设置字母的间距 实例: 设置h1和h2之间字母的间距 <html> <head> <style type="text/cs ...

  7. css中的字体及文本相关属性

    css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...

  8. CSS: CSS常用的文本样式属性

    介绍:CSS常用的文本样式属性 color:  颜色 font-size:  字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...

  9. CSS的color属性并非只能用于文本显示

    虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 对于CSS的color属性,相信所有Web开发人员都使用过 ...

  10. jquery html属性和text属性的区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. ORACLE DIRECTORY目录管理步骤

    ORACLE DIRECTORY目录管理步骤 ORACLE的 DIRECTORY在数据库中是个目录的路径,需要在操作系统中有相应的目录与之对应:ORACLE目录的作用就是让ORACLE数据库和操作系统 ...

  2. pacakge-info.java

    翻看以前的笔记,看到一个特殊的java文件:pacakge-info.java,虽然有记录,但是不全,就尝试着追踪一下该问题, 分享一下流水账式的结果. 首先,它不能随便被创建.在Eclipse中, ...

  3. tensorflow入门笔记（二） 滑动平均模型

    tensorflow提供的tf.train.ExponentialMovingAverage 类利用指数衰减维持变量的滑动平均. 当训练模型的时候,保持训练参数的滑动平均是非常有益的.评估时使用取平均 ...

  4. eclipse怎么解决Failed to load the JNIshared library

    Q: 打开eclipse打开报Failed to load the JNIshared library的错误. A:jdk的位数跟eclipse位数一致即可解决. 把eclipse下载64位即可 cm ...

  5. bzoj3733 [Pa2013]Iloczyn 搜索

    正解:搜索 解题报告: 先放下传送门QwQ umm其实并不难,,,最近在复建基础姿势点所以都写的是些小水题QAQ 首先考虑如果能构造出来一定是因数凑起来鸭,所以先把因数都拆出来,然后就爆搜 几个常见的 ...

  6. 27-5-LTDC控制LCD显示屏

    1.显示原理 (1).液晶显示是分2层显示的,配置层级结构体参数再将数据输出到混合器合成,显示再液晶上. (2).LTDC初始化结构体 控制 LTDC 涉及到非常多的寄存器,利用 LTDC 初始化结构 ...

  7. 利用session防止表单重复提交

    转自:http://www.cnblogs.com/xdp-gacl/p/3859416.html 利用Session防止表单重复提交 对于[场景二]和[场景三]导致表单重复提交的问题,既然客户端无法 ...

  8. 如何让帝国CMS7.2搜索模板支持动态标签调用

    帝国cms站内搜索一般不支持动态标签调用,如果要调用如何实现呢?修改两个地方就可以实现了.打开 /e/search/result/index.php 文件,找到(文件改了,不会调用也是徒劳!看看这个帝 ...

  9. MathWorks.MATLAB.NET.Arrays.MWArray”的类型初始值设定项引发异常 解决方法

    原因 用的是matlab7运行时,后面又安装了matlab11,后面又重新安装了matlab7运行时,c盘下就有二个运行时的版本了,程序引用了后面的那个,编译后就出上面的问题 解决方法 1重新引用上面 ...

  10. 20170915 linux系统管理培训

    进程管理 程序:通常为二进制程序放在存储媒介中(如光盘.硬盘.软盘.磁带等),以物理文件的形式存在: 进程:正在运行当中的程序,程序被触发后,执行者的权限与属性.程序的程序代码与所有数据等都会被加载到 ...