(7)-HTML5-CSS文字样式

原创 2016年08月29日 20:54:40

在文字的css样式中又可以区分为两大类。其一是字体(font)。主要规范文字的外观,例如字体,大小,粗体,斜体等等。其二是文字(text),主要用于文字的排版,例如对齐,字距,行距等等。

字体常见属性有:

font-family(字体)

font-style(斜体)

font-weight(粗体)

font-size(大小)

==============================================================================

{font-family}

属性font-family是用来指定字体的属性,例如可以指定字体为“Arial”,“Times New Roman”或“黑体”等。之所以会称为“family”是因为可以设置一组字体列表,当游戏加载的时候会按照这组列表“依次”选用字体。当目前载体没有安装第一顺位的字体时,就会自动选用第二顺位的字体显示。

html文件

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<p class="font1">text1</p>
	<p class="font2">text2</p>
</body>
</html>

css文件

.font1 {font-family:impact,arial;}
.font2{font-family:xx,arial;}

<font-style>

属性font-style用来决定字体要以normal(正常),italic(斜体)或oblique(斜体)显示。

CSS文件

.font1{font-style:italic;}
.font2{font-style:oblique;}

{font-weight}

属性font-weight用来指定字体显示的粗细,可以选择normal(正常)或bold(粗体),也可以用100到900之间的数值表示。

CSS文件

.font1{font-weight:bold;}
.font2{font-weight:500;}

{font-size}

属性font-size用来指定字体显示的大小,可以通过多种不同的单位,例如像素(px),百分比(%)等。

CSS文件

.font1{font-size:9px;}
.font2{font-size:150%;}

{font}

属性font可以简化字体声明的程序行数,例如四种font属性样式,通过font就可以缩写成一行指令既可以完成。但是需要注意font后面的属性必须按照《font-style》,《font-variant》,《font-weight》,《font-size》,《font-family》的顺序排列,若无需设置的属性可以跳过。

CSS文件

.font1{
	font-style:italic;font-weight:blod;font-size:16px;font-family:impact;
}

使用font缩写:

.font1{
	font:italic bolf 16px impact;
}

文字(text)

文字主要用于字体的排列设置,例如方向,对齐方式,字距,行距等,常用的属性包括:

Direction(文字方向)

letter-spacing(字母间距)

line-height(行高)

text-align(对齐方式)

text-decoration(划线方式)

text-indent(第一行空格)

text-transform(字母大小写)

word-spacing(单字间距)

===============================================================================

{direction}

属性direction用来决定文字的方向,可以设置从左开始阅读“LTR”与从右开始阅读“LTR”与从右开始阅读“RLT”两个值。

CSS文件

.font1{direction:LTR;}
.font2{direction:RTL;}


{letter-spacing}

属性letter-spacing用来决定字符与字符之间的距离(字距),单位用px,值设置越大则字母与字母间的距离越大。

CSS文件

.font1{letter-spacing;}
.font2{letter-spacing;}


{line-height}

属性line-height用来决定行与行之间的距离(行距),单位使用px,值越大则行与行之间的距离也越大。

CSS文件

.font1{line-height:12px;}


{text-align}

属性text-align用于决定文字的对齐方式,包括左对齐(left),靠右对齐(right),中对齐(center)以及左右对齐(justify)。

CSS文件

.font1{text-align:right;}
.font2{text-align:center;}


{text-decoration}

属性text-decoration用来决定文字上的划线方式,包括文字下划线(umderline),文字上划线(overline),文字中间划线(line-through)。

CSS文件

.font1{text-decoration:overline;}
.font2{text-decoration:line-through;}


{text-indent}

属性text-indent用来决定第一行的第一个文字前面要保留多少空白,单位可使用px或%。

CSS文件

.font1{text-indent:12px;}
.font2{text-indent:0%;}


[text-transform]

属性text-transform用来决定一串字符的大小写显示方式,包括第一个字母大小写(capitalize),所有字母大小写(uppercase)所有字母小写(lowercase)。

CSS文件

.font1{text-transform:capitalize;}
.font2{text-transform:uppercase;}


{word-spacing}

属性word-spacing用来设置字与字之间的距离,与letter-spacing不同,word-spacing是以英文的单词为基本单位作为距离的。

CSS文件:

.font1{word-spacing:12px;}
.font2{word-spacing:0px;}

版权声明:本文为博主原创文章,转载必须声明出处,thank。

相关文章推荐

HTML5学习_day01(7)--css常用文本样式

css常用文本样式 0.dark*  属性值 可以设置文本段落背景颜色 用法: 《水浒传》,是中国四大名著之一。 效果: 《水浒传》,是中国四大名著之一。 1.文字颜色  属性名:col...

HTML5的段落和文字样式设置

HTML5的段落和文字的样式设置。

html5+css3样式和帮助文档

  • 2016-05-25 09:23
  • 1.06MB
  • 下载

HTML5学习_day01(4)--css内部样式之选择器

选择器常用三种类型: 1.标签选择器 语法: 标签名{ 属性1:属性值1; 属性2:属性值2; } 2.class选择器 语法: .class名{ 属性1:属性值1; 属性2:属...

html5样式帮助,css.chm

  • 2015-06-14 10:43
  • 836KB
  • 下载

html5-css3-checkbox多样式

  • 2014-11-06 09:57
  • 10KB
  • 下载

html5学习记录07:认识css样式选择器

css样式 每一条css样式声明(定义)由两部分组成,形式如下: 选择器{ 样式; } 在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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