网页文字-30天学会HTML+CSS,制作精美网站

网站通常是透过文字的编排,呈现资讯给使用者,标签用得好,对於SEO排名也会有些帮助,今天要来介绍网页文字标签及样式的使用

网页标题

<h1>~<h6>

H是「Heading」的缩写,中文为「标题」。<h1><h2> ... <h6>作为标题、副标题、小标题使用,它们也代表不同的重要程度<h1>为最重要到<h6>最不重要,<h1>字体最大依序到<h6>字体最小。标题有助於搜寻引擎更演算法更加理解文章内容

但需要注意的是,一个页面只会有一个<h1>,用於该页面主要的标题。其他的依序从<h2>使用。

<h1>我是h1文字</h1>
<h2>我是h2文字</h2>
<h3>我是h3文字</h3>
<h4>我是h4文字</h4>
<h5>我是h5文字</h5>
<h6>我是h6文字</h6>

https://ithelp.ithome.com.tw/upload/images/20210926/20112053c690CAXU9C.jpg

网页内文

<p>(段落)

P是「paragraph」的缩写,中文为「段落」。
用来放文字的段落,让段落与段落间有间隔,有明显的分段,才不会都挤在一起,不易阅读。

<br/>(断行元素)

内容换行

<span>

用来包文字,方便做CSS样式设定,没有语意。

<strong><b>粗体

都是粗体,那有什麽差别呢?
<b>是「bold」缩写,单纯粗体,视觉上好看,没有特别意义
<strong>重要的内容

<i><em>斜体

<i>是「italic」缩写,单纯斜体,没有特别意思。
<em>是「emphasized」缩写,强调内容

<p>This is <strong>strong</strong>.</p>
<p>This is <em>em</em>.</p>
<p>
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s<br />
  When an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>

https://ithelp.ithome.com.tw/upload/images/20210926/20112053brQpDFYB3z.png

容易阅读行数、字数?
段落文字太多,不易阅读,看久了会疲乏,因此每个段落控制在3~5行,一行字数控制在35~40个字

CSS

文字

文字在网页中是重要的元素,利用文字大小、粗细、间距等排版及颜色的搭配,能提高使用者阅读的舒适度。

font-size 设定文字大小

浏览器预设字型大小都是16px

  • 相对单位:rem、em、 %
  • 绝对单位:px
  • 关键字:xx-small、x-small、small、medium、large、x-large、xx-large,标准大小是medium

font-family 设定文字字型

可以设定想要的网页字体,一次可设定多组不同的字体用逗号「,」隔开,但是要注意的是,使用者电脑需要安装对应字体才会正常显示,建议设定字体时设定英文名称,因某些浏览器无法识别中文。套用顺序由左至右,电脑中没有第一顺位的字体,就会往第二个字体寻找。

body{
    font-family: "Microsoft JhengHei", Helvetica, Arial, sans-serif;
}

网站排版建议不要超过3种字体,会造成视觉上的干扰,导致画面凌乱的感觉,无法凸显主题。
在设计过程中,字型选择不多或是怕使用者电脑上没有字体,导致页面无法正常显示。
而「 google fonts」免费字体,解决了多数设计师在网页上使用特殊字体的困扰了

font-weight 设定文字粗细

- normal - 预设值。
- bold - 粗体字型。
- bolder - 更粗的字型,不过用起来跟 bold 似乎没什麽差异。
- lighter - 细体,不过与 normal 没什麽差异。
- 数字 - 可以设定 100、200、300、400、500、600、700、800、900。

font-style 设定文字样式

- normal - 文字正常显示
- italic - 斜体字显示
- oblique - 文字向一边倾斜(和斜体非常类似,但不太支持)

font:

结合上述所描述的font样式,顺序为

font: font-style font-weight font-size font-family;

line-height 行高

- 数值(无单位):会依照字型大小比例设定
- 数值(有单位):以px、em、%...等单位做设定

line-height:数值

调整上下文字距离,通常网页行高建议使用1.5~1.9之间。但要注意的是,行高小於文字高度,会导致两行重叠在一起。

letter-spacing 文字左右间距

增加或减小文字之间的间隔。负数为减少整体会比较拥挤,正数则相反。
- 数值:以px、em、%...等单位做设定

letter-spacing:数值(允许负数)
.txt1{
  letter-spacing:2px;
}
.txt2{
  letter-spacing:-2px; //负数文字会很拥挤
}

https://ithelp.ithome.com.tw/upload/images/20210926/20112053lnDTgq7KY9.png

text-align 文字水平对齐

- left 靠左
- right 靠右
- center 置中
- justify左右对齐
https://ithelp.ithome.com.tw/upload/images/20210926/20112053GJtMhhsYS0.png

text-shadow 文字阴影

 text-shadow: 水平偏移 垂直偏移 模糊量 颜色;
.title{
  color: #0d4e82;
  text-shadow: 2px 2px 2px #c9d6e0;
  font-size: 30px;
}

https://ithelp.ithome.com.tw/upload/images/20210926/20112053XGzFx9rbK1.png

text-decoration

- none:预设值,无任何效果
- underline:文字增加底线
- overline:文字增加上线
- line-through:文字增加删除线
https://ithelp.ithome.com.tw/upload/images/20210926/20112053iT5U6STnA9.png

text-overflow

为了让网页列表内容看起来整齐,常需要设定字数超过「...」显示

<p class="info">
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
.info{
	overflow : hidden;
  text-overflow : ellipsis;
  white-space : nowrap;
  width : 240px;
}

https://ithelp.ithome.com.tw/upload/images/20210926/20112053EHTw8XuMfF.png
文字超出两行或者多行显示省略号

.info {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; //超出多行修改数字2就是两行、3就是三行...以此类推
    -webkit-box-orient: vertical;
		width : 240px;
}

-webkit-line-clamp: 2; 超过两行...
https://ithelp.ithome.com.tw/upload/images/20210926/20112053OaWqKip0DG.png
-webkit-line-clamp: 3; 超过三行...
https://ithelp.ithome.com.tw/upload/images/20210926/20112053nfZFzzPgcS.png

结论

确认网站的目的及使用者目标,透过文字的编排传递资讯,设定适当的行高、字体大小⋯等美化,让使用者加深对网站的印象。


<<:  Day-25 尚未开始便已衰败、策略错误的 XBOX ONE

>>:  Day12 HTML二

Day-19 System Call & OS架构

System Call & OS架构 tags: IT铁人 System Call是啥 Sy...

Day 22:如何增加你 Hexo 的选单 Icon?

之前不管是介绍到主选单或是 Social Links,可以发现它本身都有预设的 Icon 图示可以对...

[Day05] 运算式与运算子

运算式(Expression):最大的特性是产生一个「值」。像是在呼叫 function 时的参数...

Day 18:数据蒐集、资料视觉化、数据分析

前言 在公司内部总是有大大小小的提案,每个提案都有拥护的人,但是大家各说各话,没有办法公平的做出决定...

基本操作 - 历史资讯

根据官方说明,因为历史资料的查询蛮耗资源的,有可能会拖慢系统的速度,所以官方不建议使用,而且有每5秒...