美化網頁
CSS系列文章目錄
- CSS3快速入門：一、三種CSS匯入方式
- CSS3快速入門：二、CSS選擇器
- CSS3快速入門：三、美化網頁
文章目錄
- 美化網頁
- CSS系列文章目錄
- 為什么使用CSS
- 1. 字體
- 2. 排版網頁
- 3. 超鏈接偽類
- 4. 串列樣式
- 5. 背景樣式
為什么使用CSS
- 有效的傳遞頁面資訊
- 美化頁面，頁面漂亮才可以吸參考戶
- 突出頁面的主題內容
- 具有良好的用戶體驗
1. 字體
常用的文字相關的屬性如下：
- color：設定文本顏色，例如color:red;字體顏色為紅色
- font-family：設定字體型別，例如font-family:“宋體”;設定字體型別為宋體
- font-size：設定字體大小，例如font-size:12px;設定字體大小等于12px
- font-style：設定字體風格,例如font-style:italic;設定字體為斜體
- font-weight：設定字體粗細，例如font-weight:bold;設定字體為粗體
- font：在一個宣告中設定所有字體屬性，例如font:italic bold 18px “楷體”;
其代碼示例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>字體</title>
<style>
#p1{
color: red;
font-style:italic;
font-size:14px;
font-weight: bold;
font-family: "楷體";
}
#p2{
color:blue;
font:italic normal 18px "宋體";
}
</style>
</head>
<body>
<p id="p1">這是一個段落，</p>
<p id="p2">這是一個段落，</p>
</body>
</html>
網頁顯示如下：
2. 排版網頁
常用網頁的文本排版如下：
- 文本對齊方式：text-align 適用于塊級元素
- 首行縮進：text-indent 適用于塊級元素
- 行高：line-height
- 下劃線：text-decoration
- 圖片文字水平對齊：vetical-align
其代碼示例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>排版網頁</title>
<style>
#p1{
text-align: center;
}
#p2{
text-indent: 2em;
}
#span1{
line-height: 28px;
}
#span2{
text-decoration: underline;
}
#span3{
text-decoration:line-through;
}
#span4{
text-decoration:overline;
}
a{
text-decoration:none;
}
img,#span5{
vertical-align: middle;
}
</style>
</head>
<body>
<p id="p1">這是一句話</p>
<p id="p2">許嵩（Vae），1986年5月14日生于安徽省合肥市，中國內地流行樂男歌手、詞曲創作人、音樂制作人，現任海蝶音樂公司（現為太合音樂集團）音樂總監，畢業于安徽醫科大學，2009年1月發行首張詞曲全創作專輯《自定義》，2010年1月發行第二張詞曲全創作專輯《尋霧啟示》，2011年4月發行第三張詞曲全創作專輯《蘇格拉沒有底》，2012年7月發行第四張詞曲全創作專輯《夢游計》，2014年8月發行第五張詞曲 ...</p>
<span id="span1">2006年初，許嵩是一名在安徽醫科大學讀大二的男生，課余時間里憑借自幼學習鋼琴與古典音樂打下的功底，自修作曲及編曲、混音制作，隨后他開始創作一些音樂作品，這些音樂作品被他以“Vae”這個筆名傳上個人網站，引起了網友的關注，</span><br/>
<span id="span2">回憶是一條狂犬 追咬了許多年</span>
<span id="span3">回憶是一條狂犬 追咬了許多年</span>
<span id="span4">回憶是一條狂犬 追咬了許多年</span>
<a href="" alt="">這是一個超鏈接</a><br/>
<img src="images/vv.jpg" alt=""/>
<span id="span5">許嵩</span>
</body>
</html>
網頁顯示如下：
3. 超鏈接偽類
常用的超鏈接偽類有如下幾種：
- a:link：未單擊訪問后的樣式
- a:visited：單擊訪問后的樣式
- a:hover：滑鼠懸浮其上的樣式
- a:active：滑鼠單擊未釋放的樣式
設定偽類的順序a:link>a:visited>a:hover>a:active
其代碼示例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超鏈接偽類</title>
<style type="text/css">
a{
text-decoration: none;
display: inline-block;
margin: 10px;
padding: 5px;
}
a:link{
background:#C8C8C8;
font-size: 12px;
color:black;
}
a:visited{
background: #4AEC25;
}
a:hover{
color: white;
background: black;
}
a:active{
background: #11F2E9;
}
</style>
</head>
<body>
<a href="./超鏈接偽類.html" alt="">1</a>
<a href="../排版網頁/images/vv.jpg" alt="">2</a>
<a href="../排版網頁/排版網頁.html" alt="">3</a>
<a href="../字體/字體.html" alt="">4</a>
<a href="./超鏈接偽類.html" alt="">5</a>
</body>
</html>
網頁顯示如下：
4. 串列樣式
常用的串列樣式有如下幾種：
- list-style-type：設定不同的串列樣式
- list-style-image：使用影像來替換串列項的標記
- list-style-position：規定串列中串列專案標記的位置
- list-style：簡寫在一個宣告中設定所有的串列屬性
其代碼示例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>串列</title>
<style>
#id2{
list-style: none;
}
#id3{
list-style-image:url("images/v.jpg");
list-style-position: outside;
}
#id4{
list-style: square inside;
}
</style>
</head>
<body>
<ul>
<li id="id1">第一項</li>
<li id="id2">第二項</li>
<li id="id3">第三項</li>
<li id="id4">第四項</li>
</ul>
</body>
</html>
網頁顯示如下：
5. 背景樣式
背景樣式常用屬性如下：
- background-color：設定背景顏色
- background-image：設定背景圖片
- background-position：背景定位
- background-repeat：背景重復方式，其中no-repeat不重復，repeat-x水平重復 repeat-y垂直重復
- background：在一個宣告中設定所有的背景屬性
漸變顏色背景參考網站：https://www.grabient.com/
其代碼示例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景</title>
<style>
div{
width: 100px;
height: 100px;
}
#div1{
background-color: aqua;
}
#div2{
background-image: url("images/v.jpg");
}
#div3{
background: url("images/v.jpg") repeat-y;
background-position: 10px -25px;
}
#div4{
background-color: #FBDA61;
background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
網頁顯示如下：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/272507.html
標籤：其他
下一篇：原型和原型鏈的介紹和使用