CSS樣式更改-字體設(shè)置Font&amp;邊框Border

篇文章主要講述了CSS樣式更改中的背景Background，這篇文章我們來談?wù)勛煮w設(shè)置Font&邊框Border的基礎(chǔ)用法。

1.字體設(shè)置Font

1).字體系列

<div style='font-family: sans-serif normal'></div>
可用字體：
Serif
Sans-serif
Monospace
Cursive
Fantasy
Times
Courier

2).字體風(fēng)格

<div style='font-style:normal'></div>
文本傾斜:
normal   文本正常顯示
italic   文本斜體顯示
oblique  文本傾斜顯示

3).字體變形

<div style='font-variant:small-caps'></div>
normal          顯示標(biāo)準(zhǔn)字體。
small-caps      顯示小型大寫字母的字體。

4).字體加粗

<div style='font-weight:normal'></div>
normal    標(biāo)準(zhǔn)的字符
bold      粗體字符
bolder    更粗的字符
lighter   更細(xì)的字符
也可以使用數(shù)字表示，范圍為100~900

5).字體大小

<div style='font-size:60px'></div>
smaller 變小
larger  變大
length  固定值
而且還支持百分比

2.邊框Border

首先說一下邊框風(fēng)格，它的風(fēng)格比較多，常用的一般是實(shí)線為主：

<div style='border-style:none'></div>
hidden     隱藏邊框
dotted     點(diǎn)狀邊框
dashed     虛線邊框
solid      實(shí)線邊框
double     雙線邊框
groove     3D凹槽邊框
ridge      3D壟狀邊框
inset      3D inset邊框
outset     3D outset邊框
邊框也有四面，所以也會(huì)有上下左右
所以有時(shí)候?yàn)榱烁_定位并修改樣式可以使用：
border-top-style     上邊框樣式
border-right-style   右邊框樣式
border-bottom-style  下邊框樣式
border-left-style    左邊框樣式

先定義邊框的寬度風(fēng)格和顏色，然后定義邊框的其它屬性。

1).邊框形狀

<div style='border-radius:25px;'></div>

2).邊框陰影

<div style='box-shadow:1px 2px 2px 2px red'></div>
參數(shù)含義：
邊框各個(gè)方向的大小和顏色

3).邊框圖片

<div style='border-image:url(1.png) 30 30 10 round'></div>
參數(shù)含義：
邊框圖片的路徑
圖片邊框向內(nèi)偏移
圖片邊框的寬度
邊框圖像區(qū)域超出邊框的量
圖像邊框是否應(yīng)平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。

總結(jié)

這篇文章主要介紹了CSS樣式更改篇中的字體設(shè)置Font&邊框Border設(shè)置，希望讓大家對CSS選擇器有個(gè)簡單的認(rèn)識(shí)和了解。
****看完本文有收獲？請轉(zhuǎn)發(fā)分享給更多的人****

IT共享之家

想要學(xué)習(xí)更多，請前往Python爬蟲與數(shù)據(jù)挖掘?qū)Ｓ镁W(wǎng)站：http://pdcfighting.com/

作一封郵件和制作web頁面還是有很大不同的。當(dāng)不同的瀏覽器都在不斷向標(biāo)準(zhǔn)靠近的同時(shí)，大多數(shù)郵件客戶端卻止步不前，甚至有一些是在退步的。在2007年，Microsoft 將 Outlook 的渲染引擎從 IE 轉(zhuǎn)換成 Word的渲染方式，而一些基于web的郵件客戶端，像Gmail和Hotmail，則增加了一些怪異的模式，還有Lotus Notes的一些技巧。

根據(jù)我的經(jīng)驗(yàn)來看，我們解決這些問題的關(guān)鍵是要關(guān)注下面三件事情。首先，保持簡單，你的郵件設(shè)計(jì)的越復(fù)雜，你的郵件在某個(gè)受歡迎的、不支持標(biāo)準(zhǔn)的客戶端上“抽風(fēng)”的可能性就越大。其次，你需要將你的編碼技巧退步十年，這通常意味著我們要使用嵌套的表格，將CSS寫成內(nèi)聯(lián)的形式等。最后，你需要對你的設(shè)計(jì)進(jìn)行規(guī)律性的測試。

使用表格布局

因?yàn)橹T如Gmail和Outlook 2007 無法支持浮動(dòng)(float)、外邊距(margin)、內(nèi)填充（padding）,你需要使用表格來作為你的郵件的框架。雖然表格嵌套的方法被廣泛支持，但是在對單元格的寬度、外邊距和內(nèi)填充的處理方法并不一致。為了達(dá)到最優(yōu)的效果，當(dāng)制作表格結(jié)構(gòu)時(shí)，請記住下面的技巧。

1、為每個(gè)單元格設(shè)置寬度，而不是表格

當(dāng)你把表格寬度、td 寬度、td的填充和CSS的填充寫到一封郵件時(shí)，你看到的結(jié)果可能是每個(gè)郵件客戶端它們看上去都不一樣。最可靠的方法是我們將為表格的每個(gè)單元格(th,td)設(shè)置寬度，而不是表格(table)本身。如下：

永遠(yuǎn)別指望郵件客戶端能夠計(jì)算出你沒有指定寬度的單元格的寬度。它絕對不會(huì)。同時(shí)也要避免使用基于百分比的寬度，像 Outlook 2007 這樣的客戶端從來不考慮這種寬度方式，特別是這些嵌套的表格。像素級視覺，如果你想對每個(gè)單元格做填充，可以使用表單的單元格填屬性或者用CSS的內(nèi)填充，但是不要這兩種一起使用。

2、嵌套迷思

表格的嵌套相對于設(shè)置左右浮動(dòng)和外邊距(margin)或者表單單元格填充的方法更加穩(wěn)固。如果你能使用這種表格嵌套的方法達(dá)到相同的效果，這將會(huì)給你在那些蹩腳的（buggier）郵件終端上面獲得最好的結(jié)果。

3、使用一個(gè)容器表單來設(shè)置 body 背景色彩

很多郵件客戶端會(huì)忽略掉在CSS中或者<body>標(biāo)簽中設(shè)置的背景色。針對這種情況，將你的整封郵件用一個(gè)寬度為100%的表單包起來，并且為其設(shè)置背景色。如下：

你可以使用同樣的方案在背景圖片的設(shè)置上，需要記住的是某些郵件客戶端是不支持背景圖片的，這樣你就需要設(shè)置一個(gè)背景顏色作為備份方案。

4、在單元格中避免使用多余的空格（whitespace）

盡最大可能，避免<td>標(biāo)簽中出現(xiàn)空格。某些郵件客戶端（Yahoo!或者Hotmail）可能會(huì)在某些場景下，對單元格的上面或者下面增加額外的填充，把你的設(shè)計(jì)破壞掉。

CSS 和基本的文字格式

當(dāng)某些郵件設(shè)計(jì)師盡他們最大的努力去避免使用CSS時(shí)，他們又會(huì)去依賴夢魘般的標(biāo)簽，但實(shí)際情況是很多的CSS屬性是被大部分郵件客戶端支持的。請查看下面的跨郵件終端的綜合CSS支持列表list of CSS support，從中你也能發(fā)現(xiàn)一些安全的屬性和一些應(yīng)該被避免使用的屬性。

1、將css寫成內(nèi)聯(lián)(inline)的樣式

Gmail就是這方面的罪魁禍?zhǔn)住SS被從<head>和<body>中剝離，我們別無選擇的會(huì)將樣式寫成內(nèi)聯(lián)的形式。一個(gè)好消息是你可以完全自動(dòng)化的完成轉(zhuǎn)化。像Premailer提供意見點(diǎn)擊的方式完成這一過程。我強(qiáng)烈建議你將此步驟作為你構(gòu)建活動(dòng)的最后一步，你就能感受到這個(gè)CSS的所有益處。

2、避免使用字體的簡寫和十六進(jìn)制計(jì)數(shù)法

一部分郵箱客戶端會(huì)放棄對簡寫的css字體屬性的解析。比如，絕對不要將你的字體樣式設(shè)置成下面的樣子。如下：

相反，我們應(yīng)該寫成下面的形式：

談到字體這個(gè)話題，我最近也在不同的郵件客戶端測試引用字體（@font-face）。結(jié)果是凄涼的，這些瀏覽器安全的字體在郵件中使用還是遙遙無期。

當(dāng)我們用CSS來聲明顏色屬性時(shí)，有些郵件客戶端并不支持簡寫的16進(jìn)制的顏色值，比如 color:#f60; 我們需要將其補(bǔ)充完整 color:#ff6600;。為了達(dá)到最優(yōu)的效果，我們需要使用常規(guī)寫法。

段落

像前面提到的單元格的間距，段落的間距也無法做到所有客戶端的一致。我看到過設(shè)計(jì)師使用兩個(gè) 或者用DIV寫上內(nèi)聯(lián)(inline)的外邊距(margin)樣式彌補(bǔ)這個(gè)短板，但是我最近的測試顯示大多數(shù)情況下對段落的支持都還是比充足的（有一段時(shí)間 Yahoo! 根本不支持段落標(biāo)簽）。

最好的實(shí)踐方法是對每個(gè)段落通過內(nèi)聯(lián)(inline)的方法設(shè)置外邊距(margin)，像下面這樣：

再次提示，在你構(gòu)建郵件的時(shí)候通過在head標(biāo)簽中增加樣式，然后通過Premailer將他們轉(zhuǎn)化成每個(gè)段落的內(nèi)聯(lián)樣式。

如果你的設(shè)計(jì)對高度是很敏感的或者需要像素級別的完美，我強(qiáng)烈建議你不要將所有的段落寫到一起，而是將文本的格式化工作放到表單的單元格中來做。你可能會(huì)需要使用到表單的嵌套或者單元格填充(cellpadding)/CSS 來達(dá)到期望的樣子。下面就是一個(gè)例子：

鏈接

某些郵件客戶端將會(huì)用他們的默認(rèn)樣式覆蓋你的鏈接色，你可以通過兩部來防止其發(fā)生。第一，針對每一個(gè)鏈接設(shè)置一個(gè)內(nèi)聯(lián)的（inline）的顏色：

接下來，增加一個(gè)冗余的 span 標(biāo)簽在 a 標(biāo)簽中。

也許這些方案看上去比較過激，如果這個(gè)顏色對你的設(shè)計(jì)很重要，這個(gè)多余的 span 標(biāo)簽是你達(dá)到一致表現(xiàn)的最好解決方案。

HTML郵件中的圖片

很重要的一件需要牢記在心中的關(guān)于圖片的事情是你的訂閱者可能看不到你的圖片。如果你有這方面的準(zhǔn)備，你就會(huì)保持你的內(nèi)容簡單，并且重要的內(nèi)容不通過圖片的形式來展示。

在這個(gè)思想的指導(dǎo)下，在使用HTML郵件的過程中，下面有一些基本的要領(lǐng)需要牢記：

1、避免占位圖片

雖然使用占位圖片和嵌套表格的方式在10年前很流行，許多郵件客戶端已經(jīng)將其排除作為一種可靠的技術(shù)。很多客戶端會(huì)使用一個(gè)相同尺寸的空占位來替換圖片，另外一些會(huì)將所有的圖片移除。大多數(shù)郵件客戶端會(huì)給圖片賦予默認(rèn)的圖片區(qū)塊，這將導(dǎo)致訂閱者的第一感覺很差。堅(jiān)持將單元格賦予固定的寬度，讓其在沒有圖片的時(shí)候版式不會(huì)亂掉。

2、將圖片定義尺寸

如果你沒有給每個(gè)圖片設(shè)置尺寸，當(dāng)圖片沒有被下載時(shí)，有些客戶端會(huì)自己發(fā)明一個(gè)他們自己的尺寸，你的版式就亂掉了。同時(shí)，確保你的所有圖片在被用到郵件中前，都被賦予了正確的尺寸。某些客戶端會(huì)忽略你代碼中設(shè)置的尺寸，而去使用真實(shí)的圖片尺寸。

3、避免使用 PNG 圖片

Lotus Notes 6 和 7 并不支持 8位（8-bit）和24位（24-bit）的 PNG 圖片，所以需要使用GIF或者JPG格式的圖片，即使這會(huì)增加而外的圖片大小。

4、為背景圖片提供備份的顏色

Outlook 2007 不支持背景圖片(aside from this hack to get full page background images working)。如果你想在你的設(shè)計(jì)中使用背景圖像，提供一個(gè)背景色作為備份支持方案。這樣就能同時(shí)解決圖片被屏蔽和Outlook 2007的問題。

5、不要忘記標(biāo)注替代文本（alt text）

缺少標(biāo)準(zhǔn)的支持意味著郵件客戶端對語義化和訪問性良好的HTML郵件的破壞性是很大的。即使這樣，從圖片可能被屏蔽角度看，提供替代文本也是很重要的。這樣即使圖片在默認(rèn)狀態(tài)下被限制，大多數(shù)郵件客戶端也能顯示提供的文本來替代。另外還需要技術(shù)的是某些客戶端，比如 Outlook 2007, Hotmail 和 Apple Mail 在圖片被屏蔽的時(shí)候，并不提供替代文本（alt text）.

6、針對 Hotmail 使用顯示hack

令人費(fèi)解的是，Windows Live Hotmail 對每個(gè)圖片增加了幾個(gè)像素的填充。一個(gè)變通的方案就是使用下面的顯示屬性來解決這個(gè)問題。

這樣就能移除掉Hotmail的填充值，但是你也可能會(huì)給其它客戶端埋下隱患。

7、避免使用浮動(dòng)屬性（float）

Outlook 2007 和早期版本的 Notes 并不支持浮動(dòng)屬性（float）。在郵件中我們可以使用對齊屬性在針對圖像標(biāo)簽做到浮動(dòng)圖片的目的。

如果你在 Yahoo！的郵件中發(fā)現(xiàn)圖片的怪異表現(xiàn)，增加 align="top" 可能能夠解決你遇到的問題。

視頻郵件

由于缺少 Javascript 或者其他對象標(biāo)簽（object tag）的支持，視頻郵件最大的程度就是gif動(dòng)畫（如果你認(rèn)為那是視頻的話）。盡管如此，我最近做的一些關(guān)于用html5 videio 標(biāo)簽的測試結(jié)果，還是讓人感覺不錯(cuò)。

HTML 5的標(biāo)簽?zāi)壳霸谝徊糠粥]件終端是無法運(yùn)行的，包括 Apple Mail,Entourage 2008, MobileMe 和 iPhone.作為如果視頻不被支持的補(bǔ)救方法，你可以提供穩(wěn)定的備選內(nèi)容，比如gif 動(dòng)畫或者一個(gè)可以點(diǎn)擊到瀏覽器播放視頻的圖片。

當(dāng)然，你是否需要將視頻添加到你的郵件里面，那就是另外一個(gè)議題了，如果你的答案是肯定的，你可以使用這些代碼案例。

關(guān)于移動(dòng)端郵件的那些事

移動(dòng)端有機(jī)胺的情況近期顯得比較雜亂了，隨著iPhone,Android的發(fā)明和Palm和RIM的改進(jìn)，認(rèn)為移動(dòng)端電子郵件終端不重要的年代一去不復(fù)返了。

為了給移動(dòng)端訂閱用戶良好的體現(xiàn)，我們在編碼的過程中也有幾個(gè)關(guān)鍵點(diǎn)需要牢記心中。

1、保持寬度小于600像素

受限于郵件客戶端的視窗，這條規(guī)則來移動(dòng)視窗到來之前的年代就很重要。事實(shí)上，iphone 的視窗是320像素，Droid是480像素，Blackberry大概360像素。堅(jiān)持最大600像素寬的設(shè)計(jì)，能夠讓你的郵件縮小到上面提到的設(shè)備上面依然可讀。這個(gè)尺寸在桌面端和web端的預(yù)覽效果也很好。

2、注意文本尺寸的自動(dòng)調(diào)整

作為一個(gè)好的特性，基于webkit郵件客戶端(比如 iPhone, Pre 和 Android) 能夠自動(dòng)調(diào)整文本的大小來提高閱讀性。如果你的測試結(jié)果表明這項(xiàng)特點(diǎn)給你帶來的好處是破外了你的設(shè)計(jì)，你可以通過下面的屬性禁用：

不要忘記去測試

雖然近幾年郵件客戶端對標(biāo)準(zhǔn)的支持并沒有取得長足的進(jìn)步，但是某些郵件客戶端的改變卻從未停止（有好有壞），基于 web 的客戶端，如 Yahoo!、hotmail 和 Gmail 在這方面乏善可陳。我看到過無數(shù)次可行的設(shè)計(jì)方案被停止支持，沒有任何解釋。

基于這個(gè)原因，你也要對你的郵件設(shè)計(jì)保持規(guī)律的測試。我發(fā)現(xiàn)每個(gè)月進(jìn)行一些快速的測試的小技巧，特別基于web的客戶端。好的消息是經(jīng)過幾次設(shè)計(jì)和測試，你將會(huì)從這些雜亂無章中找到規(guī)律。一些潛在的陷阱將變的可以預(yù)計(jì)，一個(gè)對郵箱友好的設(shè)計(jì)模型也會(huì)在你心中成型。

本文參考“新浪UED”：創(chuàng)建堅(jiān)如磐石的HTML郵件

TML <base> 元素

指定用于一個(gè)文檔中包含的所有相對 URL 的根 URL。一份中只能有一個(gè) <base> 元素。

包含屬性href 和

target 可以指定a 標(biāo)簽的默認(rèn)窗口打開行為

<base href="https://www.baidu.com/img/123" target="_banlk"></base> 默認(rèn)就打開新的窗口 <a href="aaa">123</a>

使用

雖然在codepen 的代碼上編寫的但是能夠正確的通過base url + img 的src 定位顯示出圖片

content 標(biāo)簽

HTML <aside> 元素

表示一個(gè)和其余頁面內(nèi)容幾乎無關(guān)的部分，被認(rèn)為是獨(dú)立于該內(nèi)容的一部分并且可以被單獨(dú)的拆分出來而不會(huì)使整體受影響。

HTML <blockquote> 元素

（或者 HTML 塊級引用元素），代表其中的文字是引用內(nèi)容。通常在渲染時(shí)，這部分的內(nèi)容會(huì)有一定的縮進(jìn)（注中說明了如何更改）。若引文來源于網(wǎng)絡(luò)，則可以將原內(nèi)容的出處 URL 地址設(shè)置到 cite 特性上，若要以文本的形式告知讀者引文的出處時(shí)，可以通過 <cite> 元素。

HTML <figure> 元素

代表一段獨(dú)立的內(nèi)容, 經(jīng)常與說明（caption） <figcaption> 配合使用, 并且作為一個(gè)獨(dú)立的引用單元。當(dāng)它屬于主內(nèi)容流（main flow）時(shí)，它的位置獨(dú)立于主體。這個(gè)標(biāo)簽經(jīng)常是在主文中引用的圖片，插圖，表格，代碼段等等，當(dāng)這部分轉(zhuǎn)移到附錄中或者其他頁面時(shí)不會(huì)影響到主體。

Inline text semantics

HTML 縮寫元素（<abbr>）

用于展示縮寫，并且可以通過可選的 title 屬性提供完整的描述。

ps: 完整描述樣式貌似不能自定義

HTML鍵盤輸入元素(<kbd>)

用于表示用戶輸入，它將產(chǎn)生一個(gè)行內(nèi)元素，以瀏覽器的默認(rèn)monospace字體顯示。

HTML標(biāo)記文本元素()

表示為引用或符號(hào)目的而標(biāo)記或突出顯示的文本，這是由于標(biāo)記的段落在封閉上下文中的相關(guān)性或重要性造成的。

ps:項(xiàng)目中大量使用span 標(biāo)記的做法不符合html5 的語義化

HTML Ruby Base（<rb>）

元素用于分隔<ruby>注釋的基本文本組件（即正在注釋的文本）。一個(gè)<rb>元素應(yīng)該包裝基本文本的每個(gè)單獨(dú)的原子段。

ps: 拼音注解

<samp> 元素

用于標(biāo)識(shí)計(jì)算機(jī)程序輸出，通常使用瀏覽器缺省的 monotype 字體（例如 Lucida Console）。

HTML 中的

元素將使文本的字體變小一號(hào)。(例如從大變成中等，從中等變成小，從小變成超小)。在HTML5中，除了它的樣式含義，這個(gè)元素被重新定義為表示邊注釋和附屬細(xì)則，包括版權(quán)和法律文本。

HTML 元素定義了一個(gè)文本區(qū)域，出于排版的原因，與主要的文本相比，應(yīng)該展示得更低并且更小。

ps: 下腳標(biāo)

HTML 元素定義了一個(gè)文本區(qū)域，出于排版的原因，與主要的文本相比，應(yīng)該展示得更高并且更小。

ps: 上腳標(biāo)

HTML 元素

使文本在其內(nèi)容的基線下的一行呈現(xiàn)下劃線。在HTML5中, 此元素表示具有未標(biāo)注的文本跨度，顯示渲染，非文本注釋，例如將文本標(biāo)記為中文文本中的專有名稱(一個(gè)正確的中文標(biāo)記), 或將文本標(biāo)記為拼寫錯(cuò)誤

HTML <map>

與 <area> 屬性一起使用來定義一個(gè)圖像映射(一個(gè)可點(diǎn)擊的鏈接區(qū)域).

HTML <track> 元素

被當(dāng)作媒體元素—<audio> 和 <video>的子元素來使用。它允許指定計(jì)時(shí)字幕（或者基于時(shí)間的數(shù)據(jù)），例如自動(dòng)處理字幕。

HTML <object> 元素

（或者稱作 HTML 嵌入對象元素）表示引入一個(gè)外部資源，這個(gè)資源可能是一張圖片，一個(gè)嵌入的瀏覽上下文，亦或是一個(gè)插件所使用的資源

ps: 支持引入的資源類型

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types

關(guān)于支持資源類型的測試

http://joliclic.free.fr/html/object-tag/en/index.php

在線咨詢

上一篇：使用Python構(gòu)建Markdown到HTML的轉(zhuǎn)換管道
下一篇：簡單小程序：登錄頁面（html）

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

CSS樣式更改-字體設(shè)置Font&amp;amp;邊框Border