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