菜鸟笔记——CSS

1.基础知识

定义：CSS 指层叠样式表 (Cascading Style Sheets)
基础语法：

• 由两个主要的部分构成：选择器，以及一条或多条声明。
• selector {declaration1; declaration2; … declarationN }
• selector {property: value}
• 

导入样式表

<link rel="stylesheet" type="text/css" href="mystyle.css" />

层叠次序：
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表（位于 标签内部）
4. 内联样式（在 HTML 元素内部）

2.选择器

/* id 选择器 */
id选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id选择器以 "#" 来定义————与id搭配（注意：id 属性只能在每个 HTML 文档中出现一次）
#red { color:red; }
#green { color:green; }
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

/* 类选择器 */
类选择器以“.”定义——与class搭配
.center { text-align: center }
<h1 class="center">
This heading will be center-aligned
</h1>

/* 属性选择器[] */
1.带有 title 属性的所有元素
[title]{ color:red; }
<h2 title="Hello world">Hello world</h2>

2.同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
a[href][title] { color:red; }

3.title="W3School" 的所有元素(必须与属性值完全匹配)
[title=W3School]{ border:5px solid blue; }
<img title="W3School" src="/i/w3school_logo_white.gif" />

4.包含指定值的 title 属性的所有元素(根据属性值中的词列表的某个词进行选择)
[title~=hello] { color:red; }
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>

example:
p.important 和 p[class="important"] 应用到 HTML 文档时是等价的。
那么，为什么还要有 "~=" 属性选择器呢？因为它能用于任何属性，而不只是 class。

[attribute|=value]		用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]		匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]		匹配属性值中包含指定值的每个元素。

/* 子元素选择器 */
h1 > strong { color:red; }
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>		//作用
<h1>This is <em>really <strong>very</strong></em> important.</h1>

/* 相邻兄弟选择器 */
h1 + p {margin-top:50px;}
<h1>This is a heading.</h1>
<p>This is paragraph.</p>			/作用
<p>This is paragraph.</p>

3.属性

background-repeat: repeat-y;		//背景重复
background-position；				//背景定位
background-attachment；				//背景关联；默认值 scroll（背景会随文档滚动）；fixed（背景不会随页面的其余部分滚动）
text-indent；						//文本缩进
word-spacing;						//单词之间的标准间隔
letter-spacing;						//字符或字母之间的间隔
text-transform;						//字符转换 none, uppercase, lowercase, capitalize
white-space;						//处理空白符 值   	空白符   换行符	自动换行
normal	 合并	忽略    	 允许
nowrap	 合并	忽略	    不允许
pre	     保留	保留	    不允许
pre-wrap 保留	保留	     允许
pre-line 合并	保留	     允许
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

visibility;							//visible	默认值，元素是可见的；hidden	元素是不可见的；collapse	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
display:none						//此元素不会被显示
opacity:0.4;							//定义图像透明度

4.框模型

外边距合并：

5.定位

标准文档流：
元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列，这也是元素默认的排列方式。

相对定位：

• 让元素“相对于”它的起点进行移动。
• 使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对对位：

• 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
• 绝对定位使元素的位置与文档流无关，因此不占据空间。

浮动：

• 脱离文档流
• 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

行框和清理：

• clear表示框的哪些边不应该挨着浮动框。clear 属性的值可以是 left、right、both 或 none。