CSS（二）字型樣式、文字樣式、點選樣式
阿新 • • 發佈：2022-02-23
CSS（二）字型樣式、文字樣式、點選樣式
目錄字型樣式
約定俗成的標籤
-
一般在span裡面寫文字（通過css修改字型樣式）
-
<span>在裡面寫文字</span>
字型設定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字</title> <!-- font-family:字型 font-family:"在裡面的英文字型",在裡面的中文字型（可以同時設定中文和英文字型） color:字型顏色 font-weight:字型粗細 font-size:字型大小 --> <style> span[class="01"]{ font-family: 楷體; color: blue; font-weight: bold; font-size: 50px; } </style> </head> <body> <span class="01"> 史小鵬 </span> </body> </html>
文字樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字</title> <!-- text-align:文字位置 text-align: center;文字居中 line-height:行高(和塊的高度一致就可以上下居中) margin-方向:內邊距 下劃線：text-decoration: underline 中劃線：text-decoration: line-through 上劃線：text-decoration: overline --> <style> span[class="01"]{ text-align: center; line-height:10px ; margin: 10px; margin-top:2px ; } span[class="02"]{ text-decoration: underline; } span[class="03"]{ text-decoration: line-through; } span[class="04"]{ text-decoration: overline; } </style> </head> <body> <div> <span class="01"> 史小鵬 </span> <span class="02">張三</span> <span class="03">張三</span> <span class="04">張三</span> </div> </body> </html>
點選狀態
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>點選</title> <style> a[class="a01"]{ color: black; /*去掉下劃線*/ text-decoration: none; } /*滑鼠懸浮的狀態*/ a:hover{ color: blue; } /*滑鼠按住未釋放的狀態*/ a:active{ color: yellow; } </style> </head> <body> <a href="#" class="a01"> <span class="s01">史小鵬11111</span> </a> </body> </html>