web标准解决方案_2

常用选择器:

元素选择器

后代选择器

类选择器

ID选择器

很多程序员过度依赖类选择器和ID选择器

一种简单的方式为结合使用类型、类、ID、后代选择器。你会很吃惊的发现只使用这四种选择器就能选择大多数的元素。当发现文档有很多不必要的类,这就是文档结构不合理的一个警告。这是得分析这些元素的区别,你常常会发现唯一的区别是他们出现在文档中的位置,不要给这些元素指定不同的类,而应将ID或类应用在其祖先上。尽量不要随便改变文档结构。

px vs em

国内字体多用px,国外多用em

px:相对显示屏分辨率

em:相对对象内文字大小(相对祖先)

em特点:

em不是固定的,所有浏览器默认16px,所以给body设置成62.5%,这时1em=10px;

em会继承,#content设成1.2em,里面的字体得设成1em,从而避免1.2*1.2

想通过文档结构之外的条件应用样式,可以用伪类

a:link - unvisited

a:visited

:hover :focus :active

:link 和 :visited只能用于<a>锚

:hove :focus :active理论上可以应用于任何元素

ie6忽略a:focus

ie7忽略:active :focus

可以这么写

a:visited:hover

通用选择器,最强大也最少使用。可以选择某元素所有后代或跳过一级后代

高级选择器-对于站点功能和布局很重要的地方不要使用

子选择器 >

相邻选择器 +

#nav > li {

background:url(..png) no-repeat left top;

}

ie6不支持

ie7有个小bug,父元素和子元素间不要有注释

ie6/5可以模拟子选择器(想想就知道的)

覆盖背景

background:url(..png) ...

background-image:none;

属性选择器 ie6不支持

acronym[title]:focus{cursor:help;}

a[rel="nofollow"]

某某人为ie6的提供黑白版本,给其他浏览器提供彩色的

#header{...}

[id="header"]{...}/*其实这么写是有错的*/

[lang|="en”] 等于en或以en-开头的元素

~= 单词

*= 包含

^=

$=

特殊性

标有!important的用户样式 > !impotant的作者样式 > 作者样式 > 用户样式 > 浏览器样式

行内 1000

id 100

类、属性 伪类 10

类型选择器、伪元素选择器 1

* 为4个0 : 0 0 0 0 但仍高于继承的权值

伪类: :link :active 等

伪元素:不存在的元素。包括 :after :before :first-line :first-letter

样式表中特殊性:为了避免混乱,减少覆盖,减少重复,让一般的更一般化,特殊的更特殊些。

可以在body元素上添加ID和类,可以在页面范围内覆盖,非常灵活的控制站点的设计和布局

id            class

页面1       类型1

页面2       类型2

继承

人们常将层叠与继承混为一谈,但这两个东西完全不同,前者与权值相关。后者的概念很简单:应用样式的后代会继承样式的某些属性,如颜色、字体。border、margin等就不会继承了。

ie在继承表格字体存在问题,解决办法是单独设置表格字体。

如果在主体上设置了字号,页面上任何标题都没有应用这个样式,实际上标题也继承了,只不过浏览器默认样式设置了字号,直接应用于元素的任何样式总会覆盖继承的样式。

规划、组织和维护样式表

网站越大越复杂,图形越丰富,css就越难管理。可以按逻辑对样式进行分组及通过注释使代码更容易阅读

笔者倾向单一css文件(link较import快)

请求数减少,提高速度,浏览器只能从同一个域同时下载数量有限的文件,老式的是2个,现代浏览器为8个。

注释方法

/* @group general styles

-----------------------------*/

/* @group helper styles

------------------------------*/

设计中可能需要很多颜色,常常去图形应用程序去查,让后在写入文本编辑器,很浪费时间,有人建议使用变量,但这会让非程序员畏惧它,笔者这么做

/* Color Variables

@colordef #434343; dark gray

@colordef #f2f6e4; light green

@colordef #90b11f; dark green

@colordef #369; dark blue

*/

/* :@todo 记得删除... */

/* @workaround: 权宜之计 */

/* @bugfix: 特定浏览器遇到的问题 */

删除注释和优化样式表

注释使CSS文件增大,最原始利用编辑器可以删除

减少文件大小最好启用服务器端压缩

样式指南

把css方面提取出来,方便新员工学习,同一CSS设计

但同步是很麻烦的事,笔者喜欢将常用的样式取出来,成为组合模式

时间: 2024-12-25 05:26:38

web标准解决方案_2的相关文章

读《精通CSS:高级Web标准解决方案》

因为最近在看<精通CSS:高级Web标准解决方案>,做了一些记录. 因为很多开发人员对于XHTML2的开发不满,于是出现了WHATWG和W3C的分裂,WHATWG决定开发自己的规范,也就是HTML5,而W3C的XHTML2标准已被放弃,HTML5成为了W3C的正式标准.XHTML和HTML的区别就是XHTML严格遵守XML编码规定,浏览器会依据文档的MIME类型来解析文档,如果不遵循规范会导致错误,而HTML却是很宽松的. Doctype类型和浏览器模式,DTD(文档定义类型)是一组机器可读的

《精通CSS:高级Web标准解决方案》学习笔记01

对我来说,CSS算得上是一个很难的东西.因为它不像JavaScript那么有趣,对记忆的要求太高,而我对浏览器兼容性.各种CSS Hack真的一点都不感冒.琐碎的.非理论化的知识,真的很烦人呐~ 鉴于国产CSS书籍基本都是辣鸡的现状,我在半年前动用某工作室的购书资金采购了一些技术书籍,这本广受好评的<精通CSS>也在其中.但是在阅读过后我深深的感觉到,如果说CSS本来已经是一种很琐碎的布局知识集合的话,那这本书只能说是更加琐碎了,因为这只是一本纯纯的经验分享.而且随着前端技术的快速发展,明显能

web标准解决方案_1

标准的网页设计(12-15~1-15,能够对此有个知识树即可,无需都知道) 本书约定:HTML指HTML和XHTML 除非特别声明,CSS指CSS2.1规范 现代浏览器指:safari,ff,chrom,opera,ie7891011 结构良好并且有意义的HTML文档在基于标准的CSS开发中非常重要 有意义的标签即语义标签有利于搜搜引擎的重视以及屏幕阅读器的使用.有意义的标记可以非常简单的将元素调整成我所需要的样式. 写有意义的文档 常用有意义的元素(顺便看看w3school) Hx:标题 H1

精通CSS:高级Web标准解决方案(第2版)--第一章 基础知识

“人们几乎不会先去读完整的CSS规范,这些规范能把任何人送入梦乡.” “学习CSS最好的一种方式是直接开始使用它.” “先从博客上看到了一些出色的效果,于是通过查看源代码研究它们是如何实现的,然后就在自己的个人网站是大胆尝试.” 一.首先,从开始就应注意基本的问题,养成好的习惯: 1.良好的文档结构 不要过于依赖可视化的编辑器:糟糕的代码结构可能让你宁愿从头编写页面而不想去寻找bug: 2.有意义的标记 HTML 4 目前可使用的语义化标签并不全面,至少没有像header.navigation.

精通CSS:高级Web标准解决方案(第2版)--前言

一 这是我的第一本也是现在仅有的关于CSS纸质书,2013-08-06 购自某东,对于患有拖延症的我来说,260多页现在还没看完也不足为奇.期间拾起放下多次,每次都是从头来过,想想都要悲哀一下,最大的收获是我深刻体会到: 做任何事情,从头来过的成本是很高的. 现在我又来了.大家都说Andy Budd的这本书是好书.既然这样我就带着初学者的心态来拜读学习. 1.书中值得学习的CSS优点:规范.高效.兼容: 2.带有目的地学习和研究:深入.熟练.系统.精通.灵活: 3.自己去创造美的事物. 最后一点

《精通CSS:高级Web标准解决方案》学习笔记(下)

1. background-position: left center; 两个参数分别是x和y轴方向的position 2. background-position: 10% 20%; 用百分数表示时,定位点并不是元素的左上角,而是background上距左边10%,距右边20%的点 3.圆角框,略.内容太多,以后单独开一篇. 4.犹如下css代码: 1 a:link,a:visited { 2 text-decoration: none; 3 } 4 a:hover,a:focus,a:act

精通css 高级web标准解决方案——可视化格式模型

1-盒模型的两种标准: IE :width 和 height属性 是包括padding和border在内的. w3c:width 和 height 属性,就是单纯的内容的宽高,padding 是内容之外的附加值. IE标准盒模型 w3c标准盒模型 我发现我以前总是记得有点混乱.现在绝对不会忘记了.box-sizing属性可以定义要使用哪种盒模型 解决这个问题分方法1:不要给元素添加具有指定宽度的内边距,尝试将内边距或者外边距添加到元素的父元素或者子元素. 方法2:待补充?? 2-对box-siz

web标准解决方案_4

区别纯修饰图片和图片标签 body{ background-image:url(/img/patten.gif) /*默认情况下,浏览器会水平.垂直地重复显示背景图片*/ } background-repeat:repeat-x; 背景图片总出现在背景颜色上面,可以利用这个特点实现些功能: 图片高度一定,当内容高度超过图片高度,颜色渐变就会停止,这时只需给背景加一个图片底部色即可,那么颜色间的转变就看不出来了 body{ backgrond-image:url(); background-rep

精通css 高级web标准解决方案——可视化格式模型-定位模型

CSS 中有三种定位机制:普通流.浮动.绝对定位.(默认为普通流) 改变文档流:display: inline-block; (支持到ie8及以上) 1-匿名块框: <div> 你好! <p>廖阿丽!</p> </div> 这一块中的“你好”,属于匿名块框,因为它没有与专门定义的元素想关联. 2-相对定位 元素相对定位就是相对于它本来的位置来定位的. <!DOCTYPE html> <html> <head> <ti