CSS文本简单设置

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

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

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

在说这些设置之前我们有必要了解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>

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

时间: 2024-10-13 19:12:57

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

CSS样式简单设置

1.设置行高:p{line-height:1.5em;} 2.中文字间隔.字母间隔设置:letter-spacing:50px; 3.单词间距设置:word-spacing:50px; 4.样式居中:div{text-align:center;} 5.元素分类--内联块状元素:display:inline-block; 6.设置边框: border-style(边框样式)常见样式有: dashed(虚线)| dotted(点线)| solid(实线). border-color(边框颜色)中的颜

使用css文本样式的6种方法

很多web前端初学者 http://www.maiziedu.com/course/web/在学习css样式时,对文本内容的修饰需要用到css文本样式进行修饰.由于在层叠关系中,内容要高于背景.所以文本样式相对而言更加重要.有些人对文本和字体样式之间的不同不太了解,简单地讲,文本是内容,而字体则用于显示这个内容.本文将详细介绍文本相关样式. 首行缩进 定义 首行缩进是将段落的第一行缩进,这是常用的文本格式化效果.一般地,中文写作时开头空两格,类似于此. [注意]该属性可以为负值 text-ind

CSS 文本、字体、链接

CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. 缩进文本 把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化效果. CSS 提供了 text-indent 属性,该属性可以方便地实现文本缩进. 通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值. 这个属性最常见的用途是将段落的首行缩进,下面的规则会使所有段落的首行缩进 5 em: p {text-ind

CSS链接样式设置

CSS链接样式,我们知道当我们读一篇文章的时候,有的时候鼠标滑到什么一些文字,有的文字下面会有下 划线,或者是颜色发生变化,其实我们都知道这就是一个链接,出现下滑线和颜色发生变化,都是链接的时 候我们对链接样式的设置.以上我们简单的介绍了什么是样式,你可能会问,哇呜,什么是样式,怎样没有定义 其实我们没有定义更好,我们只需要是去理解.可是我还不理解.不急.请听我慢慢道来: 不同的链接可以有不同的样式,链接样式可用CSS任意的属性,比如颜色color,font,background等等.慢着 我们

CSS 文本

CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. 缩进文本 把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化效果. CSS 提供了 text-indent 属性,该属性可以方便地实现文本缩进. 通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值. 这个属性最常见的用途是将段落的首行缩进,下面的规则会使所有段落的首行缩进 5 em: p {text-ind

css文本格式详解

一.css文本主体内容: 二.css文本详解:  1.文本缩进 语法: text-indent:<length>|<percentage> 默认值为0. 属性值详解: <length>:用长度值指定文本的缩进.可以为负值.   <percentage>:用百分比指定文本的缩进.可以为负值. <inherit>:继承父级text-indent属性值. 用法: 检索或设置对象中的文本的缩进. 内联对象要使用该属性必须先使该对象表现为块级或内联块级.

与换行相关的css属性简单介绍

与换行相关的css属性简单介绍:在css布局中可能需要人为的进行操作是否换行,如何换行,本章节就就做一下简单介绍.一.word-break属性:此属性用来设定文本如何进行换行.语法结构: word-break:normal | break-all | keep-all 参数解析:1.normal:默认值,原则上规定在断字点换行,通俗的说就是在单词与语单词之间可以进行换行,但是如果单词特别的长,超出了行的长度,可以从单词内部断开进行换行.2.break-all:此属性值能够实现强制将单词从内部截断

CSS文本属性

CSS文本: 属性 描述 color 设置文本颜色 direction 设置文本方向. line-height 设置行高. letter-spacing 设置字符间距. text-align 对齐元素中的文本. text-decoration 向文本添加修饰. text-indent 缩进元素中文本的首行. text-shadow 设置文本阴影. text-transform 控制元素中的字母. unicode-bidi 设置文本方向. white-space 设置元素中空白的处理方式. wor

CSS四种设置方式

上面这张思维导图已经大概的讲明白了四种设置方式的不同点,下面就细入说明一下各自的用法和注意点. 1.嵌入样式表 <html> <head> <title>CSS四种设置方式</title> </head> <body> <p style="color:red;font-size:2cm;background-color:gray; border:2px solid blue">内联样式表</p&g