文档章节

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

樱楹123
 樱楹123
发布于 2016/05/11 14:36
字数 851
阅读 8
收藏 0

定义和用法

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释:元素可拥有负的 z-index 属性值。

注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!

说明

该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。

默认值: auto
继承性: no
版本: CSS2
JavaScript 语法: object.style.zIndex="1"

可能的值

描述
auto 默认。堆叠顺序与父元素相等。
number 设置元素的堆叠顺序。
inherit 规定应该从父元素继承 z-index 属性的值。

TIY 实例

Z-index

Z-index 可用于将在一个元素放置于另一元素之后。

Z-index

上例中的元素已经更改了 Z-index。

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

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

缩进文本

把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化效果。

CSS 提供了 text-indent 属性,该属性可以方便地实现文本缩进。

通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。

这个属性最常见的用途是将段落的首行缩进,下面的规则会使所有段落的首行缩进 5 em:

p {text-indent: 5em;}

注意:一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。

提示:如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。

使用负值

text-indent 还可以设置为负值。利用这种技术,可以实现很多有趣的效果,比如“悬挂缩进”,即第一行悬挂在元素中余下部分的左边:

p {text-indent: -5em;}

不过在为 text-indent 设置负值时要当心,如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距:

p {text-indent: -5em; padding-left: 5em;}

使用百分比值

text-indent 可以使用所有长度单位,包括百分比值。

百分数要相对于缩进元素父元素的宽度。换句话说,如果将缩进值设置为 20%,所影响元素的第一行会缩进其父元素宽度的 20%。

在下例中,缩进值是父元素的 20%,即 100 个像素:

div {width: 500px;}
p {text-indent: 20%;}

<div>
<p>this is a paragragh</p>
</div>

继承

text-indent 属性可以继承,请考虑如下标记:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}

<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>

© 著作权归作者所有

上一篇: App常用
下一篇: 5.11
樱楹123
粉丝 1
博文 36
码字总数 13041
作品 0
唐山
私信 提问
《Head first HTML与CSS 第二版》读书笔记 第七章 CSS入门

CSS由规则组成,每个规则为选择的HTML元素提供样式。 典型的规则包括一个选择器以及一个或多个属性和值。 选择器指定 规则将应用到哪些元素。 每个属性声明以一个分号结束。 规则中所有属性和...

一万
2016/07/31
56
0
使pre的内容自动换行

<pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 <pre> 标签的一个常见应用就是用来表示计算机的源代码。 而我们经常碰到的...

jims
2016/03/08
44
0
一周一章前端书·第13周:《HTML与CSS进阶教程》S01E02

第2章 语义化 2.1 语义化简介 HTML的精髓在于标签的语义。大部分标签都有它自身的语义,比如标签,表示paragraph,一个段落;,表示header level 1,一级标题。 前端的三大核心技术HTML、CSS...

梁同学de自言自语
2018/01/13
0
0
Cool!15个创意的 CSS3 文本效果

  这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目。其中有些是用于特定用途,而另一些则适用于多种用途。如果你想要一个精彩而又...

爱前端
2017/12/11
0
0
学习web开发,理解HTML,XHTML,XML,CSS,JS等技术的关系后,眼界会更宽(pu...

学习web开发,理解HTML,XHTML,XML,CSS,JS等技术的关系后,眼界会更宽(publish by sunwei) 做了web开发那么久,竟然不知道XHTML和HTML的区别? 是啊,但是也不照样做的好好的吗?但是看了下...

icheer
2012/07/07
162
0

没有更多内容

加载失败,请刷新页面

加载更多

Kafka 原理和实战

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语班)。先后从事过电子商务、开放平...

vivo互联网技术
49分钟前
15
0
java数据类型

基本类型: 整型:Byte,short,int,long 浮点型:float,double 字符型:char 布尔型:boolean 引用类型: 类类型: 接口类型: 数组类型: Byte 1字节 八位 -128 -------- 127 short 2字节...

audience_1
今天
8
0
太全了|万字详解Docker架构原理、功能及使用

一、简介 1、了解Docker的前生LXC LXC为Linux Container的简写。可以提供轻量级的虚拟化,以便隔离进程和资源,而且不需要提供指令解释机制以及全虚拟化的其他复杂性。相当于C++中的NameSpa...

Java技术剑
今天
21
0
Wifiphisher —— 非常非常非常流氓的 WIFI 网络钓鱼框架

编者注:这是一个非常流氓的 WIFI 网络钓鱼工具,甚至可能是非法的工具(取决于你的使用场景)。在没有事先获得许可的情况下使用 Wifiphisher 攻击基础网络设施将被视为非法活动。使用时请遵...

红薯
今天
82
1
MongoDB 4 on CentOS 7安装指南

本教程为CentOS x86_64 7.x操作系统下,MongoDB Community x86_64 4.2(GA)安装指南。 安装方式一:yum repo在线安装 [此方式较为简单,官方推荐] Step1:新建MongDB社区版Yum镜像源。 # vim ...

王焱君
今天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部