以下内容大部分来自http://www.w3school.com.cn/
基础语法
图释:
格式:
selector {property1:value1; property2:value2; ... ;propertyN:valueN; }
注意:
- 如果值为若干单词,则要给值加引号
p {font-family: "sans serif";}- 如果要定义不止一个声明,则需要用分号将每个声明分开,最后一条声明后的分号可加可不加
p {text-align: center;color: black; font-family: arial;}- CSS 对大小写不敏感.不过存在一个例外：如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的
选择器的分组:
可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明.用逗号将需要分组的选择器分开
h1,h2,h3,h4,h5,h6 {color: green;}元素选择器:
h1 {color:blue;} h2 {color:silver;}继承:
- 子元素将祖先元素所拥有的属性
- 当祖先元素和子元素都有定义相同的属性时,子元素显示的效果为子元素定义的属性值
<p style="color: #00ff00;"><span style="color: #ff0000;">例子</span></p> <!例子 显示的颜色为红色>派生选择器:
通过依据元素在其位置的上下文关系来定义样式
<!h1中的 strong 元素变为斜体字> <html> <head> <style type="text/css"> h1 strong {font-style: italic;} </style> </head> <body> <p><strong>在标签 p 中</strong></p> <h1><strong>在标签 h1 中</strong></h1> </body> </html>后代选择器:
定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用
<html> <head> <style type="text/css"> h1 em {color:red;} </style> </head> <body> <h1>This is a <em>important</em> heading</h1> <p>This is a <em>important</em> paragraph.</p> </body> </html>子元素选择器:
选择作为某元素子元素的元素关系来定义样式
<!DOCTYPE HTML> <html> <head> <style type="text/css"> h1 > strong {color:red;} </style> </head> <body> <h1>This is <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1> </body> </html>相邻兄弟选择器:
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器
<!DOCTYPE HTML> <html> <head> <style type="text/css"> p + p {color:red;} </style> </head> <body> <pre>This is a heading.</pre> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> </body> </html>id 选择器:
- 说明
- id 选择器以 "#" 来定义,"#" 前为要结合的元素,"#" 后为id名("#" 前面若没有要结合的元素或为 * 时,代表可以与任意元素结合)
h1#mostImportant {color:red; background:yellow;} #intro {font-weight:bold;}
- 不同于类选择器,ID 选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表
- 注意: id 属性只能在每个 HTML 文档中出现一次
<html> <head> <style type="text/css"> #red {color:red;} </style> </head> <body> <p id="red">hello</p> </body> </html>类选择器:
- 说明:
- 类选择器以 "." 来定义, "." 前为要结合的元素,"." 后为类名("." 前面若没有要结合的元素或为 * 时,代表可以与任意元素结合)
p.important {color:red;}- 如果您只想选择所有类名相同的元素,可以在类选择器中忽略通配选择器
*.important {color:red;} .important {color:red;} <!两者等价>- CSS 多类选择器(不同类中间用空格隔开)
<! important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景> <html> <head> <style type="text/css"> .important {font-weight:bold;} .warning {font-style:italic;} .important.warning {background:silver;} </style> </head> <body> <p class="important">This paragraph is very important.</p> <p class="warning">This is a warning.</p> <p class="important warning">This paragraph is a very important warning.</p> <p>This is a paragraph.</p> </body> </html>- 注意: 类属性能在每个 HTML 文档中出现多次
<html> <head> <style type="text/css"> .fancy {color: #f60;background: #666;} </style> </head> <body> <p class="fancy">hello</p> <p class="fancy">hello</p> <p class="fancy">hello</p> </body> </html>属性选择器:
- 说明:
- 属性选择器以 "[属性名]" 来定义,"[属性名]" 前为要结合的元素,"[属性名]"后为类名("[属性名]" 前面若没有要结合的元素或为 * 时,代表可以与任意元素结合)
<html> <head> <style type="text/css"> p[title = red]{color:red;} </style> </head> <body> <p title="red">Hello world</p> <h2 title="red">Hello world</h2> </body> </html>- 当没有 "[属性名]" 时,为通用属性,即 "[title]" 时
<!DOCTYPE HTML> <html> <head> <style type="text/css"> [title]{color:red;} </style> </head> <body> <h2 title="Hello world">Hello world</h2> <a title="W3School" href="http://w3school.com.cn">W3School</a> </body> </html>- 注意: 属性能在每个 HTML 文档中出现多次
<!DOCTYPE HTML> <html> <head> <style type="text/css"> [title=W3School]{border:5px solid blue;} </style> </head> <body> <img title="W3School" src="/i/w3school_logo_white.gif" /> <br /> <a title="W3School" href="http://w3school.com.cn">W3School</a> </body> </html>
- 多个属性值的"与"与"或":
- "与":引用多个属性值,中间用空格隔开,属性声明时 "="前面加 "~"
<!DOCTYPE HTML> <html> <head> <style type="text/css"> [title~=hello]{color:red;} [title~=world]{font-size:90px} </style> </head> <body> <h2 title="hello world">Hello world</h2> <p title="student hello">Hello W3School students!</h1> <hr /> <h2 title="world">Hello world</h2> <p title="student">Hello W3School students!</p> </body> </html>- "或":引用多个属性值,中间用 "-" 隔开,属性声明时 "=" 前面加 "|",属性值为第一个匹配到正确的属性声明.
<!DOCTYPE HTML> <html> <head> <style type="text/css"> [lang|=en]{color:red;} [lang|=us]{font-size:90px} </style> </head> <body> <p lang="en">Hello!</p> <p lang="us-en">Hi!</p> <hr /> <p lang="us">Hi!</p> <p lang="zh">Hao!</p> </body> </html>- 针对某个标签的某个属性:
img[alt] {border: 5px solid red;} a[href][title] {color:red;}
长度值
相对长度:以属性的前一个属性单位为基础来设置当前属性
- em:相对字符的高度.该设置以当前元素使用的文章高度为单位
- px:像素点
- %:百分比
绝对长度:不会随着显示装置的不同而改变
- in:英寸(1 in = 2.54 cm)
- cm:厘米
- mm:米
- pt:点(1 pt = 1/72 in)
- pc:帕(1 pc = 12 pt)
如何使用 css
定义样式表: <style type = "text/css">.......</style> [在头文件中声明]
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>读取外部样式表: <link rel ="stylesheet" href = "链接地址" type = "text/css" > [在头文件中声明]
<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>标记中定义样式:<html标记 style = "样式属性:属性值;...."> [在元素中声明]
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
css 框架模型
CSS 框架模型
边距合并
情况一:当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并
..............................................................................................................................................................
情况二:当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开）,它们的上和/或下外边距也会发生合并
..............................................................................................................................................................
情况三:假设有一个空元素,它有外边距,但是没有边框或填充.在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并
...............................................................................................................................................................
情况四:如果这个外边距遇到另一个元素的外边距,它还会发生合并
css 定位
position 属性值的含：
- static: 元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中.
- relative: 元素框偏移某个距离.元素仍保持其未定位前的形状,它原本所占的空间仍保留.
- absolute: 元素框从文档流完全删除,并相对于其包含块定位.包含块可能是文档中的另一个元素或者是初始包含块.元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样.元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框.
- fixed: 元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身
CSS 绝对定位:
- 说明:
- 绝对定位使元素的位置与文档流无关,因此不占据空间.这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置
- 图释:
CSS 相对定位:
- 说明:
- 相对定位是一个非常容易掌握的概念.如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动.
- 图释:
css 浮动:
请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘：
再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘.因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失.如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框.
如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间.如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”：
行框和清理:
浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框.因此,创建浮动框可以使文本围绕图像：
要想阻止行框围绕浮动框,需要对该框应用 clear 属性.clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框.为了实现这种效果,在被清理的元素的上外边距上添加足够的空间,使元素的顶边缘垂直下降到浮动框下面：
基础语法
CSS 基础语法:http://www.w3school.com.cn/css/css_syntax.asp
CSS 高级语法:http://www.w3school.com.cn/css/css_syntax_pro.asp
CSS 派生选择器:http://www.w3school.com.cn/css/css_syntax_descendant_selector.asp
CSS 后代选择器:http://www.w3school.com.cn/css/css_selector_descendant.asp
CSS 子元素选择器:http://www.w3school.com.cn/css/css_selector_child.asp
CSS 相邻兄弟选择器:http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp
CSS 元素选择器:http://www.w3school.com.cn/css/css_selector_type.asp
CSS 分组: http://www.w3school.com.cn/css/css_selector_grouping.aspCSS id 选择器:http://www.w3school.com.cn/css/css_syntax_id_selector.asp
CSS id 选择器详解:http://www.w3school.com.cn/css/css_selector_id.asp
CSS 类选择器:http://www.w3school.com.cn/css/css_syntax_class_selector.asp
CSS 类选择器详解:http://www.w3school.com.cn/css/css_selector_class.asp
CSS 属性选择器:http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp
CSS 属性选择器详解:http://www.w3school.com.cn/css/css_selector_attribute.asp
css 框架模型
CSS 框模型概述:http://www.w3school.com.cn/css/css_boxmodel.asp
CSS 外边距合并:http://www.w3school.com.cn/css/css_margin_collapsing.asp
css 定位
CSS 定位 (Positioning):http://www.w3school.com.cn/css/css_positioning.asp
CSS 相对定位:http://www.w3school.com.cn/css/css_positioning_relative.asp
CSS 绝对定位:http://www.w3school.com.cn/css/css_positioning_absolute.asp
CSS 浮动:http://www.w3school.com.cn/css/css_positioning_floating.asp
2321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
