CSS字体与段落属性

转载 2015年11月17日 16:57:49

一、字体属性

1.字体font-family

语法:{font-family:name}

使用字体名称,按优先顺序排列,以逗号隔开,如果字体名称包含空格,则应使用引号括起。

P{

font-family:华文彩云,黑体,宋体

}

P{

font-family:¡±Times New Roman¡±

}

2.字号font-size

{font-size: 数值 | xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length }

属性值 含义
xx-small 最小,绝对字体尺寸,根据对象字体进行调整
x-small 较小,绝对字体尺寸,根据对象字体进行调整
small 小,绝对字体尺寸,根据对象字体进行调整
medium 正常,默认值,绝对字体尺寸,根据对象字体进行调整
large 大,绝对字体尺寸,根据对象字体进行调整
x-large 较大,绝对字体尺寸,根据对象字体进行调整
xx-large 最大,绝对字体尺寸,根据对象字体进行调整
larger 相对字体尺寸,相对于父对象中的字体尺寸进行相对增大,使用成比例的em单位计算
smaller 相对字体尺寸,相对于父对象中的字体尺寸进行相对减小,使用成比例的em单位计算
length 百分数或由浮点数字和单位标识符组成的长度值,不可为负值。其百分比取值基于父对象中字体的尺寸。

3.字体风格font-style

{font-style: normal | italic | oblique | inherit}

4.加粗字体font-weight

{font-weight: 100-900 | bold | bolder | lighter | normal }

5.小写字母转为大写字母font-variant

{font-variant: normal | small-caps | inherit}

6.字体复合属性font

可以一次性地使用多个属性的属性值定义文本字体。

{font: font-style font-variant font-weight font-size font-family}

属性排列顺序如上,各属性属性值使用空格隔开。

font-size font-family必须按照固定的顺序出现,而且还必须都出现在font属性中,如果顺序不对,或缺少一个,那么,整条样式规则可能会被忽略。

7.字体颜色color

属性值 含义
Color_name 规定颜色值为颜色名称的颜色
Hex_number 规定颜色值为十六进制值的颜色
Rgb_number 规定颜色值为RGB代码的颜色
inherit 规定应该从付原色继承颜色
Hsl_number 规定颜色值为HSL代码的颜色
Hsla_number 规定颜色值为HSLA代码的颜色
Rgba_number 规定颜色值为RGBA代码的颜色

8.阴影文本text-shadow

{text-shadow: none | none | [,] *  none | [,]*}

4 个属性值,最后两个是可选的,第一个值表示阴影的水平位移,可取正负值;第二个值表示阴影的垂直位移,可取正负值;第三个值表示阴影模糊半径,该值可选;第四个值表示阴影颜色值,该值可选。

属性值 含义
  指定颜色
  由浮点数字和单位标识符组成的长度值,可为负值,指定阴影的水平延伸距离
  由浮点数字和单位标识符组成的长度值,不可为负值,指定模糊效果的作用距离。如果仅需要模糊效果,将前两个length全部设定为0

二、段落属性

1.单词间隔word-spacing

{word-spacing: normal | length}

2.字符间隔letter-spacing

3.文字修饰text-decoration

{text-decoration : none | underline | blink | overline | line-through}

4.垂直对齐vertial-align

属性值 含义
baseline 默认值,元素放置在父元素的基线上
sub 垂直对齐文本的下标
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部
bottom 把元素的顶端与行中最低元素的顶端对齐
text-bottom 把元素的顶端与父元素字体的底端对齐
% 使用“line-height”属性的百分比值来排列此元素,允许使用负值

  水平对齐text-align

只能用于文本块,不能直接应用到图像标记<img>。如果要使图像同文本一样应用对齐方式,那么就必须将图像包含在文本块中。
属性值 含义
start 文本向行的开始边缘对齐
end 文本向行的结束边缘对齐
left 文本向行的左边缘对齐。在垂直方向的文本中,文本在left-to-right模式下向开始边缘对齐
right 文本向行的右边缘对齐。在垂直方向的文本中,文本在left-to-right模式下向开始边缘对齐
center 文本在行内居中对齐
justify 文本根据text-justify的属性设置方法分散对齐。即两端对齐,均匀分布
match-parent 继承父元素的对齐方式,但有个例外:继承的start或者end值是根据父元素的direction值进行计算的,因此计算的结果可能是left或者right
  是单个字符,否则,就忽略此设置。按指定的字符进行对齐。此属性可以跟其他关键字同时使用,如果没有设置字符,则默认值是end方式
inherit 继承父元素的对齐方式

5.文本缩进text-indent

text-indent:length

6.文本行高lint-height

*用来设置行间距,即行高。
line-height: normal | length

CSS设置文字和段落属性

字体属性: Color: 颜色名称/十六进制/RGB码  #FFF和#FFFFFF都表示白色   Font-family:字形名称/字形名称.... 可以有多个字形,但只取一个,从头开始选直到...
  • manREDoo
  • manREDoo
  • 2017年06月30日 07:56
  • 365

css网页布局中文字排版的属性和用法

前段时间,学习了几个大的网站的图文混排的方法。今天总结下,css网页布局中文字排版的相关属性以及用法。包括:设定字体、颜色、大小、段落空白,首字下沉、首行缩进、中文字的截断、固定宽度词内折行(word...
  • judyge
  • judyge
  • 2016年07月18日 15:09
  • 423

CSS控制的文字段落左右对齐的样式

两端对齐 英文对齐: ¨Crepower¨ Brand Belts, Chains and other Transmission Parts are manufactured under ISO900...
  • songkexin
  • songkexin
  • 2007年08月26日 14:34
  • 5698

HTML+CSS段落样式排版设置

在遇到网页段落文字需要首行缩进两个字符时,为了方便,有时我们可以选择利用多个空格符( )来实现。但是当网页内容需要更新或者网页段落较多时,我们再利用空格符来对每一段落进行缩进显然是不方便的,...
  • chenlinwei5
  • chenlinwei5
  • 2017年01月16日 21:29
  • 649

CSS+DIV网页样式与布局——文字样式&段落(一)

一个网页要说最多的还是文字,上篇博客说CSS样式是一个网页的精髓,那网页中最直接表现出来的就是文字和图片,还有一些所谓的表单,首先先说最为熟悉和常用的文字。让CSS控制网页中的文字,使它不再那么枯燥平...
  • xdd19910505
  • xdd19910505
  • 2015年02月06日 17:04
  • 1769

CSS+DIV网页样式与布局——文字样式&段落 (二)

承接上篇文章,本文小编为您继续书写文字段落的相关内容。 这就像是我们的一种习惯,在写文章时严格注意段落的形式,就好比我们自己写的文章,博客等,要是上来就是一整片的大段落,相信是没...
  • xdd19910505
  • xdd19910505
  • 2015年02月06日 17:01
  • 1676

css字体属性

Author: Jorux/Bluecssr Posted on: September 11, 2006 Filed under: Web Design Comments: 18 Responses ...
  • yethyeth
  • yethyeth
  • 2007年02月28日 00:18
  • 2608

3、 格式化文字和段落

一、复习: 1、HTML文档结构,有两部分组成 2、head里包含的内容(重点复习!!) 3、body里的内容 4、html基本语法,标记类型,属性语法,注释方式 5、命名规范...
  • bluechen10
  • bluechen10
  • 2015年09月10日 14:50
  • 254

HTML/CSS之段落排版

中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现: p{text-indent:2em;},在head头里面写上下面的代码 p{text-indent:2em;} 注意...
  • u012110719
  • u012110719
  • 2014年12月13日 11:04
  • 1881

HTML5的段落和文字样式设置

HTML5的段落和文字的样式设置。
  • manREDoo
  • manREDoo
  • 2017年06月25日 19:02
  • 1716
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS字体与段落属性
举报原因:
原因补充:

(最多只允许输入30个字)