CSS 学习笔记

最新推荐文章于 2024-09-23 15:32:37 发布

转载最新推荐文章于 2024-09-23 15:32:37 发布 · 74 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chy1000/archive/2010/08/02/1790268.html

CSS 基础太差了，今天有空学习一下 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.youkuaiyun.com/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.youkuaiyun.com/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 相对定位

1 <! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #container3 { float:left; /*width:100%;*/ /*没有必要的代码被注释掉！*/ background:green; } #container2 { float:left; /*width:100%;*/ /*没有必要的代码被注释掉！*/ background:yellow; position:relative; right:30%; } #container1 { float:left; width:100%; background:red; position:relative; right:40%; } #col1 { float:left; width:30%; } #col2 { float:left; width:40%; } #col3 { float:left; width:30%; } </style> </head> <body> <div id="container3"> <div id="container2"> <div id="container1"> <div id="col1">Column 1</div> <div id="col2">Column 2</div> <div id="col3">Column 3</div> </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

转载于:https://www.cnblogs.com/chy1000/archive/2010/08/02/1790268.html