理解
在管理元素之前, 需要先找到它们
选择器就是 css 找到元素的方法
[复习]引入css或.css文件的方法
- 直接写在head区中用标签包起来
- @import
...
/* link 引入 */
@import url("./ind.css") /* 在.css文件中引入.css文件 */
类别
- id 选择器
用元素的 id 来选中此元素, 每个 id 在页面上是唯一的
用法:
- 先给某元素起一个唯一的 id 名
- 在 css 里, 用#id{}来选中此元素, 并控制
...
...
※ 为什么默认一个 div 的 margin,padding 全为0,但是 div 和浏览器还有空隙?
因为浏览器会为页面部分元素(body,ul,li 等)的 margin,padding,border预设一些值,
且各个浏览器预设值不一定相同
- 类选择器
类选择器是利用元素的类名称, 来选中一组类名相同的元素
.CLASSNAME{
margin: 0 auto;
}
...
...
- 通配选择器 { 选中页面上所有的元素,效率低,极少用
*{
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;
}
- 伪类选择器
【伪】----控制的不是某一类标签， 而是标签的某种状态
a:link { // 链接没有被点击过, 可不写
underline: none
}
a:visited { } // 链接被点击过
a:hover { } // 鼠标(悬)放在链接上
a:active { } // 鼠标点击的瞬间
顺序: L, V, H, A
2012_d1_①_003-2 007 012 015 023