天天看點

CSS 再學習,基礎篇

文法

h1 {color:red; font-size:14px;}
           
CSS 再學習,基礎篇

共享聲明

h1,h2,h3,h4,h5,h6 {
  color: green;
}
           

繼承

通過 CSS 繼承,子元素将繼承最進階元素(在本例中是 body)所擁有的屬性(這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。不需要另外的規則,所有 body 的子元素都應該顯示 Verdana 字型,子元素的子元素也一樣。

如果你不希望 "Verdana, sans-serif" 字型被所有的子元素繼承,又該怎麼做呢?比方說,你希望段落的字型是 Times。沒問題。建立一個針對 p 的特殊規則,這樣它就會擺脫父元素的規則。

body  {
	font-family: Verdana, sans-serif;
}

td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
}

p  {
     font-family: Times, "Times New Roman", serif;
}
           

派生

strong {
     color: red;
     }

h2 {
     color: red;
     }

h2 strong {
     color: blue;
     }
           

id選擇器

#red {color:red;}
#green {color:green;}
           

id 選擇器和派生選擇器

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
}
           

類選擇器

.center {text-align: center}
           

class 也可被用作派生選擇器

.fancy td {
	color: #f60;
	background: #666;
}
           

類名為 fancy 的更大的元素内部的表格單元都會以灰色背景顯示橙色文字。

元素也可以基于它們的類而被選擇:

td.fancy {
	color: #f60;
	background: #666;
}
           
<td class="fancy">
           

那些以 fancy 标注的單元格都會是帶有灰色背景的橙色。那些沒有被配置設定名為 fancy 的類的單元格不會受這條規則的影響。

屬性選擇器

對帶有指定屬性的 HTML 元素設定樣式。

<style>
[lang|=en]
{
background:yellow;
}
</style>

<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<p lang="us">Hi!</p>
<p lang="zh">nihao!</p>
           

隻有中間是橫杠才有效。

選擇器 描述
[attribute] 用于選取帶有指定屬性的元素。
[attribute=value] 用于選取帶有指定屬性和值的元素。
[attribute~=value] 用于選取屬性值中包含指定詞彙的元素。
[attribute|=value] 用于選取帶有以指定值開頭的屬性值的元素,該值必須是整個單詞。
[attribute^=value] 比對屬性值以指定值開頭的每個元素。
[attribute$=value] 比對屬性值以指定值結尾的每個元素。
[attribute*=value] 比對屬性值中包含指定值的每個元素。

引入樣式表

引入(優)

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
           

内部(次之)

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>
           

内聯(不建議)

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
           

如果某些屬性在不同的樣式表中被同樣的選擇器定義,那麼屬性值将從更具體的樣式表中被繼承過來。

例如,外部樣式表擁有針對 h3 選擇器的三個屬性:

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }
           
h3 {
  text-align: right; 
  font-size: 20pt;
  }
           
color: red; 
text-align: right; 
font-size: 20pt;