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表现一致,只是该值继承的startend关键字是针对父母的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. idea+maven+springboot+mybatis+springmvc+shiro

    springboot就是把创建项目简单化,省去了以往的配置mybatis.springmvc的繁琐过程. 搭建web应用三个主要功能,请求和响应,数据库交互,权限配置. 一.idea创建项目 (1) ...

  2. 占满屏幕的宽高,当把textarea换成其他标签的时候,怎么才能编辑?

    $('.nav').width($(window).width()); $('.nav').height($(window).height());   当把textarea换成其他标签的时候,怎么才能 ...

  3. vue中watch的详细用法

    在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...

  4. Linux 磁盘空间大小统计du命令常见使用方法

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/hongweigg/article/details/37692057 在 Linux下,能够对某个文件 ...

  5. CentOS安装python3.5.0+uwsgi+nginx

    1安装编译工具 yum install zlib-devel bzip2-devel openssl-devel python-devel kernel-devel libffi-devel ncur ...

  6. 20180310 KindEditor 富文本编辑器

    问题: 如何判断富文本编辑器文本内容非空 错误的办法,采用js 对控件本身的txt ID 号抓取获取值,由于加载富文本编辑器时,界面的ID 已经经过了修改或者可以用转换来说,所以抓取是无效果的. 需要 ...

  7. 火币网API文档——REST API 错误码

    错误码 行情 API 错误码 错误码 描述 bad-request 错误请求 invalid-parameter 参数错 invalid-command 指令错 code 的具体解释, 参考对应的er ...

  8. 异常Exception分类

    1:编译时被检测异常:只要有是Exception和其子类都是,除了特殊子类RuntimeException体系.       这种问题已但出现,希望在编译时进行检测,让这种问题有对应处理方式      ...

  9. 浪潮IOT知识点

    1 新增身份定义 以及 身份定义的属性表 要注意增加路由 2     '@trident/core'; 飘红,解决办法 import { TableSearchComponent } from '@t ...

  10. DLNg[结构化ML项目]第二周迁移学习+多任务学习

    1.迁移学习 比如要训练一个放射科图片识别系统,但是图片非常少,那么可以先在有大量其他图片的训练集上进行训练,比如猫狗植物等的图片,这样训练好模型之后就可以转移到放射科图片上,模型已经从其他图片中学习 ...