div+css的属性

div+css的属性

gCascading Style Sheet 层叠式样式表 ==> 层叠样式表
Internal Style Sheet 内部样式表
External Style Sheet 外部样式表
inheritance 继承
em 斜体
Strong粗体
descendent selector 派生选择器
universal selector 通用选择器 ==> 通配选择器
Inline Style 行内样式表

设置图层的透明度：
filter: alpha(opacity=70);
opacity: 0.7;

点到那里就跳点到那里
1.首先给元素起个名字
2到连接的元素上上输入超链接 <a href="#元素名"></a>

居中设置：
1、单行垂直居中文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!
2、层水平居中设置div的宽度小于父div的宽度，设置 margin:0 auto;，即可让div居中。
3、层中的文字水平居中：在childdiv的css加上text-align:center;

display属性
基本上分为inline,block,和none。
　　inline就像它的本意——显示为inline的元素为行。strong,anchor锚和em强调元素默认是行。
　　block元素前后换行。标题和段落元素是块元素。
　　none，意思不显示元素，在可用性上可以实现漂亮的效果，交替样式或hover效果的高级运用。
list-item列表项目，就像期待HTML里的li元素。它们需要嵌套在元素里面显示。
run-in元素的表现形式由它的父元素决定。IE和Mozilla都不支持。
　　compat根据上下阿文决定表现形式，同样IE和Mozilla都不支持。
　　maker仅仅使用在:before和:after伪元素，设定content属性的表现。content属性默认表现就是maker，所以它只有在覆盖原来属性 时才有用。
　　content属性，它的默认就是maker，所以只有在覆盖原来属性时使用。

clera:both;清除

属性单位

em（比如font-size: 2em）是一个大致与一个字符高度相同的单位。
px（font-size: 12px）是一个像素的单位。
pt（font-size: 12pt）是一个磅的单位。
%（font-size: 80%）是百分比。
其他单位还包括pc(活字），cm（厘米），mm（毫米）和in（英寸）。
不想要边界，可以这样设置：border: 0 。

margin是隔开元素与外边，

margin 边距 |段落之间的间距（元素与元素之间的距离）

top margin 上边距
bottom margin 下边距
left margin 左边距
right margin 右边距
(margin-top, margin-right, margin-bottom,
margin-left, padding-top, padding-right, padding-bottom and padding-left)

padding 填充(位于content和border之间。层的边框到层的内容之间的空白）padding是隔开元素里边。

top padding 上方填充
bottom padding 下方填充
left padding 左侧填充
right padding 右侧填充

border 边框（元素的最外围）

border color 边框颜色
border style 边框样式 (none 没有 hidden 不明显的 dotted 点 dashed虚线 solid 固double两倍 groove压线 ridge脊insent coutset)
border width 边框宽度 (thin medium(默认2px） thick length ）
anchor 锚 （FrontPage里叫书签，Dreamweaver里叫命名锚记）

定位

float 浮动

float属性：left right none relative fixed
z-index属性为整数z-index值较大的元素将叠加在z-index值较小的元素之上。

position：static absolute （绝对定位）

Positioning 定位
　　positon属性可以指定元素为absolute,relative,static或是fixed。
　　static是元素默认属性，按HTML出现的先后顺序。
　　relative比较像static，但元素可以使用top,right,bottom和left设定初始属性。在正常文档流中偏移位置
　　absolute把元素从HTML里面拉出，一切由它自己决定，在这里，绝对定位元素可以使用top,right,bottom,left定位在任何地方。
　　fixed行为像absolute，但它绝对定位的元素参照浏览器窗口与网页没有关系。所以，理论上，fixed元素可以固定在屏幕上当页面滚动时。为什么说是理论上的？因为IE7以下的浏览器不支持。

bulleted list 无序列表
numbered list 有序列表
non-numbered 非编号
quirks mode 宽松模式 | 怪癖模式 ==> 怪异模式
hack 不译，也不译成补丁、黑客
meta元标签content（必须的）、名称属性name和http-equiv属性。
http-equiv属性取替名称name属性会产生HTTP数据头，它将会发送页面拥有的信息给服务器。随后内容属性content可以是content-type（类型）、expires（时效）、refresh（刷新，多长时间页面会自动刷新一次）以及set-cookie（设置cookie）。
dfn是定义术语
address应该用于地址。ins元素一般显示下划线，而del元素则一般显示删除线。

超链接设置方式：<a href="#moss">Go to moss</a>，/绝对或者是相对的地址/
插入图像：<img （src="http://www.yourdomain.com/logo.gif" ）图像的地址width="88" height="31" alt="mysite logo" />

文字样式

margin:0 auto：居中
text-decoration:underline 下划线
text-decoration:overline 顶划线
text-decoration:line-through 删除线
text-decoration:blink 闪烁

text-transform: capitalize ，让每个字的第一个字母大写。
text-transform: uppercase ，所有大写。
text-transform: lowercase，所有小写。
text-transform: none; ，这个属性不起作用。
letter-spacing和word-spacing属性的意思是字母和文字之间的间隔。值可以是长度或normal。
line-height属性设定元素的行高，比如一个段落，没有调准字体的大小。它可以是数字（字体大小的倍数），长度，百分比或normal。
text-align设定元素位置，left,right,center或justify。
text-indent属性缩进段落的首行。

list-style-type:+属性
disc 实心圆
circle 空心圆
square 正方形
decimal 1，2，3，4，5，……
upper-alpha A,B,C,D,E,……
lower-alpha a,b,c,d,e,f……
uper-roman | ||
lower-roman i ii
none 无符号
list-stype-image:url(图片符号名称）
clear:both;清除以上样式

背景的显示background :

background-color：（transparent）默认 　 color 颜色 　
background-image ：(none)默认 　 url 图像
background-repeat：repeat 重复铺满整个背景 　 no-repeat 无铺排 　 repeat-x 横向铺排 　 repeat-y 纵向铺排
background-attachment：scroll是背景图像随对像内容滚动，fixed”则是背景图像固定。
background-position：而另一种方式则是使用lefgth（数值）来定位，有两个数就是纵横向的
来定位背景图像位置：
* 水平
left: 左
center: 中
right: 右
* 垂直
top: 上
center: 中
bottom: 下
* 垂直与水平的组合
x-% y-%
x-pos y-pos

初始值: 0% 0%
继承性: 否
适用于: 所有元素
background:背景.position:位置.

表单的样式

optgroup标签用于在一个层叠式选择菜单为选项分类
form：有行为属性action提交的时候将内容发往何处选择的方法属性method怎样发送数据有get和post（常用）两种和属性
textarea：多行文本输入框标签textarea基本上就是一个比较大的文本框。它必须有行属性rows和列属性cols
选定标签select与选项标签option一起可以制作一个下拉选框

input：
　<input type="text" />是标准的文本框。它可以有一个值属性value，用来设置文本框里的默认文本。
　<input type="password" /> 像文本框一样，但是会以星号代替用户所输入的实际字符。
　<input type="checkbox" />是复选框，用户可以快速的选择或者不选一个条目。它可以有一个预选属性checked，像这样的格式<input type="checkbox" checked="checked" />.
　<input type="radio" /> 与复选框相似，但是用户只可在一个组中选择一个单选按钮。它也有一个预选属性checked，使用方法跟复选框一样。
　<input type="file" /> 是展示你电脑上的文件的一个区域，就像你在一个软件中打开或者保存一个文档一样。
　<input type="submit" /> 是一个被点击后提交表单的按钮。你可以用值属性value来控制按钮上显示的文本（下面的button和reset类型也可以这样，稍后介绍），如下： <input type="submit" value="Ooo. Look. Text on a button. Wow" />.
　<input type="image" />以图像代替按钮文本，src属性是必须的，像img标签一样。
　<input type="button" />是一个如果没有其他代码的话什么都不做的按钮。
　<input type="reset" /> 是一个点击后会重置表单内容的按钮。
　<input type="hidden" /> 不会显示任何东西，它用来传输诸如用户正在用的页面的名字或者Email地址等表单

<table>表格的格式：（cellpadding 填充和cellspacing间距）
tr 是标准的数据单元格的行
td 是标准的数据单元格，
th 是单元格表头
colspan 列跨越
rowspan 跨越行
thead 表头
tfoot 表注
tbody 表格主体

position:absolute（绝对），relative（相对），static（静态），或者fixed（固定）。
使用方法： position: absolute; top: 0; left: 0; width: 10em;

media type 媒体类型
media媒体类型可以是：
all—每一个太阳下、上、周围、里面的所有媒体类型。
aural──语音合成器。
handheld──手持设备。
print──打印机。
projection──投影仪。
screen──电脑屏幕。
还可以使用braille（布莱叶点字）、embossed（压印）、tty（终端）和tv（电视）。

自定义列表：
ul：ol：dl：li；类别属性 inventory 的无序列表
dt（definition term，定义术语）元素来代替li元素，其后跟随dd（definition description，定义描述）元素。（可以跟多个）

Javascript事件（少用）

应用列子：<a href="#top" onclick="alert ('wow. Javascript.')">Click me</a>

onblur（使用在表单元素中，当元素失去焦点的时候执行）
onchange（使用在表单元素中，当某些东西改变是执行）
onclick（鼠标点击一个元素时执行）
ondblclick（鼠标双击一个元素时执行）
onfocus（使用在表单元素中，当元素获得焦点时执行）
onkeydown （按下某个按键时执行）
onkeypress（按下和释放某个按键时执行）
onkeyup（释放某个按键时执行）
onload（在body标签中使用，载入页面的时候执行）
onmousedown（按下鼠标按键时执行）
onmousemove（鼠标光标在元素上移动时执行）
onmouseout（鼠标光标移开元素时执行）
onmouseover（鼠标光标移到元素上时执行）
onmouseup（当释放鼠标按键时执行）
onreset（用在表单元素中，当表单重置时执行）
onselect（用在表单元素中，当元素被选择时执行）
onsubmit（用在表单元素中，当表单提交时执行）
onunload（用在body标签中，当关闭页面时执行）

标签

b 可以用来产生粗体元素。使用strong（意味着强烈强调）代替更有意义，或者用CSS来完成这项工作，增加font-weight: bold的规则，用来表明粗体元素。
i可以用来产生斜体元素。使用em（表示强调），这也更有意义。或者可以用CSS来表现斜体：font-style: italic
big可以产生更大字体。使用标题（如h1，h2等，当文本本来就是一个标题时）代替，增加了意义，或简单地在CSS中使用font-size属性，获取更多的控制权。
small 可以产生小字体。CSS（font-size）再一次取得更多的控制权。
hr 可用用来展现一条水平线。在CSS中用hr设计很少见，CSS的border-top，border-bottom属性或者朴素的图像做这个效果会更好。
上述的标签与最新的HTML标准尽管都兼容，但对内容却没有任何好标签应有的意义。
u可以为元素产生下划线。它提醒着下划线文本还很多连接关联。这就是这个标签死了很久的原因——你不必给非连接文本下划线。
center可以用来居中在元素内部的元素。CSS属性text-align允许不仅仅是center，还有left、righft和justify。
menu用来创建菜单列表。它并没有ul做的完美，在因为无序列表更通用，ul高高地站在menu的尸体上。
layer和div元素相似，都由CSS绝顶位置。这仅仅能在老版本的Netscape中工作，所以再也没有什么用。
blink或者marquee。大声说不！它们应该像本身意义一样被期待，但有着十分有限的支持,只会产生非常，非常恶心的笑话。
font，可以用来定义元素的字体名称，尺寸和颜色，在标签世界中理所当然地获得了臭名昭著标签之王荣誉称号。旧的网站（甚至新的也有）像满世界的瘟疫之蚁一样布满整个页面。大部分的font标签激增是从网页制作软件带来的，把font标签包括颜色和尺寸用在每一个元素。font标签被滥用到出现在当前的每一个重复元素的（如，每次你使用p元素），而CSS，则可以用一条简短的代码来应用重复元素，甚至控制整个网站。使用CSS方法，不仅可以使页面比被大量font标签寄生的更苗条，而且更容易维护因为你所需要做得只是改变CSS文件中的一行，而不是逐一修改每一个font标签。这也增加了维护一个一直保持设计风格一致的网站的可能性。font标签和不恰当的表格使用是两个产生网页不必要臃肿的主要原因。

属性
css浏览器特效（注意顺序）
a:link:普通
a:visited：点击过
a:hover：经过
a:ative：当前激活
链接的多个状态样式：正确的顺序是：:link :visited :hover :active。抽取第一个字母是"LVHA"，你可以记忆成"LoVe HAte"(喜欢讨厌。 聚焦元素focus)。
name用来为一个元素指定一个名字，它在如input的表单元素中完全被接受，但在其它地方，name的工作已经被id属性取代。
text和bgcolor可以在body起始标签中定义页面的基本文本颜色和背景颜色。CSS的color和background-color属性在应用到body选择符时也可以做到。
background可以在body标签中指定一个背景图画。CSS会做得更好，用如background-image的属性来处理背景图片。
link、alink、vlink在body标签中用来指定连接（未访问，激活和已访问）。CSS宝贝── :link、:active和:visited会做这项工作。
align可以用来对齐某个元素的内容（比如 <div align="center">Stuff</div>），但是，像center标签，CSS的text-align属性是新的老板。
target可以用不同的方式打开一个连接，最常用的是打开新窗口（比如<a href="wherever.html" target="_blank">Help me</a>）。看起来不错，但你不要对你的网站这样做。 用户并不预期不可思议的东西（比如新窗口）出现，而且最常用的浏览工具是浏览器的后退按钮，如果你打开新窗口，这将不可用。它是非法和不易用的。

CSS 定位属性
　CSS 定位属性允许你对元素进行定位。
　　 属性 描述
　　position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
　　top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
　　right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
　　bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
　　left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
　　overflow 设置当元素的内容溢出其区域时发生的事情。
　　clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
　　z-align 设置元素的垂直对齐方式。
　　z-index 设置元素的堆叠顺序。（大上小下）

注意：
1、单一的元素，或需要程序、JS控制的东西，需要用id定义；重复使用的元素、类别，用class定义。
2、ID是唯一的并是父级的，CLASS是可以重复的并是子级的。大结构一定是用id。
3、css样式的border的距离是:上 右 下 左。如果有两个值：第一个值包括顶部和底部，第二个值包括左右。
技巧：
1、清除浮动.clearfloat{clear:both;height:0;ofnt-size:1px;line-height:0px;
2、设置图片浮动效果：#sub img {float:left;}
3、设置等宽字符（包括等宽空格）即可。综合起来，就是这样 font-family: '宋体', Simsun; white-space: pre;

常用的符号代码:
&copy;版权符号?
&reg;注册商标?
™tm
br强制换行 不想换行的标记上加入样式nowrap
一条线：<div style="height:26px; border-bottom:2px solid #2788da;"></div>
解决外补倍丁：在for的属性中加入：margin:0px（form {margin:0px;}）
解决ie6的双边框:display:inline