css 文本属性详细总结

CSS 文本属性可定义文本的外观。

通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。

1,text-align 横向排列,也就是水平对齐

它会影响一个元素中的文本行互相之间的对齐方式 属性值有:left(默认),center,right

p{

text-align:right

}

text-align:center 与 <CENTER>

您可能会认为 text-align:center 与 <CENTER> 元素的作用一样,但实际上二者大不相同。

<CENTER> 不仅影响文本,还会把整个元素居中。text-align 不会控制元素的对齐,而只影响内部内容。元素本身不会从一段移到另一端,只是其中的文本受影响。

2,line-height 文本行高

1,%基于字体大小的百分比行高 ,也就是说与字体的大小有关

2,数值 来设置固定值

p{
text-align:left;
font-size:20px;
line-height:50%;  基于字体大小的1/2 行高
}

3,text-indent 首行缩进

% 父元素的百分比

px 固定值 ,默认为0

inherit 继承

div {
width:300px;
height:300px;
}

p{
text-align:left;
font-size:20px;
line-height:50%;  基于字体大小的1/2 行高
text-indent:50%;  基于div容器的缩进50%(1/2)
}

4,letter-spacing 字符间距

定义文本中两个字符之间距离

1,默认关键字是 normal 也就是相当于 letter-spacing:0;

2,length设置具体值(可以为负)

3,inherit

h1 {
letter-spacing: -0.5em
}
h4 {
letter-spacing: 20px
}

5,word-spacing 单词间距

定义英文单词之间的间距

1,normal 标准

2,px设置固定值

3.inherit

h1 {
word-spacing: -0.5em
}
h4 {
word-spacing: 20px
}

6,direction 文本方向 ,定义文本书写方向

1,ltr从左到右  left to right

2,rtl从右到左

3,inherit继承

p{
/*text-align:left;
font-size:20px;
line-height:50%;  基于字体大小的1/2 行高
text-indent:50%;*/  基于div容器的缩进50%(1/2)
direction:rtl;   定义文本从右开始写
}

7,text-transform文本大小写

text-transform 属性处理文本的大小写。这个属性有 4 个值:

  • none
  • uppercase
  • lowercase
  • capitalize

默认值 none 对文本不做任何改动,将使用源文档中的原有大小写。顾名思义,uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后,capitalize 只对每个单词的首字母大写。

作为一个属性,text-transform 可能无关紧要,不过如果您突然决定把所有 h1 元素变为大写,这个属性就很有用。不必单独地修改所有 h1 元素的内容,只需使用 text-transform 为你完成这个修改:

h1 {

text-transform: uppercase;

}

时间: 2024-10-05 05:07:51

css 文本属性详细总结的相关文章

CSS 文本属性与值

HTML编辑文本,通过CSS的设置属性赋予HTML网页活力,改变文字类型.背景以及插入图片.视频.音频等,使网页更具生动. CSS中的文本属性 font-weight: bold; //改变字体粗细 normal //正常字体.标准字体 font-style:oblique; //字体风格(oblique倾斜) text-decoration:underline; //文字修饰(underline 下划线) overline; (上划线) line-throug; (删除线) none; (取消

CSS文本属性

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

css 颜色属性详细总结

color 属性定义文本的颜色: color :green; color:#ff6600; 简写式: color:#f60 红(R),绿(G),蓝(B)每个的取值范围0-255 color:rgb(255,255,255) RGBA 分别代表 red 红色  ,green 绿色,  Blue 蓝色,Alpha的(色彩进空间)透明 color: rgba(255,255,255,1) css颜色对照编码连接: http://www.360doc.com/content/14/0924/20/108

css 字体属性详细总结

1,font-size属性设置字体的大小 声明: 有能力管理文本的大小在 web 设计领域很重要.但是,您不应当通过调整文本大小使段落看上去像标题,或者使标题看上去像段落. 请始终使用正确的 HTML 标题,比如使用 <h1> - <h6> 来标记标题,使用 <p> 来标记段落. 使用像素来设置字体大小 (px) 通过像素设置文本大小,可以对文本大小进行完全控制: h1 {font-size:60px;} 使用百分比设置字体大小 (%) 父元素的百分比 body{ fo

css边框属性详细总结

元素外边距内就是元素的的边框 (border).元素的边框就是围绕元素内容和内边据的一条或多条线. 边框的样式 (border-style) 样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框. a,css 边框样式分为10种不同的非inherit样式:如下: 统一风格 1,none 无边框 2,solid 直线边框 3,dashed 虚线边框 4,dotted 点状边框 5,double 双虚线边框 6,groov

css 背静属性详细总结

1,背景颜色background-color background-color 不能继承,其默认值是 transparent.transparent 有"透明"之意.也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见. p { background-color: gray;  和普通颜色设置是一样的 } 2.背景的图片background-img background-image: url(图片的路径); background-image: none

css 列表属性详细总结

列表类型(list-style-type) 要影响列表的样式,最简单(同时支持最充分)的办法就是改变其标志类型. 在一个无序列表中,列表项的标志 (marker) 是出现在各列表项旁边的圆点. 在有序列表中,标志可能是字母.数字或另外某种计数体系中的一个符号. 属性值有以下: list-style-type:none无标记 list-style-type:disc默认,标记是实心圆 list-style-type:circle 空心圆 list-style-type:square实心方块 lis

学习css之文本属性

css3之文本属性: 1.缩进和水平对齐:text-indent, 通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值. 这个属性最常见的用途是将段落的首行缩进,下面的规则会使所有段落的首行缩进6 em:p {text-indent:6em;} text-indent 属性可以继承. 2.水平对齐:text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式. 取值范围:{left:把文本排列到左边.默认值:由浏览器决定

项目复习期总结3:CSS引入方式,注释,命名规范,背景,行高,文本属性

目录: 1.CSS注释的书写 怎么写?好处? 2.CSS引入方式  各种的优缺点 3.选择器的写法与选择器的优先级 4.CSS命名规范 5.背景,行高 6.文本(text与font开头)等所有属性 ① CSS注释书写规范: 1.单行注释:    直接写在属性值的后面,如: ① .search{ border:1pxsolid#fff;/*定义搜索输入框边框*/ background:url(../images/icon.gif)no-report#333;/*定义搜索框的背景*/ } ② .wr