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,数值 来设置固定值

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


3,text-indent 首行缩进

% 父元素的百分比

px 固定值 ,默认为0

inherit 继承

1
2
3
4
5
6
7
8
9
10
11
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

1
2
3
4
5
6
h1 {
letter-spacing: -0.5em
}
h4 {
letter-spacing: 20px
}


5,word-spacing 单词间距 

定义英文单词之间的间距

1,normal 标准

2,px设置固定值

3.inherit

1
2
3
4
5
6
h1 {
word-spacing: -0.5em
}
h4 {
word-spacing: 20px
}

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

1,ltr从左到右  left to right

2,rtl从右到左

3,inherit继承

1
2
3
4
5
6
7
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;

}






      本文转自crazy_charles 51CTO博客,原文链接:http://blog.51cto.com/douya/1840865,如需转载请自行联系原作者

相关文章
|
9月前
|
前端开发
css的渐变属性linear-gradient
css的渐变属性linear-gradient
|
4月前
|
前端开发
Css实现文本超出长度隐藏并用三个点结尾
Css实现文本超出长度隐藏并用三个点结尾
104 17
|
9月前
|
前端开发
CSS属性:盒子模型
CSS属性:盒子模型
76 0
|
9月前
|
前端开发
CSS属性
CSS属性
70 0
|
7月前
CSS3几何透明层文本悬停变色源码
CSS3几何透明层文本悬停变色源码是一款基于css3 svg制作的背景图片鼠标悬停几何形状透明层变色显示文本内容
36 0
CSS3几何透明层文本悬停变色源码
|
7月前
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性,包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流,向左或右排列,周围元素随之调整。文章还详细讲解了清除浮动的方法,如使用clear属性、设置父元素高度、利用overflow属性、伪元素等,以解决因浮动导致的布局问题。最后,强调了浮动在创建复杂布局时的作用,并预告后续内容。
196 2
|
7月前
|
前端开发
CSS transition过渡属性详解
本文介绍了CSS中`transition`属性的作用、用法及实例。`transition`用于在元素属性变化时添加平滑过渡动画,通过设置`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`等属性值,可以精细控制过渡效果。文末提供了HTML示例代码,展示了如何使用`transition`实现鼠标悬停时背景颜色的平滑变化。
368 1
|
7月前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
138 1
|
9月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
317 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
8月前
|
前端开发
CSS 中哪些属性可以继承
在 CSS 中,属性分为可继承与不可继承。可继承属性会在子元素中沿用父元素的样式设定。常见可继承属性包括:文本属性(如 `font-family`, `color`),列表属性(如 `list-style`),表格布局属性(如 `border-collapse`),以及其他如 `visibility` 和 `direction` 等属性。正确理解这些属性有助于更高效地进行样式设计。