银河至尊游戏官网学笔记 第五章节 使用CSS美化网页文本

第五回   使用CSS美化网页文本

攻要

  • 概念字体类型、大小、颜色相当书样式;
  • 设计文本样式,如对一起、行高、间距等;
  • 能活设计美观、实用的网页正文版式。

5.1 字体样式

5.1.1 定义字体类型

CSS使用font-family来定义字体类型,用法如下:

font-family:name   /*name表示字体名称,可以指定多种字*/             
             /*不亮堂,多种字体怎么动?*/

font-family:ncursive | fantasy | monospace | serif | sans-serif         
                    /*ncursive是呀?书及是这般形容的。*/

一旦字体名称包含空格,则应用引号括起。

font是平种植复合性,能够设置多书属性,属性值之间以空格分隔。

font属性至少要设置字体大小和书类型,且要在后面,否则无效。前面可打定义字体样式、字体粗细、大小写及行高。

CSS提供了5种植通用字,如果指定的享有字体都非可用时,能够以用户系统被找到一个像样字体进行替代显示。

  • serif:衬线字体;
  • sans-serif:无衬线字体;
  • cursive:草体;
  • fantasy:奇异字体(艺术字);
  • monospace:等极富字体,唯一标准就是有着的字型宽度一样。

通用字对中文无效。

5.1.2 定义字体大小

CSS用font-size来定义字体大小,用法如下:

font-size:xx-small | x-small | small | medium | large | x-large|
xx-large | larger | smaller | length

larger和smaller根据父对象中书尺寸进行相对增大或缩小处理,使用成比例之em单位进行测算。

length可以是比例,或者浮点数字和单位标识符组成的长短值,但非得以是负数。百分比取值基于大对象吃书尺寸。

字体大小绝对单位:in(英寸)、cm、mm、pt、pc。

字体大小相对单位:px(pixel,像从)、em、ex、%。

于网页宽度固定或者栏目宽度固定的布局,使用像素。

对于页面宽度或栏目宽度不定点的布局,使用比例还是em。

自用户易用性角度考虑,定义字体大小应该以em或%进行安装。

  • 惠及客户端浏览器调整字体大小;
  • 书能够适应版面宽度之变更。

5.1.3 定义字体颜色

CSS使用color属性来定义字体颜色。

例:p{ color:red}

CSS3支持另外3栽颜色代表拟:

  • RGBA颜色表示法,就是于RGB颜色的功底及加了Alpha通道,可以定义半透明底颜色。
  • HSL颜色表示法,就是应用色相(H)、饱和度(S)和亮度(L)表示颜色的同等种艺术。
  • HSLA颜色表示拟,在HSL的功底及加了Alpha通道。

5.1.4 定义字体粗细

CSS使用font-weight属性来定义字体粗细。

示例:font-weight:normal | bold | bolder | lighter |100 | 200 | 300 |
400 | 500 | 600 | 700 | 800 | 900

normal相当给400,bold相当给700要<b>标签定义之字体效果。

bolder和lighter相对于normal字体粗细而言。                               
                                                     
 /*非知底但免得以重让书再仔细*/

5.1.5 定义斜体字体

CSS使用font-style属性来定义字体倾斜效果,用法如下:

font-style:normal | italic | oblique

normal表示默认值,即健康的字体;italic表示斜体;oblique表示倾斜的书。                             
     /*斜体和倾斜的文,看下起啊两样*/

italic和oblique两个取值只能在天堂文字被有效。                           
                                                     
/*叫的例子把中文改化了italic,不知晓*/

5.1.6 定义下划线

CSS使用text-decoration属性来定义字体下划线效果

text-decoration:none | underline | blink | overline | line-through     
                                                     
 /*好声明多只力量*/

blink表示闪烁效果,underline代表产划线效果,line-through代表贯穿效果,overline表示达成涂抹效果。

5.1.7 定义字体大小写

CSS使用font-variant属性来定义字体大小写效果

font-variant:normal | small-caps

small-caps:小型的老写字母字体

就支持西方字体。如果安了小型的良写字体,但是该字没有找到原来小型大写字体,则浏览器会模拟一个。

CSS还定义了一个text-transform属性,该属性主要定义单词大小写样式。

text-transform:none | capitalize | uppercase | lowercase

capitalize:将每个单词的首先单字母转换为题写

uppercase:将所有字母转换为题写

lowercase:将具有字母转换为题写

5.2 文本样式

5.2.1 定义文本对同步

CSS使用text-align属性来定义文本的水平对齐方式,该属性的用法如下:

text-align:left | right | center | justify

justify:两端对合

5.2.2 定义垂直对如

CSS使用vertical-align属性来定义文本垂直对旅问题,用法如下:

vertical-align:auto | baseline | sub | top | text-top | middle | bottom
| text-bottom | length

  • auto:根据layout-flow属性的价值对共同对象文本;
  • baseline:默认值,与基线对一头;
  • sub:垂直对齐文本的下标;
  • super:垂直对齐文本的上标;
  • top:将支撑valign特性的对象的情节以及对象上对旅;
  • text-top:将支持valign特性的对象的文件及目标上对一起;             
                                               
    /*对象的目标是啊意思?*/
  • middle:将支撑valign特性的对象的情及目标中对旅;
  • bottom:将支持valign特性的靶子的情节与目标底端对共同;
  • text-bottom:将支撑valign特性的靶子的文件和对象底端对联合;
  • length:表示是因为浮点数字和单位标识符组成的长度值或者百分数,可以是负数,定义由基线算从底偏移量。

5.2.3 定义字距和词距

CSS使用letter-spacing属性定义字距,word-spacing属性定义词距。取值都是长值,由浮点数字与单位标识符组成。

概念词距时,以空格为原则进行调节。多独单词被连在一起,视为一个单词;汉字为空格分隔,分隔的差不多单汉字就是不同之单词。

5.2.4 定义行高

行高也如行距,是段落文本行和文本行之间的离开。CSS使用line-height属性定义行胜利用。用法如下:

line-height:normal | length

normal表示默认值,一般也1.2em。

诚如实施胜的超级设置限制吗1.2em~1.8em。原则:字体越怪,行高越小。

装双重活的行高样式:给line-height属性设置一个数值,但是未装单位。

如:

body{ line-height:1.6;}

下这种装置方法,可以化解多重叠嵌套结构中行高继承出现的问题。

5.2.5 定义缩进

CSS用text-indent属性定义首行缩进,用法如下:

text-indent:length

采用text-indent属性可以计划悬垂缩进效果。示例:

p{/*悬垂缩进2个字距*/
     text-indent:-2em;
     padding-left:2em;
  }

概念左侧补白(padding-left),防止文本落到段边界外边。

5.3 CSS3初添文本样式

5.3.1 定义文本阴影

CSS3使用text-shadow属性给文添加阴影效果。(Safari、Firefox、Chrome和Opera等主流浏览器还支持该意义。)

语法:text-shadow:none | <shadow> [  , <shadow> ]*

<shadow>=<length>{2,3}&&<color>?

none:无阴影。

length:第一单长值用来安装阴影水平偏移值,第二独长值用来安阴影垂直偏移值,第三单长值用来设置对象的阴影模糊值——模糊半径(不允许负值)。

color:设置对象的黑影的水彩。

示例:text-shadow:0.1em 0.1em #333; /*向右侧下偏移的#333色阴影*/

5.3.2 设计阴影特效

1、通过银河至尊游戏官网阴影增加前景色与背景色的针对比度

2、定义多色阴影

text-shadow可以接受一个为逗号分割的阴影效果列表,阴影仍给定的逐条以。当以text-shadow定义多色阴影时,每个阴影效果必须指定阴影偏移。

3、定义火焰文字

借助阴影列表机制,可以采用阴影叠加有燃烧的文字特效。

<style type="text/css">
body{background:blue;}
p{
    text-align:center;
    font: 60px helvetica, arial, sans-serif;
    color:red;
    text-shadow:0 0 4px white,
         0 -5px 4px white,
         2px -5px 4px #fd3,
         -2px -15px 11px #f80,
         2px, -25px 18px #f20;
}
</style>
(p)

 

4、定义立体文字

text-shadow属性可以动用在:first-letter和:first-line伪元素上。同时还好计划出立体文本。

5、定义描边文字

 text-shadow属性可以呢文本描边,方法是独家吗文本4单限添加1像从的实业阴影,代码如下:

 1 <style type="text/css">
 2 body{ background: #000;}
 3 p{
 4     text-align:center;
 5     padding: 24px;
 6     margin:0;
 7     font-family: helvetica, arial, sans-serif;
 8     font-size: 80px;
 9     font-weight: bold;
10     color: red;
11     background: #CCC;
12     text-shadow: -1px 0 black,
13             0 1px black,
14             1px 0 black,
15             0 -1px black;
16 }
17 </style>
18 <p>文本阴影</p>

6、定义外发光文字

规划阴影不发出各类移,同时定义阴影模糊显示,可以学出字发外光效果,代码如下:

 1 <style type="text/css">
 2 body{ background:#000;}
 3 p{
 4 text-align:center;
 5 padding:24px;
 6 margin:0;
 7 font-family:helvetica, arial, sans-serif;
 8 font-size:80px;
 9 color:red;
10 background:#CCC;
11 text-shadow:0 0 0.2em #F87,
12 0 0 0.2em #F87;
13 }
14 </style>
15 <p>文本阴影:text-shadow</p>

5.3.3 定义溢起文件

CSS3新增加了text-overflow属性,该属性可以安装超长文本省略显得。基本语法如下:

Text-overflow:clip | ellipsis | ellipsis-word

clip:不显示省略号标记(…),而是大概的裁切;

ellipsis:表示当目标文本溢起时显示省略标记(…),省略标记插入的职位是终极一个字符;

ellipsis-word:表示当目标文本溢起时展示省略标记(…),省略标记插入的职务是最后一个字母。

若贯彻溢起时生省略号的法力,必须于概念两独样式:强制文本以一行内展示(white-space:nowrap)和浩起内容呢隐蔽(overflow:hidden)。

5.3.4 文本换行

CSS3使用word-break属性定义文本自动换行。

  • line-break专门负责日文换行。
  • word-wrap控制换行。属性取值break-word时,强制换行,控制是否断词,而无是断字符。
  • word-break主要对亚洲语言和不亚洲语言进行支配换行。
    • 性能取值break-all时,可以允许请勿亚洲语言文本行的任意字内断开;
    • 特性取值keep-all时,表示对华语、韩文、日文不容许字断开。
  • white-space有格式化文本的意向。
    • 特性取值为nowrap时,表示强制在同行外展示;
    • 性能取值为pre时,表示显示预定义文本格式。

5.3.5 添加动态内容

content属性属于内容变更和替换模块,能够为指定元素添加内容。能够满足样式设计被即添加非结构性的样式服务标签,或者加上上说明性内容相当。

content属性的为主语法:content:normal | string | attr() | uri() |
counter () | none;

content属性初始值为normal,适用于有可用元素,其它取值说明如下:

  • string:插入文本内容。
  • attr():插入元素的属于性值。
  • uri():插入一个外表资源。
  • counter():计数器,用于插入排序标识。
  • none:无其他内容。

5.3.6 恢复默认样式

CSS3受新增了一个initial属性值,可以直接注销对某元素的体裁指定。

如:p{color:initial;}

5.3.7 自定义字体类型

经@font-face能够加载服务器端的字体文件,让客户端浏览器显示客户端所没有设置的书体。

@font-face的语法格式为:@font-face{ <font-description>}

<font-description>是一个属性名值对,格式如下:

descriptor:value;

descriptor:value;

descriptor:value;

descriptor:value;

descriptor:value;

[…]

descriptor:value;

特性及其取值说明如下:

  • font-family:设置文本字体;
  • font-style:设置文本样式;
  • font-variant:设置文本是否大小写;
  • font-weight:设置文本粗细;
  • font-stretch:设置文本是否横向的拉伸变形;
  • font-size:设置文本字体大小。

相关文章