上学笔记银河至尊游戏官网

第肆章   使用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种颜色表示法:

  • 酷威GBA颜色表示法,正是在EvoqueGB颜色的根基上加了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:第五个长度值用来安装阴影水平偏移值,第3个长度值用来设置阴影垂直偏移值,第4个长度值用来安装对象的阴影模糊值——模糊半径(分歧意负值)。

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

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

5.3.2 设计阴影特效

① 、通过阴影扩大前景象与背景观的相比度

② 、定义多色阴影

text-shadow还不错八个以逗号分割的影子效果列表,阴影依照给定的逐条应用。当使用text-shadow定义多色阴影时,每一个阴影效果必须钦赐阴影偏移。

③ 、定义火焰文字

依傍阴影列表机制,能够行使阴影叠加出焚烧的文字特效。

<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)

 

肆 、定义立体文字

text-shadow属性能够利用在:first-letter和:first-line伪成分上。同时还足以设计出立体文本。

伍 、定义描边文字

 text-shadow属性可以为文本描边,方法是分别为文本四个边添加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>

陆 、定义外发光文字

统一筹划阴影不发生位移,同时定义阴影模糊突显,可以模拟出文字发外光效果,代码如下:

 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:表示当对象文本溢出时显得省略标记(…),省略标记插入的岗位是终极1个字母。

要兑现溢出时产生省略号的成效,必须在概念八个样式:强制文本在一行内体现(white-space:nowrap)和溢出内容为隐匿(overflow:hidden)。

5.3.4 文本换行

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

  • line-break专责日文换行。
  • word-wrap控制换行。属性取值break-word时,强制换行,控制是不是断词,而不是断字符。
  • word-break重要针对澳洲语言和非亚洲语言举办支配换行。
    • 性格取值break-all时,可以允许非澳大太原(Australia)语言文本行的任意字内断开;
    • 属性取值keep-all时,表示对于华语、罗马尼亚语、日文差别意字断开。
  • white-space具有格式化文本的机能。
    • 性子取值为nowrap时,表示强制在平等行内呈现;
    • 天性取值为pre时,表示展现预订义文本格式。

5.3.5 添加动态内容

content属性属于内容变更和替换模块,能够为钦定成分添加内容。能够满足样式设计中近日添加非结构性的体克制务标签,大概添加补充表明性内容等。

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

content属性开始值为normal,适用于具有可用成分,别的取值表明如下:

  • string:插入文本内容。
  • attr():插入成分的属性值。
  • uri():插入3个表面财富。
  • 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:设置文本字体大小。

相关文章