Div+CSS规则整理讲解.doc

Div+CSS规则整理 ?????????? 善用css缩写规则 /*注意上、右、下、左的书写顺序*/ 1.????? 关于边距（4边）： 1px 2px 3px 4px (上、右、下、左) 1px 2px 3px （省略的左等于右） 1px 2px (省略的上等于下) 1px （四边都相同） ? 2.????? 简化所有： */ body{margin:0}------------表示网页内所有元素的margin为0 #menu{ margin:0}------------表示menu盒子下的所有元素的margin为0 ? 3.????? 缩写（border）特定样式： Border:1px solid #ffffff; Border-width:0 1px 2px 3px; ? 4.????? 关于文字的缩写规则： Font-style:italic; 斜体形式 Font-variant:small-caps/normal; 变体样式：小型大写字母/正常 Font-weight:bold; Font-size:12px; Line-height:1.2em(120%)/1.5em(150%); Font-family:arrial,sans-serif,verdana; 缩写成： Font:italic small-caps bold 12px/1.5em arrial,sans-serif; 注意：Font-size和Line-height用斜杠组合在一起不能分开写。 ? 5.????? 关于背景图片的： Background:#FFF url(log.gif) no-repeat fixed top left; ? 6.????? 关于列表： List-style-type:square/none; List-style-position:inside; List-style-image:url(filename.gif); 缩写成： List-style:none inside url(filename.gif); ? ? ? 二、?????????? 运用4种方法来引入CSS样式 1.link link rel=”stylesheet” type=”text/css” href=”a.css” rel 关系 type 数据类型,有多种 href 路径 部分浏览器支持候选样式,关键字:alternate: link rel=”stylesheet” type=”text/css” href=”a.css” link rel=”alternate stylesheet” type=”text/css” href=”b.css” link rel=”alternate stylesheet” type=”text/css” href=”c.css” 2.内部样式块 style !– h1{color:red;} – /style 3.@import @import url{a.css} 注意:此指令必须放在style容器中,并且在所有样式之前 建议放在一个html注释中,!– –浏览器会不显示注释内的内容,而import等css代码能正常工作 4.内联样式 p style=”color:red;” 选择器是css的一个基本概念，基本规则如下： 1.规则结构： h1 {color:red;} 选择器 {属性:值;} 这类是元素选择器，基本可以包括所有html的元素 属性值可以包括多个元素，如：border：1px solid red; 常用语法 1)分组： 选择器和声明都可以分组: h1,h2,h3{color:red;background:#fff;} ,选择器用“,”分割开,属性用”;”分割 2)类选择器,即通过class=”stylename”应用的声明 定义: .stylename{color:red;} 注意: 在html中可以使用多类选择:如class=”cn1 cn2 cn3″ 3)ID选择器,即与id属性对应的样式 定义: #a{color:red;} -这个定义对用id=”a”的元素 2.这部分都是我们常见的css语法，下面谈一下我们不常见的选择器语法 1)父子结构,跟文档结构图对应 如p span{border:1px solid red;}对应的是p下面的li标签,这个很用用途,可以准确定位. 一些特殊应用(IE7支持): (1) p span{},匹配所有p下所有的span (2) p + span{} ,匹配紧接着p元素后出现的第一个span标签,2者要有相同的父标签 2)属性选择器:(注意:属性选择器ie7才开始支持,以下版本并