本小節基本要求:
要點:
1、樣式選擇器class
class(樣式)選擇器能做什麼
在實際開發網站中,css規定了兩種選擇器,一種是樣式選擇器class,一種是Id選擇器#。
class翻譯過來有種類的意思,中國人将它弄得好聽點兒,就叫樣式。
描出一個網站輪廓,利用樣式選擇器就夠了。
一個很簡單的例子:
1、寫一個html文件,在body裡面寫一個div标簽,标簽中文本寫上一段字:hello world!
2、右鍵run,運行一下看效果
3、我想給這個div标簽變成一個框我該怎麼做?很簡單,如下,給div标簽加一個樣式選擇器。
要點:
4、右鍵run,運行一下
可以看到,并沒有框!
為什麼沒有?
那是因為我雖然定義了這個名叫haha的css選擇器,但是還沒有去編寫它的代碼!
5、為了省事,我就不新建一個css文件了,直接在這個html文件中寫css代碼。
要點:
注意寫法,我用了一個标識符 . , 這個點是一個标志,标志什麼?标志這個haha 就是一個樣式選擇器。
解釋一下haha選擇器中代碼的含義:
boder:1px solid red; 設置邊框:尺寸為1,單線,顔色為紅色。
height:300px; 設置高度為300px
width:300px; 設置寬度為300px
6、右鍵run,運行一下
現在div标簽的邊框就出來了!與在.haha選擇器中規定的樣式是一樣的,紅色邊框,尺寸為1
總結:樣式選擇器class是css文件中的常客,作用是來為html标簽設置顔色、寬高、位置等。
用法:
第一步,在标簽内這樣寫
<div class="hehe">你好</div>
第二步,在css文件中定義我們設置的這個class選擇器,hehe
.hehe{
border:1px solid red; 設置邊框樣式
height:300px; 設置邊框高度
width:300px; 設置邊框寬度
}
下一篇會将上一篇寫好的網站body邊框給描繪出來!
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!