CSS 学习笔记
下面这篇文章介绍了些很基本也很常用的 Html 标签,比较不常用的有 ol 和 dl
根本不存在 DIV + CSS 布局这回事
选择符
类选择符,.className{....}
ID选择符,#idName{....}
后代选择符,parent child{....}
子选择符,parent > child{....}(IE6 不兼容),注:子选择符意味着只有当一个元素是父元素的直接子代时,该元素才会被样式化。
通配选择符,*{....},作用:在该选择符中设定的属性会应用于所有元素。
相邻选择符,XXX + XXX{....}(IE6 不兼容)
属性选择符,XXX[attrName]{....} && XXX[attrName=value] && XXX[attrName~=value] && XXX[attrName|=value]
伪类,作用:有时您可能想为一些不基于名称、性质或内容的元素添加样式,这时伪类就派上用场了。
XXX:link{} && XXX:link{} && XXX:visited{} && XXX:hover{} && XXX:active{} && XXX:first-child{} && XXX:focus{} && XXX:lang{}
伪元素,伪元素包括:first-letter、:first-line、:before和:after。PS: 不是很明白,这个元素的用法,暂时记录下来,以后遇到该元素再好好体会。
参考文档:http://book.csdn.net/bookfiles/525/10052517791.shtml、http://www.w3.org/TR/CSS21/selector.html
CSS属性
CSS有很多属性,下面这个网址可以查到各个属性的作用。
http://www.w3.org/TR/CSS21/propidx.html
盒模型
margin(外边距)、border(边框)及padding(内边距)
这部分我在之前基本上都算比较理解,所有没有记录下什么内容。
但记录两个网址,以作参考:
http://book.csdn.net/bookfiles/525/10052517794.shtml
http://www.w3.org/TR/CSS21/box.html
CSS 定位
CSS 定位属性
CSS 定位属性允许你对元素进行定位。
属性 | 描述 |
---|---|
position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
overflow | 设置当元素的内容溢出其区域时发生的事情。 |
clip | 设置元素的形状。元素被剪入这个形状之中,然后显示出来。 |
vertical-align | 设置元素的垂直对齐方式。 |
z-index | 设置元素的堆叠顺序。 |
CSS position 属性
通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。
position 的属性值有 static、relative、absolute、fixed
通过下面这个例子好好理解一下 position:relative 相对定位
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <style>
7 #container3 {
8 float:left;
9 /*width:100%;*/
10 /*没有必要的代码被注释掉!*/
11 background:green;
12 }
13 #container2 {
14 float:left;
15 /*width:100%;*/
16 /*没有必要的代码被注释掉!*/
17 background:yellow;
18 position:relative;
19 right:30%;
20 }
21 #container1 {
22 float:left;
23 width:100%;
24 background:red;
25 position:relative;
26 right:40%;
27 }
28 #col1 {
29 float:left;
30 width:30%;
31 }
32 #col2 {
33 float:left;
34 width:40%;
35 }
36 #col3 {
37 float:left;
38 width:30%;
39 }
40 </style>
41 </head>
42
43 <body>
44 <div id="container3">
45 <div id="container2">
46 <div id="container1">
47 <div id="col1">Column 1</div>
48 <div id="col2">Column 2</div>
49 <div id="col3">Column 3</div>
50 </div>
51 </div>
52 </div>
53 </body>
54 </html>
55
提示:您可以先修改部分代码再运行