CSS3的文本特性

CSS3 文本
在Web页面或者Web应用程序中设置文本样式是CSS最基本的要求, 早期的CSS文本功能就是给Web页面设置文本的字体、字号、颜色、样式、粗细、间距等。 随着CSS3的出现,文本功能不仅仅局限于这些基本的运用,它给文本功能添加了一些高级的属性设置, 如文本阴影属性text-shadow、文本自动换行属性word- break、 长单词与URL地址自动换行属性word-wrap和文本溢出属性text-overflow等,在 CSS文本功能上主要分为三大类: 字体、 颜色和文本,text-shadow 属性一共包含4个属性参数, 每个属性参数都具有自己的作用。
-color:阴影颜色,定义绘制阴影时所使用的颜色,这个参数可以放在第一也可以放在最后,是一个可选参数,如果没有显式设置阴影颜色,会使用文本的颜色作为阴影颜色。 阴影颜色可以是颜色关键词、十六进制颜色、RGB颜色、RGBA透明色等。
-x-offset: X轴位移, 用来指定阴影水平位移量,其值可以是正负值,如果为正值,阴影在对象的右边,反之阴影在对象的左边。
-y-offset: Y轴位移, 用来指定阴影垂直方向偏移量,其值可以是正负值,如果为正值,阴影在对象的底部,反之阴影在对象的顶部。
-blur-radius: 阴影模糊半径,可选参数,用来设置阴影的模糊半径,代表阴影向外模糊的模糊范围。这个值越大,阴影向外模糊的范围越大,阴影的边缘就越 模糊。不过这个值只能是正值,其值为0时,表示阴影不具有模糊效果。
可以使用text-shadow属性来给文本指定多个阴影, 并且针对每个阴影使用不同颜色。 指定多个阴影时使用逗号将多个阴影进行分隔。 text- shadow 多阴影效果按照给定的顺序应用, 因此前面的阴影有可能会覆盖后面的, 但是它们永远会覆盖文本本身。

  1. CSS3 溢出文本
    CSS3溢出文本属性平时在网页制作中一定碰到过内容溢出的问题, 如文章列表标题很长, 而其宽度又受到限制, 此时超出宽度的内容就会以省略 标记(…) 显示。 以前实现这样的效果都是由后台程序截取一定的字符数在前台输出,另外一种方法就是使用JavaScript截取一定的字符数实现。可是这两种方法都有其 不足之处,如中文和英文的计算字符宽度的问题,这个值不好计算,所以造成截取字符数不好控制,从而其通用性也差。 CSS3新增了text-overflow 属性, 使得 这个问题迎刃而解。
    text-overflow 属性参数比较简单, 只有两个属性值。
    -clip: 不显示省略标记(…), 只是简单的裁切。
    -ellipsis: 文本溢出时显示省略标记(…),省略标记插入的位置是最后一个字符。
    强制文本在一行显示( white- space: nowrap)和溢出内容隐藏(overflow: hidden),并且需要定义容器的宽度。
    text-overflow: ellipsis; overflow: hidden; 有省略号,需要这两个属性配合才有效,
    text-overflow: clip; overflow: hidden; 直接隐藏,需要这两个属性配合才有效,
  2. CSS3 文本换行
    http:/ /www.iis7.com/b/wzjk/
    在CSS3中,使用word-wrap:break-word属性实现长单词与URL地址的自动换行。
    -break-all:可以强行截断英文单词, 达到词内换行效果。
    -keep-all:不允许字断开。如果是中文把前后标点符号内的一个汉字短语整个换行,英文单词整个换行;如果出现某个英文字符长度超过容器边界,后面的部分将撑破容器; 如果边框为固定属性, 则后面部分无法显示。
    white-space 属性主要用来声明建立布局过程中如何处理元素中的空白符。
    white-space 属性取值简单说明如下:
    -normal: 默认值。 空白处会被浏览器忽略。 可以通过这个值恢复到属性的默认值。
    -pre: 文本空白处会被浏览器扣留,其行为方式类似于HTML中的<pre>标签效果。
    -nowrap: 文本不会换行,文本会在同一行上,直到碰到换行标签<br/>为止。
    -pre- line: 合并空白符序列,但保留换行符,此属性不支持 IE 7. 0-、 Firefox 3. 0- 和 Opera 9. 2- 以下版本浏览器。
    -pre- wrap: 保留空白符序列, 但是正常进行换行, 此属性值不支持 IE 7. 0 和 Firefox 3. 0 以下 版本浏览器。
    -inherit: 继承父元素的white-space 属性值, 此属性值在所有的 IE浏览器都不支持。

原文地址:http://blog.51cto.com/13941970/2293820

时间: 2024-10-12 16:29:49

CSS3的文本特性的相关文章

css3的三大特性以及移动端说明

css3的三大特性: 一.层叠性 所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉 比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突. 一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准. 样式冲突,遵循的原则是就近原则. 那个样式离着结构近,就执行那个样式. 样式不冲突,不会层叠 CSS最

CSS3的新特性 行内盒子before和after

CSS3的新特性 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>before after</title> 6 <style type="text/css"> 7 /*在DIV1盒子内部前面*/ 8 #div1:before{ 9 width: 100p

使用CSS3改变文本选中的默认颜色——张鑫旭

关于浏览器文字选中颜色 以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色,如下图所示,截自Firefox3.6浏览器: 在CSS3的爸爸妈妈还没有相亲认识的时候,要改变页面上文字选中后的背景色以及文字颜色,就跟让太监生孩子一样困难.但是,随着CSS3呱呱落地,获得越来越多的浏览器认可,一切又显得那么自然而然.虽然有些顽固的糟老头(如IE浏览器)还不认可这个新生的CSS3,但是,丝毫不影响其在其他浏览器上对

CSS3新增文本属性详述

CSS文本属性复习 1.white-space:对象内空格的处理方式 2.direction:文本流的方向 3.unicode-bidi:用于同一个页面里存在从不同方向读进的文本显示.与direction属性一起使用 1.white-space:对象内空格的处理方式 nowrap 控制文本不换行 pre 空白会被浏览器保留 normal 默认状态 pre-line 合并空白 保留换行符 pre-wrap 保留空白 正常换行 nowrap经常配合text-overflow一起使用,使得超出部分显示

css3的新特性选择器-------属性选择器

自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结 <div id="parent"> <p>I'm a example</p> <p id="one">I'm a example</p> <p>I'm a example</p> <p>I'm a example</p> <p>I'm a exa

CSS3新增文本属性实现图片点击切换效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="关键词"> <meta name="Description" content="描述"> <title>CSS3新增文

css3美化文本框提示特效代码下载

原文:css3美化文本框提示特效代码下载 源代码下载:http://www.zuidaima.com/share/1550463334386688.htm 源代码截图:

CSS3新增文本属性

CSS2中常用的属性: text-indent:首行缩进: vertical-align:垂直对齐方式: white-space:空格处理方式: line-height:设置行高: CSS3新增文本属性: text-overflow: clip:溢出的部分裁切掉: ellipsis:显示省略标记(...)  //该属性需要和over-flow:hidden属性(超出处理)还有white-space:nowrap(禁止换行)配合使用,否则无法看到效果. text-align: 原有属性:left

一张图搞定CSS3全部新特性【king】

最近这张图火了,让我火遍了大江南北,震惊了整个CSS圈 一张思维导图搞定CSS3全部新特性(图片太大,切片上传) 原图下载地址 配套CSS3实战视频地址 由king老师历时一个月,精心收集与整理的CSS3全部新特性的素材,包括国外资源.辅助工具.项目素材.实战案例...就不一一列举了,好不好看了就知道,兄弟姐妹们,顶起哈~ 山哥出品,必属精品 Powered By King 原文地址:https://www.cnblogs.com/jlfw/p/12219688.html