tft每日頭條

 > 生活

 > 标記選擇器的樣式風格

标記選擇器的樣式風格

生活 更新时间:2024-09-18 11:13:03

本小節基本要求:

  • 了解css文件是做什麼的---樣式構建
  • 了解html文件是做什麼的---網站文本構建
  • 了解css htm是能做什麼---能完成一個完整靜态網站的構建
  • 了解什麼是标簽以及父子關系

要點:

1、樣式選擇器class

标記選擇器的樣式風格(第九次記錄樣式選擇器class)1

class(樣式)選擇器能做什麼

在實際開發網站中,css規定了兩種選擇器,一種是樣式選擇器class,一種是Id選擇器#。

class翻譯過來有種類的意思,中國人将它弄得好聽點兒,就叫樣式。

描出一個網站輪廓,利用樣式選擇器就夠了。

一個很簡單的例子:

1、寫一個html文件,在body裡面寫一個div标簽,标簽中文本寫上一段字:hello world!

标記選擇器的樣式風格(第九次記錄樣式選擇器class)2

2、右鍵run,運行一下看效果

标記選擇器的樣式風格(第九次記錄樣式選擇器class)3

3、我想給這個div标簽變成一個框我該怎麼做?很簡單,如下,給div标簽加一個樣式選擇器。

要點:

  • 注意寫法以及寫的位置
  • 這個haha就是我為這個選擇器取的名字!名字可以随便取!

标記選擇器的樣式風格(第九次記錄樣式選擇器class)4

4、右鍵run,運行一下

可以看到,并沒有框!

為什麼沒有?

那是因為我雖然定義了這個名叫haha的css選擇器,但是還沒有去編寫它的代碼!

标記選擇器的樣式風格(第九次記錄樣式選擇器class)5

5、為了省事,我就不新建一個css文件了,直接在這個html文件中寫css代碼。

要點:

注意寫法,我用了一個标識符 . , 這個點是一個标志,标志什麼?标志這個haha 就是一個樣式選擇器。

标記選擇器的樣式風格(第九次記錄樣式選擇器class)6

解釋一下haha選擇器中代碼的含義: boder:1px solid red; 設置邊框:尺寸為1,單線,顔色為紅色。 height:300px; 設置高度為300px width:300px; 設置寬度為300px

6、右鍵run,運行一下

标記選擇器的樣式風格(第九次記錄樣式選擇器class)7

現在div标簽的邊框就出來了!與在.haha選擇器中規定的樣式是一樣的,紅色邊框,尺寸為1

總結:

樣式選擇器class是css文件中的常客,作用是來為html标簽設置顔色、寬高、位置等。

用法:

第一步,在标簽内這樣寫

<div class="hehe">你好</div>

第二步,在css文件中定義我們設置的這個class選擇器,hehe

.hehe{ border:1px solid red; 設置邊框樣式 height:300px; 設置邊框高度 width:300px; 設置邊框寬度 }

下一篇會将上一篇寫好的網站body邊框給描繪出來!

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved