CSS3 对文本的基本设置大全

color属性：设置文本文字颜色。用法如下：

color：颜色值;

color属性可以设置的合法颜色值包括：16进制颜色值（例：#ffffff），rgb颜色值【例：rgb(0,0,0)】，rgba颜色值【例：rgb(0,0,0,0.5)，0.5表示透明度】，hsl颜色值【例：hsl(120,65%,75%)】，hsla颜色值【hsl(120,65%,75%,0.3)，0.3表示透明度】。

2、css文本文字行高（行间距）的属性

line-height属性：设置行间的距离（行高）。用法如下：

line-height：值;

具体cssline-height属性是如何设置文本文字的行间距，大家可以参考之前的文章【css如何设置行间距？css文本文字的行间距设置】，希望对大家有所帮助。

3、css设置文本文字的水平对齐方式的属性

text-align属性：设置元素中的文本文字的水平对齐方式。用法如下：

text-align:left||right||center||justify;

left：设置文本文字左对齐。默认值：由浏览器决定。

right：设置文本文字右对齐。

center：设置文本文字居中对齐。

justify：实现两端对齐文本效果。

4、css文本缩进属性

text-indent属性：设置文本缩进。

具体csstext-indent属性是怎样设置文本缩进的，大家可以参考【css如何实现首行缩进效果？text-indent属性实现首行缩进】。

5、设置文本文字装饰效果

text-decoration属性：定义添加到文本的修饰。

说明：

这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。

用法：

text-indent：none||[underline(下划线)||overline(上划线)||line-through(中划线)]||blink;

none：默认值，定义标准的文本。

underline：定义文本下的一条线。

overline：定义文本上的一条线。

line-through：定义穿过文本下的一条线。

blink：定义闪烁的文本。

6、文本字符的大小写转换属性

text-transform属性：控制文本字符的大小写。

用法：

text-transform:uppercase(全大写)||lowercase(全小写)||capitalize(首字母大写)||none;

大家可以参考文章【css如何设置字母的大小写？text-transform属性设置字母的大小写】，里面有具体介绍。

7、文本文字间距的属性

word-spacing属性：设置文字或单词之间的间距，单词之间的间距=word-spacing+空格大小。

letter-spacing属性：设置字母间的间隔。

大家可以参考文章【css如何设置文字间距？word-spacing属性与letter-spacing属性的简单比较】，里面介绍了word-spacing属性和letter-spacing属性设置文本文字的间距的方法，以及它们的区别。

8、文本文字阴影的属性

text-shadow属性：向文本文字设置阴影

9、超出省略隐藏

.box{

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap

}

10、 text-overflow: clip || ellipsis || string

clip:修剪文本

ellipsis:显示省略符号来代表被修剪的文本。

string:使用给定的字符串来代表被

11、 overflow:hidden || visible || scroll || auto || inherit;

visible :默认值。内容不会被修剪，会呈现在元素框之外。

hidden:内容会被修剪，并且其余内容是不可见的。

scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit:规定应该从父元素继承 overflow 属性的值。

12、white-space: normal || pre || nowrap || pre-wrap || pre-line || inherit

normal：默认。空白会被浏览器忽略。

pre：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

nowrap ：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

pre-wrap ：保留空白符序列，但是正常地进行换行。

pre-line ：合并空白符序列，但是保留换行符。

inherit ：规定应该从父元素继承 white-space 属性的值。

.box {

display: -webkit-box;
-webkit-line-clamp: 1;/*控制显示的行数*/
overflow: hidden;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}

CSS3 对文本的基本设置大全相关推荐

css3属性文字换行,CSS3让文本自动换行——word-break属性
1.依靠浏览器让文本自动换行浏览器本身都自带着让文本自动换行的功能. 2.指定自动换行的处理方法在CSS3中,可以使用word-break属性来自己决定自动换行的处理方法. div{ word-b ...
[css] 请说说CSS3实现文本效果的属性有哪些？
[css] 请说说CSS3实现文本效果的属性有哪些? text-shadow:文字阴影效果 word-wrap:换行设置个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷 ...
使用CSS3改变文本选中的默认颜色
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1147 关于浏览器文 ...
常见的Linux查看检索归档文件及vi文本编辑器操作大全
常见的Linux查看检索归档文件及vi文本编辑器操作大全一.Linux目录结构 1.1 树形目录结构 1.2 根目录 1.3 常见的子目录二.查看及检索文件 2.1 查看文件内容 -- cat命令 ...
【CSS3】CSS3文本相关属性大全
说明本文的"文本"相关属性控制的是整段.整个div内文本的显示效果,包括文本文字的缩进.段内文字的对齐方式.文本中空白字符的处理等等,需要掌握. 网页源码 <!DOCTYP ...
html5文本框获取焦点,CSS3实现文本输入框获取焦点高亮显示
有看到一些网站的表单提交页面中,当文本宽获取焦点时会渐渐呈现出高亮显示的效果.本文通过CSS3实现了文本输入框获取焦点高亮显示的效果.代码如下: CSS代码: input[type=text]:foc ...
css文本高亮显示,CSS3:高亮文本选中颜色
关键字: ::selection 为了个性化网站主题,可以对文本高亮背景颜色进行设置. :selection { background: #ffb7b7; /* WebKit/Blink Brows ...
html怎么设置过渡字体,web前端入门到实战：css3基础-文本与字体+转换+过渡+动画+案例...
Css3文本与字体文本阴影 h1 { text-shadow: 5px 5px 5px red; } word-break换行: h1:nth-child(1) { word-break: norm ...
【Word及其他文本工具快捷键大全】
整理由来由于大家日常难免用到Word等工具,由此,我整理了一份快捷工具大全,可以有效提高办公等效率.(部分资料度娘整理) 先写一个关于笔记本电脑的快捷键哈! Windowsl+L,直接回到电脑刚开机 ...

CSS3 对文本的基本设置大全

CSS3 对文本的基本设置大全相关推荐

最新文章

热门文章