css+div.docx
- 文档编号:13105181
- 上传时间:2023-06-11
- 格式:DOCX
- 页数:24
- 大小:268.37KB
css+div.docx
《css+div.docx》由会员分享,可在线阅读,更多相关《css+div.docx(24页珍藏版)》请在冰点文库上搜索。
css+div
初始化CSS元素
html,body,div,span,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
img,ins,kbd,q,s,samp,
small,strike,strong,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td{
margin:
0;
padding:
0;
border:
0;
outline:
0;
font-size:
100%;
vertical-align:
baselinebaseline;
background:
transparent;
}
body{
line-height:
1;
}
ol,ul{
list-style:
none;
}
blockquote,q{
quotes:
none;
}
blockquote:
before,blockquote:
after,
q:
before,q:
after{
content:
'';
content:
none;
}
table{
border-collapse:
collapse;
border-spacing:
0;
}
Google谷歌的CSS前景图片合并技术
在以前的文章中介绍过背景图片的合并方法。
但不只有背景图片能合并,前景图片同样可以。
在Google搜索结果页面中,将其Logo图标右键另存为后可以发现,它并非单纯的GoogleLogo,而是一块复杂的拼合图片:
查看搜索页面源代码,其Logo部分代码如下:
示例代码
url=title="Google主页">Google 其CSS部分代码如下: 示例代码 #logo{display: block;overflow: hidden;position: relative;width: 150px;height: 52px;margin: 14px07px} #logoimg{border: none;position: absolute;left: -0px;top: -26px} 分析上述代码可知,CSS中id=logo的样式父元素采用相对定位方式,定义了宽度和高度,使用overflow: hidden来隐藏溢出部分;而img元素则采取绝对定位方式,使用left和top进行图片定位,这与背景图片的定位是一致的。 DivCSS中id与class的使用原则 在前面的文章里讨论过很多DIVCSS布局的技巧。 在用CSS来控制网页布局时我们可能都会遇到一个问题: 当定义一个属性时,是使用id,还是使用class? 今天M再谈id与class的使用原则,把自己平时做站时的经验给大家简要讲述一下,希望能够对您有所帮助。 id的使用原则 先来说说id,id具有唯一性,其使用原则也是依据这一特性建立的。 id是不能重复的,所以在XHTML的结构中,大结构一定是用id。 比如标志、导航、主体内容、版权。 这些根据制定的规范命名为#logo,#nav,#content,#copyright等等,本着其唯一性的原则园子建议定义id尽量在外围使用。 class的使用原则 class在CSS的定义中具有普遍性。 说白一点就是class具有可重复无限制的使用多次,园子建议大家尽量在结构内部使用。 这样做的好处是有利于网站代码的后期维护与修改,这样的做法就会让所有的class都成为id的子级或是孙级。 在我们写CSS的时候可以写成这样#father.child{…},另外需要注意的是尽量不要让class包含id,比如.father#child{…}如果写成这样很显然就非常不可取。 当然这也只是相对于良好书写习惯的一些建议,仅供大家参考。 综上所述,归总起来一句话: id是唯一的并且是父级的,class是可以重复的并且是子级的。 保持一个良好的代码书写习惯对于以后的代码维护会有很大的帮助,如果您有更好的建议,欢迎给我留言探讨。 DivCSS布局的十六条技巧及详细用法 DivCSS布局的十六条技巧及详细用法: 1、IE分不清继承关系和父子关系的差别,全部都是继承关系。 2、在给你的标签疯狂加选择符的时候,别忘了在CSS里给选择符加上注释。 等你以后修改你的CSS的时候就知道为什么要这么做了。 另外提醒您,不要太疯狂了。 3、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。 建议这个时候给你的标签再设置一个深色调的背景颜色。 因为图片丢失了,也可以保持文字的可读性。 4、定义链接的四种状态要注意先后顺序: LinkVisitedHoverActive 5、与内容无关的图片请使用background.时刻记住表现与内容分离。 6、定义颜色可以缩写#8899FF=#89F 7、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。 8、同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次。 对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为id的权重要比class大。 9、一个兼容性调整(IE和Mozilla)的笨办法: 初学可能会碰到这样一个情况: 同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必须要设成B才能正常显示,或者两个倒过来。 临时解决方法: 选择符{属性名: B! important;属性名: A}或许有时候并没有效果。 你可以在搜索更多的BUG解决方法。 10、如果一组要嵌套的标签之间需要些间距的话,那就留给位于里面的标签的margin属性吧,而不要去定义位于外面的标签的padding 11、li标签前面的图标推荐使用background-image,而不是list-style-image. 12、绝对定位时使用margin值定位可以达到相对于本身所在位置的定,这与top,left等属性相对与窗口边缘的定位不同。 绝对定位的优势在于可以让其它元素忽略它的存在。 13、如果文字过长,则将过长的部分变成省略号显示: IE5,FF无效,但可以隐藏,IE6有效DIVSTYLE=“width: 120px;height: 50px;border: 1pxsolidblue;overflow: hidden;text-overflow: ellipsis” 14、table在某些方面还是有用武之地的,在遇到内容为数据表格时,不要对它产生憎恨的心理。 15、完美的单象素外框线表格(在IE5、IE6、IE7及FF1.0.4以上中均可通过测试) table{border-collapse: collapse;}td{border: #000solid1px;} 16、margin取负值可以在标签使用绝对定位的时候起到相对定位的作用,在页面居中显示时,使用绝对定位的层不适合使用left: XXpx这个属性。 把这个层放到一个要相对定位的标签旁,然后使用margin的负值是个好方法。 CSS网页布局开发时的常见问题小结 一、避免IE下未指定样式内容的闪烁。 如果您仅仅靠@import来输入外部样式表,早晚您会发现IE有“闪烁”的毛病。 在应用CSS样式之前,未经格式化的HTML文本会短暂地出现。 这是可以避免的。 二、确保您期望的效果确实存在 许多特定的浏览器专有的CSS扩展在正式标准中并不存在。 如果您对filter(滤镜)或滚动条指定了样式,那么您就用了私有代码,除了IE之外,在别的浏览器中毫无作用。 如果验证器告诉您代码没有定义,极有可能您用了私有样式,这样在不同的浏览器中很难达到一致的效果。 如果布局中一定要用浮动对象,别忘了适时使用清除(clear)属性。 浮动对象似易实难,而且不总是令人如愿以偿。 如果您发现浮动对象伸出了容器的边界,或者不像您所期望的那样显示,请检查您的期望是否正确。 关于这个问题请看EricMeyer的教程 边距的合并: 可用padding或border来避免。 您可能被多余的(或者想要却不出现的)空白搞得焦头烂额。 如果您用了margins,边距的合并可能就是问题的根源。 AndyBudd对此的解释可能为你解惑。 避免将padding/border和固定宽度同时应用到同一元素。 IE5的区块模型是错误的,是它把事情办坏了。 对此也有权宜之计,不过最好是绕过这个问题,当子元素的宽度固定时,为父元素指定padding。 三、有疑问,先验证 在调试时,先对您的代码进行验证往往能省去不少麻烦事。 格式不正确的XHTML/CSS会导致许多布局上的错误。 在其他浏览器中进行测试之前,请先在最先进的浏览器中撰写和测试CSS代码,而不是相反。 如果您在破旧的浏览器中编写和测试,你的代码就不得不依赖那个破旧浏览器的糟糕的显示,然后在符合标准的浏览器中进行测试,看到显示结果“不正常”时,你会很沮丧的。 相反,您应该先将您的代码完善,然后再设法为较低级的浏览器打算。 这样从一开始您的代码就是符合标准的,你不必再为支持其他浏览器而劳心费神。 当然了,目前遵从标准的浏览器无疑就是Mozilla,Safari或Opera。 四、加上明显的边框有利于布局调试。 像div{border: solid1px#f00;}之类的全局规则可以暂时为你查出布局问题。 为特定的元素加上边框可帮您找到难以发觉的交错或空白问题。 对图片路径不要用单引号。 当设置背景图片时,要坚持用双引号。 尽管看起来有些多余,但是如果不这么做,IE5/Mac会噎住。 不要为将来的样式表(比如手持式设备或打印用样式表)留个“空位”。 MacIE5对空的样式表比较感冒,会增加页面的装入时间。 建议样式表中至少应该有一条规则(哪怕是注释也好),免得MacIE噎住。 另外值得一提的还有一些虽然不针对某些功能,但是在开发过程中应当注意的理论 五、好好组织您的CSS文件 恰当地成块注释CSS,将相似的CSS选择符编为一组,养成一致的命名习惯和空白格式(为跨平台考虑,建议用空白字符而不是tab。 )以及适当的次序。 以功能(而不是外观)为类和ID命名 假如您创建了一个.smallblue类,后来打算将文字改大,颜色变为红色,这个类名就不再有任何意义了。 相反,您可以用更有描述性的名字如.copyright和.pullquote。 六、组合选择符 保持CSS短小对减少下载时间非常重要。 请尽量为选择符分组、利用继承(inheritance)以及使用简写(shorthand)来减少冗余。 使用图片替换技术时要考虑亲和力 已经发现传统的FIR在屏幕阅读器,以及关闭图片显示[的浏览器]中会出问题。 对此有其他解决办法,要根据具体情况,慎重使用。 七、别指望min-width在IE中有用。 IE不支持它,但是它将width当作min-width,所以通过一些IE的过滤技巧(filtering),可以实现同样的最终效果。 把CSS过滤器(filters)当作最后的手段 CSS技巧和过滤器可以使您有选择地应用到(或者不应用到)某些元素。 应当尽可能地找到标准的跨浏览器的解决办法来实现您想要的效果,而不是动不动就使用过滤器。 要将它当成走投无路时的救命手段。 在这里可以找到大量的CSS过滤技巧。 [译注: 不要把这里的filters和IE中的滤镜混淆。 由于各个浏览器对CSS标准的支持程度不一,人们找到了许多技巧,将浏览器无法解释或错误解释的样式表或规则屏蔽掉。 这就是所谓的CSS过滤器或技巧。 如果使用了锚点,在应用超链接样式时要特别小心。 如果您在代码中使用了传统的锚点(),您会注意到: hover和: active伪类也会作用于它。 要避免这种情形,你可以使用id,或者使用鲜为人知的语法: : link: hover,: link: active 八、记住“LoVe/HAte”(爱/恨)链接规则 要以下面的顺序指定超链接伪类: Link,Visited,Hover,Acitve。 任何其他顺序都不妥当。 假如用了: focus,次序应为LVHFA(“LordVader‘sHandleFormerlyAnakin”,MattHaughey这样建议)。 请记住“TRouBLED”(麻烦的)边框。 边框(border)、边距(margin)和补白(padding)的简写次序为: 顺时针方向从上开始,即Top,Right,Bottom,Left。 比如margin: 01px3px5px;表示上边距为零,右边距为1px,依此类推。 九、非零值要指明单位。 在用CSS指定字体、边距或大小时,必须指明所用的单位。 某些浏览器对未指明单位的处理方法不足为凭。 零就是零,不管是px还是em还是其他单位,它不需要单位。 例如: padding: 02px01em; 十、测试不同的字体大小。 像Mozilla和Opera这样的高级浏览器允许对字体进行缩放,不管你用的是什么单位。 某些用户的默认字体大小肯定和您的不同,尽最大努力去满足他们。 用嵌入式测试,发布时改为输入。 将样式表嵌入在你的HTML源代码中,在测试时可以消除许多缓存引起的错误,尤其是某些Mac下的浏览器。 但在发布前,一定要记住将样式表移到外部文件,用@import或引入。 DIVCSS中id与class的命名及编码的6个最佳习惯 一、样式都用class而不用id。 有三个理由。 1,id不可以重复,所以用class的话,可以肆无忌惮的用无数次。 2,id的优先级太高,若是写了一个#page_contenta{color: #f60},那你完蛋了,里面要改链接颜色,都必须加上#page_content才能越过这个优先级。 3,id专门留给JS用,这样才符合表现与行为分离的原则。 二、用class_name方式写类名。 以前喜欢用class-name写,不过好像两样也没什么差别。 但我比较反对用className写类名,因为始终对浏览器大小写敏感的问题抱有怀疑态度。 但是id我会写成驼峰式,理由见第一条。 三、按标准写css,再针对特定浏览器作hack。 比如,通常我们会遇到如下的写法: 示例源代码 .side_col_mb5u{ float: left; display: inline; margin-left: 20px; } 而我的写法会是: 示例源代码[] .side_col_mb5u{ float: left; margin-left: 20px; } *.side_col_mb5u{ _display: inline;/*hackedforIE6*/ } 看明白了么? 不应该把hack混在一起,也不应该用一种侥幸的心态,觉得float: left与display: inline写在一起没事。 嗯,它们俩确实没事儿,但是其他的hack就不一定了。 而且这里写display: inline纯粹就是为了解决IE6的bug,所以前面加上下划线,以明确的表达你的目的。 另外不要以为凡是hack都是为IE准备的。 其实有些hack是针对其他浏览器的,比如FF。 这就要求你对css标准的熟练掌握,能够自信的判断哪些渲染是遵守标准,哪些违反标准的。 此外,我喜欢在hack前面加上星号,其实这纯粹是个人习惯了。 可能过段时间我就不这么用了,呵呵。 五、记得加空格。 .class_name{property: value;}。 我个人觉得合理的空格是优秀代码的一个指标。 按英文的习惯,标点后面都应该带空格(如果你写Thisisapen.That’sapencil.句点后面不加空格,word里面会有错误提示)。 所以既然css是外国人发明的,应该按他们的格式来写。 类似的,在JS里vara=b+c;里面的空格也应该都要加。 六、适当的层叠(Cascading)或缩进以定义css的“作用域”。 啥叫“css的作用域”? 其实并不是所有的样式都在所有的地方使用。 有的样式只用在某一块里面,比如“导航栏”里的“搜索框”,可能应该写成: 示例源代码[] .nav.search{} 而有时候用层叠会增加代码优先级,所以也可以用缩进来“象征性的”体现作用域。 像这样: 示例源代码[] .login_box{} .forgot_pwd{} 缩进,是为了表示它们对应的标签具有父子关系。 但这样只能起一个提醒的作用。 六、margin和padding,尽量省略最后一个值。 比如margin: 20px10px5px10px;,左右值是一样的,就应该省略掉最后一个值,写成margin: 20px10px5px;这样到时候要改左右间距,改一个就好,免得改漏了。 其实这个问题虽然很细小,但是可以看得出对margin四个值省略规则的熟练程度。 CSS初学者技巧: 谈CSS的标准和最佳示例 CSS是用来定义网站的用户界面或将显示和内容区分开来的。 由于CSS被广泛地使用在几乎所有网站上,所以让我们花些时间来创建样式表并确保它符合良好的标准。 下面的技巧会极大地在开发过程中帮助CSS初学者。 索引 本处的定义将帮助你和其他开发者了解网站和CSS文件,还将帮助你们了解CSS文件中的内容。 索引部分知识一个格式化了的CSS注释段落。 1给出CSS文件的作者信息 2定义网站的设计(列数,静态/动态)[columns,static/liquid] 3持续跟踪文件版本(当文件有多个作者或未来需要有升级更新的时候非常有用) 锚点 锚点就好像在同一个CSS文件中的书签一样,锚点使你清晰地浏览整个CSS文件按并且使它很有组织。 锚点需要在CSS的索引(上面提到的)处定义,因为CSS没有自己的锚点系统,所以我在文档中使用了一个简单的技巧定义锚点。 方法是用一个比较罕见的字符来定义注释,当你想找某个锚点时,你就可以从索引处复制并查找锚点的定义符,并找到该锚点。 重定义 重定义是用来覆盖HTML默认的标签样式,把它们进行重定义的方法。 你是否见过这样的CSS代码,它只是想把那个特定的元素加上样式! CSS中一个非常美丽的用法是上下文选择器,让我们使用它: 命名规则 一个很关键的因素将元素给出精确无误并且干净有效的名字,这将避免混乱并让你更容易快捷地读懂你的CSS。 速写 CSS中的速写功能是你可以将许多同类型的属性合并成一个的属性。 CSS速写使开发过程更简单并且让你的CSS文件干净、简短、可读,下面是几个例子: Sprites (译者注: 翻译成精灵好像并不能对文章加深感性认识,反倒在真正看到英文的时候不理解了,所以干脆不译。 ) 将所有的背景图片合并到一张并且使用背景定位来显示不同的部分,这就是我们所说的CSSSprites。 CSSSprites能够减少HTTP请求的数量,节省带宽,使得读取更快。 同时也可以避免图像不稳定现象(比如当鼠标经过一张图片时可以显示另一张图片的效果,后一张图片将在慢速的因特网连接中等待半天才会出现)。 CSSSprites最佳并且最受欢迎的例子是苹果公司网站上的菜单系统: 明确化 选择器明确化是当好几个规则都可以被相同的元素使用时,优先使用哪一个的过程。 简单说来,每个CSS选择器都有权重。 选择器的所有权重的总和决定了它在文档中的属性。 当CSS文档很大,以至于你不知道元素哪个权重较大时,明确化就能起到很大的帮助。 恩,明确化是CSS中一个较大的领域,以至于很难用几句话解释清楚,还是看例子吧: 属性重置 全局属性重置确保一个网站在所有浏览器中显示几乎一样。 在每一个案例中,不同的浏览器给所有网站使用它们自己的默认样式设置集,这将使我们的网站在不同的浏览器中显示不一样。 全局属性重置将改正这种情况并让你从绝对一致的基础开始建立网站。 我并不总是推荐使用CSS框架,但是CSS重置你还是需要用到的。 现在有许多不同的重置方法,从简单的到复杂的。 Hacks 即便是一个完美的CSS,它也不能在所有浏览器中产生完全一致的显示,每个浏览器有对CSS不同的解释方法。 总而言之,如果你需要你的网站在所有浏览器中保持一致,你不得不使用CSSHacks。 使用CSSHacks将减少CSS验证时产生的错误,这一点我同意。 要实现这点,一个可选的方法是每个浏览器使用单一不同的CSS文件并通过在HTML中包含判定浏览器的标签来告诉浏览器应该使用哪个特定的CSS。 我经常在我所有的项目中创建一个“fuck-ie.css”: )(译者注: 此处作者用脏话表达了他对IE的愤怒。 如果翻译成“和IE交配.css”,世界会不会和谐一些? ) 使用这种方法后,你的“主CSS文件”将通过验证,与此同时,“fuck-ie.css”文件也会通过验证,但是只在IE浏览器中覆盖“主CSS文件”。 验证 在创建CSS的时候就验证它总是很必要的,这将确保你的CSS没有错误并且可以被所有浏览器正确地解释。 W3C验证器是一个非常流行的在线CSS验证工具。 CSSclip属性解析 clip属性是一个比较有用的属性,但往往在实际应用中,并不多见,而介绍的也很少。 应用clip属性需要注意的两点: 一、clip属性必须和定位属性postion一起使用才能生效。 二、clip裁切的计算坐标都是以左上角即(0,0)点开始计算,如图三所示,这点不像padding和margin,它们两个的右边距和下边距是从最右边和最下边开始计算的。 clip属性基础语法: 示例代码 clip: auto|rect(numbernumbernumbernumber) 取值: auto: 默认值。 对象无剪切 rect(numbernumbernumbernumber): 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换,即此边不剪切 clip属性说明: 检索或设置对象的可视区域。 可视区域外的部分是透明的。 此属性定义了绝对(absolute)定位对象可视区域的尺寸。 必须将position属性的值设为absolute,此属性方可使用。 自IE5开始,此属性在MAC平台上可用。 对应的脚本特性
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- css div