文本的设置直接影响到用户对界面的感受，好的文本设置能够让用户对界面有一种赏心悦目的感受，在这地方我们来简单的说说说对文本设置的时候，有哪些格式。

文本设置的时候我们应该注意什么：

平时我们文本设置的时候，主要是注重对文本的颜色设置，文本的对齐方式。文本的修饰，文本的转换和文本的缩进。以及关于文本设置的时候文字或者是行和字符之间的距离的一些设置。那么我们如今就来一一的看一下这些设置。

在说这些设置之前我们有必要了解CSS中的文本属性，由于全部的设置都是对文本的属性进行的设置，那么CSS中的文本属性有哪些:

color 文本的颜色

text-align:文本的对齐方式

text-decoration文本的修饰

text-transform文本的转换

direction文本的方向

word-spacing文本中单词的距离

white-space文本下方不被文字环绕

vertical-align：文本的垂直的对齐方式

text-shadow文本设置阴影

text-indent文本首行缩进

line-height文本之间行距离

letter-spacing字符之间的距离

上面是对文本的属性以及简单的介绍，我们以下就环绕着这些属性来一个一个为大家熟悉和学习：

设置文本的颜色

这个属性有三种能够进行赋值的方式一个是16进制赋值。一个是rgb(),另一个是颜色名字如red，注意的是我们在设置的有时候可能在某一个页面中的某一个元素进行设置颜色。我们要知道的的是的那个当我们在body设置颜色的时候，这时候，里面的文字某一个段落假设是没有设置颜色属性，而且包括在body中，这个时候文字显示的是body所设置的颜色

比方:<style type="text/css">

         body{color:red;}

         h1{color:#00ff00;}

         p.ex{color:rgb(0,0,255);}

        </style>

<body>

<p>这个段落没有设置颜色</p>

</body>此时这个地方的p中的文字是显示的红色和body设置的颜色是一样的

上面是对文本的一个颜色的设置，接着我们来看对齐方式的设置：

<style type="text/css">

      h1{text-align:center;}

      p.date{text-align: right;}

      p.main{text-align: justify;}

 </style>文本的对齐方式的设置是对text-align这个属性的设置，属性的值有三个是center表示的是居中对齐，right是右端justify是表示的是两端对齐，

文本的修饰

事实上文本的修饰并非我们想的那样的复杂。文本的修饰我们也能够为是线和文字之间的关系，线可能和文字没有关系，也有可能是字的下滑线，也有可能是删除线，也有可能可能是山划线，那么我们对文字修饰用到的属性是什么，text-decoration这个属性。我们能够设置这个属性的值为：

h1{text-decoration: overline;}上划线

 h2{text-decoration: line-through;}删除线

h3{text-decoration: underline;}下划线

a{ text-decoration:none;}没有线。为什么要有这个的一个属性，由于我们对链接经常是默认有下划线的。我们也能够让这个链接没有下划线。在此我们仅仅须要设置链接的属性text-decoration的值为none就能够了

<a href="......">点击链接</a>

文本的转换:

文本的转换是对字母而言的，我们知道字母有大写，有小写，文本的转换就是说的大写和小写的转换的问题

p.uppercase{text-transform: uppercase;}转换成为大写的字母

p.lowercase{text-transform: lowercase;}转换成为小写字母

p.capitalize{text-transform: capitalize;}将单词的首字母大写

在上面我们能够看出的是对文字转换用到的属性是text-transform这个属性，这个属性的值能够为说为三个是uppercase表示将字母转换成为大写的字母 lowercase表示将字母转换成为小写的字母，capitalize表示将单词的首字母大写。

文本缩进:

在一段文字的开头，文字是缩进的也就是，空两格。在CSS中我们也有这个的对文字进行设置的代码

这个用到的一个属性是text-indent这个属性，这属性的值是一个大小表示我们文字往里面缩进了的长度

p{text-indent:50px;}

文本距离:

<style type="text/css">

     h1{letter-spacing: 20px;}

     h2{letter-spacing: -3px;}

   </style>

用到的属性书letter-spacing后面是一个值表示字符之间的距离大小。我们要知道的是这个地方字符是以字母为单位的

也就是假设我们这个数字够大的话，我们的一个单词之间的空格会非常长对应的的我们也有单词之间的空格:word-spacing这个属性和letter-spacing使用方法是一样的，仅仅是word-spacing表示的是单词之间的距离

说的距离我们自然会想到行行之间的距离。那么如何来设置行行之间的距离，用到的是:

line-height这个属性用来设置行行之间的距离

文本的方向：

大千世界无奇不有，我们经常看到的文本是从左到右写的，可是有的人的喜欢从右到左的读写。我们这个时候就要用到direction这个属性来设置文本的方向

<style type="text/css">

       div.ex1{direction: rtl;}

    </style>

rtl表示我们的文本是从右边向左边写，靠左边的可是文字的顺序是不变的还是从左向右读。

文本的阴影：

在word里面有艺术字，我们想设置字体美丽一点能够设置阴影，那么我们如何来设置阴影，用到的keyword是

text-shadow这个来设置字体阴影

<style type="text/css">

    h1{text-shadow:2px 2px #FF0000;}

 </style>

文本主要的设置也就那么多。希望对大家有所帮助！

CSS文本简单设置的更多相关文章

  1. css 文本省略号设置

    本文推荐2种方法. 1. css tip:只兼容chrome内核的浏览器.ff不支持. .box { overflow: hidden; /* 溢出时不显示溢出的内容 */ text-overflow ...

  2. css如何简单设置文字溢出盒子显示省略号

    1.单行文本溢出显示省略号单行文本溢出显示省略号,必须满足三个条件:(1)先强制一行内显示文本white-space:nowrap;(默认 normal自动换行)(2)超出的部分隐藏overflow: ...

  3. CSS 文本字体颜色设置方法(CSS color)

    CSS 文本字体颜色设置方法(CSS color) 一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网 ...

  4. 四大伪类,css鼠标样式设置,reset操作,静止对文本操作

    07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) a:hover{样式} 鼠标悬停时的状态 a:visited{样式} 已访问过的状态(鼠标点击后 ...

  5. input文本框设置和移除默认值

    input文本框设置和移除默认值 这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: ...

  6. CSS 文本、字体、链接

    CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. 缩进文本 把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化 ...

  7. CSS文本效果

    前面的话 本文将详细介绍CSS文本效果 凸版印刷效果 这种效果尤其适用于中等亮度背景配上深色文字的场景:但它也可用于深色底.浅色字的场景,只要文字不是黑色并且背景不是纯黑或纯白就行 [浅色背景深色文本 ...

  8. CSS 文本

    CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. 缩进文本 把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化 ...

  9. html css的简单学习（二）

    html css的简单学习(二) <!Doctype html>告诉浏览器,这是一个html文档.lang="en" 默认是en,表示英语:zh-Hans 中文简体:z ...

随机推荐

  1. POJ 1201 &amp; HDU1384 &amp; ZOJ 1508 Intervals（差分约束+spfa 求最长路径）

    题目链接: POJ:http://poj.org/problem?id=1201 HDU:http://acm.hdu.edu.cn/showproblem.php? pid=1384 ZOJ:htt ...

  2. POJ1390 Blocks 【动态规划】

    Blocks Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 4173   Accepted: 1661 Descriptio ...

  3. Oracle数据的基本操作

    一.什么是Oracle 在学习DRP系统之前,非常多次提到过Oracle,也了解过,那么Oracle是什么?今天我最终揭开了它的神奇面纱. Oracle:是一个公司.当然我在这里说的是Oracle数据 ...

  4. asp.net web site中reference的version的autoupdate

    https://stackoverflow.com/questions/833924/visual-studio-stop-auto-update-on-references This is vali ...

  5. DirectUI界面编程（六）实现右键弹出菜单

    本节向大家介绍一下右键弹出菜单是如何实现的.效果如下,在窗口中点击鼠标右键弹出菜单,点击菜单项能够响应菜单点击事件. 使用Duilib库实现的弹出菜单,实际上也是一个Windows窗口,因此我们需要创 ...

  6. 自动化框架的两种断言设计(pytest 版)

    自动化测试断言失败时,根据不同业务场景,可能需要立即终止或继续执行.这里以 Appium + pytest 为例. 一. 断言失败立即终止 用途一:用例的预期结果是其他用例的前提条件时,assert ...

  7. 互联网智能门锁，手机蓝牙APP成为首选

    随着互联网门锁在行业中的普及,大家越加关注到门锁的实施和维护成本.我们在互联网智能门锁的调研中发现,网关联网的智能门锁,使用时需要依赖房间内的宽带上网线路,而断线后客户反馈问题较多.据某家分散式公寓的 ...

  8. Book---强连通分量

    这几天一直在做强连通,现在总结一小下 1.定义 在一个有向图中,如果任意的两个点都是相互可达的,就说这个图是强连通的,有向图的极大强连通子图,称为强连通分量 2.求法 学的是白书上的tarjan算法 ...

  9. Photoshop把图片调成固定的像素。

    1.用PhotoShop打开需要修改的图片. 2.点击“窗口”菜单的“图层”子菜单,打开图层控制面板(快捷键F7).3.用鼠标左键双击“图层”面板的“背景”图层.在弹出窗口中点击“确定”按钮,解锁背景 ...

  10. ABBYY迎国庆·庆中秋限时折扣狂潮,再来一波

    继ABBYY 早秋限时活动之后,ABBYY官方为迎国庆,庆中秋,折扣狂潮,又来一波.上次活动由于时间短,任务急,数量少,使得不少小伙伴抱憾而止,选择默默等待良机.现在,良机来了,即便没有上次的打折力度 ...