CSS 4.2 样式-文本

CSS 4.2 样式-文本

 

1.文本颜色color

例如:

<style type=text/css>

  body { colorred}

  p.class { colorgreen}

</style>

结果:

 

2.文本首行缩进text-indent,默认为0,即不进行首行缩进。

①text-indent=数值

例如:

<head>

<style type=text/css>

  p { text-indent2em}

</style></head>

<body>

<p>

这是一个段落

这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落

</p>

</body>

结果:

 

解释:

首行空格2汉字宽度;回车视为一个空格;

②数值为负数

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

例如:

p { text-indent-2empadding-left2em}

结果:

 

百分比值???????????

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

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

div {width: 500px;}

p {text-indent: 20%;}

 

<div>

<p>this is a paragragh</p>

</div>

 

3.文本对齐text-align,默认左对齐

格式:p{text-alignleftrightcenterjustifyinherit}

justify两端对齐,inheritIE不支持)继承父元素参数。

结果:

 

注:justifyIE中不正确,在火狐看就两端对齐啊,是ie浏览器代码有兼容性问题

 

4.字间隔word-spacing,默认0

例如:p { word-spacing1em}

结果:

 

注:1em是一汉字的宽度,1汉字=2字母宽度,1字母即1ex

 

5.字母间隔letter-spacing,默认0

例如:p { letter-spacing1em}

结果:

 

 

6.字符转换text-transform,默认none

格式:p { text-transformnoneuppercaselowercasecapitalize}

解释:uppercase全大写;lowercase全小写;capitalize首字母大写

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

 

7.文本装饰 text-decoration,默认none

格式:p { text-decorationnoneunderlineoverlineline-throughblink}

underline下划线;overline上划线;line-through贯穿线;blink闪烁

效果:

 

1IEChromeSafari不支持 "blink"属性值,所以只有在 FirefoxOpera下支持这 CSS实现在闪动效果。

2:可以p{text-decorationunderline overline}叠加,效果上下划线都有。

3:若body{text-decorationunderline}p{text-decorationline-through},结果p会叠加

4:但是若:p{text-decoration:underline;} p.class{text-decoration:overline;}p.class不会叠加,只有一个属性overline

5:但是若:p{text-decoration:underline;} p{text-decoration:underline;} p不会叠加,选择后边的属性定义。

 

8.处理空白符white-space,默认normal空白会被浏览器忽略。

格式:

white-space

normal空白会被浏览器忽略。n个空格+n个换行=一个空格

pre保留空白

nowrap禁止自动换行,知道遇到<br/>

pre-wrap保留空白,但是正常地进行换行。

pre-line合并空白,但是保留换行。

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

1prepre-wrap的区别

pre-wrap类似pre,区别在于<pre>标签来显示非常规的格式化内容,或者某类计算机代码所以prepre-wrap的区别就在于他们对于一些符号上的支持和规范。

2:任何的版本的 Internet Explorer (包括IE8)都不支持属性值"inherit"

 

9.文本方向direction

格式:directionrtl(右到左)或ltr(左到右)或inherit

 

10.行间距line-height

格式:line-height:百分比(默认100%)像素(大多数浏览器中默认行高大约是20px)或数字(默认1

例如:

line-height50%等价于10px等价于0.5

line-height200%等价于40px等价于2

结果:

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值