css笔记

CSS网站布局实录
1.Main Navigation 导航条，具有按钮特效。 Width: 760px Height: 50px
2.Header 网站头部图标，包含网站的logo和站名。 Width: 760px Height: 150px
3.Content 网站的主要内容。 Width: 480px Height: Changes depending on content
4.Sidebar 边框，一些附加信息。 Width: 280px Height: Changes depending on
5.Footer 网站底栏，包含版权信息等。 Width: 760px Height: 66px


id 选择器不能重复使用，常常用于建立派生选择器。当然类 选择器也可以建立派生选择器
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}

类名的第一个字符不能使用数字
属性值和单位之间不能有空格。20px

一、css背景
所有背景属性都不能被继承
百分数值表示位置：background-position :50% 50% ;（top，left）中心位置。
background-attachment:fixed 来防止背景图像随文字的滚动
所有的背景属性可以放在一个声明中：如下
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;

二、css文本
Text-indent用于文本缩进，适用于块级元素，如果想把一个行内元素如<span>缩进，可以用左内边距或外边距创造这种效果。该属性可以继承，
Text-align文本居中，要将块级元素或表元素居中，要通过适当设置左右外边距 来实现
text-align:center 与 <CENTER>的区别 :前者不会控制元素的对齐，只影响内部内容。而后者不仅影响文本，还会把整个元素居中
字符转换：text-transform:uppercase
禁止文本折行：white-space: nowrap
设置行间距：line-height: 30px
设置字体在一个声明内：font: italic small-caps 900 12px arial

三、css列表
列表项的标志类型：无序列表ul：list-style-type:square/disc/circle
有序列表ol：list-style-type:decimal/lower-roman/upper-alpha
列表项的图像：list-style-image：url(xxx.gif)
List-style:square inside url(‘eg_arrow.gif’)

四、css表格
caption 标题的位置：caption-side:bottom
把表格边框合并为单一边框：border-collapse :separate ;
单元格边框的距离：border-spacing :10px 50px ;(左，上)
是否显示表格中的空单元格：empty-cells :show

四、css轮廓
Outline是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
outline-style:solid; outline-color:#00ff00; outline-width:thin;轮廓的样式、颜色、宽度

五、css定位
Relative 相对于正常位置
Absolute: 绝对位置
Fixed: 固定位置
Float: 浮动

元素中的内容超出了给定的宽度和高度，overflow属性确定是否显示滚动条等行为，auto，scroll是显示滚动条，hidden是隐藏
div { background-color:#00FFFF; width:150px; height:150px; overflow: scroll }

clip用于剪切图像
img { position:absolute; clip:rect(0px 50px 200px 0px) }

z-index -1 拥有更低优先级，默认是0.实现文字下面的图片，1实现位于文字之上
img.x { position:absolute; left:0px; top:0px; z-index:-1 }

div中包含图片和文字
div { float:right; width:120px; margin:0 0 15px 20px; padding:15px; border:1px solid black; text-align:center; }

为首字设置下沉
span { float:left; width:0.7em; font-size:400%; font-family:algerian,courier; line-height:80%; }

创建水平菜单
ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; }
a {float:left; width:7em; text-decoration:none; color:white;
background-color:purple; padding:0.2em 0.6em; border-right:1px solid white; }
a:hover {background-color:#ff3300} li {display:inline}