css 之 文本缩进属性(text-indent)
文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html
查看更多更专业性的文章请到:网页设计网
文本缩进属性(text-indent)
这个属性设定文本首行缩进。其值有以下设定方法:
· length (长度,可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px))
· percentage (百分比,相当于父对象宽度的百分比)
示例代码如下:
.p1 {text-indent: 8mm}
<html>
<head>
<title>文本缩进属性 text-indent</title>
<style type="text/css">
.p1 {text-indent: 8mm}
.d1 {width:300px}
.p2 {text-indent:50%}
</style>
</head>
<body>
<p>下面两端都设定CSS文本缩进属性(text-indent),第一段用长度方法设值,第二段用百分比方法设值。</p>
文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html
查看更多更专业性的文章请到:网页设计网
<p class = "p1">芙蓉姐姐说道:“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。我总是很焦点。我那张耐看的脸,配上那副火爆得让男人流鼻血的身体,就注定了我前半生的悲剧。”</p>
<div class = "d1">
<p class = p2>芙蓉姐姐说道:“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。我总是很焦点。我那张耐看的脸,配上那副火爆得让男人流鼻血的身体,就注定了我前半生的悲剧。”</p>
</div>
</body>
</html>
行高属性(line-height)
这个属性设定每行之间的距离。其值有以下设定方法:
· normal (缺省值)
· length (长度,可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px))
· percentage (百分比,相当于父对象高度的百分比)
示例代码如下:
.p1 {line-height:1cm}
<html>
<head>
<title>行高属性 line-height</title>
<style type="text/css">
.p1 {line-height:1cm}
.p2 {line-height:2cm}
</style>
</head>
<body>
<p class = "p1">这个段落的CSS行高属性(line-hight)值为1cm,即每行之间的距离是1厘米。</p>
<p class = "p2">这个段落的CSS行高属性(line-hight)值为2cm,即每行之间的距离是2厘米。</p>
</body>
</html>
字间距属性(letter-spacing)
这个属性用来设定字符之间的距离。
· normal (缺省值)
· length (长度,可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px))
示例代码如下:
.p1 {letter-spacing: 3mm}
<html>
<head>
<title>字间距属性 letter-spacing</title>
<style type="text/css">
.p1 {letter-spacing: 3mm}
</style>
</head>
<body>
<p>这段没有设置字间距属性(letter-spacing)。</p>
<p class = "p1">这段设定字间距属性(letter-spacing)值为3毫米。</p>
</body>
</html>
颜色属性(color)
用颜色属性(color)可以改变文本的字体颜色。字体颜色代码请参见HTML颜色参考(HTML Color Reference)。示例代码如下:
.p1{color:gray}
CSS背景属性
背景颜色属性(background-color)
这个属性为HTML元素设定背景颜色,相当于HTML中bgcolor属性。
文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html
查看更多更专业性的文章请到:网页设计网
body {background-color:#99FF00;}
上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。
<html>
<head>
<title>背景颜色 background-color</title>
<style type="text/css">
body {background-color:#99FF00;}
</style>
</head>
<body>
<p>这个HTML使用了CSS的background-color属性,将HTML的背景颜色变成翠绿色。<p>
</body>
</html>
背景图片属性(background-image)
这个属性为HTML元素设定背景图片,相当于HTML中background属性。
<body style="background-image:url(../images/css_tutorials/background.jpg)">
上面的代码为Body这个HTML元素设定了一个背景图片。
<html>
<head><title>背景图片background-image</title></head>
<body style="background-image:url(../images/css_tutorials/background.jpg)">
<p>这个HTML使用了CSS的background-image属性,设置了背景图片。<p>
</body>
</html>
背景重复属性(background-repeat)
这个属性和background-image属性连在一起使用,决定背景图片是否重复。如果只设置background-image属性,没设置background-repeat属性,在缺省状态下,图片既横向重复,又竖向重复。
· repeat-x 背景图片横向重复
· repeat-y 背景图片竖向重复
· no-repeat 背景图片不重复
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y}
上面的代码表示图片竖向重复。
<html>
<head>
<title>背景重复 background-repeat</title>
<style type="text/css">
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y}
</style>
</head>
<body>
<p>这个HTML使用了CSS的background-repeat属性,使背景图片竖向重复。<p>
<p>常用的background-repeat的属性值有: repeat-x(横向重复),repeat-x(横向重复), no-repeat(不重复)。</p>
<p>background-repeat属性要和background-image一起用。</p>
</body>
</html>
文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html
查看更多更专业性的文章请到:网页设计网
css 之 文本缩进属性(text-indent)的更多相关文章
- 复习-css控制文本字体属性
css控制文本字体属性 font-family:字体系列,如”serif“”sans-serif“ font-size:尺寸 font-style:字体样式,如“normal,italic(斜体).o ...
- css 文本外观属性(text) 和 字体样式属性(font)
css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距 对中文无效 line ...
- 关于css禁止文本复制属性
最近在做DHTMLX框架替换,新框架dhx的grid是不能选中内容复制的 虽然相对来说是安全些的,但是客户体验度一定会大打折扣 网页上禁止复制主要靠JavaScript来实现.<BODY onc ...
- 三、CSS样式——文本
CSS文本 概念:CSS文本属性可定义文本外观 通过文本属性,可以改变文本的颜色.字符间距.对齐文本.装饰文本.对文本缩进 属性 描述 color 文本颜色 direction 文本方向 line-h ...
- 关于html与css的标签及属性(text文本属性、背景background属性、表格标签table、列表、)
text文本属性1.颜色 colorcolor:red: 2.文本缩进text-indant属性值 num+px text-indant:10px:3.文本修饰 text-decoration属性值: ...
- css中的字体及文本相关属性
css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...
- css常用文本属性
[CSS常用文本属性] 1. 字体.字号类: ① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal, ...
- CSS中的字体属性和文本属性
1.CSS字体的属性 font 简写,作用是把所有的针对字体的属性设置在一个声明中 font-family 设置字体系列 font-size 设置字体尺寸 font-style 设置字体风格,ital ...
- jq选择器(jq 与 js 互相转换),jq操作css样式 / 文本内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息
jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...
随机推荐
- Cocos2d-x 核心概念 - Node中的重要操作
作为跟类,Node有很多的重要的函数 local childNode = cc.Node:create() --创建节点 node:addChildNode(childNode,0,123) --创建 ...
- ubuntu服务管理
uRedhat 提供了chkconfig这个命令来管理系统在不同运行级别下的服务开启/关闭: chkconfig ServiceName on/off 并可以用chkconfig --list(两个杠 ...
- Git_1基础操作,从安装到提交完成(windows)
github地址:https://github.com/zhangsai521314/Git 1:安装Git Bash(https://git-scm.com/),安装一路NEXT. 2:目录架构: ...
- sql 查看某用户的连接数 以及 如何删除该用户的会话
--查看不同用户的连接数 select TERMINAL from v$session where username='username' and machine='machine' ---查询用户会 ...
- wampserver配置问题
WAMPServer一些设置的问题 一.WAMPServer修改www目录路径 默认装好WAMPServer之后,会发现www目录路径是在wamp/www目录下,但是这样不满足个人的需求,我想把www ...
- Modbus RTU程序开发解读
Modbus是很好的串口通信协议,其中RTU协议最为常用,通过Modbus RTU,我们可以轻松读写串口信息. 从官网下载libModbus,观察modbus.h可知关键的结构体为: typedef ...
- 7 -- Spring的基本用法 -- 6...
7.6 Spring 3.0 提供的Java配置管理 Spring 允许使用Java类进行配置管理,可以不使用XML来管理Bean,以及Bean之间的依赖关系. Interface :Person p ...
- nullable,nonnull, null_resettable以及_Null_unspecified的区别和使用
1.关键字:可以用于属性 方法和返回值参数中 关键字作用:提示作用 告诉开发者属性信息 关键字的目的:迎合swift 强语言,swift必须要指定一个对象是否为空 关键字好处:提高代码规划,减少沟通 ...
- Jquery mobile 新手问题总汇
1页面缩放显示问题 问题描述: 页面似乎被缩小了,屏幕太宽了. 解决办法: 在head标签内加入: <meta name="viewport" content="w ...
- C++中的一些小知识
判断字符是否为数字 在C/C++中有isdigit()来判断一个字符是否为数字 原型:int isdigit(char c); 用法:#include <ctype.h> (C语言):#i ...