网站通常是透过文字的编排,呈现资讯给使用者,标签用得好,对於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>
<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>
容易阅读行数、字数?
段落文字太多,不易阅读,看久了会疲乏,因此每个段落控制在3~5行,一行字数控制在35~40个字
文字在网页中是重要的元素,利用文字大小、粗细、间距等排版及颜色的搭配,能提高使用者阅读的舒适度。
浏览器预设字型大小都是16px
可以设定想要的网页字体,一次可设定多组不同的字体用逗号「,」隔开,但是要注意的是,使用者电脑需要安装对应字体才会正常显示,建议设定字体时设定英文名称,因某些浏览器无法识别中文。套用顺序由左至右,电脑中没有第一顺位的字体,就会往第二个字体寻找。
body{
font-family: "Microsoft JhengHei", Helvetica, Arial, sans-serif;
}
网站排版建议不要超过3种字体
,会造成视觉上的干扰,导致画面凌乱的感觉,无法凸显主题。
在设计过程中,字型选择不多或是怕使用者电脑上没有字体,导致页面无法正常显示。
而「 google fonts」免费字体,解决了多数设计师在网页上使用特殊字体的困扰了
- normal - 预设值。
- bold - 粗体字型。
- bolder - 更粗的字型,不过用起来跟 bold 似乎没什麽差异。
- lighter - 细体,不过与 normal 没什麽差异。
- 数字 - 可以设定 100、200、300、400、500、600、700、800、900。
- normal - 文字正常显示
- italic - 斜体字显示
- oblique - 文字向一边倾斜(和斜体非常类似,但不太支持)
结合上述所描述的font样式,顺序为
font: font-style font-weight font-size font-family;
- 数值(无单位):会依照字型大小比例设定
- 数值(有单位):以px、em、%...等单位做设定
line-height:数值
调整上下文字距离,通常网页行高建议使用1.5~1.9之间
。但要注意的是,行高小於文字高度,会导致两行重叠在一起。
增加或减小文字之间的间隔。负数为减少整体会比较拥挤,正数则相反。
- 数值:以px、em、%...等单位做设定
letter-spacing:数值(允许负数)
.txt1{
letter-spacing:2px;
}
.txt2{
letter-spacing:-2px; //负数文字会很拥挤
}
- left 靠左
- right 靠右
- center 置中
- justify左右对齐
text-shadow: 水平偏移 垂直偏移 模糊量 颜色;
.title{
color: #0d4e82;
text-shadow: 2px 2px 2px #c9d6e0;
font-size: 30px;
}
- none:预设值,无任何效果
- underline:文字增加底线
- overline:文字增加上线
- line-through:文字增加删除线
为了让网页列表内容看起来整齐,常需要设定字数超过「...」显示
<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;
}
文字超出两行或者多行显示省略号
.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; 超过两行...
-webkit-line-clamp: 3; 超过三行...
确认网站的目的及使用者目标,透过文字的编排传递资讯,设定适当的行高、字体大小⋯等美化,让使用者加深对网站的印象。
<<: Day-25 尚未开始便已衰败、策略错误的 XBOX ONE
System Call & OS架构 tags: IT铁人 System Call是啥 Sy...
之前不管是介绍到主选单或是 Social Links,可以发现它本身都有预设的 Icon 图示可以对...
运算式(Expression):最大的特性是产生一个「值」。像是在呼叫 function 时的参数...
前言 在公司内部总是有大大小小的提案,每个提案都有拥护的人,但是大家各说各话,没有办法公平的做出决定...
根据官方说明,因为历史资料的查询蛮耗资源的,有可能会拖慢系统的速度,所以官方不建议使用,而且有每5秒...