1、http:/ CSS 语法总结一：网页的基本命名规范网页布局的时候（命名代码规范）头部 div 取值为：id=“header“中间 div 取值为：id=“container“中间左部分 div 取值为：class=“left“ 中间中部分 div 取值为：class=“middle“中间右部分 div 取值为：class=“right“底部 div 取值为：id=“footer“二：字体设置1：字体样式字体类型 font-family font-family:“隶书“（楷体）;字体大小 font-size font-size:12px;（单位像素）字体风格 font-style font-s
2、tyle:italic;normal:默认 italic:倾斜体字体的粗细 font-weight font-weight:bold;normal:标准 、bold:粗体字体 lighter:细体在一个声明中设置所有字体属性 font font:italic bold 36px “宋体“;2：文本样式：颜色:colorblack blue green red gray orange purple white yellow黑色 蓝色 绿色 红 灰色 橙 紫 白色 黄色：水平对齐方式：text-alignleft:左 right:右 center:居中 justify：两端对齐 ：首行缩进（tex
3、t-indent:2em） ：行高（line-height:12px）：文本添加修饰：text-decoration none:标准文本 underline:设置文本的下划线 overline:设置文本的下划线 line-through:设置文本的删除线 blink:设置文本的闪烁（IE 无效）：垂直对齐方式（只用于图像与文本的居中对齐）vertical-alignxxxxx 示例： p imgvertical-align:middle;三：超链接1：根据用户 未单击访问前（a:link）鼠标悬浮在超链接上(a:hover)【必须设置在 a:link 和 a:visited 之后才有效】 单击
4、未释放(a:active)【必须设置在 a：hover 之后才有效】单击访问后(a:visited)的四个状态显示。语法：标签名:伪类名声明;a:hover color:#B46210;text-decoration:underline;http:/ default：默认 箭头pointer: 超链接的指针（小手）wait:指示程序正在忙（）help:可用的帮助（箭头问好）text:指示文本（细 I 的形状）crosshair:呈现十字状三：背景样式1:可将 HTML 文档分割成独立的，不同的部分，常用来进行网页的布局width:宽度（200px）height:高度（290px ）或#iys2
5、width:180px ;height:180px;2：背景属性背景颜色：background-color （值：red 、yellow 或#ff0000）背景图像背景图像：background-image:url(bg.jpg) 背景重复：background-repeat(repeat:水平垂直方向重复 repeat-x:水平方向重复 repeat-y:在垂直方向重复 no-repeat:背景图像仅显示一次 显示背景图像上的起始位置（基准的位置：左上方）：background-position正方向偏移的位置为：右下方简写背景样式：顺序（颜色 url 背景定位 背景重复方式）四：列表样式1
6、：列表项标记的类型 list-style-typenone:无标记符号disc:实心圆，默认类型circle:空心圆square:实心正方形decimal：数字2：图像替换列表项的标记（设置它后 list-style-type 将不起作用） list-style-imagelist-style-image:url(image/arrow-right.gif);3：何处放置列表项标记 list-style-positioninside:标记放置在文本（范围）以内outside:标记放置在文本以外4：设置所有列表的属性 list-style顺序：list-style-type list-style
7、-position list-style-image五：盒子模型1：边框（第一层）2：元素内容及内边距（第二层）3：背景图（第三层）4：外边距 http:/ 内容)+padding(填充：内容与边框之间）+border(内容的边框)+margin(两个内容之间的距离)1：边框border-color ：颜色属性 说明 示例border-top-color 上边框颜色 border-top-color:#369; border-right-color 右边框颜色 border-right-color:#369; border-bottom-color 下边框颜色 border-bottom-co
8、lor:#fae45b; border-left-color 左边框颜色 border-left-color:#efcd56; 四个边框为同一颜色 border-color:#eeff34;上、下边框颜色：#369 左、右边框颜色：#000 border-color:#369 #000; border-color 上边框颜色：#369 左、右边框颜色：#000 border-color:#369 #000 #f00; 上、右、下、左边框颜色：#369、#000、#f00、#00f border-color:#369 #000 #f00 #00f;border-width：粗细thin 设置细的
9、边框medium 默认值（设置中等的边框）thick 设置粗的边框像素值 自定义设置边框的宽度border-top-width:5px; border-right-width:10px; border-bottom-width:8px; border-left-width:22px; border-width:5px ; border-width:20px 2px;border-width:5px 1px 6px;border-width:1px 3px 5px 2px;border-style：样式none：无边框dotted：点线边框dashed：虚线边框solid：实线边框double：
10、双线边框简写（border）：在一个声明中设置所有的边框属性border-top border-right border-bottom border-left顺序为：width style color2：外边距(与其他盒子之间的距离 )属性margin-top：上边距margin-right：右边距margin-bottom：下边距margin-left：左边距http:/ 1 pxmargin-right : 2 pxmargin-bottom : 2 pxmargin-left : 1 pxmargin :3px 5px 7px 4px; 上、右、下、左边距margin :3px 5px;
11、 上下 3px 左右边距 5pxmargin :3px 5px 7px; 上下为 3 和 7；左右为 5 margin :8px; 四个边距都是 8px3：内边距（内容与边框之间的距离）属性padding-left padding-rightpadding-toppadding-bottompadding示例padding-left:10px; padding-right: 5px; padding-top: 20px; padding-bottom:8px; padding:20px 5px 8px 10px ; padding:10px 5px; padding:30px 8px 10px
12、 ; ：上下为 30 和 10；左右为 8padding:10px;4：标准文档流（CSS 默认的排列规则） 块级元素：以一块区域显示的元素(独占一行，拥有自己的区域)内联元素:字母之间横向排列，到最右端自动拆行（没有自己的区域）内联标签可以包含在块级标签之中；但块级标签无法包含在内联标签之中display 属性（控制元素的显示方式）值 说明block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符inline 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符 none 设置元素不会被显示六：页面布局（131 型、121 型）1：浮动 float 属性（元素向哪
13、个方向浮动）http:/ clear 属性（设置元素的哪一侧不允许有浮动元素）left:左侧不允许有浮动right:右侧不允许有浮动both:两侧均不允许有浮动none:两侧允许有浮动元素（默认值）3：控制元素的大小（）width:元素宽度height:元素高度4：扩展盒子的高度因为盒子中的元素有了浮动，所以，盒子本身的高度可能就会变低，那么如果想让盒子的高度视觉上依然包含所有的元素，我们可以扩展盒子的高度。方法一：在盒子中元素的最下方添加空 div,设置样式 clear:both 清除浮动方法二：在父级的标签设置中添加 overflow 属性为： hidden。5：溢出处理就是将内容放到一个
14、固定宽度和高度的盒子中，超出的部分隐藏起来或以带滚动条的窗口显示 owerflow 属性visible:默认值，内容不会被修剪，会呈现在盒子之外hidden:内容会被修剪，并且其余的内容是不可见的scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容没有内容溢出的方向也会出现滚动条auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余内容没有内容溢出的方向不会出现滚动条七：定位机制标准流浮动绝对定位1：position 属性：相对于父级的位置和相对于它自身该在的位置：static:默认值没有定位（元素按照标准流进行布局）：relative:相对定位(移动后的位置相对于原位置)
15、（负数正方向/正数反方向）同时还要指定一定的偏移量，水平方向：left 或 right; 垂直方向：top 或 tottom元素移动之后，元素的大小并没有改变，原有的位置依然保留，其他的元素不受影响（不会被下面的其他的元素占用）#third background-color:#C5DECC;border:1px #395E4F dashed;position:relative;right:20px;bottom:30px;http:/ ：先浮动后定位相对定位，对浮动元素没有影响，并且继续执行相对定位 绝对定位，会让浮动元素失去浮动的效果，执行绝对定位 2：z-index 属性：用于调整元素定位是重叠的上下位置（在设置了 position 的值的时候，他才有效）z-index 的值越大，他的堆放位置越在上面
