1、常規(guī)的Web頁(yè)面實(shí)現(xiàn)方法
早期的Web應(yīng)用系統(tǒng)開(kāi)發(fā)中的Web頁(yè)面內(nèi)的信息定位和Web頁(yè)面布局一般是采用HTML表格<table>標(biāo)簽實(shí)現(xiàn)的,但由于HTML標(biāo)簽本身是將數(shù)據(jù)和顯示風(fēng)格混合在一起的——請(qǐng)見(jiàn)下面的表格標(biāo)簽示例:
<table><tr><td>表格中的某個(gè)單元格需要顯示的數(shù)據(jù)</td></tr></table>
當(dāng)每個(gè)用戶(hù)請(qǐng)求訪問(wèn)后臺(tái)服務(wù)器時(shí),服務(wù)器端程序都必須要將整個(gè)頁(yè)面文件的全部顯示格式控制的HTML標(biāo)簽內(nèi)容向客戶(hù)端的Web瀏覽器發(fā)出。如下示圖為傳統(tǒng)的頁(yè)面設(shè)計(jì)中利用表格定位和布局頁(yè)面內(nèi)容的設(shè)計(jì)效果的示例圖
這種利用<table>標(biāo)簽實(shí)現(xiàn)Web頁(yè)面信息定位和布局的頁(yè)面設(shè)計(jì)方法不便于Web頁(yè)面的維護(hù)修改和功能擴(kuò)展,基于MVC的系統(tǒng)架構(gòu)模式的基本思想要求將頁(yè)面中的數(shù)據(jù)和顯示風(fēng)格兩者相互分離——也就是MVC體系架構(gòu)設(shè)計(jì)模式中所倡導(dǎo)的表示和模型相互分離的設(shè)計(jì)原則。
2、J2EE Web 表示層組件JSP
JSP(Java Server Pages)是由Sun Microsystem公司(現(xiàn)在改為Oracle公司)于1999年6月推出的動(dòng)態(tài)網(wǎng)站實(shí)現(xiàn)技術(shù),并且是基于Java Servlet以及整個(gè)Java技術(shù)體系的Web開(kāi)發(fā)技術(shù)。
而且JSP技術(shù)具有簡(jiǎn)便和高性能、服務(wù)器無(wú)關(guān)性和可重用性等技術(shù)實(shí)現(xiàn)方面的特點(diǎn)。但JSP技術(shù)在應(yīng)用方面也暴露出一些不足之處:Web頁(yè)面開(kāi)發(fā)實(shí)現(xiàn)的人員職責(zé)不清晰、HTML標(biāo)簽與JSP腳本程序混合在一起而導(dǎo)致Web頁(yè)面不便于維護(hù)升級(jí)和功能擴(kuò)展,因?yàn)閃eb頁(yè)面的內(nèi)容("數(shù)據(jù)")和表現(xiàn)("HTML標(biāo)簽")耦合在一起。
如下示圖為某個(gè)JSP頁(yè)面示例,在該JSP頁(yè)面中包含有服務(wù)器端的Java程序腳本代碼、JSP標(biāo)簽和HTML標(biāo)簽,整個(gè)JSP頁(yè)面內(nèi)容顯得比較"凌亂",可讀性比較低。
正是由于JSP技術(shù)本身存在有這些方面的問(wèn)題,能否將面向?qū)ο驤ava編程技術(shù)中所倡導(dǎo)的"封裝"、"隔離"等OOP設(shè)計(jì)思想應(yīng)用于JSP Web頁(yè)面的應(yīng)用開(kāi)發(fā)中?目前在J2EE應(yīng)用開(kāi)發(fā)平臺(tái)中出現(xiàn)了許多完善、甚至代替JSP作為表示層的新技術(shù)。
3、采用"CSS+Div"分離J2EE Web表示層組件中的數(shù)據(jù)和表現(xiàn)
(1)"CSS+Div"中的CSS是頁(yè)面層疊樣式表技術(shù)
CSS(Cascading Style Sheet)是Web頁(yè)面層疊樣式表技術(shù),利用CSS中的各種規(guī)則定義可以統(tǒng)一規(guī)范Web應(yīng)用系統(tǒng)中的整體網(wǎng)頁(yè)的格式,而不再需要分別給每個(gè)Web頁(yè)面中的目標(biāo)標(biāo)簽單獨(dú)進(jìn)行顯示風(fēng)格的屬性設(shè)置。從而大大地減少了對(duì)Web頁(yè)面顯示風(fēng)格的重復(fù)編輯、也提高了Web頁(yè)面功能的可擴(kuò)展性
(2)"CSS+Div"中的Div代表<div>標(biāo)簽
Div其實(shí)也就是HTML超文本標(biāo)簽語(yǔ)言中的<div>標(biāo)簽,<div>標(biāo)簽主要用于構(gòu)建Web頁(yè)面中區(qū)域的定義——簡(jiǎn)單地說(shuō),也就是它能夠?qū)eb頁(yè)面劃分為不同的功能區(qū)塊。每個(gè)功能區(qū)塊的顯示風(fēng)格和其中的數(shù)據(jù)本身是相互分離的。
(3)采用"CSS+Div"分離Web表示層頁(yè)面中的數(shù)據(jù)處理邏輯和表現(xiàn)邏輯
由于CSS主要是實(shí)現(xiàn)Web頁(yè)面中的數(shù)據(jù)顯示風(fēng)格,而利用<div>標(biāo)簽可以包裝和定位其中的數(shù)據(jù)。因此,"CSS+Div"相互組合在一起就能夠分離Web表示層頁(yè)面文件中的數(shù)據(jù)處理邏輯和表現(xiàn)邏輯。
Web應(yīng)用系統(tǒng)的表示層開(kāi)發(fā)人員首先應(yīng)用<div>標(biāo)簽構(gòu)建好每個(gè)功能區(qū)塊,之后再用CSS樣式單給各個(gè)<div>標(biāo)簽統(tǒng)一配置相應(yīng)的顯示風(fēng)格——<div>標(biāo)簽不僅能夠定位頁(yè)面中的文字內(nèi)容,也能夠包裝圖片(圖片以背景的形式出現(xiàn))或者其它形式的標(biāo)簽。
<div>標(biāo)簽代表要顯示的Web頁(yè)面數(shù)據(jù)的一個(gè)容器,而CSS層疊樣式表技術(shù)則能夠控制這個(gè)容器的各種顯示元素——比如高度和寬度、邊框的顏色、背景顏色以及其中的文字大小、文字顏色等等這些顯示信息。
"CSS+Div"是目前比較流行的Web頁(yè)面版面布局方式,能夠分離Web表示層頁(yè)面中的數(shù)據(jù)處理邏輯和表現(xiàn)邏輯、并且還能夠減少Web頁(yè)面中HTML標(biāo)簽的數(shù)量、減少網(wǎng)絡(luò)數(shù)據(jù)的傳送量;也更便于Web頁(yè)面的維護(hù)修改和功能擴(kuò)展;而且還可以為同一個(gè)Web頁(yè)面或者一組Web頁(yè)面統(tǒng)一定義一個(gè)CSS層疊樣式表文件或者為不同的功能區(qū)塊定義不同的CSS層疊樣式表文件,并且可以動(dòng)態(tài)切換和應(yīng)用不同的CSS層疊樣式表文件而產(chǎn)生出Web頁(yè)面"換皮膚"的應(yīng)用效果。
4、為什么要應(yīng)用"CSS+Div"構(gòu)建Web應(yīng)用系統(tǒng)表示層組件
(1)減少Web頁(yè)面中的重復(fù)HTML標(biāo)簽和提高Web頁(yè)面的響應(yīng)性能
由于采用CSS層疊樣式表技術(shù)能夠全局定義各個(gè)不同Web頁(yè)面的顯示風(fēng)格,從而避免了在每個(gè)Web頁(yè)面中都內(nèi)嵌有這些顯示風(fēng)格的控制標(biāo)簽,這樣的Web頁(yè)面設(shè)計(jì)方法能夠大大地減少Web頁(yè)面中的重復(fù)標(biāo)簽的數(shù)量和提高Web頁(yè)面的響應(yīng)性能。
另外,CSS層疊樣式表技術(shù)的兼容性也比較高——目前各個(gè)不同廠商的瀏覽器也都支持CSS層疊樣式表技術(shù)。一個(gè)采用"CSS+Div"技術(shù)實(shí)現(xiàn)的Web頁(yè)面布局可以在不同的Web瀏覽器、不同的網(wǎng)絡(luò)設(shè)備上都能夠正常地顯示。因此,它也方便了基于"CSS+Div"構(gòu)建的Web應(yīng)用系統(tǒng)的可擴(kuò)展性和可移植性——Web頁(yè)面中需要顯示的數(shù)據(jù)及其它形式的內(nèi)容與顯示設(shè)備無(wú)關(guān)。
(2)分離Web頁(yè)面的表現(xiàn)邏輯與數(shù)據(jù)結(jié)構(gòu)定義
在實(shí)際企業(yè)應(yīng)用系統(tǒng)的Web頁(yè)面開(kāi)發(fā)中,一般再配合采用JavaScript腳本語(yǔ)言進(jìn)行行為控制——也就是采用"CSS+Div+JavaScript"三種技術(shù)相互結(jié)合進(jìn)行Web頁(yè)面開(kāi)發(fā),其中的CSS層疊樣式表技術(shù)實(shí)現(xiàn)Web頁(yè)面風(fēng)格的顯示、Div(<div>標(biāo)簽)則實(shí)現(xiàn)其中數(shù)據(jù)的包裝和定位、而JavaScript腳本程序代碼則實(shí)現(xiàn)與用戶(hù)相互交互的事件等行為的控制。
因此,采用"CSS+Div+JavaScript"三種技術(shù)相互配合進(jìn)行Web頁(yè)面開(kāi)發(fā),基本上能夠達(dá)到模型視圖控制器(MVC)體系架構(gòu)設(shè)計(jì)模式所倡導(dǎo)的"結(jié)構(gòu)"、"表現(xiàn)"、"行為"三者相互分離的效果。
如果應(yīng)用該技術(shù),首先,將能夠使得Web頁(yè)面中的各個(gè)部分的耦合性更小、更易于維護(hù)和擴(kuò)展。比如,如果希望調(diào)整Web頁(yè)面的顯示風(fēng)格,設(shè)計(jì)和開(kāi)發(fā)實(shí)現(xiàn)人員只需要改變相關(guān)的CSS層疊樣式表文件中有關(guān)的樣式表定義,而Web頁(yè)面文件本身并不需要被動(dòng)地修改;其次,Web頁(yè)面的結(jié)構(gòu)清晰,設(shè)計(jì)和開(kāi)發(fā)實(shí)現(xiàn)相關(guān)的人員分工也非常明確。
5、在銀行賬戶(hù)信息管理系統(tǒng)頁(yè)面開(kāi)發(fā)中應(yīng)用CSS+Div+JavaScript技術(shù)
在示例項(xiàng)目銀行賬戶(hù)信息管理系統(tǒng)Web頁(yè)面開(kāi)發(fā)中,作者應(yīng)用了"CSS+Div+JavaScript"三種技術(shù),不僅減少了每個(gè)Web頁(yè)面中的標(biāo)簽總量,也將Web頁(yè)面中的格式、內(nèi)容和行為三者相互分離。
另外,在銀行賬戶(hù)信息管理系統(tǒng)中還應(yīng)用了Tiles模板技術(shù)將整個(gè)Web頁(yè)面分為不同的版塊(Tiles),而每個(gè)版塊中的Web頁(yè)面文件又采用"CSS+Div+JavaScript"技術(shù)實(shí)現(xiàn),最終使得整個(gè)Web應(yīng)用系統(tǒng)中的每個(gè)Web頁(yè)面內(nèi)的HTML標(biāo)簽數(shù)量都比較少,而且可重用度也都比較高。
下面的代碼示例中的Web頁(yè)面內(nèi)容為示例項(xiàng)目銀行賬戶(hù)信息管理系統(tǒng)中版權(quán)信息頁(yè)面內(nèi)容的示例,其中的JavaScript腳本程序?qū)崿F(xiàn)Web頁(yè)面內(nèi)容的防拷貝控制、而Web頁(yè)面的顯示風(fēng)格定義由style.css樣式表文件定義——請(qǐng)見(jiàn)黑體標(biāo)識(shí)的部分代碼——應(yīng)用CSS+Div+JavaScript技術(shù)實(shí)現(xiàn)版權(quán)信息頁(yè)面內(nèi)容的示例
<%@ page contentType="text/html; charset=gb2312" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href='<c:url value="/css/style.css" />' type=text/css rel=stylesheet />
<title>藍(lán)夢(mèng)網(wǎng)上銀行系統(tǒng)版權(quán)信息顯示頁(yè)</title>
</head>
<body>
<script type="text/javascript">
document.body.oncopy = function (){
setTimeout( function () {
var text = clipboardData.getData("text");
if (text) {
text = text + "\r\n所復(fù)制的內(nèi)容來(lái)源于"藍(lán)夢(mèng)網(wǎng)上銀行系統(tǒng)"
www.webbank.com ,原文的鏈接為:"+location.href;
clipboardData.setData("text", text);
}}, 100 )
}
</script>
<div id="globalMenuBar">
<a href='<c:url value="/pageForwordAction.action?action=forwardIndex" />'
class="hrefstyle">返回首頁(yè)</a> -
<a href="#" class="hrefstyle">關(guān)于本站</a> -
<a href="#" class="hrefstyle">網(wǎng)站幫助</a> -
<a href="#" class="hrefstyle">網(wǎng)站聲明</a> -
<a href="#" class="hrefstyle">服務(wù)網(wǎng)點(diǎn)</a> -
<a href="#" class="hrefstyle">服務(wù)熱線(xiàn)</a> -
<a href="#" class="hrefstyle">廣告合作</a> -
<a href="#" class="hrefstyle">下載聲明</a> -
<a href="#" class="hrefstyle">友情連接</a> -
<a href="#" class="hrefstyle">網(wǎng)站地圖</a> -
<a href="#" class="hrefstyle">聯(lián)系我們</a>
</div>
</body>
</html>
為了減少本書(shū)的篇幅,在上面的代碼示例中省略了各個(gè)超鏈接中的目標(biāo)URL地址的顯示。該頁(yè)面在Macromedia Dreamweaver工具軟件中的預(yù)覽效果請(qǐng)見(jiàn)下圖示例圖所示。
6、應(yīng)用支持"CSS+Div"的可視化軟件工具提高頁(yè)面開(kāi)發(fā)的效率
(1)CSS Tab Designer是一款使用CSS設(shè)計(jì)導(dǎo)航菜單的可視化軟件
由于在"CSS Tab Designer"可視化軟件中內(nèi)置有高達(dá)60多種不同風(fēng)格的樣式,Web頁(yè)面開(kāi)發(fā)人員只需修改現(xiàn)成樣式的模版文件,就能快速地生成滿(mǎn)足自己的Web應(yīng)用系統(tǒng)需要的CSS菜單。如下示圖為"CSS Tab Designer"官方網(wǎng)站對(duì)該軟件的功能特性的介紹文字的局部截圖,讀者可以在此網(wǎng)站中下載該軟件,為開(kāi)源共享軟件。
并且該軟件生成的XHTML標(biāo)簽嚴(yán)格遵循W3C網(wǎng)頁(yè)標(biāo)準(zhǔn),所創(chuàng)建出的CSS菜單也能夠兼容于各種主流的瀏覽器(如Internet Explorer、Firefox、Opera、Netscape等)。
讀者在成功下載該開(kāi)源軟件后,在CSS Tab Designer的系統(tǒng)文件及目錄結(jié)構(gòu)中的tab.exe文件為它的啟動(dòng)程序。而在Help目錄中的文件為操作幫助指南,samples目錄內(nèi)的文件為示例樣式文件,styles目錄內(nèi)的文件為CSS Tab Designer內(nèi)帶的各個(gè)樣式模板文件。
(2)啟動(dòng)CSS Tab Designe導(dǎo)航菜單可視化軟件
讀者點(diǎn)擊所下載的CSS Tab Designe文件目錄中的tab.exe文件就可以啟動(dòng)CSS Tab Designe導(dǎo)航菜單可視化軟件,下圖所示為啟動(dòng)后的初始界面的截圖。其中在左面【項(xiàng)目】視圖中顯示所創(chuàng)建的各個(gè)頁(yè)面文件;而在中間的【標(biāo)簽樣式表】視圖中提供有CSS Tab Designe可視化軟件內(nèi)帶的各個(gè)模板樣式,開(kāi)發(fā)人員可以直接選擇;在右面的【預(yù)覽】視圖中直接顯示開(kāi)發(fā)人員所設(shè)計(jì)的結(jié)果、并能夠采用"所見(jiàn)即所得"方式進(jìn)行開(kāi)發(fā)實(shí)現(xiàn)。
(3)瀏覽CSS Tab Designe導(dǎo)航菜單可視化軟件的操作幫助指南
在CSS Tab Designe導(dǎo)航菜單可視化軟件提供有操作幫助指南,并且文檔的技術(shù)說(shuō)明內(nèi)容寫(xiě)的也比較詳細(xì)和易懂——請(qǐng)見(jiàn)下圖所示的幫助文檔的局部?jī)?nèi)容的截圖。讀者可以瀏覽和閱讀CSS Tab Designe導(dǎo)航菜單可視化軟件的幫助文檔掌握對(duì)該軟件的使用,以提高應(yīng)用CSS+Div技術(shù)進(jìn)行頁(yè)面設(shè)計(jì)時(shí)的效率。
如何應(yīng)用策略設(shè)計(jì)模式的思想設(shè)計(jì)通用的數(shù)據(jù)庫(kù)連接類(lèi)
如何應(yīng)用策略設(shè)計(jì)模式分離JDBC數(shù)據(jù)庫(kù)連接中的外部環(huán)境信息
如何應(yīng)用GOF設(shè)計(jì)模式中的構(gòu)建者模式創(chuàng)建復(fù)合對(duì)象實(shí)例
如何應(yīng)用GOF設(shè)計(jì)模式中的創(chuàng)建型模式實(shí)現(xiàn)松耦合地創(chuàng)建對(duì)象實(shí)例
如何應(yīng)用觀察者設(shè)計(jì)模式重構(gòu)系統(tǒng)中日志處理功能實(shí)現(xiàn)的程序代碼
源:設(shè)計(jì)達(dá)人(shejidaren888)
最近在更新設(shè)計(jì)導(dǎo)航 HTML 代碼時(shí),發(fā)現(xiàn)有個(gè)樣式總是加載不出來(lái),經(jīng)過(guò)細(xì)看發(fā)現(xiàn)竟然是因?yàn)橛昧酥形牡碾p引號(hào)導(dǎo)致,但因?yàn)榫W(wǎng)頁(yè)代碼編輯器西文和中文的雙引號(hào)太相似所以忽略查找這個(gè)問(wèn)題,如此初級(jí)的問(wèn)題卻浪費(fèi)了不少時(shí)間……
所以最終解決方案就是為網(wǎng)頁(yè)代碼編輯器使用代碼專(zhuān)用字體:FiraCode + 中文字體組合(也適用于網(wǎng)頁(yè)端),使用此方法,可以美化代碼效果,減少因字符視覺(jué)差造成的小問(wèn)題,對(duì)眼睛疲勞也有一定緩解作用哦。
一、FiraCode字體
FiraCode估計(jì)很多資深編碼人員都了解過(guò),在 Github 已經(jīng)有30000 的 Star,它主要有2個(gè)特色:
1、字符等寬
每個(gè)字符寬度占用距離是一樣的,所以無(wú)論大小寫(xiě),你都能看到它是對(duì)齊的,但是若遇到有中文字體,這就不太好使了。
2、連字符號(hào)設(shè)計(jì)
當(dāng)用戶(hù)如輸入 這兩個(gè)符號(hào),就會(huì)自動(dòng)連在一起。如下圖:
二、中文字體選擇
為了解決引號(hào)的視覺(jué)問(wèn)題,我們還必須選擇中文字體,經(jīng)小編測(cè)試一翻后,最后使用了思源黑體,這樣引號(hào)就比較好分別了。WIN 系統(tǒng)下顯示可能會(huì)更加明顯。當(dāng)然最后還是個(gè)人喜好設(shè)置中文字體啦。
mac 系統(tǒng) Atom 編輯器截圖
三、Atom 編輯器修改字體方法
小編使用的免費(fèi)的 Atom 網(wǎng)頁(yè)代碼編輯器,所以只能用它來(lái)舉例,其它編輯器修改方法也大同小異,可自行百度哦。
1、選擇菜單 Atom ,然后在下拉菜單中選擇用戶(hù)樣式設(shè)置
2、在「atom-text-editor」加入 font-family 和 font-size 的 CSS 屬性:
font-family: "firacode-retina","Source Han Sans CN"; font-size:16px;
需要注意的是,小編使用了 Retina 屏的電腦,所以字體名稱(chēng)就用「firacode-retina」,在非高清屏的下直接使用「firacode」就行,具體大家可以自己試試,區(qū)別不是很大。
具體如下圖:
四、下載地址
下載的字體非常全面,包含 ttf 及網(wǎng)頁(yè)端的eot, woff 等字體格式,無(wú)需轉(zhuǎn)換就能直接使用。
Firacode 官方下載地址:
https://github.com/tonsky/FiraCode
思源黑體下載地址:
http://www.shejidaren.com/app-she-ji-bi-bei-zi-ti.html
總結(jié)
使用FiraCode 中文的字體組合,不僅能讓一串串代碼變得工整美觀,還能減少因字符顯示引起的出錯(cuò)率,推薦大家收藏使用。
技術(shù)等級(jí)】初級(jí)
【承接文章】《強(qiáng)大的CSS選擇器,CSS的核心技術(shù),前端小白必備功底》
本文重點(diǎn)講解CSS技術(shù)中有關(guān)字體樣式的屬性以及這些屬性的取值。本文屬于前端開(kāi)發(fā)的初級(jí)教程,適合于剛剛開(kāi)始接觸CSS技術(shù)的學(xué)習(xí)者。
從本文開(kāi)始,小海老師將帶領(lǐng)大家認(rèn)識(shí)CSS技術(shù)中的所有屬性。我把CSS技術(shù)中的各個(gè)屬性進(jìn)行了分類(lèi),首先我們從與字體樣式有關(guān)的屬性開(kāi)始。
CSS中與字體有關(guān)的屬性包括以下六個(gè):
font-family
font-size
font-weight
font-style
font-variant
color
一、字體樣式屬性:
CSS利用font-family屬性來(lái)設(shè)置字體或字體列表。
1、設(shè)置字體:
.sty01{font-family:黑體;}
上述代碼定義了用戶(hù)自定義類(lèi)sty01,該樣式設(shè)置字體為“黑體”。利用class屬性取值為sty01樣式的HTML標(biāo)記對(duì)中的文字將以“黑體”的字體顯示。
2、設(shè)置字體列表:
.sty02{font-family:漢儀綜藝體簡(jiǎn),微軟雅黑,黑體;}
上述代碼定義了用戶(hù)自定義類(lèi)sty02,該樣式設(shè)置了一個(gè)字體列表。利用class屬性取值為sty02樣式的HTML標(biāo)記對(duì)中的文字,首先以“漢儀綜藝體簡(jiǎn)”的字體顯示,目標(biāo)瀏覽器所在的設(shè)備若沒(méi)有安裝該字體,則自動(dòng)以“微軟雅黑”的字體顯示;目標(biāo)瀏覽器所在的設(shè)備若也沒(méi)有安裝“微軟雅黑”字體,則自動(dòng)以“黑體”的字體顯示。
注意:為了防止CSS文件的中文字體名稱(chēng)不符合字符集的要求,所以習(xí)慣上都是用中文字體的外文名稱(chēng)來(lái)書(shū)寫(xiě)font-family屬性的取值,下面我就為大家羅列幾個(gè)常用的字體名稱(chēng)。
設(shè)置字體為 微軟雅黑:.style1{font-family:Microsoft YaHei;}
設(shè)置字體為 宋體:.style2{font-family:SimSun;}
設(shè)置字體為 幼圓:.style3{font-family:YouYuan;}
設(shè)置字體為 黑體:.style4{font-family:SimHei;}
設(shè)置字體為 楷體:.style5{font-family:KaiTi;}
更多中文字體的西文名稱(chēng),小海老師會(huì)在后續(xù)的文章中詳細(xì)羅列。
二、字號(hào)大小屬性:
CSS利用font-size屬性來(lái)設(shè)置文本的字號(hào)效果
1、絕對(duì)大小:
xx-small
x-small
small
medium
large
x-large
xx-large
上述取值中:medium為默認(rèn)值,medium以上的取值越來(lái)越小,medium以下的取值越來(lái)越大。
2、相對(duì)大小:
smaller,比上一級(jí)元素的字體大小小一號(hào)。
larger,比上一級(jí)元素的字體大小大一號(hào)。
代碼實(shí)例:
<div style=“font-size:14px;”>
<span style=“font-size:larger;”>段落文字內(nèi)容</span>
</div>
上述代碼中“段落文字內(nèi)容”的字體大小顯示為比14px字號(hào)大一號(hào)的外觀。
3、帶有單位的長(zhǎng)度值:
代碼實(shí)例:.s1{font-size:16px;}
上述代碼定義了用戶(hù)自定義類(lèi)s1,該樣式設(shè)置字號(hào)為16px大小。
4、百分比:
設(shè)置字體字號(hào)為上一級(jí)元素的百分比大小。
代碼實(shí)例:.s2{font-size:10%;}
上述代碼定義了用戶(hù)自定義類(lèi)s2,該樣式設(shè)置字號(hào)是上一級(jí)元素的字體大小的20%。
三、字體粗細(xì)屬性
CSS利用font-weight屬性來(lái)設(shè)置文本的粗細(xì)效果
normal,普通粗細(xì),粗細(xì)度約為400。
bold,粗體,粗細(xì)度約為700。
bolder,更粗體,粗細(xì)度約為900。
lighter,更細(xì)體,粗細(xì)度約為500。
100、200、300、400、500、600、700、800、900:9個(gè)粗細(xì)等級(jí)。
但是現(xiàn)在的瀏覽器都無(wú)法將字體的粗細(xì)渲染的如此細(xì)膩,也就是說(shuō)這9個(gè)等級(jí)的粗細(xì)度并沒(méi)有明顯的差異。
四、字體斜體屬性
CSS利用font-style屬性來(lái)設(shè)置文本的斜體效果
normal,普通,字體顯示為不斜體。
italic,斜體,設(shè)置字體為斜體。
oblique,傾斜體,當(dāng)特殊字體沒(méi)有斜體效果時(shí),可以使用該取值將字體傾斜。
五、設(shè)置字體是否為小型大寫(xiě)字母
CSS技術(shù)利用font-variant屬性來(lái)設(shè)置是否為小型大寫(xiě)字母
normal,普通,字體顯示為正常。
small-caps,小型大寫(xiě)字母。
六、設(shè)置字體的顏色
CSS技術(shù)利用color屬性來(lái)設(shè)置文本顏色
十六進(jìn)制顏色代碼。
實(shí)例:h1{color:#ff0000;}
含義:重定義HTML中的h1標(biāo)記對(duì)為紅色。
十進(jìn)制顏色代碼。
實(shí)例:h2{color:rgb(0,255,0);}
含義:重定義HTML中的h2標(biāo)記對(duì)為綠色。
顏色英文單詞。
實(shí)例:h3{color:blue;}
含義:重定義HTML中的h3標(biāo)記對(duì)為藍(lán)色。
下一次小海老師會(huì)為大家講解CSS中有關(guān)文本段落的屬性,結(jié)合前面HTML的內(nèi)容,可以對(duì)頁(yè)面中的段落進(jìn)行更為細(xì)致的調(diào)整。千萬(wàn)不要錯(cuò)過(guò)哦。
如果大家希望得到更加全面的關(guān)于HTML和CSS技術(shù)講解的內(nèi)容,可以私信我,我會(huì)免費(fèi)將小海老師自己編寫(xiě)的HTML和CSS的PDF教材發(fā)給你,幫助你在前端開(kāi)發(fā)的道路上闊步前行。
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。