CSS學習筆記

2021-07-23 14:14:51 字數 1536 閱讀 3863

1.基本語法

選擇器

h1

分組選擇器:可以多個元素享有同樣樣式

h1,h2,h3

繼承:body下的所有字型都是verdana

body

上下文派生選擇器:

h2 

h2 strong

//執行結果

紅色h2>

藍色strong>

h2>

後代選擇器(descendant selector)又稱為包含選擇器:

和上下文選擇器類似,即兩個元素之間的層次間隔可以是無限的。

ul em

紅em>

li>

紅em>

li>

ol>

li>

ul>

id 選擇器:

以元素的id值來顯示樣式

#red

"red"

>紅

//在現代布局中,id 選擇器常常用於建立派生選擇器

#sidebar p

//上段**意思是 在id為sidebar的元素下所有p標籤特殊處理

css 類選擇器:

.myclass

//類選擇器也可以作為派生選擇器

.myclass

ptd.myclass

//類名為 myclass 的**單元將是帶有紅色

class="myclass"/>

css 屬性選擇器:

//屬性選擇器通常都用包裹

[title]

title="1">紅色h1>

//下面是title屬性值為yaw的都紅

[title=yaw]

title="yaw">紅h1>

//下面是title屬性值有hello前後有空格隔開都可以變成紅色

[title~=hello]

title="hello yaw">紅h1>

title="yaw hello">紅h1>

如何建立 css:

如何把樣式表關聯到html檔案裡面呢?

1.外部樣式表

rel="stylesheet"

type="text/css"

href="mycss.css"/>

head>

2.內部樣式表

type="text/css">

hrstyle>

head>

3.內聯樣式

style="color: sienna; margin-left: 20px">

this is a paragraph

p>

列表樣式:

//將列表的標誌從預設圓點變成方塊

ul

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 元素內部 擁有最...