文字样式
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凹陷文字! 很值得下载看看!资源免费,大家分享!!
字体样式 一下比较漂亮的字体样式,你可以再网页中应用到。
清除删除修改Vue自带的CSS样式,在Vue项目中写样式时发现总是出现一些奇怪的样式和字体颜色,后来发现是Vue自带了默认的CSS样式导致的,只要修改Vue自带的CSS样式即可。文件中附有修改样式的css文件以及详细教程。
系统默认提供的CSS样式风格定义 说 明:在《动易网站管理系统》中,CSS样式风格定义是可以自己自由定义的,也说是说您可以自由添加N多个自定义的风格,然后在各频道的版式模板中调用就行了。下面提供的是系统默认...
CSS核心基础--CSS样式规则 CSS样式 如果希望网页美观、大方,并且升级轻松、维护方便,就需要使用CSS,实现结构与表现的分离。 CSS样式 在HTML编写过程中我们除了应用基本的标签元素还会使用css样式来丰富界面使之有...
代码简介:CSS3文字特效艺术文字样式代码是一款超炫的CSS3文字特效集锦特效代码。
TextView使用HTML处理字体样式、显示图片等
如果是静态的CSS,当然是可以直接写上去的,但有些界面是需要一些动态效果的,比如颜色变化,字体大小变化,甚至DIV 的隐藏于现实等,这些都需要用javascript 动态控制其CSS样式,下面就常用的jquery 控制 css 样式...
使用CSS可以轻松地控制表单控件的样式,主要体现在控制表单控件的字体、边框、背景和内边距等。 CSS控制表单样式 由于form是块元素,重置浏览器的默认样式时,需要清除其内边距padding和外边距margin 使用标记定义...
CSS样式一览表CSS样式CSS添加方法CSS选择器CSS样式(I) 文本CSS样式(II) 背景与超链接CSS样式(III) 列表与表格CSS布局与定位盒子模型(I) overflow和border盒子模型(II) padding和marginCSS定位机制 display、float和...
css样式实例,用法css样式实例,用法css样式实例,用法css样式实例,用法
3款外观风格清新漂亮的CSS3开关按钮样式,基于CSS3的自定义Checkbox开关美化效果,有3D效果和扁平化风格。
基于css3制作的一款恐怖惊悚文字字体样式动画特效,万圣节惊悚文字动画特效。
这是很实用的CSS样式,是去掉文字加粗的CSS样式。 strong{ color:#000099; /文字的颜色/ font-weight:normal; /去掉加粗样式/ }
CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了 CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多 栏布局等模块 [1] 。 CSS演进的...
CSS重置样式,清除浏览器默认样式,并配置适合设计的基础样式(强调文本是否大多是粗体、主文字色,主链接色,主字体等)。
CSSPeeper是一款专为设计师量身打造的可视觉化网站CSS样式表检查插件 CSSPeeper插件使用方法 1.CSS Peeper插件的安装方法非常简单,在本站或者官网都可以下载CSS Peeper插件,离线安装CSS Peeper插件的方法参照:...
包含字体属性、背景属性、区块属性、方框属性、列表属性、定位属性、符号属性、连接属性、框线一览、表单运用、边界样式及IE兼容
为了更方便的控制网页中各种各样的字体,CSS提供了一系列的字体样式属性。 6 @font-face属性用于定义服务器字体。 7 word-wrap属性用于长单词和URL地址的自动换行 1 font-size属性用于设置字号。 2 font-family属性...