三、美化網頁元素
3-1👼、美化網頁原因
有效傳遞頁面信息
頁面漂亮可吸引用戶
凸顯頁面主體
提高用戶體驗
span標簽：重點要突出的文字，使用span套起來
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title01{
font-size: 50px;
}
</style>
</head>
<body>
天水<span id="title01">姜伯約</span>
</body>
</html>
3-2🥺🧑🦳、字體樣式
<!--
font-family🆒：字體
font-size👐🏽：字體大小
font-weight：字體粗細
color：字體顏色
-->
<style>
body{font: oblique bolder 16px "華文行楷";/*font-family: 華文行楷;*/color: crimson;}
h1{font-size: 50px;text-align: center;}.p1{font-weight: bold;}
</style>
3-3🪬👱🏼♀️、文本樣式
顏色🐙：color🍨，rgb，rgba
文本對齊方式👳♀️：text-align = center
首行縮進👩🦼：text-indent：2em；
行高：line-height（單行文字上下居中：line-height = height）
裝飾：text-decoration
文本圖片水平對齊：vertical-align：middle🏎；
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<!--
顏色：
單詞
RGB 0~F
RGBA A🔜：0~1a
text-align: 排版🧛🏿♀️，居中
text-indent: 2em; 段落首行縮進
line-height:行高，和塊的高度一致，就可以上下居中
-->
<style>
h1{
color: rgba(0,255,255,0.8);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p4{
background: aqua;
height: 100px;
line-height: 20px;
}
/*下劃線*/
.l1{
text-decoration: underline;
}
/*中劃線*/
.l2{
text-decoration: line-through;
}
/*上劃線*/
.l3{
text-decoration: overline;
}
</style>
</head>
<body>
<p class="l1">12</p>
<p class="l2">34</p>
<p class="l3">56</p>
<h1>《滕王閣序》</h1>
<p class="p1">豫章故郡🔽，洪都新府🚵🏿。星分翼軫，地接衡廬。襟三江而帶五湖，控蠻荊而引甌越。物華天寶，龍光射牛鬥之墟😮；人傑地靈，徐孺下陳蕃之榻。雄州霧列🎷，俊采星馳🧓◽️。臺隍枕夷夏之交💸，賓主盡東南之美🤌🏻。都督閻公之雅望，棨戟遙臨；宇文新州之懿範🛋👲🏿，襜帷暫駐。十旬休假，勝友如雲；千裡逢迎，高朋滿座。騰蛟起鳳🫰🏻，孟學士之詞宗；紫電青霜，王將軍之武庫🥞。家君作宰，路出名區𓀈；童子何知，躬逢勝餞。</p><p>時維九月，序屬三秋。潦水盡而寒潭清💅，煙光凝而暮山紫😭。儼驂騑于上路💆，訪風景于崇阿🐡；臨帝子之長洲🧑🏿💻，得天人之舊館。層巒聳翠🏃♀️，上出重霄🚣🏿♂️；飛閣流丹，下臨無地🏃🏻♀️➡️。鶴汀鳧渚，窮島嶼之縈回🍢；桂殿蘭宮💁♀️，即岡巒之體勢。</p><p>披繡闥，俯雕甍，山原曠其盈視➕，川澤紆其駭矚。閭閻撲地，鐘鳴鼎食之家🚣🏻；舸艦彌津，青雀黃龍之舳。雲銷雨霽👐🏻，彩徹區明。落霞與孤鶩齊飛，秋水共長天一色🙎🏻♀️。漁舟唱晚🚓，響窮彭蠡之濱；雁陣驚寒，聲斷衡陽之浦。</p><p class="p4">遙襟甫暢，逸興遄飛📧🙆🏽♂️。爽籟發而清風生，纖歌凝而白雲遏。睢園綠竹🧜🏿♀️，氣淩彭澤之樽👨🌾🐸；鄴水朱華，光照臨川之筆。四美具，二難並。窮睇眄于中天🙍🏼♀️，極娛遊于暇日。天高地迥，覺宇宙之無窮；興盡悲來，識盈虛之有數。望長安于日下📻，目吳會于雲間𓀇。地勢極而南溟深，天柱高而北辰遠🤹🏽♂️。關山難越，誰悲失路之人？萍水相逢🧼，盡是他鄉之客🙆🏽♂️。懷帝閽而不見，奉宣室以何年🌦？</p>
</body>
</html>
3-4、陰影
/*text-shadow：陰影顏色，水平偏移，垂直偏移🛃，陰影半徑*/
#man{
text-shadow: aqua 10px 10px 2px;}
3-5👨🏻🦼➡️、超鏈接偽類
正常情況下🛕：a🧑🏼，a:hover
a{
text-decoration: none;
color: #030e0c;}
/*鼠標懸浮的顏色（只需要記住）*/
a:hover{
color: orange;
font-size: 50px;}
/*鼠標按住未釋放的狀態*/
a:active{
color: red;}
3-6、列表
/*ul li*//*
list-style:
none 去掉原點
circle 空心圓
decimal🚵🏼♀️：數字
square🧑🏿🌾：正方形
*/
ul{
background: darkgrey ;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
3-7、背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
/*默認是全部平鋪*/
background-image: url("images/1.png");
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
3-8🤟、漸變
background-color: #D9AFD9;
background-image: linear-gradient(340deg, #D9AFD9 0%, #97D9E1 100%);
作者：姜伯約
