簡單使用方式
方式1,在html頁面裡的style標籤中新增樣式
<
!doctype html>
"en"
>
"utf-8"
>
title<
/title>
<
!--規範,可以編寫css**,每乙個宣告最好使用分號結尾
語法:選擇器
-->
h1<
/style>
<
/head>
我是標題<
/h1>
<
/body>
<
/html>
style中的h1是選擇器,選擇下方的h1標籤
方式2:css檔案引用
…/ 表示當前檔案所在的目錄的上一級目錄
./ 表示當前檔案所在的目錄(可以省略)
/ 表示當前站點的根目錄(網域名稱對映的硬碟目錄)
html檔案:
<
!doctype html>
"en"
>
"utf-8"
>
title<
/title>
<
!--規範,可以編寫css**,每乙個宣告最好使用分號結尾
語法:選擇器
-->
"stylesheet" href=
"../css/demo01.css"
>
<
/head>
我是標題<
/h1>
<
/body>
<
/html>
css檔案
h1
css的匯入方式
1.行內樣式
<
!--行內樣式:在標籤元素中編寫乙個style屬性--
>
"color:red"
>我是標題<
/h1>
<
/body>
2.內部樣式
<
!--內部樣式--
>
h1<
/style>
<
/body>
↑似乎寫在head還是body裡還是外面都無所謂
3.外部樣式
css檔案
h1
優先順序:就近原則,行內樣式最優先,內部/外部誰離tag的**近誰生效
選擇器
作用:選擇頁面上某乙個或某一類元素
2.1基本選擇器
1.標籤選擇器
2.類 選擇器
3.id選擇器
1.標籤選擇器
可以在網頁裡瞎改然後把改好的格式複製貼上進style標籤
選擇一類標籤
p
2.類選擇器
同樣標籤的可以通過設定類來分別給於樣式
/*類選擇器的格式 .class的名稱 {}*/
.test1
.test2
<
/style>
"test1"
>標題1
<
/h1>
"test2"
>標題2
<
/h1>
"test1"
>標題3
<
/h1>
<
/body>
類選擇器可復用,多個標籤可使用同乙個類
3.id選擇器
id選擇器不可復用,乙個id只能被乙個標籤使用
/* id選擇器:
#id 名稱{}
*/#test1
<
/style>
"test1"
>標題1
<
/h1>
"test2"
>標題2
<
/h1>
標題3<
/h1>
標題2使用test1會報錯。
id和class可以一起使用
/* id選擇器:
#id 名稱{}
*/#test1
.test2
<
/style>
"test1"
>標題1
<
/h1>
"test2"
>標題2
<
/h1>
標題3<
/h1>
優先順序不遵循就近原則,固定id>類》標籤選擇器
"test1" class=
"test2"
>標題1
<
/h1>
"test2"
>標題2
<
/h1>
標題3<
/h1>
標題1生效的是id選擇器 CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘,初學者的東西不具有參考性,請到w3school 進行系統學習。學習css我使用的工具是visual css,可以實現同步預覽,快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式,避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...
CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘,初學者的東西不具有參考性,請到w3school 進行系統學習。學習css我使用的工具是visual css,可以實現同步預覽,快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式,避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...
CSS 學習筆記
當同乙個html元素被不止乙個樣式定義時,會使用哪個樣式呢?一般而言,所有的樣式會根據下面的規則層疊於乙個新的虛擬樣式表中,其中數字4 擁有最高的優先權。1.瀏覽器預設設定 2.外部樣式表 3.內部樣式表 位於標籤內部 4.內聯樣式 在html 元素內部 因此,內聯樣式 在html 元素內部 擁有最...