藍鷗Web開發 初識div css引入方式

2021-07-25 16:43:56 字數 1790 閱讀 2345

藍鷗web開發:初識div + css引入方式

零基礎學習

html5

—html+css基礎【藍鷗出品】

web的第一節課就是學習什麼是

div。

div是我們最常用的標籤,沒有之一。在

html

的標籤中,每乙個標籤都是有語音的,

div的語義就是無意義。

茶哥兒沒有那你們開涮,就是這個樣子的,div在我們的開發中經常用來劃分區域,進行分快處理分塊開發。看了下圖你就能明白了。

ok,上**來看看如何操作

div(htm+css):

我是乙個div

之前已經說過html和

css的關係了(好**,一輩子),如果單純寫乙個

div我們是看不到任何東西的(並不是不存在),**中我們通過加入

css樣式(

div標籤中

style

屬性裡邊寫的就是

css樣式)從而改變了

div的大小和背景色,於是我們就看到他了,這裡我們使用的是

css的

行間樣式表。

這裡我們做個設想:body裡邊有

100個

div,要分別賦予寬

200px

,高200px

,背景色是紅色。

我勒個去,這是個多麼可怕的需求,我們難道要寫100個

div,再寫

100變

style

嗎?當然了,如果我們只能使用行間樣式表那麼肯定是要付出汗水與努力了,然而,我們還有另外兩種完美的解決方案:

內部樣式表&外部樣式表。

我是乙個div

這個就是內部樣式表了,我們在head標籤內新增了style標籤,在style標籤中書寫

css樣式,但是為了找準我們給哪個標籤新增讓樣式,所以我們使用了

選擇器:div{},這個叫做

標籤名選擇器

,會為相同的標籤新增這個樣式。ok再來看看外部樣式表怎麼寫:

我是乙個div

這段**是html文件的,我們在head標籤中新增了link標籤用來匯入外部檔案,在這裡我們匯入了外部的「index.css」檔案,看到這裡就明白了吧,所謂的外部樣式表就是將樣式寫入到了外部的

css檔案中,然後通過

link

匯入html

文件。來看看

index.css:

div {

width: 200px;

height: 200px;

background-color: red;

外部樣式表與內部樣式表寫法上是一致的,不同的是引入方式。

如果有乙個div,同時有三種樣式表為其賦予顏色這個時候

div應該用哪個呢?想知道嗎,接著看下邊的總結。

總結:

div用於分割螢幕,常用語分塊開發中;

行間樣式表:sytle標籤寫在標籤內部;

內部樣式表:style標籤寫在

head

標籤內;

外部樣式表:沒有style標籤,使用

link

標籤引入

css文件;

如果乙個標籤同時有三種樣式表為其賦予樣式,行間樣式表優先順序最高,內部樣式表與外部樣式表同等級,如何選用樣式取決於二者的引入順序。

藍鷗Unity開發基礎 List

藍鷗unity開發基礎 list 一 list list是一種強型別列表 list在大多數情況下比arraylist執行的更好並且是型別安全的 using system using system.collections 使用泛型集合,需要先引入命名空間 using system.collection...

藍鷗Unity開發基礎 構造方法

藍鷗unity開發基礎 構造和析構 一 構造和析構 構造方法 構造方法時乙個特殊的方法,負責初始化物件 構造方法名必須和類名一致 構造方法沒有返回值,但可以有引數,能夠過載 構造方法可以不寫,系統會自動為類新增乙個無引數的預設構造 如果將構造方法設定為private,就不能給你再使用此構造建立例項 ...

藍鷗Unity開發基礎 泛型

藍鷗unity開發基礎 泛型 本節課我們來學習c 中的泛型,泛型是乙個特殊的型別,它可以最大限度的重用我們的 使用泛型能夠最大限度的重用 保護型別安全,提高效能 泛型成員因為型別的不確定性,不能使用算術運算子,比較運算子 型別引數可以有多個,可以是編譯器能夠識別的任何型別 型別引數的名字不能夠隨便起...