css知识清单
CSS样式
1 自定义CSS样式
.font01{
font-family:"宋体"；
font-size:12px;
color:#333333
}
在需要调用的区域，添加class属性，例 <td class="font01">
2 HTML样式
.body{
background-color:#FFFFFF;
background-image:url(images/001.jpg);
background-repeat:repeat-x;
margin:0px;
}
HTML样式是指通过CSS样式对HTML标签原有的样式效果进行重新定义。
3 CSS选择器样式
a:link{
font-weight:bold;
color：#c00;
}
a:visited{
font-weight:bold;
color：#c30;
}
a:hover{
font-weight:bold;
color：#f60;
}
a:active{
font-weight:bold;
color：#f90;
}
其中，a:link为链接未点击，a:visited为链接已点击，a:hover为鼠标经过链接，a:active为hover与visited之间的一个状态，即链接被按下时的状态。注意，必须按以上顺序写，否则
显示可能和预想的不一样（？？）,记住它们的顺序是"lvha"
CSS基本语法：
一个样式的语法是由三部分构成的，选择器selector、属性property、属性值value，
例 body {margin:32px;}
1. 选择符指定对文档中那个标签进行定义，选择符最简单的就是"类型选择符"，它可以直接输入元素的名称，便可以对其定义。
2. ...
.
.
.
CSS三种插入方法：
内联样式：直接写在XHTML标签中
例 <p style="font-family:宋体；font-size:14pxl color:#999999;">内联样式</p>
内联样式由XHTML文件中元素的style属性所支持，其并不符合表现与内容分离的设计模式，使用内联样式与表格式布局从代码结构上来说完全相同，仅仅
利用了css对元素的精确控制优势，这种书写方式应当尽量少用。
内部样式表：用<style></style>嵌入到XHTML文件的头部，内部样式表是css样式表的初级应用形式，它只针对当前页面有效，不能跨页面执行，因此达不到css代码
多用的目的，在实际的大型网站开发过程中，很少使用到内部样式表。
例 <html>
<head>
<title>内部样式表</title>
<style>
*｛
padding:opx;
margin:0px;
border:0px;
｝
body{
font-family:"宋体"；
font-size:12px;
color: #333333
}
</style>
</head>
<body>
内部样式表
</body>
</html>
注：（* 通配符 对页面中所有标签起作用）
外部样式表：将CSS样式表代码单独编写在一个独立的文件中，由网页进行调用，多个网页可以调用同一个外部样式文件，文件以.css为扩展名，
在<head>内使用<link>将样式表链接到XHTML文件内。这种方式，实现了代码的最大化以及网站文件的最优化配置。
例 <html>
<head>
<title>外部样式表</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
外部样式表
</body>
</html>
CSS继承
例
<style type="text/css">
h1{
color:red;
text-decoration:underline;
}
h1 em{
color:#004400;
font-size:40px;
}
</style>
说明：
<em>标签继承了<h1>标签中设置的下划线，而颜色和字体大小采用了自己设置的风格，css的继承一直贯穿css设计的始终，巧妙的利用css的继承关系，
大大的缩减代码的编写量。
特殊性：特殊性规定了不同规则的权重，当多个规则可以应用在同一元素时，权重越高的样式会被优先采用。
例
.
.
.
.font01{
color:red;
}
p ｛
color:#blue;
｝
.
.
<p class="font01">内容</p>
.
那么p的颜色究竟是什么颜色??
根据规范，一个简单的选择器特殊性1 ，类选择符号具有特殊性10，id选择符具有特殊性100。因此，例中p为红色。继承的属性具有特殊性0，因此
后面任何的定义都会覆盖掉元素继承来的样式。
例
h1{
color:blue; /*特殊性=1*/
}
p em{
color:yellow; /*特殊性2*/
}
.font01{
color:red; /*特殊性10*/
}
p.note em.dark {
color: gary; /*特殊性22*/
}
# main{
color:black; /*特殊性100*/
}
css中的单位和值
px 像素 width:12px
rgb 颜色单位 color:rgb(255,255,255) color:rgb(12%,100%,50%)
#rrggbb 十六进制颜色单位 color:#000FFF
群选择符
对单个XHTML对象进行样式指定，同样可以对一组对象进行相同的样式指派。
例：
h1,h2,h3,p,span{
font-size:12px;
font-family:"宋体";
}
使用逗号对选择符进行分隔，使得对多个选择符都具有相同的定义，这样做的好处是减少了代码量，改善了css代码的结构，显得更加简洁。
派生选择符
例
h1 span{
font-weight:bold;
}
说明：当仅仅对某一个对象中的"子"对象进行样式指定时，派生选择符就被派上了用场，派生选择符是指选择符组合中前一个对象包含后一个对象，
对象之间用空格分隔。
id选择符（标识选择符）
id选择符是根据DOM文档对象模型原理所出现的选择符类型，对一个网页而言，其中每一个标签，均可以使用一个id=""的型式，
对id属性进行一个名称的指派，id可以理解为标识，在网页中每个id的名称只能使用一次。
例
# special{
line-height:130%;
}
类选择符
类选择符以文档语言对象类型作为选择符，即以HTML标签作为选择符，class类选择符与HTML选择器实现了让同类标签共享同一样式。注意，类名前有个"."号。
DIV标签只是一个标识，作用是把内容标识一个区域，通过DIV将页面中的内容元素标识出来，再利用CSS对各部分内容添加样式。DIV对象除了可以直接放入文本
和其他标签，也可以多个DIV标签进行嵌套使用，div使用的最终目的是合理的标识出页面的区域。DIV对象在使用的时候，同其他HTML对象一样，
可以加入其他属性，例如id,class，align,style等，而在CSS布局方面，为了实现内容与表现分离，不应当将align属性与style属性编写在页面的DIV标签中，因此，
DIV标签只可能拥有以下两种形式。
1 <div id="id名称">内容1</div>
2 <div class="class名称">内容2</div>
DIV对象本身就是占据整行的一种对象，不允许其他对象与它在一行中并列显示 ，实际上DIV就是一个"块状对象"。
XHTML中的所有对象几乎都默认为两种类型
1 block块状对象：指的是当前对象显示为一个方块，默认的显示状态下将占据整行，其他对象在下一行显示。
2 in-line 行间对象：与block相反
3 <p>、<h1>、<div>等元素常常被称为块级元素，
4 <strong>、<span>等元素被称为行内元素。
5 可以通过display属性改变生成的框的类型，将display属性设置为block,可以让行内元素表现得像块级元素一样。
在网页设计中，能否很好地控制各个模块在页面中的位置非常重要。浮动、定位和框架模型是CSS的3个最重要的概念。这些概念控制着在页面上安排和显示元素的方式 ，形成CSS的基本布局。
盒装模型：在CSS控制页面时，盒模型是一个很重要的概念。掌握了盒模型以及其中每一个元素的用法，才可以真正的控制页面中各个元素的位置。
一个盒装模型是由content（内容）、border(边框)、padding(填充)和margin（边界）4个部分组成的，填充、边框和边界都分为上、右、下、左四个方向，
既可以分别定义，也可以统一定义。
例
#box{
margin-top:4px;
margin-right:5px;
margin-bottom:6px;
margin-left:7px;
padding-top:3px;
padding-right:4px;
padding-bottom:5px;
padding-left:6px;
border-top:2px solid #666;
border-right:2px solid #666;
border-bottom:2px solid #666;
border-left:2px solid #666;
}
CSS定义的宽、高，指的是除去边界、边框、填充剩下的内容范围，因此一个元素的实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
#box{
width:621px;
height:218px;
margin-top:4px;
margin:30px;
padding:20px;
border:10px solid #333;
}
因此，实际宽度=30+10+20+621+20+10+30 px
关于盒模型需要以下几点：
浮动元素（无论左浮动或者右浮动）链接不压缩，如果浮动元素不声明宽度，则其宽度趋向于0，即延伸到其内容能承受的最小宽度。
如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0%，不会被显示，在采取布局的时候需要特别注意这一点。
css中有三个基本的定位机制：普通流、浮动、绝对定位
普通流：默认情况下，所有框都在普通流中
在DIV+CSS布局中，要想自由地达到自己想要的效果，必须精通DIV定位，清楚position、floating属性的含义和它们的几个参数。
position:
static ,默认定位
relative,相对，对象不可层叠，但将依据left,right,top,bottom等属性在正常文档流中偏移位置。
...
.
.
对于一个元素进行相对定位，通过设置垂直或者水平位置，让这个元素对于自己本来的起点位置进行移动。
例
#divmain{
position:relative;
left:50px;
top:50px;
float:left;
height:200px;
width:200px;
border:solid 1px;
z-index：2；
center></center>来实现居中是不符合网页表现和内容分离的设计思想的，下面介绍两种居中的布局方法。
1 例
<body>
<div id="box"></div>
</body>
#box {
width:960px;
margin:0 auto;
}
2 例
#box {
width:960px;
position:relative;
left:50%;
}
如果不希望容器的左边缘居中，而是让容器居中，只要对容器的左边应用负值的空白边，宽度等于容器的一半。这样就相当于向左移动它一半的宽度，
从而让它在屏幕上居中。
#box {
width:960px;
position:relative;
left:50%;
margin-left:-480px;
}
浮动的布局设计
<div id="left">左边</div>
<div id="right">右边</div>
两列固定宽度，在水平中并排显示
#left {
width:300px;
height:300px;
background-color:#6CF;
border:2px solid #66F;
float:left;
}
#right {
width:300px;
height:300px;
background-color:#6CF;
border:2px solid #66F;
float:left;
}
<div id="box">
<div id="left">左边</div>
<div id="right">右边</div>
</div>
两列固定宽度居中显示
两列固定宽度居中布局可以使用DIV的嵌套方式来完成，用一个居中的DIV作为容器，将两列分栏的两个DIV放置在容器中，从而实现两列的居中显示。
#box {
width:448px;
margin:0px auto;
}
#left {
width:300px;
height:300px;
background-color:#6CF;
border:2px solid #66F;
float:left;
}
#right {
width:300px;
height:300px;
background-color:#6CF;
border:2px solid #66F;
float:left;
}
一个对象的宽度，不仅仅由width值来决定，它的真是宽度是由本身的宽，左右外边距，左右边框和内边距这些属性相加而成的，width=220px,左右都有2px的边距，
因此实际宽度为224px所以box的宽度设定448px
两列右列宽度自适应布局
在实际应用中，有时需要左栏固定宽度，右栏根据浏览器窗口的大小自动适应。在CSS中只需要设置左栏宽度，右栏不设置任何宽度值，并且右栏不浮动。
<div id="left">左边</div>
<div id="right">右边</div>
#left {
width:200px;
height:250px;
background-color:#6CF;
border:2px solid #66F;
float:left;
}
#right {
height:250px;
background-color:#6CF;
border:2px solid #66F;
}
三列浮动中间列宽度自适应布局
<div id="left">左边</div>
<div id="main">中间</div>
<div id="right">右边</div>
#left {
width:250px;
height:250px;
background-color:#6CF;
border:2px solid #66F;
position:absolute;
top:0px;
left:0px;
}
#right {
width:250px;
height:250px;
background-color:#6CF;
border:2px solid #66F;
position:absolute;
top:0px;
right:0px;
}
* {
margin:0px;
padding:0px;
border:0px;
}
#main {
height:250px;
background-color:#6CF;
border:2px solid #66F;
margin:0px auto
margin:0px 254px 0px 254px
}
新增属性 overflow
overflow: visible | auto | hidden | scroll
任何一个网站，它的背景颜色和背景图片的基调往往是给用户的第一印象，因此控制网站页面背景通常是网页设计的一个重要的步骤。无论是单一的纯色背景还是漂亮的背景图像，
都可以给整个页面带来丰富的视觉效果。HTML中各个元素基本上都支持background属性，可以设置背景颜色与背景图片。对于背景图像的设置，在HTML页面中仅仅支持X轴和Y轴平铺的
视觉效果，而css对于元素背景图像的设置则提供了更多的途径。
背景控制属性
background 背景总控
background-color 背景颜色
background-image 背景图像
background-repeat 背景平铺方式
background-attachement 图像滚动方式
background-position 背景图像的位置
例
background-color：#ACDBE4
background-image： url(images/6301.jpg)
背景对象的重复方式：
inherit:从父元素继承background-repeat
no-repeat: 图像只显示一次，不重复平铺
repeat： 背景图像在水平和垂直方向上平铺
repeat-x：背景图像在水平方向上平铺
repeat-y：背景图像在垂直方向上平铺
round：背景图像两端对齐平铺，多出来的空间通过自身的拉伸来填充
space：背景图像背景图像两端对齐平铺，多出来的空间通过空白填充
背景图像的定位
background-position：水平对齐方式 垂直对齐方式
背景图像的滚动
background-attachement
scroll 默认 滚动
fixed 固定
inherit 继承
背景的新增属性
background-origin 决定background-position（背景位置定位）计算的参考位置
border:从border区域开始显示背景
padding:...
content:...
background-clip 确定背景图像的裁剪区域
border-box: 从border区域开始裁剪背景图像
padding:...
content:...
background-size 指定背景图像的大小
multiple backgrounds ...
.
.?
transition:[transition-property][transition-duration][transition-timing-function][transition-delay]
transition-property 过渡的方式
transition-duration 过渡的时间长短
transition-timing-function 过渡的路径
transition-delay 过渡执行延迟的时间
设置页面中的图像
一个网站内容的知识性、实用性再高，如果只有内容还是会让人觉得乏味，特别是如今对视觉设计的要求越来越高，网站往往通过图像来使得页面
有一个漂亮的外表。对图像的控制方法和技巧，是网页设计的重要技术。
css所支持的边框属性
border-width 用于设置元素边框粗细
thin 细
medium 中
thick 粗
length:自定义
border-style 用于设置元素边框样式
none 无边框
hidden ?
dotted 定义点状边框
dashed 定义虚线
solid 实线
double 双线
groove 定义3D凹槽边框
.
.
.
border-color 用于设置边框颜色
color_name
hex_number
rgb_number
transparent 默认值 边框颜色为透明
border-color 用于设置元素边框颜色
例 统一设置
#main img{
margin-left: 20px;
border-width: 5px;
border-style: solid;
border-color: #FFFFFF;
}
例 单独对图像任意一边设置样式
#main img{
margin-left: 20px;
border-top-width: 5px;
border-top-style: solid;
border-top-color:#FFFFFF;
border-right-width: 5px;
border-right-style: groove;
border-right-color:#FF00FF;
border-bottom-width: 5px;
border-bottom-style: dashed;
border-bottom-color:#00FF00;
border-left-width: 5px;
border-left-style: solid;
border-left-color:#FF0000;
}
例 统一 简写方法
#main img{
margin-left: 20px;
border: 5px solid #CCCCCC;
}
例 分别设置 简写方法
#main img{
margin-left: 20px;
border-width: 5px 2px 10px 7px;
border-style: dashed dotted double solid;
border-color: #FFFFFF #FF0000 #00FF00 #FF00FF
}
当图像和文字同时出现在页面上的时候，图像的对齐方式就变得十分重要，将图像对齐到理想的位置，使得整个页面看起来更协调统一。
图片的水平对齐和文字的水平对齐都是通过text-align属性进行设置，可以实现图片左、中、右3种对齐效果，不过与文字的水平对齐方式
不同，图片的对齐需要通过为其父类元素设置定义text-align样式来达到效果。
例 将三个图像的水平对齐方式分别为左、中、右
.
.
.
<div id="pic1"><img .../></div>
<div id="pic2"><img .../></div>
<div id="pic3"><img .../></div>
.
.
.
相应的css样式
#pic1 {
text-align:left;
}
#pic2 {
text-align:center;
}
#pic3 {
text-align:right;
}
图片竖直方向上的对齐方式主要体现在与文字搭配的情况下，尤其当图片的高度与文字的高度不一致的时，在CSS中使用vertical-align属性来实现各种效果。
.
.
.
<p> bottom <img src="images...." class="pic1"> </p>
<p> middle <img src="images...." class="pic2"> </p>
<p> top <img src="images...." class="pic3"> </p>
.
.
.
相应的css样式
.
.
.
.pic1{vertical-align:bottom;}
.pic1{vertical-align:middle;}
.pic1{vertical-align:top;}
.
.
在网站中经常会看到一些图片和文字混合排列在一起的排版方式，从而更好的表达了该网站的主体信息，这种排版方式称为"图文混排".图文混排的效果可以通过float方法实现，
即通过设置float属性来达到文字内容围绕在图片周围。
.
.
.
登录表单，
注册表单，
搜素表单，
跳转表单，
表单实现交互功能必须通过表单元素，让浏览者输入需要处理或提交的数据，这些表单元素包括文本框，复选框，单选框，下拉菜单和按钮等。
单独使用<input>标签可以创建10种不同类型的表单元素，创建的具体的表单元素依赖于type属性，
<button> 创建reset, submit或者其他可编程下压按钮
<filedset> 组合相关的表单控件
<input type="button"> 创建可编程的表单控件
<input type="checkbox"> 创建复选框
<input type="file"> 从用户的计算机系统中选择用于上传的文件
<input type="hidden"> 创建隐藏的字段
<input type="image"> 根据图像创建按钮
<input type="password"> 创建密码文本字段
<input type="radio"> 创建单选按钮中的一个按钮
<input type="reset"> 创建reset按钮
<input type="submit"> 创建submit按钮
<input type="text"> 创建单行文本
<label> 为表单元素提供文本标签
<legend> 为<filedset>提供文本标签
<optgroup> 组合相关<option>元素
<option> 指定select菜单中的一个选择
<select> 创建下拉菜单或者可滚动菜单
<textarea> 创建多行文本输入框
表单是网页中的一个特定的区域，由<form>标签定义，限定范围，指定表单提交方式，它含有以下属性，
name 表单的名称
method 定义表单从浏览器传送到服务器的方法
action 用来定义表单处理程序的位置
enctype 设置表单资料的编码方式
target 设置返回信息的显示方式
文本域：
text属性值 可以输入任何类型的文本、数字或字母，输入的内容以单行显示，具有其他属性
name 文本域的名称
id 文本域的编号
maxlength 文本域的最大输入字符数
size 文本域的宽度（以字符为单位）
value 默认值
例
<input type="text" name="name" id="name" size="30" maxlength="50" value="请输入用户名"/>
密码域：
password属性值...
.
.
.
文件域：
file属性值...
.
.
.
复选框：checkbox ....
单选按钮：radio ...
提交：sumbit ...
图像域：image ...
隐藏域：hidden...
菜单列表： 通过<select>和<option>标记可以设计页面中的菜单和列表
多行文本:textarea...
超链接是整个互联网的基础，网站中的每一个网页都是通过超链接的形式关联在一起的。
例
<div id="news-list">
<a href="#">中国</a><br/>
<a href="#">俄罗斯</a><br/>
<a href="#">古巴</a><br/>
<div class="more_info"><a href="#">>>更多</a></div>
<div>
例
<div id="menu">
<ul>
<li><a href="#">国内新闻</a>
<li><a href="#">国外新闻</a>
<li><a href="#">体育新闻</a>
</ul>
</div>
相应的css代码
#menu li {
float: left;
list-style-type:none;
width:100px;
height:25px;
line-height: 25px;
text-align: center;
margin-right: 5px;
}
虽然能有效地定义页面上的各种样式，但是它毕竟属于静态的。CSS与XML和Ajax的综合应用，实现一些更丰富、更动态的Web用户界面。
