CSS 内容串联
CSS ----层叠样式表 Cascading Style Sheet
一、CSS的分类
1.外部样式表---.css文件
2.内嵌样式表---放在<head><style type="text/css"> </style></head>
3.内联样式表---放在标记style上的属性
二、选择器
（一）基本选择器
1.id 选择器：#
2.class 选择器：.
3.标签选择器：标签名，例 body{}
（二）组合选择器
1.用逗号隔开。 并列关系 html,body,#dd,#s{}
2.用空格隔开的。后代关系 .ss a{} .ss .aa{}
3.筛选。 选择器.class选择器 input.tt (筛选的是input，找class=tt的input)
input .tt(放在input 里面class=tt的所有元素)
层叠的含义：
1.样式表类型的层叠
2.选择器的层叠
3.父子元素的层叠
优先级：
1.一般来说，id选择器的优先级要高于class选择器的优先级，class选择器的优先级高于标签选择器的优先级。
2.对于同一类型的选择器，内联样式的要高于内嵌，内嵌样式的优先级要高于外部的。
三、样式表的属性
（一）前景和背景
1.背景：background-color:背景色
background-image:url(路径) 背景图
background-attachment:fixed---背景固定，scroll---背景与文字一起滚动
background-repeat: repeat----平铺，no-repeat---不平铺， repreat-x---横向平铺，repeat-y---纵向平铺
background-position: right 100px bottom 200px; left top; center.......(设置背景图时，repeat 必须是 no-repeat)
2.前景：font-family:
font-size:
color:
font-weight:bold;
font-style:italic;
text-decoration:underline,none,overline(上划线)，line-through(删除线)；
text-align:left,center,right.
vertical-align:middle,top,bottom.
line-height:行高。一般是 font-size的 1.5--2倍。
（二）边界和边框
1.边框（二位界面）
| boder | style | color | width |
| top | border-top-style |
border-top-color | border-top-width |
| right | border-right-style | border-right-color |
border-right-width |
| bottom | border-bottom-style | border-bottom-color | border-bottom-width |
| left | border-left-style | border-left-color | border-left-width |
2.外边距 padding:top right bottom left
3.内边距 margin:top right bottom left
（三）列表和方块
方块：width ,heiht , top , left ...
列表（<ul><li></li></ul>）:
list-style-type:
list-style-position:outside,inside.
list-style-image:url(路径)
display: none---不显示， block---块显示（独占一行），inline---不独占一行（width,height不管用）， inline-block---不独占一行（width,height管用）
visibility:是否可见。 visible---可见，hidden---隐藏。如果隐藏起来，但位置依然是占用的。
overflow:溢出处理。 hidden---隐藏超出部分，scroll---超出就显示滚动条。
（四）格式和布局
位置布局
position:(fixed,absolute,relative)
配合的样式属性：top,right,bottom,left.......
fixed----绝对定位。以浏览器可见区域为坐标系进行定位，不是页面为坐标定位。通常用来做浮动层，ie6不行。例子：右下角的广告小窗口，弹窗。。。。
relative---相对定位。相对的意思是：相对于该元素原本应当在的那个位置。虽然元素显示的位置变化了，但原来的空间依然是占用的。
absolute----绝对定位。如果元素外围的元素没有设置absolute样式，那么它以整个页面为坐标系进行定位。
例子：<style type="text/css">
#d1{....}
#d2{.....;position:absolute;top:100px;left:100px;}
</style>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body>
如果这个元素外围有一个元素具有position样式属性，那么他是以这个外围元素为坐标进行定位的。
例：<style type="text/css">
#d1{....;position:absolute;}
#d2{.....;position:absolute;top:100px;left:100px;}
</style>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body>
流式布局
float:
配合的样式属性：margin,margin-top,margin-right,margin-bottom,margin-left;
clear:清除浮动。clear:both
例子：
例一、几个并列的层使用float布局的规律。(注意消除浮动)
<style type="text/css">
.b
{
width:200px;
height:200px;
border:#F00 5px solid;
}
#d1,#d2
{
width:150px;
height:150px;
border:#00F 5px solid;
float:left;
}
</style>
<body>
<div id="d1" class="b">
</div>
<div id="d2" class="b">
</div>
<div id="d3" class="b">
</div>
<div id="d4" class="b">
</div>
</body>
若是 下面的两个红框不浮动上去，用 clear:both 消除浮动。
<body>
<div id="d1" class="b">
</div>
<div id="d2" class="b">
</div>
<div style="clear:both"></div>
<div id="d3" class="b">
</div>
<div id="d4" class="b">
</div>
</body>
例二、嵌套的层，使用float布局的规律。（内外层都要float）
<style type="text/css">
#d1
{
background-color:#00F;
width:100%;
float:left;
}
#d2
{
width:200px;
height:200px;
background-color:#F00;
float:left;
}
</style>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body>
CSS 命名规范：
通常我们最常用主要命名有：wrap（外套、最外层）、header（页眉、头部）、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)
、content (内容区)、footer(页脚、底部)、logo（标志、可以配合h1标签使用）、banner（广告条，一般在顶部）、copyRight（版权）。
main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
（二）注释的写法:
/* Footer */
内容区
/* End Footer */
（三）id的命名:
(1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
(2)导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
(3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
(四)class的命名:
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体大小,直接使用"font+字体大小"作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用"类别+功能"的方式命名,如
.barnews { }
.barproduct { }
注意事项::
1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写，除非一看就明白的单词.
主要的 master.css
模块 module.css
基本共用 base.css
布局，版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css