理解
在管理元素之前, 需要先找到它們
選擇器就是 css 找到元素的方法
[復習]引入css或.css文件的方法
<html>
<head>
...
<style> /* 直接寫在head中 */
#container{
width: 1002px;
}
</style>
<link rel="stylesheet" href="./CSS/reset.css" type="text/css" /> /* link 引入 */
</head
<body></body>
<html>
@import url("./ind.css") /* 在.css文件中引入.css文件 */
類別
-
id 選擇器
用元素的 id 來選中此元素, 每個 id 在頁面上是唯一的
用法:
- 先給某元素起一個唯一的 id 名
- 在 css 里, 用#id{}來選中此元素, 并控制
<style type="text/css">
#header{
width:8px;
...
}
</style>
...
<div id="header">
...
</div>
※ 為什么默認一個 div 的 margin,padding 全為0,但是 div 和瀏覽器還有空隙?
因為瀏覽器會為頁面部分元素(body,ul,li 等)的 margin,padding,border預設(shè)一些值,
且各個瀏覽器預設(shè)值不一定相同
-
類選擇器
類選擇器是利用元素的類名稱, 來選中一組類名相同的元素
.CLASSNAME{
margin: 0 auto;
}
<style type="text/css">
.stu{
background: yellow;
}
</style>
...
<div class="stu">
...
</div>
- 通配選擇器 { 選中頁面上所有的元素,效率低,極少用
*{
margin: 0;
border: 0;
}
※ 雅虎工程師 css 初始化示例
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
body {
background: #fff;
color: #555;
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
td,th,caption {
font-size: 14px;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
a {
color: #555;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
border: none;
}
ol, ul, li {
list-style: none;
}
input, textarea, select, button {
font: 14px Verdana, Helvetica, Arial, sans-serif;
}
table {
border-collapse: collapse;
}
html {
overflow-y: scroll;
}
.clearfix: after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
body{
background: #FFF;
}
img{
width: 600px;
height: 400px;
}
-
群組選擇器 { 確切來說, 不是一種選擇器, 而是一種簡化寫法
同時選中多個元素, 中間逗號隔開
#foo, .stu{
margin: 5px 0;
}
-
派生選擇器(父子選擇器)
選中 id 為 header 的元素下的 img 標簽元素, 中間空格
#header img{
width: 600px;
height: 400px;
}
-
偽類選擇器
【偽】----控制的不是某一類標簽， 而是標簽的某種狀態(tài)
a:link { // 鏈接沒有被點擊過, 可不寫
underline: none
}
a:visited { } // 鏈接被點擊過
a:hover { } // 鼠標(懸)放在鏈接上
a:active { } // 鼠標點擊的瞬間
順序: L, V, H, A
2012_d1_①_003-2 007 012 015 023
