简介：
Cascading Style Sheets)
——————————————————————————————————————————————————————————————————————
语法;
CSS 规则由两个主要的部分构成：选择器(selector)，以及一条或多条声明(declaration).每条声明由一个属性(property)和一个值(value)组成。
CSS声明总是以分号(;)结束，声明组以大括号({})括起来:
CSS注释以 "/*" 开始, 以 "*/" 结束。
——————————————————————————————————————————————————————————————————————
Id和class:
要在HTML元素中设置CSS样式，需要在元素中设置"id" 和 "class"选择器。
id:
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
class:
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示.。用x.class来指定特定的。
——————————————————————————————————————————————————————————————————————
创建：
外部样式表：head里面。<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
内部样式表：也是在head里面。用 <style> 标签在文档头部定义内部样式表。
内联样式表：<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
另外内联样式表的优先级是最高的。
—————————————————————————————————————————————————————————————————
背景：
- background-color 在body的选择器中。
- background-image 设置背景图片。
- background-repeat 不让图像平铺。
- background-attachment
- background-position 改变图像在背景中的位置:。
简写属性：background:#ffffff url('img_tree.png') no-repeat right top;
—————————————————————————————————————————————————————————————————
文本：
对齐方式：当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
修饰：从设计的角度看 text-decoration属性主要是用来删除链接的下划线。overline、line-through、underline.
转换：text-transform:none、uppercace(大学)、lowercase（小写）、capitalize（首字母大写）。
缩进：p {text-indent:50px;}
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
字体：
样式：normal、italic、oblique
大小：可以用em来代替px。1em=16px。font-weight（指明粗细）。
链接：
样式：
list-style-type属性指定列表项标记的类型。
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
| list-style-image | 将图象设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型 |
表格：
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：
表格填充：padding。设置表格td空间的相应大小。
padding:3px 7px 2px 7px;（上，右，下，左）
—————————————————————————————————————————————————————————————————
框模型：
边框：
border-style属性用来定义边框的样式
可以通过 border-width 属性为边框指定宽度。
border-color属性用于设置边框的颜色
—————————————————————————————————————————————————————————————————
轮廓：
outline-style/color/width.......
外边距：
分组和镶嵌选择器：
分组：简化代码，就相当于把相同的整合在一块。
显示display和可见性visibility：
隐藏一个元素可以通过display属性设置为"none"或"hidden"属性的可见性。格式参考h1.hidden {visibility:hidden;}
{display:inline;}显示内联函数。（这个作用是可以把两行字贴起来）
display:block;块函数。（这个是让两行字上下没有空隙）
也可以visibility:collapse来不可见表格的一行。
—————————————————————————————————————————————————————————————————
定位（positioning）:
static定位：就相当于没有定位。
fixed定位：即使窗口是滚动的它也不会移动。
relative定位：相对定位元素的定位是相对其正常位置。
absolute定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）（+1/-1）
clip:rect(0px,60px,200px,0px);裁剪外形。（此时是长方形）
div class="scroll"处理益处时有滑块。
cursor光标显示问题。
—————————————————————————————————————————————————————————————————
浮动float:
float和clear的运用。
—————————————————————————————————————————————————————————————————
块元素对齐：
中心对齐使用：margin:auto;
元素对齐的方法之一是使用绝对定位、使用float属性也是对齐元素的方法之一。
—————————————————————————————————————————————————————————————————
组合选择符（看源文件的例子，一看就懂了）：
后代选取器匹配所有值得元素的后代元素。
子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素
—————————————————————————————————————————————————————————————————
伪类pseudo-class：
语法： selector:pseudo-class {property:value;}
first-child 伪类来选择元素的第一个子元素
lang 伪类使你有能力为不同的语言定义特殊的规则q:lang(no){quotes: "~" "~";}
—————————————————————————————————————————————————————————————————
伪元素：
CSS伪元素是用来添加一些选择器的特殊效果。
语法：selector:pseudo-element {property:value;}
first-line" 伪元素用于向文本的首行设置特殊样式。
"first-letter" 伪元素用于向文本的首字母设置特殊样式
":before" 伪元素可以在元素的内容前面插入新内容。
—————————————————————————————————————————————————————————————————
导航栏：
使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义.
类似一个显示的问题：display：block/inline.
—————————————————————————————————————————————————————————————————
图像廊：
透明度：
opacity:0.6;filter:alpha(opacity=60); /* For IE8 and earlier */
图像拼合技术：（还得多看）
好好领悟实例。
包含指定值的long属性的元素样式的例子，使用（|）分隔属性和值:
扫一扫
4684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
