(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。

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

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

自定义简单的Toast,可自行修改文字、图片、样式

仿网易新闻Toast,简单易懂,易修改,支持自定义图片,文字,Toast位置
  • qq_31850557
  • qq_31850557
  • 2016年05月27日 10:41
  • 659

如果文字多了,想让超出元素外面的文字以省略号显示的css样式

请看下面的demo 省略号显示 .box{ width: 200px; height: 20px; line-height: 20px; backgrou...
  • wxl1555
  • wxl1555
  • 2016年10月01日 01:39
  • 1821

怎么更改ppt统一文字样式

转载者:家长会ppt课件              来源:www.2ppt.cn   首先新建一个ppt文档,方法“桌面或某一文件夹空白处右击——新建——Microsoft PowerPoint 演...
  • seuvjhqc
  • seuvjhqc
  • 2016年05月16日 08:19
  • 1376

Bootstrap中文本的样式

在Bootstrap中对文本的对有很多的关注,也给出了很多的样式,至少在我们自己写网页的时候这些可以不用再去编写这些样式,其实在之前我一直没有很好的理解类,这些其实都是类,我们给class进行赋值其实...
  • datouniao1
  • datouniao1
  • 2015年11月12日 13:33
  • 615

文字 11种HTML5和CSS3炫酷文字样式和鼠标滑过特效

这是一款效果非常炫酷的HTML5和CSS3文字样式和鼠标滑过特效插件。该文字特效中包含了11种不同的文字样式和鼠标滑过文字时的动画效果。部分文字动画效果使用了SVG和HTML5 Canvas来制作。注...
  • xiaokui_wingfly
  • xiaokui_wingfly
  • 2016年07月07日 15:52
  • 3629

HTML5的段落和文字样式设置

HTML5的段落和文字的样式设置。
  • manREDoo
  • manREDoo
  • 2017年06月25日 19:02
  • 1478

CSS笔记(字体样式,文本属性和颜色样式)

CSS-字体样式与颜色
  • qq_38801354
  • qq_38801354
  • 2017年07月07日 20:40
  • 614

CSDN-markdown 文字样式设置(字体, 大小, 颜色, 高亮底色)

本文介绍与文字格式的相关设置语法,包括字体、大小、颜色和高亮背景色。并且介绍了表格中格子背景色的设置。...
  • thither_shore
  • thither_shore
  • 2016年08月11日 12:14
  • 6008

CSS改变超链接字体样式

一 应用 网站中会有多种超链接,当我们将鼠标移动到某一超链接上时,超链接就会以不同的字体样式显示。 例如超链接的字体样式显示为斜体、粗体、下划线、删除线或粗斜体等。 本应用将通过JavaScri...
  • chengqiuming
  • chengqiuming
  • 2017年04月12日 10:45
  • 343
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:(7)-HTML5-CSS文字样式
举报原因:
原因补充:

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