Keystone

By Trenton Moss

• 1. CSS font shorthand rule

  When styling fonts with CSS you may be doing this:

  font-size: 1em;
  line-height: 1.5em;
  font-weight: bold;
  font-style: italic;
  font-variant: small-caps;
  font-family: verdana,serif;
  

  There's no need though as you can use this CSS shorthand property:

  font: 1em/1.5em bold italic small-caps verdana,serif

  Much better! Just a couple of words of warning: This CSS shorthand version will only work if you're specifying both the font-size and the font-family. Also, if you don't specify the font-weight, font-style, or font-varient then these values will automatically default to a value of normal, so do bear this in mind too.

  2. Two classes together

  Usually attributes are assigned just one class, but this doesn't mean that that's all you're allowed. In reality, you can assign as many classes as you like! For example:

  <p class="text side">...</p>

  Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.

  3. CSS border default value

  When writing a border rule you'll usually specify the colour, width and style (in any order). For example, border: 3px solid #000 will give you a black solid border, 3px thick. However the only required value here is the border style.

  If you were to write just border: solid then the defaults for that border will be used. But what defaults? Well, the default width for a border is medium (equivalent to about 3 to 4px) and the default colour is that of the text colour within that border. If either of these are what you want for the border then you can leave them out of the CSS rule!

  4. !important ignored by IE

  Normally in CSS whichever rule is specified last takes precedence. However if you use !important after a command then this CSS command will take precedence regardless of what appears after it. This is true for all browsers except IE. An example of this would be:

  margin-top: 3.5em !important; margin-top: 2em

  So, the top margin will be set to 3.5em for all browsers except IE, which will have a top margin of 2em. This can sometimes come in useful, especially when using relative margins (such as in this example) as these can display slightly differently between IE and other browsers.

  (Many of you may also be aware of the CSS child selector, the contents of which IE ignores.)

  5. Image replacement technique

  It's always advisable to use regular HTML markup to display text, as opposed to an image. Doing so allows for a faster download speed and has accessibility benefits. However, if you've absolutely got your heart set on using a certain font and your site visitors are unlikely to have that font on their computers, then really you've got no choice but to use an image.

  Say for example, you wanted the top heading of each page to be ‘Buy widgets’, as you're a widget seller and you'd like to be found for this phrase in the search engines. You're pretty set on it being an obscure font so you need to use an image:

  <h1><img src="widget-image.gif" alt="Buy widgets" /></h1>

  This is OK but there's strong evidence to suggest that search engines don't assign as much importance to alt text as they do real text (because so many webmasters use the alt text to cram in keywords). So, an alternative would be:

  <h1><span>Buy widgets</span></h1>

  Now, this obviously won't use your obscure font. To fix this problem place these commands in your CSS document:

  h1
  {
  background: url(widget-image.gif) no-repeat;
  }
  
  h1 span
  {
  position: absolute;
  left:-2000px;
  }

  The image, with your fancy font, will now display and the regular text will be safely out of the way, positioned 2000px to the left of the screen thanks to our CSS rule.

  6. CSS box model hack alternative

  The box model hack is used to fix a rendering problem in pre-IE 6 browsers, where by the border and padding are included in the width of an element, as opposed to added on. For example, when specifying the dimensions of a container you might use the following CSS rule:

  #box
  {
  width: 100px;
  border: 5px;
  padding: 20px;
  }
  

  This CSS rule would be applied to:

  <div id="box">...</div>

  This means that the total width of the box is 150px (100px width + two 5px borders + two 20px paddings) in all browsers except pre-IE 6 versions. In these browsers the total width would be just 100px, with the padding and border widths being incorporated into this width. The box model hack can be used to fix this, but this can get really messy.

  A simple alternative is to use this CSS:

  #box
  {
  width: 150px;
  }
  
  #box div {
  border: 5px;
  padding: 20px;
  }
  

  And the new HTML would be:

  <div id="box"><div>...</div></div>

  Perfect! Now the box width will always be 150px, regardless of the browser!

  7. Centre aligning a block element

  Say you wanted to have a fixed width layout website, and the content floated in the middle of the screen. You can use the following CSS command:

  #content
  {
  width: 700px;
  margin: 0 auto;
  }
  

  You would then enclose <div id="content"> around every item in the body of the HTML document and it'll be given an automatic margin on both its left and right, ensuring that it's always placed in the centre of the screen. Simple... well not quite - we've still got the pre-IE 6 versions to worry about, as these browsers won't centre align the element with this CSS command. You'll have to change the CSS rules:

  body
  {
  text-align: center;
  }
  
  #content
  {
  text-align: left;
  width: 700px;
  margin: 0 auto;
  }
  

  This will then centre align the main content, but it'll also centre align the text! To offset the second, probably undesired, effect we inserted text-align: left into the content div.

  8. Vertically aligning with CSS

  Vertically aligning with tables was a doddle. To make cell content line up in the middle of a cell you would use vertical-align: middle. This doesn't really work with a CSS layout. Say you have a navigation menu item whose height is assigned 2em and you insert this vertical align command into the CSS rule. It basically won't make a difference and the text will be pushed to the top of the box.

  Hmmm... not the desired effect. The solution? Specify the line height to be the same as the height of the box itself in the CSS. In this instance, the box is 2em high, so we would insert line-height: 2em into the CSS rule and the text now floats in the middle of the box - perfect!

  9. CSS positioning within a container

  One of the best things about CSS is that you can position an object absolutely anywhere you want in the document. It's also possible (and often desirable) to position objects within a container. It's simple to do too. Simply assign the following CSS rule to the container:

  #container
  {
  position: relative;
  }
  

  Now any element within this container will be positioned relative to it. Say you had this HTML structure:

  <div id="container"><div id="navigation">...</div></div>

  To position the navigation exactly 30px from the left and 5px from the top of the container box, you could use these CSS commands:

  #navigation
  {
  position: absolute;
  left: 30px;
  top: 5px;
  }
  

  Perfect! In this particular example, you could of course also use margin: 5px 0 0 30px, but there are some cases where it's preferable to use positioning.

  10. Background colour running to the screen bottom

  One of the disadvantages of CSS is its inability to be controlled vertically, causing one particular problem which a table layout doesn't suffer from. Say you have a column running down the left side of the page, which contains site navigation. The page has a white background, but you want this left column to have a blue background. Simple, you assign it the appropriate CSS rule:

  #navigation
  {
  background: blue;
  width: 150px;
  }
  

  Just one problem though: Because the navigation items don't continue all the way to the bottom of the screen, neither does the background colour. The blue background colour is being cut off half way down the page, ruining your great design. What can you do!?

  Unfortunately the only solution to this is to cheat, and assign the body a background image of exactly the same colour and width as the left column. You would use this CSS command:

  body
  {
  background: url(blue-image.gif) 0 0 repeat-y;
  }
  

  This image that you place in the background should be exactly 150px wide and the same blue colour as the background of the left column. The disadvantage of using this method is that you can't express the left column in terms of em, as if the user resizes text and the column expands, it's background colour won't.

  At the time of writing though, this is the only solution to this particular problem so the left column will have to be expressed in px if you want it to have a different background colour to the rest of the page.

http://blog.donews.com/lostin/archive/2005/06/20/437842.aspx

• （译后感：这10条中有很多条我认为都非常有用，你平时可能遇到的一些莫名的问题也许会在这里找到解决的方法。一些地方我还是把英文的标记原名放在括号内注明了，这样可以明白一些。希望对你有所帮助。）

  1. CSS字体定义缩写规则 当你定义字体时用到以下这些属性：

        font-size: 1em;
        line-height: 1.5em;
        font-weight: bold;
        font-style: italic;
        font-variant: small-caps;
        font-family: verdana,serif;
  

  那么你可以缩写成这样简短的一行：font: 1em/1.5em bold italic small-caps verdana,serif 这样看上去就好多了。只是我需要给你几点忠告：这种css缩写形式只有当你同时定义了字体和字号的时候才有用。且如果你定义了字重（font- weight），字型(font-style)以及字的变量(font-varient)，那么这些属性值就会自动显示为默认的正常状态的值，记住这一点。

  2. 采用两个类 通常我们只采用一个类(class)来定义一个属性，但是这并不表示你只能这样做不可。事实上，你可以想加多少类在一个属性上都可以。例如你可以这样<p class="text side">…</p>。

  使用这两个类（用空格分开而不是逗号）意味着这个段落将同时采用text和side的规则。如果两个类之间有重复的定义，那么将采用两个中属于下一级的那个类的规则。

  3. CSS 的默认边框（border）值当你定义个border的首你通常会考虑它的颜色（color）、宽度（width）和样式（style）（次序任意）。例如 border: 3px solid #000将会显示一个黑色的实心的3px宽边。然而这里唯一需要定义的只是border的style（样式）。

  如果你要定义一个 border为实心（solid），那么边框就将采用浏览器默认的值。但是什么是默认的值呢？边框的默认宽度是中等（相当于3到4px），默认的颜色是边框内的文本的颜色。如果这两者中任意一个都是你想要的边框的样式，那么你完全可以不用自己费劲去写定义语句。

  4. IE会忽略! important 在css规则中通常最后定义的会被优先执行。然而如果你在一个语句后面采用采用 !important那么浏览器应当会不考虑其后的语句而优先执行这个css语句。这一规则对所有非ie浏览器均适用。例如：margin-top: 3.5em !important; margin-top: 2em 那么在所有非IE浏览器中上顶边将会被设置成3.5em，而ie中设置成2em。这一点有时候也是很有用的。尤其是当使用相对边缘（如举例中的那种）的时候，这一点可以在ie和其他浏览器里面显示的略为不同。

  5. 图片替代技巧 我们通常建议采用HTML标记来显示text，但是不要用在图片显示上面。这样的做的好处是可以提高页面加载速度并且有比较的好的访问率。然而如果你非觉得你的页面的访客都不喜欢看你这个网页的文字的话，那么你只能使用图片了。

  举例来说，如果你是个配件供应商，你想要每个页面的顶图都是你要卖的小配件，并且希望这一词条能够被搜索引擎搜到的话，你可以这样定义图片< h1><img src="widget-image.gif" alt="Buy widgets"/></h1>。这样做当然可以，但是我得很明白的告诉你的是搜索引擎并不会看重你图片的alt文本。（因为有太多网页建设者使用alt文本来冒充关键字了）。所以另外一种方法是<h1><span>Buy widgets</span></h1>,这样你显然不必采用你的隐藏文字了。那么修正这一问题的方法是在css的样式里面这样定义

        h1
        { background: url(widget-image.gif) no-repeat;
        }
        h1 span
        {
        position: absolute;
        left:-2000px;
        }
  

  那么带有你希望字体的图片现在就会在浏览器下正常显示了，而且由于我们采用了距离屏幕左边缘2000px的定义那个文本并不会显示在页面的图片上。

  6. 另析CSS盒子(box)模型 box模型通常使用来修正ie6以前的浏览器中，边框（border）和补白（padding）被包含在元素的宽度值中而不是附加在宽度之外的问题。例如当定义一个container的尺寸的时候，你也许会采用下面的css规则：

        #box
        {
        width: 100px;
        border: 5px;
        padding: 20px;
        }
  	  

  这个css规则会使用在<div id="box">…</div>中。

  这就意味着在所有ie6后的浏览器下box的总宽度是150px（100px的宽＋2个5px宽的边框＋两个20px宽的补白）。在这些浏览器中box的总宽度包括了补白和边框才是100px。box模型的定义可以修正这一问题，但是也会带来许多麻烦。

  一个简单的修正法如下：

        #box
        {
        width: 150px;
        }
        #box div {
        border: 5px;
        padding: 20px;
        }
  

  这个css规则会使用在<div id="box"><div>…</div></div>中。很完美。现在所有浏览器下的box宽度都是150px。

  7. 中间对齐一个块（block）元素 假设你想要一个固定宽度的网页布局，主体部分以浮动元素形式显示在屏幕中央。你可以采用下面的CSS语句:

        #content
        {
        width: 700px;
        margin: 0 auto;
  

  }

  然后你会想要<div id="content">包围住每一个页面的内容项，而且它有一个自动的左边缘和右边缘以确保它总是在屏幕中央。很简单。。。不过也不尽然，我们仍然得考虑一下ie6以前的浏览器的显示问题，因为这些浏览器不会按照css的控制进行中心对齐。你得改变一下上面的css语句：

        body
        {
        text-align: center;
        }
        #content
        {
        text-align: left;
        width: 700px;
        margin: 0 auto;
        }
  

  这就会中心对齐主体部分，但是会导致文字都变成中心对齐的。为了修正这一问题，我们可以把文字对齐方式 text-align: left这条语句加到content div的css定义中去。

  8. 采用css进行垂直对齐表格（table）的垂直对齐不是个难题。为了使一个cell的所有子内容都在它中间一直线对齐，你可能会采用vertical- align: middle，但是这并不会在css布局中发挥作用。假设你想要一个高度是2em的菜单项，你或许会在css规则中使用vertical align的语句，这没什么作用，并且文字会全部显示在box元素的顶部。

  唔。。不是你想要的效果吧。有什么解决方法么？那么你可以在css语句里面把行高设置为和box元素的高度一样的值。在上面的语句中box就是2em高，然后我们可以在它的css定义中加入 line-height: 2em，并且使text文本浮动（float）在box的中间。ok，效果达到了。

  9. 在一个容器（container）里面采用CSS定位 CSS的一个很大的优点是你可以用它来设置一个对象（object）在页面中的绝对位置。当然你也可以（而且经常会被用到）在一个容器（container）里面设置对象（object）的位置。这很容易实现。只要采用下面的css语句：

        #container
        {
        position: relative;
        }
  

  现在这个容器（container）内的任何一个元素都会变成相对于它的定位。你可以采用下面的html结构：

  <div id="container"><div id="navigation">…</div></div>

  为了使导航的位置在距离它的父元素box左侧30px，顶部5px的位置，你可以使用下面的css语句：

        #navigation
        {
        position: absolute;
        left: 30px;
        top: 5px;
        }
  

  完成!在这个特殊的例子中，你当然你可以使用margin: 5px 0 0 30px，但是其他一些情况下你最好还是采用position来定位。

  10. 屏幕底部的背景颜色 CSS的一个缺点就是不能实现垂直方向的控制，这样就会导致不能用table进行布局的问题。假设你有一个包含网站导航的列要放在页面的左侧，这个页面背景是白色的，但是你想要左侧有一个蓝色背景。很简单，你只要采用下面这样的CSS语句：

        #navigation
        {
        background: blue;
        width: 150px;
        }
  

  采用上面的语句的话，会有一个问题：由于导航内容的每一个条目并不会延伸倒页面底部，就会产生它下方的部分仍然显示白色背景色。这样看起来好像被切断了一样的左侧蓝色背景色就会破坏你原本的设计意图。那么你能怎么办呢？

  很不幸的是只有一个解决方法，那就是用一个蓝色的背景图来代替左侧的蓝色背景色。语句如下：

        body
        {
        background: url(blue-image.gif) 0 0 repeat-y;
        }

  你放置在原来位置上的背景图的宽度正好是150px而且颜色也就用你想要的那个颜色。这样座的缺点就是你不能以em来定义左侧宽度，因为如果用户手动调整浏览器的文字大小的时候，左列的宽度也会改变，但是蓝色背景图像并不会跟着变换尺寸。

  但是现在只有这么一个办法解决我们一开始列出的问题，所以如果你希望左列的颜色不一样的话最好用px来定义左列的宽度。