CSS-字型文字樣式，超連結偽類
阿新 • • 發佈：2020-08-29
美化網頁元素
1.為什麼要美化網頁
- 傳遞頁面資訊
- 凸顯主題
- 提高使用者體驗
span標籤： 重點要突出的字，使用span套起來
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #t1{ font-size: 50px; } </style> </head> <body> 歡迎學習<span id="t1">Java</span> </body> </html>
2.字型與文字樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- font-family: 字型 font-size: 字型大小 font-width: 字型粗細 color：字型顏色 text-align: 排版，居中 text-indent: 2em： 段落首行縮排 height: 100px; line-height: 100px; 行高和塊的高度一致，就可以實現文字上下居中 --> <style> body{ font-family: "Arial Black",楷體; color: #45afff; } h1{ font-size: 50px; color: red; text-align: center; } .p1{ font-width: bold; text-indent: 2em; } .p3{ background: aliceblue; height: 100px; line-height: 100px; } </style> </head> <body> <h1>海賊王介紹</h1> <p class="p1">《航海王》是日本漫畫家尾田榮一郎作畫的少年漫畫作品，於1997年7月22日在集英社《週刊少年Jump》開始連載。改編的電視動畫《航海王》於1999年10月20日起在富士電視臺首播。</p> <p> 2012年5月11日，《航海王》獲得第41回日本漫畫家協會賞。本作被吉尼斯世界紀錄官方認證為“世界上發行量最高的單一作者創作的系列漫畫”。2017年7月21日，日本紀念日協會通過認證，將每年的7月22日設立為“ONE PIECE紀念日”。 </p> <p class="p3"> I just wish someday and somehow，We can be back together， Together we'll stay，Always and forever。 </p> </body> </html>
3.超連結偽類
正常情況下 a, a:hover
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*預設的顏色*/ a{ text-decoration: none; /*去掉下劃線*/ color: aqua; } /*滑鼠的懸浮狀態*/ a:hover{ color: orange; } </style> </head> <body> <a href="#"> <img src="images/book.jpg" alt=""> </a> <p> <a href="#">海賊王105話</a> </p> <p> <a href="">作者：尾田榮一郎</a> </p> <p> $20 </p> </body> </html>