1.1. 工作流：开始
- 当你有了设计图之后，开始于一个空白页。 “页面包括页面的页眉，标题，页面示例，页脚。然后开始添加html标记。再然后添加CSS。这样页面效果看起来更好了。”
- 使用master样式表 “我观察到初等水平和中等水平开发者都会犯的一个相同的错误，他们都会因为没有移除浏览器的默认CSS样式而困扰。这会导致一个你通过浏览器展现出的设计图与原设计图是矛盾的，最终使很多设计师把这种矛盾归咎于浏览器。当然这是一种误解。因此当你编写网站之前，首先要重置样式表。”
1 @import url("reset.css"); 2 @import url("global.css"); 3 @import url("flash.css"); 4 @import url("structure.css");
1 <style type="text/css" media="Screen"> 2 @import url("css/master.css"); 3 </style>
1 <link href="util/reset.css" rel="stylesheet" type="text/css" />
- 编写一个辅助CSS类库此类库用于辅助调试，但是要避免用于已发布的版本中（将标记层与表现层分离）。 你可以使用如下多种类名(即
...)来调试标记层。
1 .width100 { width: 100%; } 2 .width75 { width: 75%; } 3 .width50 { width: 50%; } 4 .floatLeft { float: left; } 5 .floatRight { float: right; } 6 .alignLeft { text-align: left; } 7 .alignRight { text-align: right; }
1.2. 编写你自己的CSS代码
- 编写你自己的CSS样式之使用master样式表 “编写你自己的CSS有助于未来的网站维护。从主样式表开始。在这个样式表里可以引入
reset.css，global.css，flash.css（如果需要的话）和structure.css，有时还有布局样式表。下面是一个 “master”样式表的例子以及它是如何嵌入到文件里的：”
1 h2 { } 2 #snapshot_box h2 { padding: 0 0 6px 0; font: bold 14px/14px "Verdana", sans-serif; } 3 #main_side h2 { color: #444; font: bold 14px/14px "Verdana", sans-serif; } 4 .sidetagselection h2 { color: #fff; font: bold 14px/14px "Verdana", sans-serif; }
- 编写你自己的样式表之使用标记 “把你的样式表分为具体的部分：即全局样式-（body，paragraphs， lists等），页眉，页面结构，标题，字体样式，导航栏，表单，注释，其他内容。
`/* ------------------------*/ /* ---------->>> GLOBAL <<<-----------*/ /* ------------------------*/`- 编写你自己的样式之制作一个概括出CSS文件所设置样式不同区域的内容表在CSS文件的顶部，编写一个内容表。例如（header,main,footer等），然后，设置一个大的明显的板块断点来划分这些区域。
- 编写你自己的样式表之按字母顺序排列属性 “我忘了我是从哪里得到这个灵感的，但在将CSS属性按字母排序一个月以来，不管你信不信，这个方法使一些特殊的属性很容易找到。”
1 body { 2 background: #fdfdfd; 3 color: #333; 4 font-size: 1em; 5 line-height: 1.4; 6 margin: 0; 7 padding: 0; 8 }
- 划分单独的代码块. “这对一些人来说可能是常识，但是有时我看到一些CSS并没有被分解成几部分。这样做可以让你更容易的处理数周、数月甚至数年后的代码。你能够轻而易举的找到需要修改的类和元素。如：
/* Structure */,/* Typography */等” - 挂钩，线和铅坠。 “当CSS及其分段都准备就绪，你会开始考虑选择器要钩在哪里，那么接下来就需要依靠在你的标记里使用结构挂钩。这为网站未来的编写和维护创造了优势，也增强了文档的健壮性。”
- 将样式表分解成单独的代码块 “我把自己的样式表分解成三个单独的代码块。第一部分是直接的元素声明。改变body、一些links样式、一些header样式，以及重置窗体的margin和padding等等。 […] 第二部分是类声明：一些像错误信息或者callout的东西会放在这里。 [..] 最后声明主容器，然后对这个容器里的元素样式进行缩进。扫视之后我就能看清楚我的页面是如何划分的，而且找一些东西也会变得很容易。即使容器里没有任何内容我也会声明它。”
1.3. 工作流程：处理ID、类、选择器和属性。
- 使容器保持最小化。 “将你的文档从结构臃肿中拯救出来。新手开发者倾向于使用很多类似于表格单元格的DIV来实现布局。实际上许多其他结构元素都可以用来实现布局。不要使用过多的DIV。在使用过多的包装（DIV）去实现效果前考虑所有的选择，会发现使用一点漂亮的CSS也能达到相同的预期效果。”
- 使属性保持最少化 “工作时要多思考而不是纠结于CSS。在这条规则之下会衍生出很多子规则：如果添加一个CSS属性不是必需的，那么不要添加；如果你不确定为什么要添加一个CSS属性，不要添加；如果你感觉同一个属性添加了很多次，那么把它们找出来处理后只添加一次。”
- 使选择器保持最小化 “避免不必要的选择器。使用较少的选择器意味着在实现特殊样式时所重写的选择器也较少-这更有利于故障排除。”
- 使CSS hack保持最少 “除非遇到了已知的已公布的bug，否则不要使用hack。这是一个很重要的要点，因为我也经常看到hack被用来处理一些压根儿就没有问题的东西。如果你发现需要找一个hack来处理某个设计中的问题，那么首先你需要做一些调查（Google这里能派上用场），然后试着鉴定一下你遇到的这个问题（是否真的需要hack来处理）。
- 在敏捷开发中使用CSS常量 “常量的概念-通过你的代码可以使用的固定值是有用的。有一种应对CSS中缺乏常量的方法是在CSS文件顶部注释中添加一些相关的定义来定义‘常量’。这种方法常见的一种应用是‘创建颜色词汇表’。这种方法可以让你对网站中使用的颜色有一个快速的参考，避免在使用颜色时失误，并且一旦你需要修改颜色，你可以马上利用这个速查表进行搜索和替换。”
1 /* 2 # Dark grey (text): #333333 3 # Dark Blue (headings, links) #000066 4 # Mid Blue (header) #333399 5 # Light blue (top navigation) #CCCCFF 6 # Mid grey: #666666 # 7 */
- 使用一个通用的命名系统。 在寻找bug或者更新文件时，如果你有一个id和class的命名系统会节省很多时间。特别是大型的CSS文件，如果命名不规范，很快就会导致巨大的混乱。我推荐使用
parent_child模式。 - 根据class和id的语义适当的为他们命名。 “我们倾向于避免表明表象方面的命名。否则，如果我们命名一些右列的东西，完全可能改变CSS并且“右列”最终在页面的左边显示。这在未来可能导致混乱，所以最好避免这种表象的命名方案。
- 分类常见的CSS声明选择器。 “分类选择器。当一些元素类型，类或者id共享一些属性时，你可以分类选择器避免在有些时候设置了相同的属性。这将会节省潜在的大量空间。” ???
- 将你可能会重复使用很多次某个唯一的属性单独分离出来。 “如果你发现你使用某个唯一的属性很多次，为了使你不再一遍又一遍的重复不仿将其分离出来，而且也使你能够改变网站中所有使用过此属性的部分的显示。” ???
- 尽量将id和class的命名持平文档树 尽可能的使用 上下文选择器 。不要担心这样做会使选择器变得冗长。长的选择器会使css文档更容易阅读，也减少了发展成 classitis 或者 divitis的可能。
- 学会利用CSS级联的特性 “比方说你的网站里有两个相似的有些许不同的盒模型-你可以分别为每个盒模型写好CSS样式，也可以为两个盒模型写一个CSS样式，然后再下面写出两个盒模型的不同属性样式来区分两个盒模型。”
- 使用实用标签:
<small>,<em>和<strong>“很多时候在设计中会设置一个对各种印刷权重做出要求的部分，比如设置为同一行或者字与字之间间距很近。这些设置分散在各个div和class中，我觉得它们不符合语义化，而且会干扰你一直遵循的良好的XHTML准则。” 建议使用语义化标签代替这些设置。
1.4. 工作流程: 使用简写标记
- 缩写16进制颜色标记。 “在CSS中，一种颜色由三对十六进制数组成，当你使用这种颜色标记时，你可以使用省略每组的第二个数字这种有效率的方法：
#000 相当于 #000000, #369 相当于 #336699。 - 根据LoVe/HAte排序法定义伪类链接。: Link, Visited, Hover, Active. “首先确定你了解各种链接样式，然后最好把样式按照“link-visited-hover-active”或者“LVHA”顺序排列。如果你关注焦点样式，那么可以在这之后加入—但是在决定之前看一下这个解释。”
1 a:link { color: blue; } 2 a:visited { color: purple; } 3 a:hover { color: purple; } 4 a:active { color: red; }
- 按照TRouBLed排序法定义元素的margin, padding 或者border : Top, Right, Bottom, Left. “这里介绍一个简写定义元素的margin,padding或border的方法，从top开始按照顺时针：Top, Right, Bottom, Left。”
- 你可以使用简写属性. “为
margin,paddingandborder使用简写属性可以节省很大空间。”
1 div{ 2 margin: top right bottom left; 3 margin: 1em 0 2em 0.5em; 4 ( margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;) 5 border: width style color; 6 border: 1px solid #000; 7 background: color image repeat attachment position; 8 background: #f00 url(background.gif) no-repeat fixed 0 0; 9 font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family; 10 font: italic small-caps bold 1em/140% "Lucida Grande",sans-serif; 11 }
1.5. 工作流程: 设置字体
- 在body标签里设置字号为62.5%从而像使用px一样使用EM.
font-size的默认值是16px; 应用这个规则之后，Em的值大约相当于10px(16 x 62.5% = 10).“我更倾向于在body标签里设置字号为:62.5%。这种方法能够在考虑px时使用em去指定大小，例如，1.3em几乎相当于1.3px。 ” （提示，在chrome中默认最小字体12px，所以这种方法在chrome中不适用。）
- 使用通用字符集进行编码. “[..] 答案就是使用单独的通用字符集去覆盖大部分异常事件。幸运的是这种字符集是存在的：基于Unicode的UTF-8。Unicode是一种行业标准，是为了使所有语言的文字和符号能够为电脑一视同仁的所表示和操控而设计的。 UTF- 8 应该像这样包含在你的网页页头中。”
1 <meta http-equiv="content-type" content="text/ html;charset=utf-8" />
- 你可以使用CSS来切换大写。 如果你需要吧一些东西转换成大写，比如一个标题，又不行重写一个副本，那么可以使用CSS来进行这项无聊的工作。下面的代码会将目标h1的所有文本转化为大写，无论是什么格式”。
1 h1 { text-transform: uppercase; }
- 你可以用small-caps自动显示文本。
font-variant属性是用来显示小型大写字母文本，这其中所有的小写字母被转化为大写字母，但是所有的小型大写字母下的文本相比其余的文本字号较小。
1 h1 { font-variant: small-caps; }
- 定义通用字体类型来覆盖通用设置。 “当我们声明一个设计中使用的特定字体时，我们会希望这种字体以及在用户的系统中安装。简单的说如果他们的系统没有安装这个字体，那么将无法看到这个字体。我们需要做的就是参考用户在他们机器上可能会安装的字体，比如下面的font-family属性。我们完成一个通用字体类型是非常重要的。”
1 p { font-family: Arial, Verdana, Helvetica, sans-serif; }
- 将
line-height设置为1.4em – 1.6em。 “line-height:1.4”为易读的行，合理的行高避免了行超过10个字而过长，而且颜色对比也不会太不明显。比如，对于过亮的CRT显示屏来说，纯黑色在纯白色的背景下往往对比太强烈，因此我尝试运用米白色(#fafafa是一个好的选择)和暗灰色（#333333也不错）。” - 设置
html-元素为100.01%。 这个针对字号的奇怪100.01%会对几个浏览器bug进行弥补。首先，设置一个默认的body百分比字号（而不是em）消除了IE/Win系统中的字体缩放比例问题，即使之后在其它元素中设置为em。此外，一些版本的Opera浏览器会设置一个比其他浏览器小的100%的默认字号。另一方面，Safari浏览器却有一个101%字号的问题。目前流行的最佳解决方案是针对这个属性设置为100.01%的值。”
1.6. 工作流程: 调试
- 添加边框以确定容器 “在构建文档或者调整布局问题时使用大量的测试样式，比如额外的边框或者背景颜色。
div { border:1px red dashed; }就像一个小装饰品。这里有应用边框的书签 ，并且还能为你做其它事情。” 你也可以使用* { border: 1px solid #ff0000; }为元素添加一个边框来认清它们，这样有助于识别正常情况下不易察觉的重叠部分或者额外的空白部分。
- 在调试前首先检查封闭的元素。 “如果你曾经因为只修改了很少的东西就破坏了你优美的宝贝布局而沮丧，那么很可能是因为没有封闭的元素。 ???
2.1. 技术性技巧: IDs, Classes
- 每个页面一个id，每个页面很多class。 “检查你使用的id:文档中只有一个元素能使用某个值的id属性，而共享同一个类名的元素个数是无限制的。[..]class名和id名只能由字母[A-Za-z0-9]和连字符 (-)组成，而且不能由连字符或者数字开头(参考 CSS2 的语法和基本数据类型)。”
- 区分选择器中元素名的大小写。 “记住要严格区分大小写。当CSS与XHTML用在一起时，选择器中的元素名是区分大小写的。为了避免这个问题我总是推荐在CSS选择器中使用小写的元素名。class和id属性值在HTML和XHTML中都是区分大小写的，所以要避免混合大小写的class和id名字。”
- CSS中的class与id必须是有效的“即 由字母开头, 而不是数字或者下划线。id必须是唯一的。他们的名字应当具有普遍性,能够描述功能而不是装装样子。”
- 你可以将多个class的名字分配给一个给定的元素。 “你可以将多个class的名字分配给一个元素。这样有利于书写不同的规则来定义不同的属性，并且只在需要的地方应用它们。”
2.2. 技术性技巧：充分用好选择器。
要注意IE6及其更早的版本是不支持选择器 ‘>’ 和 ‘+’的。
- 你可以使用子选择器 “一个子选择器指向某个元素的直接孩子。一个子选择器由两个或者更多的选择器组成，这些选择器由大于号“>”分割。父类在大于号“>”的左边，并且选择符和选择器之间允许出现空格。这个规则会影响所有div元素下的strong元素。
1 div > strong { color:#f00; }
- 你可以使用相邻选择器。 一个相邻选择器由两个简单的选择器组成，这两个选择器由加号“+”分开。相邻选择器内部允许出现空格。这个选择器匹配一个元素，这个元素是前一个元素的相邻元素。这两个元素必须有相同的父元素，并且第一个元素必须是紧挨第二个元素。
1 p + p { color:#f00; }
- 你可以使用属性选择器。 属性选择器匹配的元素是基于这个属性的存在或值。下面是四条属性选择器的匹配情况：
[att] 匹配包含att属性的元素，无论它是什么值。 [att=val] 匹配包含属性att值为“val”的元素。 [att~=val] 匹配含属性att，且att的值中包含“val”的元素。这种情况下“val”中不能包含空格。 [att|=val] 匹配含属性att且值为连字号分割的开头为“val”的元素。这种匹配主要用于匹配由lang属性(xml:lang in XHTML)指定的语言码，即 “en”, “en-us”, “en-gb”等。- 多属性的选择器可以用于同一个选择器。这个方法可以实现对同一个元素的不同属性的匹配。下面的规则将适用于所有类值为“quate”且包含cite属性的blockquote元素：
1 blockquote[class=quote][cite] { color:#f00; }
2.3.技术性技巧:样式链接
- 如果你使用锚，在设计链接时要小心。 “如果你在代码中使用了经典的锚(
<a name="anchor">) ，那么你会注意到它失去了:hover和:active伪类作用。为了避免这种情况，你需要为锚设置id而不是用略晦涩难懂的语法：:link:hover, :link:active来设计。” - 为链接定义关系。 “rel属性是用来从一个资源指向另一个资源表示语义链接关系。
1 a[rel~="nofollow"]::after { content: "2620"; color: #933; font-size: x-small; } 2 a[rel~="tag"]::after { content: url(http://www.technorati.com/favicon.ico); }
- 你可以自动标记外部链接。许多人利用非标准关联
rel="external"来指定一个外部站点的链接。然而，把它添加到每一个link上是消耗时间并且没有必要的。这个样式规则将会使网站上的外部链接放在一个东北向箭头上。
1 a[href^="http://"]:not([href*="smashingmagazine.com"])::after { content: "2197"; }
- 你可以使用
outline: none;来去除链接的虚线使用outline: none;去除链接虚线：
1 a:focus { outline: none; }
2.4. 技术性技巧: CSS-Techniques
- 你可以指定body标签的id。 “大多数情况下在body标签上设置一个id有助于操作CSS的表面条目及标记页面的基础元素。你不仅仅可以组织你的章节，而且还可以在不改变模板和标记的情况下创建多个CSS样式。” ???
- 你可以通过CSS创建高度相等的列。 等高技术: 使所有列展示为相同高度的方法。但是没有伪列式背景图片的需要。 伪列: 结合背景图片。
- CSS垂直对齐的解决方法：在CSS中将行高设置为与盒子高度相同。
- 你可以使用伪元素和类来动态生成内容。 伪类和伪元素. 伪类和伪元素可以用来格式化元素，这些元素的信息都是在文档树中无法得到的。例如，没有元素指向一段的第一行或者一个元素文本的第一个字母。你可以使用 :first-child, :hover, :active, :focus, :first-line, :first-letter, :before, :after and more.
- 你可以在每页上都是用相投的导航(X)HTML代码。 “大多数网站突出了用户位置的导航栏。但是这样会很痛苦，因为你必须调整每一个页面的导航栏后面的HTML代码。能不能找到一个两全其美的方法呢？”
1 <ul> 2 <li><a href="#" class="home">Home</a></li> 3 <li><a href="#" class="about">About us</a></li> 4 <li><a href="#" class="contact">Contact us</a></li> 5 </ul>
- 将一个
id加入到body标签中。这个id应该能表现出网站中用户的位置，并且当用户访问站点的不同部分时也能随之变化。？？
`#home .home, #about .about, #contact .contact { commands for highlighted navigation go here }`- 使用
margin: 0 auto;实现水平居中布局。 “要实现用CSS水平居中一个元素，你需要指定这个元素的宽度和水平的margin。”
- 你可以将CSS样式添加到RSS源。 “你可以用XSL样式表做很多事情（将链接转化为可点击链接等），但是CSS可以使非专业人员对你的代码不那么恐惧。
`<?xml version="1.0" ?> <?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?> ...`- 你可以隐藏旧浏览器的CSS。 “从旧的浏览器隐藏CSS文件的一种常用方法是使用
@import的诀窍。
`@import "main.css";`- 别忘了声明块级元素中的margin和padding。
- 设置宽度或者margin和padding。 “我的经验法则是，如果设置了一个宽度，就不设置margin或padding。同样，如果设置了一个margin或padding，就不设置宽度。处理盒模型是就是会有如此的痛苦，特别是当你处理百分比的那种。所以，我设置外部容器的宽度，然后对其中的元素设置margin和padding。如此一来一切都会顺利。”
- 避免将padding/border和固定宽度应用到元素中。 “IE5的盒模型是有误的，这带来了一大堆麻烦。这其中有很多解决方案，但是最好是通过设置父元素的padding来避开这个问题，而不是对子元素设置固定宽度。
- 提供打印样式。 “你可以像加入一个正规样式一样为你的页面加入一个打印样式：
`<link rel="stylesheet" type="text/css" href="print.css" media="print">`或
`<style type=”text/css” media=”print”> @import url(print.css); </style>`- 这将确保此CSS只会应用于打印时的页面而不会影响这个页面在屏幕上的显示。应用新的打印样式后你可以确保实现白色背景下的实心黑色文本并且移除多余的特性，极大提高可读性。 More about CSS-based print-Layouts70. [20 pro tips77713635]
2.5. 技术性技巧: IE 调整
- 你可以强制使IE应用透明PNG图片。 “理论上，PNG文件支持各种级别的透明程度；然而，一个IE6的bug阻碍了这个属性的跨浏览器运作。” [CSS Tips, Outer-Court.com72]
#regular_logo { background: url('test.png'); width:150px; height:55px; }
* html #regular_logo { background:none; float:left; width:150px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale'); }- 你可以在IE中定义
min-width和max-width。[Ten More CSS Trick you may not know73]
#container {
min-width: 600px; max-width: 1200px; width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto"); }- 你可以为IE设置条件注释。 “IE/Win条件下最安全的处理方式是使用条件注释。使用微软专有的条件注释感觉起来比CSS hack更有前途。你可以利用这个方法为IE/Win设置一个单独的样式表，这个样式表包含所有使其正确运作的必须的规则。” [Roger Johansson74]
`<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->`工作流程:获得灵感
- 娱乐试验向CSS “去玩。玩背景图。玩浮动. ” 玩继承和级联规则。就是玩。
- 向别人学习 从别人优秀的网站中汲取知识。任何网站的HTML都可以轻易的通过查看网页的源代码得到。观察别人是如何做的并把他们的方法应用到自己的工作中
扫一扫
756
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
