CSS(Cascading Style Sheets)
CSS樣式規則：
<style>
選擇器{ 屬性名稱:屬性的值; 屬性名稱2: 屬性的值2; }
</style>
選擇器
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*元素選擇器*/
div{
color: red;
}
/*類選擇器--以class定義的類*/
.chifan{
color: deeppink;
}
/*ID選擇器*/
#div1{
color: greenyellow;
}
/*
按照選擇器搜尋精确度來編寫:
行内樣式 > ID選擇器 > 類選擇器 > 元素選擇器
*/
.first{
color: green;
}
.second{
color: blue;
}
/*就近原則*/
/*
使用通配符選擇器定義CSS樣式，清除所有HTML标記的預設邊距。
*/
* {
margin: 0; /* 定義外邊距*/
padding: 0; /* 定義内邊距*/
}
</style>
</head>
<body>
<div class="chifan" id="div1" style="color: goldenrod;">
擴充完,就可以去吃飯啦!
</div>
<div class="second first ">
字型顔色為藍色,因為.second靠近這個元素選擇器。
</div>
</body>
常用屬性：
font-size:字号大小
font-family:字型--可以同時指定多個字型，中間以逗号隔開，
表示如果浏覽器不支援第一個字型，則會嘗試下一個，直到找到合适的字型
font-weight:字型粗細
其可用屬性值：normal、bold、bolder、lighter、100~900（100的整數倍）
font-style:字型風格
normal：預設值，浏覽器會顯示标準的字型樣式。
italic：浏覽器會顯示斜體的字型樣式。
oblique：浏覽器會顯示傾斜的字型樣式。
color:文本顔色
letter-spacing:字間距
word-spacing:單詞間距
line-height:行間距
text-decoration:文本裝飾
none：沒有裝飾（正常文本預設值）。
underline：下劃線。
overline：上劃線。
line-through：删除線。
text-align:水準對齊方式
left：左對齊（預設值）
right：右對齊
center：居中對齊
text-indent:首行縮進
word-break:自動換行
normal 使用浏覽器預設的換行規則。
break-all 允許在單詞内換行。
keep-all 隻能在半角空格或連字元處換行。
CSS浮動
浮動的元素會脫離正常的文檔流,在正常的文檔流中不占空間
<body>
CSS浮動 : 浮動的元素會脫離正常的文檔流,在正常的文檔流中不占空間
float屬性:
left
right
clear屬性: 清除浮動
both : 兩邊都不允許浮動
left: 左邊不允許浮動
right : 右邊不允許浮動
流式布局
<div style="float:left;">1</div>
<div style="clear: both;">4</div>
</body>
span标簽
如果不對 span 應用樣式，那麼 span 元素中的文本與其他文本不會任何視覺上的差異；
可以為 span 應用 id 或 class 屬性，這樣既可以增加适當的語義，又便于對 span 應用樣式。
選擇器擴充
後代選擇器
<style>
/*這個規則會把作為 h1 元素後代的 em(字型會顯示為斜體) 元素的文本變為 紅色。其他 em
文本（如段落或塊引用中的em）則不會被這個規則選中：*/
h1 > em {color:red;}
</style>
<body>
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
</body>
屬性選擇器
<head>
<style>
a[href][title]{
color: yellow;
}
</style>
</head>
<body>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="aaa">張三</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >李四</a>
</body>
僞類選擇器
<head>
<style>
a:link {color: red} /* 未通路的連結 */
a:visited {color: #00FF00} /* 已通路的連結 */
a:hover {color: #FF00FF} /* 滑鼠移動到連結上 */
a:active {color: #0000FF} /* 標明的連結 */
</style>
</head>
<body>
<a href="/index.html" target="_blank" rel="external nofollow" target="_blank">
這是一個連結。
</a>
在 CSS 定義中，a:hover 必須位于 a:link 和 a:visited 之後，這樣才能生效！
在 CSS 定義中，a:active 必須位于 a:hover 之後，這樣才能生效！
</body>
引用外部樣式
<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" target="_blank" rel="external nofollow" >
</head>
<body>
<h1>我通過外部樣式表進行格式化。</h1>
</body>
type="text/css"
這段标簽内包含的内容是css或text，
也就是說如果某種浏覽器（特别是wap等手機浏覽器械、）不能識别css的，
會将代碼認為text，進而不顯示也不報錯。
盒子模型
padding 屬性定義元素的内邊距
<style>
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
等同于
h1 { padding ：10px 0.25em 2ex 20% } -順序是上右下左（順時針）
</style>
![沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)