<span style="font-size:24px;">簡單的css知識點總結:
1.引用方式
1).直接在標籤中使用
<body style = "background-color:red">
</body>
2).直接在html中使用
<style type = "text/css">
body{
background-color:red;
}
</style>
<body>
</body>
3).使用外部的css代碼來使用
<link rel = "stylesheet" href = "styles.css" type = "text/css"/>
styles.css中的代碼
body{
background-color:red;
}
4).使用外部的css代碼來使用2
<style type = "text/css">
@import url(styles.css);
</style>
2.css的使用語法
1).標籤的整合
h1{
color:red;
font-size:35px;
}
h1{
font_size:15px;
background-color:white;
}
結果等同於:(效率沒有下面的高)
h1{
color:red;
font-size:15px;
background-color:white;
}
2).選擇器共用同一個屬性
p,h1{
background-color:red;
}
3).通配選擇器
*{
color:red;
}
3.類選擇器
1).class類選擇器(html內部)
<style type = "text/css">
textcolor{
color:red;
}
</style>
<h1 class = "textcolor">這裏是h1標籤</h1>
<p class = "textcolor"> 這裏是p標籤</p>
2).class類選擇器(外部調用)
<link rel = "stylesheet" href = "styles.css" type = "text/css"/>
styles.css 代碼
textcolor{
color:red;
}
3).不同標籤,同一個類名稱的使用
p.textcolor{
color:blue;
}
h1.textcolor{
color:black;
}
使用同上
<p>這裏是普通的P標籤</p>
<p class = "textcolor"> 這裏是有特殊標記的p標籤</p>
<h1>這裏是普通的h1標籤</h1>
<h1 class = "textcolor"> 這裏是有特殊標記的p標籤</h1>
4).多種選擇
p.import{
background-color:red;
}
p.warning{
font-size:35px;
}
p.import.warning{
font-size:10px;
}
使用狀態
<p class = "import">這裏是普通的P標籤</p>
<p class = "warning">這裏是普通的P標籤</p>
<p class = "import warning">這裏是普通的P標籤</p>
4.id選擇器
1).普通使用
<style type = "text/css">
#textcolor{
color:red;
}
</style>
<p id = "textcolor"> 這裏是測試id選擇器的p標籤</p>
2).修飾特定的標籤
<style type = "text/css">
#textcolor h1{
color:red;
}
</style>
<h1 id = "textcolor"> 這裏是特定屬性的標籤h1</h1>
5.需要注意的地方
1).需要注意的是,儘量保證id和class選擇器的名稱一致,可能在html中會區分大小寫.
2).在HTML中一個標籤只能有一個id，但是可以有多個class。
3).一個id在一個HTML頁面中必須是唯一的，一個class可以被多個標籤元素擁有。
4).id和class 之間的區別
<1>id選擇器只能應用於具體的一個標籤(注意不是一種),類選擇器卻可以應用到多個標籤(複用)
<2>優先級不同：id選擇器大於類選擇器。
5).什麼時候用id選擇器or類選擇器
一般情況下，頁面唯一不會複用的可以使用id選擇器，比如頁頭和頁腳等。如果需要複用的樣式，那麼一般使用類選擇器，比如表格，列表等。
一般類選擇器使用更多。
6.簡單選擇器
1).
<style type = "text/css">
[title]{
color:red;
}
</style>
<h1 title = "hello world"> hello</h1>
2).對某個標籤的屬性使用
<style type = "text/css">
a[href]{
color:red;
}
</style>
<a href = "http://www.baidu.com/">baidu</a>
3).多個屬性值放到一塊兒使用
<style type = "text/css">
a[href][title]{
color:red;
}
</style>
<a title = "hello" href = "http://www.baidu.com/">baidu</a>
4).特定值
<style type = "text/css">
[title = hello]{
color:red;
}
</style>
<h1 title = "hello"> 這裏是對應的標籤</h1>
<h1 title = "world"> 這裏是不對應的標籤</h1>
7).匹配某個字段
<style type = "text/css">
[title ~= hello]{
color:red;
}
</style>
<h1 title = "hello world"> 這裏是對應的標籤</h1>
<h1 title = "world hello"> 這裏是對應的標籤</h1>
<h1 title = "lo"> 這裏是不對應的標籤</h1>
<h1 title = "wld"> 這裏是不對應的標籤</h1>
8).匹配某個字段
<style type = "text/css">
[title |= lo]{
color:red;
}
</style>
<h1 title = "hello world"> 這裏是對應的標籤</h1>
<h1 title = "world hello"> 這裏是對應的標籤</h1>
<h1 title = "lo"> 這裏是對應的標籤</h1>
<h1 title = "wld"> 這裏是不對應的標籤</h1>
</span>CSS 總結01天
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章