CSS 學習心得
2024-07-11 08:43:52
供稿：網友
一直以來從事web開發方面的工作，做過很多項目，也做過無數的日常開發，但自己只專注于需求的理解和系統設計方面，而對web頁面的展現很少關注，在遇到頁面問題時，往往都會交給UED部門的同事去處理，長此以往，自己也產生了惰性，不論頁面的問題大小都統統交給他們解決，這樣不僅影響了自己的工作效率，還給UED的同事帶去不少麻煩，正好這幾天工作不是很緊張，在http://www.w3school.com.cn/index.html網站上瀏覽了一些關于CSS的資料，感覺CSS比我想象中的要簡單多啦，再配合firefox強大的插件firebug來調試，一切都變得非常簡單。
插入樣式表的方法有三種：
外部樣式表：
<link rel="stylesheet" type="text/css" href="mystyle.css" />
內部樣式表：
<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>
他們的優先級分別是由低到高，當三種樣式同時存在時，內聯樣式的優先級最高。
CSS 語法通常有以下幾種表現形式： 選擇器、屬性和值：selector {property: value}，如果值為若干單詞，則要給值加引號,如：
p { text-align: center; color: black; font-family: arial; }
我們對所有的標題元素進行了分組，如：
h1,h2,h2,h3,h5,h6 { color: green; }
我們也可以通過派生選擇器來限定樣式的作用范圍，如：
li strong { font-style: italic; font-weight: normal; }
他的作用范圍就是:<strong>標簽被包含在<li>標簽中的時候，樣式才起作用 id 選擇器： 用#定義樣式，如：
#red {color:red;}
#green {color:green;}
在頁面中作為ID引用
<p id="red">
這個段落是紅色。
</p>
<p id="green">
這個段落是綠色。
</p>
還有諸如一下的幾種形式：
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
div#sidebar {
border: 1px dotted #000;
padding: 10px;
}
在 CSS 中，類選擇器以一個點號顯示： .center {text-align: center} 如：
<h1 class="center">
This heading will be center-aligned
</h1>
還可以結合派生器來使用：
.fancy td {
color: #f60;
background: #666;
}
td.fancy {
color: #f60;
background: #666;
}
http://www.w3school.com.cn/index.html網站上有詳細的講解，就當作字典吧，要用到的時候可以去參考一下，哈哈
