CSS03：字型和文字樣式
阿新 • • 發佈：2022-03-18
作用：有效的傳遞頁面資訊、美化網頁、凸顯頁面的主題、提高使用者的體驗
字型樣式
span標籤：修飾重點要突出的內容，只是約定俗成用span表示，用其他任何名字也可以
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的網頁</title> <style> /*字型樣式*/ /* font-family：字型 font-size：字型大小 font-weight：字型粗細 font：風格 粗細 寬度 大小/高度 字型 */ span{ color: red; } body{ font-family: 微軟雅黑; } h1{ font-size: 50px; } .strong{ font-weight: bold; } #summary{ font: italic bold 20px/50px 微軟雅黑; } </style> </head> <body> <h1>歡迎來到提瓦特</h1> <!--span標籤--> <p> 這裡是七種元素交匯的幻想世界<span>提瓦特</span>。 </p> <p> 在遙遠的過去，人們藉由對神靈的信仰，獲賜了驅動元素的力量，得以在荒野中築起家園。 </p> <p class="strong">五百年前，古國的覆滅卻使得天地變異…… </p> <p> 如今，席捲大陸的災難已經停息，和平卻仍未如期光臨。 </p> <p> 作為故事的主人公，你從<span>世界之外</span>漂流而來，降臨大地。你將在這廣闊的世界中，自由旅行、結識同伴、尋找掌控塵世元素的七神，直到與分離的血親重聚 </p> <p id="summary"> 一起去冒險吧 </p> </body> </html>
文字樣式
顏色、對齊、縮排、行高、裝飾
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的網頁</title> <style> /*文字樣式*/ /* color：顏色 8位十六進位制分別代表RGBA（紅綠藍+透明度），00代表無，FF代表滿 紅色0xFF0000，綠色0x00FF00、藍色0x0000FF、黑色0x000000，白色0xFFFFFF 透明度可不加 也可以通過rgb()和rgba()方法傳參 text-align：左右對齊 text-indent：縮排 line-height：行高，行高等於塊的高度就可以上下居中對齊 text-decoration: 裝飾 underline：下劃線 line-through：中劃線 overline：上劃線 none：超連結去除下劃線 text-shadow：陰影，水平陰影位置 垂直陰影位置 模糊距離 顏色 */ h1{ color: #FF0000AA; text-align: center; } .summary{ text-indent: 2em; text-align: center; } .last_p{ background: rgba(0, 255, 255, 0.3); height: 50px; line-height: 50px; } .background{ text-decoration: underline; } a{ text-decoration: none; } #submit:hover{ color: red; } #submit{ text-shadow: 0.5px 0.5px #00d202; } </style> </head> <body> <h1><a href="https://ys.mihoyo.com/?utm_source=adbdpz&from_channel=adbdpz">歡迎來到提瓦特</a></h1> <p> 這裡是七種元素交匯的幻想世界提瓦特。 </p> <p> 在遙遠的過去，人們藉由對神靈的信仰，獲賜了驅動元素的力量，得以在荒野中築起家園。 </p> <p class="background"> 五百年前，古國的覆滅卻使得天地變異…… </p> <p> 如今，席捲大陸的災難已經停息，和平卻仍未如期光臨。 </p> <p class="last_p"> 作為故事的主人公，你從世界之外漂流而來，降臨大地。你將在這廣闊的世界中，自由旅行、結識同伴、尋找掌控塵世元素的七神，直到與分離的血親重聚 </p> <p> <form action="https://ys.mihoyo.com/?utm_source=adbdpz&from_channel=adbdpz" method="get" class="summary"> <input type="submit" name="start" id="submit" value="一起來冒險吧"> </form> </p> </body> </html>