首页 > html5+css > css基础知识 > CSS文本样式
2016
12-16

CSS文本样式

一、如果某一个样式被优先级高的给替换掉了,却又想执行这个样式方案,可以将这个方案标记成重要样式(important)。

color:green !important;//强行设置最高优先级

二、样式继承只适用于元素的外观(文字、颜色、字体等),而元素在页面上的布局样式则不会被继承。如果继承这种样式,就必须使用强制继承:inherit。

<p>这是<b>HTML5</b></p>

<style type="text/css">

p {border:1px solid red;}

b {border:inherit;}

</style>

三、字体样式:

如果页面中使用了一个字体,如果用户电脑中没有安装该字体,会使用默认字体,这不是我们想要的结果,那么我们需要引入一个字体来保证没一个用户都能使用我们想要的字体的效果。在css中使用@font-face模块来引入字体:

@font-face {

font-family: 'YourWebFontName'; //自定义引入字体的名称

src:url('../fonts/webfont.woff'),

url('../fonts/webfont.ttf');

font-weight: normal;

font-style: normal;

}

常用的字体格式有fft、otf、woff、eot、svg,其中tff和woff格式浏览器支持比较齐全,但是由于tff文件比较大,不适合网络传输,所以一般使用woff格式,而otf和svg格式IE不支持,eot格式则仅仅IE一个浏览器支持。

font-size:设置字体的大小

font-variant:设置英文字体是否转换为小写字母以小型大写字母显示,有normal和small-caps两个值

font-style:设置字体是否倾斜:normal、italic 表示使用斜体。oblique 表示让文字倾斜,区别在没有斜体时使用。

font-weight:设置字体是否加粗:

normal 表示让加粗的字体恢复正常。

bold 粗体

bolder 更粗的字体

lighter 轻细的字体

100 ~ 900 之间的数字 600 及之后是加粗,之前不加粗

font-family:设置font 字体名称

font:设置字体样式复合写法:格式如下:[是否倾斜|是否加粗|是否转小型大写] 字体大小 字体名称;

文本样式:

text-decoration:装饰文本出现各种划线。

none:让本身有划线装饰的文本取消掉

underline:下划线,让文本的底部出现一条下划线

overline:上划线,让文本的头部出现一条上划线

line-through:删除线,让文本的中部出现一条删除划线

blink:让文本进行闪烁,基本不支持了

text-transform:将英文文本转换大小写。

none:将已被转换大小写的值恢复到默认状态

capitalize:将英文单词首字母大写

uppercase:将英文转换为大写字母

lowercase:将英文转换为小写字母

text-shadow:给文本添加阴影:第一个值:水平偏移;第二个值:垂直偏移;第三个值:阴影模糊度(可选);第四个值:阴影颜色(可选)。

p {text-shadow : 5px 5px 3px black;}

text-align:设置文本对齐方式

left:靠左对齐,默认

right:靠右对齐

center:居中对齐

justify:内容两端对齐

start:让文本处于开始的边界

end:让文本处于结束的边界

text-overflow:控制文本的溢出部分

clip:默认值,裁剪文本时不添加“...”省略号

ellipsis:裁剪文本时添加“...”省略号

注:必须配合不换行overflow:hidden使用。

width:160px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;

vertical-align:设置元素的垂直对齐方式。

baseline:默认。元素放置在父元素的基线上。

sub:垂直对齐文本的下标。

super:垂直对齐文本的上标

top:把元素的顶端与行中最高元素的顶端对齐

text-top:把元素的顶端与父元素字体的顶端对齐

middle:把此元素放置在父元素的中部。

bottom:把元素的顶端与行中最低的元素的顶端对齐。

text-bottom:把元素的底端与父元素字体的底端对齐。

%:使用"line-height"属性的百分比值来排列此元素。允许使用负值。

inherit:规定应该从父元素继承vertical-align属性的值。

white-space:排版中的空白处理方式

normal:默认值,空白符被压缩,文本自动换行

nowrap:空白符被压缩,文本不换行

pre:空白符被保留,遇到换行符则换行

pre-line:空白符被压缩,文本会在排满或遇换行符换行

pre-wrap:空白符被保留,文本会在排满或遇换行符换行

letter-spacing:设置字母之间的间距

word-spacing:设置单词之间的间距

line-height:设置行高

word-wrap:控制过长的英文单词段词:normal:单词不断开;break-word:断开单词

text-indent:设置文本首行的缩进

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。