本教程案例線上演示 有路網PC端 有路網移動端 免費配套視頻教程 免費配套視頻教程 教程配套源碼資源 教程配套源碼資源 字體樣式 屬性名 含義 舉例 font-family 設置字體類型 font-family:"隸書"; font-size 設置字體大小 font-size:12px; font- ...
本教程案例線上演示
免費配套視頻教程
教程配套源碼資源
字體樣式
屬性名 含義 舉例
font-family 設置字體類型 font-family:"隸書";
font-size 設置字體大小 font-size:12px;
font-style 設置字體風格 font-style:italic;
font-weight 設置字體的粗細 font-weight:bold;
font 設置所有字體屬性 font:italic bold 36px "宋體";
font-family屬性
.p1{ font-family: "隸書";}
.p2{font-family: "黑體"; }
.p3{ font-family: "Arial Black"; }
font-size屬性
單位：px（像素）
.p1{font-size: 10; }
.p2{font-size: 20px;}
.p3{font-size: 30px;}
font-style屬性
normal、italic和oblique
字體的粗細
font-weight屬性
normal 預設值，定義標準的字體。
bold 粗體字體。
font屬性
字體屬性的順序：字體風格→字體粗細→字體大小→字體類型
p span{font:oblique bold 12px "楷體";}
文本樣式文本屬性
屬性 含義 舉例
color 設置文本顏色 color:#00C;
text-align 設置元素水平對齊方式 text-align:right;
text-indent 設置首行文本的縮進 text-indent:20px;
line-height 設置文本的行高 line-height:25px;
text-decoration 設置文本的裝飾 text-decoration:underline;
文本顏色
color屬性
十六進位方法表示顏色
color:#FFFFFF;
color:#000000;
color:FF0000;
color:#A983D8;
color:#95F141;
color:#339966;--- color:#396;
color:#EEFF66;--- color:#EF6;
6位顏色值相鄰數字兩兩相同時，可兩兩縮寫為1位
水平對齊方式
text-align屬性
值 說明
left 把文本排列到左邊。
right 把文本排列到右邊
center 把文本排列到中間
首行縮進
text-indent：px
行高
line-height：px
文本裝飾
text-decoration屬性
值 說明
none 預設值，定義的標準文本。
underline 設置文本的下劃線。
overline 設置文本的上劃線。
line-through 設置文本的刪除線。
垂直對齊方式
vertical-align屬性：middle、top、bottom
實踐-製作總裁致辭頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>總裁致辭</h1>
<h3>來源：來自東部數據</h3>
<hr/>
<p><img src="image/icon.jpg" alt="總裁致辭" width="176" height="108" />
9月16日下午，東部控股副總裁、東部數據教育公司總裁張家林老師相繼來到黑龍江外國語學院和哈爾濱學院，
分別向兩個高校的學子們分享了<strong>“懷揣夢想 創造未來—服務外包人才的成長之路”</strong>以及<strong>“互聯網+時代IT人才的成長之路”</strong>的主題演講。
</p>
<p>演講開始，張家林總裁指出隨著“互聯網+”時代的來臨，信息技術進一步推動服務外包需求變革，
以<strong>大數據、物聯網、移動互聯網、雲計算</strong>為代表的新一代信息技術正在加速與傳統產業融合發展，
基於信息化、互聯化的新興商業模式正在重新構建。
接下來，張家林總裁提出IT及服務外包產業具有知識性、專業性、實踐性的特點，決定了該產業必然是智力型、應用型人才雲集之地；
產業國際化亟需兼備技術和語言能力並能夠跨文化溝通的人才。
近年國內畢業生數量持續快速增長，面臨著就業愈加困難的窘迫，同時企業和高校也陷入了人才需求和人才輸出的“囚徒困境”中。
面對嚴峻的就業現實，張家林總裁著重給出了對大學生的建議：“不斷提升自己的軟技能和硬技能，做好職業生涯規劃，從現在開始職涯歷程的起點；
聚焦IT方向，打好基礎，積累相應的工作經驗，為就業做好充分準備。”
</p>
</body>
</html>
偽類
偽類選擇元素基於的是當前元素處於的狀態。由於狀態是動態變化的，所以一個元素達到一個特定狀態時，它可能得到一個偽類的樣式；當狀態改變時，它又會失去這個樣式。
:hover
偽類將應用於有滑鼠指針懸停於其上的元素。
語法：
標簽名:偽類名{聲明;}
a:hover
{
color:#B46210;
text-decoration:underline;
}
偽類應用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: red;
}
p:hover {
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body><a href="#">中華培訓</a>
<p>產融教育</p></body>
</html>
網頁背景顏色
background-color
列表樣式
去掉圓點
list-style:none
Web字體
Font Awesome---提供可縮放矢量圖標
官網地址：http://www.fontawesome.com.cn/
使用步驟
1.引入css
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
2.你可以通過設置CSS首碼fa和圖標的具體名稱，來把Font Awesome 圖標放在任意位置。
3.Font Awesome 被設計為用於行內元素（我們喜歡用更簡短的標簽，它的語義更加精準）。
4.如果您修改了圖標容器的字體大小，圖標大小會隨之改變。同樣也適用於顏色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
<style>
a{
font-size: 30px;
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<p>
<a href="#"><i class="fa fa-battery-2"></i>首頁</a>
<a href="#"><i class="fa fa-camera-retro"></i>首頁</a>
</p>
</body>
</html>
