前端基礎(二 CSS 引入方式 CSS選擇器)

2021-10-17 18:55:11 字數 1733 閱讀 8567

css選擇器

使用內聯樣式時,將樣式寫在中,放在.html檔案的中。

div<

/style>

使用外部樣式時,將樣式寫在單獨的.css檔案中,將該檔案引入至.html檔案中,將引入語句寫在.html檔案的中。

"stylesheet" href=

"test.css"

>

test.css:

div
假設有如下html:

"div1"

>

我是divdiv

>

>

我是div 2div

>

class

="list"

>

我是div 3div

>

>

class

="list"

>

我是li1li

>

>

我是li2li

>

class

="list"

>

>

1111div

>

class

="list"

>

2222div

>

li>

ul>

href

="">

>

"myh2"

style

="background

: hotpink;

">

我是h2h2

>

class

="aa"

>

"bb"

>

哈哈哈span

>

h3>

例:

div

由上,選擇所有

元素

例:

#div1

由上,選擇所有id = "div1"的元素

例:

.list

由上,選擇所有class = "list"的元素

例:

ul .list

由上,選擇例:

ul > .list

由上,選擇例:

a:hover

a:active

a:visited

a:link

由上, 選擇所有未被訪問的鏈結

例:

#div1,.list

由上,選擇所有class = "div1"的元素和id = "list"的元素

更於2021.1.27

CSS引入方式

第一 css的四種引入方式 1.行內樣式 最直接最簡單的一種,直接對html標籤使用style 例如 缺點 html頁面不純淨,檔案體積大,不利於蜘蛛爬行,後期維護不方便。2.內嵌樣式 內嵌樣式就是將css 寫在之間,並且用進行宣告,例如 優缺點 頁面使用公共css 也是每個頁面都要定義的,如果乙個...

Css引入方式

div 雙標籤 css語法 屬性名 屬性值 css引入方式 1 行間樣式的引入 在標籤中寫乙個style的屬性。如 style 缺點 不利於 重用。優點 優先順序最高。2 內部樣式的引入,在head標籤中寫乙個style的標籤,在標籤中通過選擇器控制樣式。選擇器寫法 1.標籤選擇器。div2.id選...

CSS引入方式

按照css樣式書寫的位置 或者引入方式 css樣式表可以分為三大類 行內樣式表 行內式 內部樣式表 嵌入式 外部樣式表 鏈結式 內部樣式表 內嵌樣式表 是寫到html頁面內部,是將所有的css 抽取出來,單獨放到乙個標籤中.標籤理論上可以放在html文件的任何地方,但一般會放在文件的標籤中,通過此種...