常用的CSS语法总结.docVIP

/常用的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-style:italic; normal:默认 italic:倾斜体字体的粗细font-weight font-weight:bold; normal:标准 、bold:粗体字体 lighter:细体在一个声明中设置所有字体属性 font font:italic bold 36px 宋体;2：文本样式：颜色:color black blue green red gray orange purple white yellow 黑色 蓝色 绿色 红 灰色 橙 紫 白色 黄色：水平对齐方式：text-align left:左 right:右 center:居中 justify：两端对齐 ：首行缩进（text-indent:2em） ：行高（line-height:12px）：文本添加修饰：text-decoration none:标准文本 underline:设置文本的下划线 overline:设置文本的下划线 line-through:设置文本的删除线 blink:设置文本的闪烁（IE无效）：垂直对齐方式（只用于图像与文本的居中对齐）vertical-align xxxxx 示例： p imgvertical-align:middle;三：超链接 1：根据用户 未单击访问前（a:link） 鼠标悬浮在超链接上(a:hover)【必须设置在a:link和a:visited之后才有效】 单击未释放(a:active)【必须设置在a：hover之后才有效】 单击访问后(a:visited) 的四个状态显示。 语法： 标签名:伪类名声明; a:hover color:#B46210;text-decoration:underline; 2:设置鼠标形状:cursor default：默认 箭头 pointer: 超链接的指针（小手） wait:指示程序正在忙（） help:可用的帮助（箭头问好） text:指示文本（细I的形状） crosshair:呈现十字状四：背景样式 1:可将HTML文档分割成独立的，不同的部分，常用来进行网页的布局 width:宽度（200px）height:高度（290px） 或 #iys2width: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：列表项标记的类型 list-style-type none:无标记符号 disc:实心圆，默认类型 circle:空心圆 square:实心正方形 decimal：数字2：图像替换列表项的标记（设置它后list-style-type将不起作用） list-style-image list-style-image:url(image/arrow-right.gif);3：何处放置列表项标记 list-style-position inside:标记放置在文本（范围）以内 outside:标记放置在文本以外4：设置所有列表的属性 list-style 顺序：list-style-type list-style-position list-style-image六：盒子模型 1：边框（第一层） 2：元素内容及内边距（第二层） 3：背景图（第三层） 4：外边距 盒子模型的宽度=content(内容)+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-color:#fae45b; border-left-color左边框颜色border-left-color:#efcd56; 四个边框为同一颜色border-color:#eeff34; 上、下边框颜色：#369 左、右边框颜色：#000border-color:#369 #000; border-color 上边框颜色：#369左、右边框颜色：#000 border-color:#369 #000 #f00; 上、右、下、左边框颜色：#369、#000、#f00、#00fborder-color:#369 #000 #f00 #00f; border-width：粗细 thin 设置细的边框 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：双线边框 简写（border）：在一个声明中设置所有的边框属性 border-top border-right border-bottom border-left 顺序为：width style color2：外边距(与其他盒子之间的距离) 属性 margin-top：上边距 margin-right：右边距 margin-bottom：下边距 margin-left：左边距 margin 示例 auto:居中显示 margin-top: 1 px margin-right : 2 px margin-bottom : 2 px margin-left : 1 px margin :3px 5px 7px 4px; 上、右、下、左边距 margin :3px 5px; 上下3px 左右边距5px margin :3px 5px 7px; 上下为3和7；左右为5 margin :8px; 四个边距都是8px 3：内边距（内容与边框之间的距离） 属性 padding-left padding-right padding-top padding-bottom padding 示例 padding-left:10px; padding-right: 5px; padding-top: 20px; padding-bottom:8px; padding:20px 5px 8px 10px ; padding:10px 5px; padding:30px 8px 10px ; ：上下为30和10；左右为8 padding:10px;4：标准文档流（CSS默认的排列规则） 块级元素：以一块区域显示的元素(独占一行，拥有自己的区域) 内联元素:字母之间横向排列，到最右端自动拆行（没有自己的区域） 内联标签可以包含在块级标签之中；但块级标签无法包含在内联标签之中 display属性（控制元素的显示方式） 值 说明 block块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符 inline内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符 none设置元素不会被显示七：页面布局（131型、121型）1：浮动 float属性（元素向哪个方向浮动） none:不浮动（默认值） left:向左浮动 right：向右浮动 设置了浮动后，该元素将会脱离标准文档流，盒子的元素将不再延伸，而是根据内容的宽度来确定2：清除浮动 clear属性（设置元素的哪一侧不允许有浮动元素） left:左侧不允许有浮动 right:右侧不允许有浮动 both:两侧均不允许有浮动 none:两侧允许有浮动元素（默认值）3：控制元素的大小（） width:元素宽度 height:元素高度4：扩展盒子的高度 因为盒子中的元素有了浮动，所以，盒子本身的高度可能就会变低，那么如果想让盒子的高度视觉上依然包含所有的元素，我们可以扩展盒子的高度。 方法一：在盒子中元素的最下方添加空div,设置样式clear:both清除浮动 方法二：在父级的标签设置中添加overflow属性为：hidden。5：溢出处理 就是将内容放到一个固定宽度和高度的盒子中，超出的部分隐藏起来或以带滚动条的窗口显示 owerflow属性 visible:默认值，内容不会被修剪，会呈现在盒子之外 hidden:内容会被修剪，并且其余的内容是不可见的 scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 没有内容溢出的方向也会出现滚动条 auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余内容 没有内容溢出的方向不会出现滚动条八：定位机制 标准流 浮动 绝对定位 1：position属性：相对于父级的位置和相对于它自身该在的位置 ：static:默认值没有定位（元素按照标准流进行布局） ：relative:相对定位(移动后的位置相对于原位置)（负数正方向/正数反方向） 同时还要指定一定的偏移量，水平方向：left或right; 垂直方向：top或tottom 元素移动之后，元素的大小并没有改变，原有的位置依然保留，其他的元素不受影响（不会被下面的其他的元素占用） #third background-color:#C5DECC; border:1px #395E4F dashed; position:relative; right:20px; bottom:30px; ：absolute:绝对定位 使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基准进行偏移。 如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。 绝对定位的元素从标准文档流中脱离，这意味着它们对其