網頁設計與制作教程Web前端開發(fā)（第7版）課件：CSS3的屬性-CSS字體屬性_第1頁
網頁設計與制作教程Web前端開發(fā)（第7版）課件：CSS3的屬性-CSS字體屬性_第2頁
網頁設計與制作教程Web前端開發(fā)（第7版）課件：CSS3的屬性-CSS字體屬性_第3頁
網頁設計與制作教程Web前端開發(fā)（第7版）課件：CSS3的屬性-CSS字體屬性_第4頁
網頁設計與制作教程Web前端開發(fā)（第7版）課件：CSS3的屬性-CSS字體屬性_第5頁
已閱讀5頁，還剩9頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

本章介紹CSS設置背景、文本、列表、圖像、表格、表單、鏈接等元素的屬性樣式。

CSS3的屬性CSS字體屬性目錄

CSS3的屬性5.1CSS背景屬性5.2CSS字體屬性5.3CSS文本屬性5.4CSS尺寸屬性5.5CSS列表屬性5.6CSS表格屬性5.7CSS內容屬性5.8CSS屬性的應用5.9實訓——制作社區(qū)網頁面習題55.2CSS字體屬性5.2.1字體類型屬性font-family語法：font-family:name1,name2,…示例：div{font-family:Courier,“CourierNew”,monospace,“微軟雅黑";}5.2CSS字體屬性5.2.2字體尺寸屬性font-size語法：font-size:absolute-size|relative-size|length|percentage示例：p{font-style:normal;}p{font-size:12px;}p{font-size:20%;}5.2CSS字體屬性5.2.3字體傾斜屬性font-style語法：font-style:normal|italic|oblique示例：p{font-style:normal;}p{font-style:italic;}p{font-style:oblique;}5.2CSS字體屬性5.2.4小寫字體屬性font-variant語法：font-variant:normal|small-caps示例：span{font-variant:small-caps;}5.2CSS字體屬性5.2.5字體粗細font-weight語法：font-weight:normal|bold|bolder|lighter|number示例代碼如下。span{font-weight:800;}5.2CSS字體屬性【例5-11】設置字體樣式案例，本例文件5-11.html的顯示效果，如圖5-13所示。5.2CSS字體屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>字體屬性</title><styletype="text/css">h2{font-family:黑體;/*設置字體類型*/}p{font-family:Arial,"TimesNewRoman";font-size:12pt;/*設置字體大小*/}.one{font-weight:bold;/*設置字體為粗體*/font-size:20px;}.two{font-weight:400;/*設置字體為400粗細*/font-size:20px;}.three{font-weight:900;/*設置字體為900粗細*/font-size:20px;}p.italic{font-style:italic;/*設置斜體*/}</style></head>5.2CSS字體屬性<body><h2>CSS字體屬性</h2><p>網頁主要是通過<spanclass="one">文字</span>傳遞信息，字體具有兩方面的作用：<spanclass="two">一是傳遞語義功能，二是美學效應。</span></p><pclass="italic">由于不同的字體給人帶來不同的感受，因此對于<spanclass="three">網頁設計人員</span>來說，首先需要考慮的問題就是準確地選擇字體屬性。…。

</p></body></html>5.2CSS字體屬性5.2.6字體簡寫屬性fontfont是字體屬性的簡寫或復合屬性。語法：font:font-style|font-variant|font-weight|font-size|line-height|font-familyfont:caption|icon|menu|message-box|small-caption|status-bar示例代碼如下。h1{font:15pxbold"Arial"normal;}p{font:italicsmall-caps50012pxCourier;}p{font:italicsmall-caps50012px宋體;}p{font:italicsmall-caps500150%Courier;}p{font:18pxserif;}5.2CSS字體屬性5.2.7CSS3新增使用服務器字體格式：@font-face{font-family:字體名稱;

src:url(字體文件url),1ocal(該字體在本地的名稱);}定義字體。示例代碼如下。@font-face{font-family:myFirstFont;src:url('Sansation_Light.ttf');}【例5-12】使用服務器字體的完整示例。5.2CSS字體屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><style>@font-face{font-family:myFirstFont;/*定義字體名*/src:url('Sansation_Light.ttf');}div{font-family:myFirstFont;/

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論