`

文字的CSS样式

    博客分类:
  • CSS
阅读更多

文字样式

 

font-family。

字体。使用的值是系统中安装的字体的名字,如黑体,Arial。如果字体名字带空格,则需要用引号包住。

 

font-size。

字号。这个不光可以使用绝对值,还可以使用百分比相对值。它是以父标签的绝对值为基准的相对值。建议的做法是在body标签上使用绝对值定义字号,其他标签使用百分比定义字号,这样就可以在不同的浏览器当中显示同样的效果。如:

/* Font size conversion chart 这个是在注释中写明字体大小对应关系

10px = 77%

11px  = 85%

12px  =93%

13px  =100%

14px  =108%

15px  = 116%

16px  =123.1%

17px  =131%

18px  =138.5%

19px  =146.5%

20px  =153.9%

21px  =161.6%

22px  =167%

23px  =174%

24px  =182%

25px  =189%

26px  =197%

*/

body{font-size:13px}

div {font-size: 50%}

 

color

字体颜色

 

text-decoration。

横线。分为上划线overline, 下划线underline, 删除线line-through, 闪烁blink

 

text-transform。 

大小写。单词首字母大写capitalize, 全部大写uppercase, 全部小写lowercase

 

text-indent

text-indent 属性规定文本块中首行文本的缩进。

注释:允许使用负值。如果使用负值,那么首行会被缩进到左边。

注意:在 CSS 2.1 之前,text-indent 总是继承计算值,而不是声明值。

取值:

length定义固定的缩进。默认值:0。

%定义基于父元素宽度的百分比的缩进。

inherit规定应该从父元素继承 text-indent 属性的值。

常用用法:

使用的文本缩进隐藏文字

假如你有一张网站的logo图片,这个图片在h1 标记中。为了SEO,于是我们将文字写到h1标记中,方便搜索引擎阅读,但并不要文字显示,有的人可能会使用“display:none” 将元素隐藏,那么就不得不吧logo图片放在别的标记中,我们使用为text-indent设定负值, 也能达到这个效果.

h1 {

  text-indent:-9999px;

  margin:0 auto;

  width:948px;

  background:transparent url("images/header.jpg") no-repeat scroll;

  }

 

font-weight

字体粗细

normal默认值。定义标准的字符。

bold定义粗体字符。

bolder定义更粗的字符。

lighter定义更细的字符。

100

200

300

400

500

600

700

800

900

定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。

inherit规定应该从父元素继承字体的粗细。

 

font-style

斜体

i. letter-spacing

字母间横向间距

 

word-spacing

单词间横向间距

 

line-height

line-height 属性设置行间的距离(行高)。

注释:不允许使用负值。

说明

该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。

line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

原始数字值指定了一个缩放因子,后代元素会继承这个缩放因子而不是计算值。

 

normal默认。设置合理的行间距。

number设置数字,此数字会与当前的字体尺寸相乘来设置行间距。

length设置固定的行间距。

%基于当前字体尺寸的百分比行间距。

inherit规定应该从父元素继承 line-height 属性的值。

 

white-space

在css中控制文字强制换行或不换行的写法,通常用在td中(也可以在td的html标签中加上nowrap=”nowrap”或nowrap=”true”表示不能换行,nowrap=”false”表示允许换行)。也可以用在div等元素上,控制它的内容

语法:

white-space : normal | pre | nowrap |inherit

取值:

normal默认。空白会被浏览器忽略,文本自动处理换行。假如抵达容器边界内容会转到下一行。

pre换行和其他空白字符都将保留。其行为方式类似 HTML 中的 <pre> 标签。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。

nowrap强制在同一行内显示所有文本,文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

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

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

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

 

word-break

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。 对于中文,属性值应该使用break-all 。 对应的脚本特性为wordBreak。

normal: 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行 

break-all:该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 

keep-all:与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

英文不换行 

 CSS里加上 word-break: break-all; 问题解决。这个问题只有IE才有,在FF下测试,FF可以自己加滚动条,这样也不影响效果 

建议大家做Skin时,记得在body里加 word-break: break-all; 这样可以解决IE的框架被英文撑开的问题

 

text-overflow

text-overflow属性,设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。

取值 : 

clip:不显示省略标记(...),而是简单的裁切。

ellipsis:当对象内文本溢出时显示省略标记(...)。

分享到:
评论

相关推荐

    CSS 凹陷 文字 css 样式

    CSS凹陷文字! 很值得下载看看!资源免费,大家分享!!

    漂亮的网站字体css样式

    字体样式 一下比较漂亮的字体样式,你可以再网页中应用到。

    清除修改删除Vue自带的CSS样式

    清除删除修改Vue自带的CSS样式,在Vue项目中写样式时发现总是出现一些奇怪的样式和字体颜色,后来发现是Vue自带了默认的CSS样式导致的,只要修改Vue自带的CSS样式即可。文件中附有修改样式的css文件以及详细教程。

    CSS样式风格定义

    系统默认提供的CSS样式风格定义 说 明:在《动易网站管理系统》中,CSS样式风格定义是可以自己自由定义的,也说是说您可以自由添加N多个自定义的风格,然后在各频道的版式模板中调用就行了。下面提供的是系统默认...

    HTML5&CSS3网页制作:CSS样式规则.pptx

    CSS核心基础--CSS样式规则 CSS样式 如果希望网页美观、大方,并且升级轻松、维护方便,就需要使用CSS,实现结构与表现的分离。 CSS样式 在HTML编写过程中我们除了应用基本的标签元素还会使用css样式来丰富界面使之有...

    CSS3文字特效艺术文字样式代码.zip

    代码简介:CSS3文字特效艺术文字样式代码是一款超炫的CSS3文字特效集锦特效代码。

    TextView使用HTML处理字体样式、显示图片等

    TextView使用HTML处理字体样式、显示图片等

    jquery实现动态改变css样式的方法分析

    如果是静态的CSS,当然是可以直接写上去的,但有些界面是需要一些动态效果的,比如颜色变化,字体大小变化,甚至DIV 的隐藏于现实等,这些都需要用javascript 动态控制其CSS样式,下面就常用的jquery 控制 css 样式...

    HTML5&CSS3网页制作:CSS控制表单样式.pptx

    使用CSS可以轻松地控制表单控件的样式,主要体现在控制表单控件的字体、边框、背景和内边距等。 CSS控制表单样式 由于form是块元素,重置浏览器的默认样式时,需要清除其内边距padding和外边距margin 使用标记定义...

    [ CSS-CSS3 ] 史上最全CSS样式一览表

    CSS样式一览表CSS样式CSS添加方法CSS选择器CSS样式(I) 文本CSS样式(II) 背景与超链接CSS样式(III) 列表与表格CSS布局与定位盒子模型(I) overflow和border盒子模型(II) padding和marginCSS定位机制 display、float和...

    css样式实例,用法

    css样式实例,用法css样式实例,用法css样式实例,用法css样式实例,用法

    风格清新漂亮的CSS3开关按钮样式

    3款外观风格清新漂亮的CSS3开关按钮样式,基于CSS3的自定义Checkbox开关美化效果,有3D效果和扁平化风格。

    css3恐怖惊悚文字字体样式动画特效

    基于css3制作的一款恐怖惊悚文字字体样式动画特效,万圣节惊悚文字动画特效。

    去掉文字加粗的CSS样式

    这是很实用的CSS样式,是去掉文字加粗的CSS样式。 strong{ color:#000099; /文字的颜色/ font-weight:normal; /去掉加粗样式/ }

    CSS3(上)CSS3是CSS(层叠样式表)技术的升级版本.md

    CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了 CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多 栏布局等模块 [1] 。 CSS演进的...

    CSS重置样式清除浏览器默认样式

    CSS重置样式,清除浏览器默认样式,并配置适合设计的基础样式(强调文本是否大多是粗体、主文字色,主链接色,主字体等)。

    CSSPeeper可视觉化网站CSS样式表

    CSSPeeper是一款专为设计师量身打造的可视觉化网站CSS样式表检查插件 CSSPeeper插件使用方法 1.CSS Peeper插件的安装方法非常简单,在本站或者官网都可以下载CSS Peeper插件,离线安装CSS Peeper插件的方法参照:...

    CSS样式大全.docx

    包含字体属性、背景属性、区块属性、方框属性、列表属性、定位属性、符号属性、连接属性、框线一览、表单运用、边界样式及IE兼容

    HTML5&CSS3网页制作:字体样式属性.pptx

    为了更方便的控制网页中各种各样的字体,CSS提供了一系列的字体样式属性。 6 @font-face属性用于定义服务器字体。 7 word-wrap属性用于长单词和URL地址的自动换行 1 font-size属性用于设置字号。 2 font-family属性...

Global site tag (gtag.js) - Google Analytics