CSS設定文字樣式——模擬Google
阿新 • • 發佈：2019-01-08
文字樣式，顧名思義，就是通過各種CSS去調整文字的樣式，從而創造出各式各樣的文字效果。
在看完這部分的視訊後，一個很明顯的感覺：這好像是網頁版的word一樣。我們平時在Word中調整文字樣式，現在是在CSS中調整各種在網頁上顯示的文字樣式。
先看看在哪些方面可以做出調整：
1.字型2.文字大小3.文字顏色4.文字粗細5.斜體6.下劃線、頂劃線和刪除線7.英文字母大小寫【例項應用】最後，就不妨看看Google的標籤是如何做出來的吧。
1.頁面框架2.調整字型3.調整顏色【具體程式碼】
<html> <head> <title>Google</title> /*標題*/ <style> p{ font-size:80px; letter-spacing:-2px; /*字母間距*/ font-family:Arial,Helvetica,sans-serif; /*字型*/ } .g1,.g2{color:#184dc6;} /*各字母顏色設定*/ .o1,.e{color:#c61800;} .o2{color:#efba00;} .l{color:#42c34a;} </style> </head> <body> <p><span class="g1">G</span><span class="o1">o</span><span class="o2">o</span><span class="g2">g</span><span class="l">l</span><span class="e">e</span></p> </body> </html>
在做例項的時候，想起來以前敲百例的時候，也是很簡單的程式碼，自己一邊實現一邊學習。現在學習CSS，有著當時的感覺，簡簡單單的例項和程式碼，也是需要自己多去實踐才行。