你可能不知道的十个CSS技巧

分享于 

10分钟阅读

Web开发

  繁體 雙語

1.CSS字体 shorthand 规则

使用CSS样式设置字体时,你可能会这样做:

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

尽管你可以使用这里 CSS shorthand 属性,但不需要这样做:

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

好多了只需要几个警告: ! 只有在指定 font-sizefont-family 时,这个 CSS shorthand 版本才会工作。 另外,如果不指定 font-weightfont-style 或者 font-varient,那么这些值将自动默认为 normal 值,因这里请记住。

2.两个类一起使用

通常属性只分配一个类,但这并不意味着这就是你所允许的。 事实上,你可以按你喜欢的方式给你分配多少个类。 例如:

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

将这两个类一起使用意味着,对每一个段落进行收费,就可以将分配给。 如果两个类之间的规则重叠,那么 below 文档中的另一个类( 即) 将。

3。CSS边框默认值

在编写边框规则时,通常指定颜色。宽度和样式( 按任意顺序)。 比如, border: 3px solid #000 将给你一个 black 实线边框,3px 英寸。 然而,这里只有的required是边框样式

如果你只写 border: solid,那么该边框的默认值将被使用。 但是什么默认值嗯,边框的默认宽度是 medium ( 相当于 3到 4像素),默认颜色是边框内文本颜色的默认宽度。 如果你想要边框中的任何一个,那么你可以把它们从CSS规则中去掉 !

4 IE 忽略重要内容 !

通常在CSS中,最后指定的规则优先。 然而,如果在命令之后使用了 ,那么这个CSS命令将优先于,无论出现什么情况。 这是除 IE 之外的所有浏览器的true。 其中的一个示例是:

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

除了 IE 之外,上边距将被设置为 3.5,除外,它的上边距将为 2字节。 这有时会有用,尤它的是在使用 relative 边距( 如在本示例中) 时,在 IE 和它的他浏览器之间显示的时候。

( 你们中的许多人可能也会注意到 子选择器,IE 忽略的内容。)

5.图像替换技术

通常建议使用常规的HTML标记来显示文本,而不是像图像那样。 这样做可以加快下载速度并具有辅助功能优势。 但是,如果你绝对使用了某种字体,你的网站访问者不可以能在计算机上使用图像。

例如,你希望每个页面的顶部标题都是'购买小部件',因为你是一个小部件卖家。 如果你的字体不清晰,那么你就需要使用一个图像,这是很好的设置。

<h1><imgsrc="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 到我们的CSS规则。

6.CSS框模型 hack 替代

6浏览器中使用box模型来修复渲染问题,其中边框和填充是在元素的宽度包括在元素的宽度中,而不是在元素上添加的。 例如在指定容器的维度时,你可能使用以下CSS规则:

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

这里CSS规则应用于:

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

这意味着在所有浏览器中,框的总宽度是 150px ( 100px 宽度+ 两个 5px 边框+ 两个 20px paddings ),除了 pre 6版本。 在这些浏览器中,总宽度只有 100个像素,padding 和边框宽度将被合并到这个宽度。 可以用box模型 hack 修复这个问题,但是这可能会变得非常混乱。

一个简单的选择是使用这个 CSS:

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

而新的HTML将是:

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

完美现在框宽度将始终为 150像素,而不考虑浏览器 !

7.对齐 block 元素的中心

假设你想有一个固定的宽度布局网站,而内容浮动在屏幕的中间。 你可以使用下面的CSS命令:

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

然后,在HTML文档的正文中包围 <div id="content">,在左侧和右边都设置一个自动 margin,确保始终放置在屏幕的中心。 这还不是很好- 我们仍然有pre版本需要担心,因为这些浏览器不会把元素与这个CSS命令对齐。 你必须更改CSS规则:

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

然后将主要内容居中对齐,但也将居中对齐文本 ! 为了抵消第二个可能不希望的效果,我们将 text-align: left 插入到内容div中。

8.与CSS垂直对齐

表垂直的垂直对齐是一个简单的选择。 要使单元格内容在单元格的中间对齐,请使用

这个对于CSS布局真的没有作用。 假设你有一个高度为 2em 且将这里垂直对齐命令插入到CSS规则中的导航菜单项。 它基本上不会改变,文本将被推到盒子的顶部。

嗯。不是想要的效果。 解决方案指定行高度to与CSS中框本身的高度相同。 在这个例子中,框是 2em 高,所以我们将 line-height: 2em 插入到CSS规则中,文本现在在框中间浮动。

9.容器内的CSS定位

CSS最好的一件事是,你可以在文档中任何地方绝对地定位对象。 也可能( 通常都是) 在容器中定位对象。 这也很简单。 只需将下面的CSS规则分配给容器:

#container
{
position: relative
}

现在这个容器中的任何元素都将被定位到 relative。 假设你拥有这个HTML结构:

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

要将导航精确地从容器框的顶部和 5px 位置定位到 30px,可以使用以下CSS命令:

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

完美在这个特殊的例子中,当然也可以使用 ! margin: 5px 0 0 30px 但是,在某些情况下,使用定位比较合适。

10.background 颜色运行到屏幕底部

CSS的一个缺点是它无法纵向控制,导致一个特定的问题不受 table 版本的影响。 假设你有一列在页面左侧运行,它的中包含站点导航。 CSS的缺点之一是不能垂直控制,导致 table 布局不受的特殊问题。 简单地,你将它的分配给相应的CSS规则:

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

只有一个问题:因为导航项不会继续到屏幕底部,background 颜色也不是一样的。 在的页面上,的蓝色 background 颜色被削减一半,从而破坏了你的。 你能做什么? !

不幸的是,唯一的解决方法是拼写,并将 body的background 图像与左列的颜色和宽度分配一个图像。 你将使用这里CSS命令:

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

在这个图像中你放置的图片应该精确为宽与左边列的background 相同的蓝色颜色 as。 你将使用这里CSS命令:

在写作时,这是唯一解决这个问题的解决方案,因这里左列将在 background 中表示不同的颜色。


相关文章