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

分享于 

13分钟阅读

Web开发

  繁體 雙語

1.block vs inline 级别元素

几乎所有HTML元素都是 block 元素或者 inline 元素。 block 元素的特性包括:

  • 总是从新一行开始
  • 高度,line-height 和上边距和下边距可以操纵
  • 除非指定宽度,否则宽度默认为它的包含元素的100%

block 元素的示例包括 <div><p><h1><form><ul><li>。 另一方面,inline 元素具有相反的特征:

  • 从同一行开始
  • 高度,line-height 和顶部和底部的边距不能更改
  • 宽度与文本/图像一样长,无法操作

inline 元素的示例包括 <span><a><label><input><img><strong><em>

若要更改元素的状态,可以使用 display: inline 或者 display: block。 但是将一个元素从 block 变成 inline 还是相反,这一点是有意义的? 首先看起来可以能很难用,但实际上这是一种非常强大的技术,你可以随时使用:

  • 在新行上启动 inline 元素
  • 在同一行上启动 block 元素
  • 控制 inline 元素的宽度( 特别适用于导航链接)
  • 操作 inline 元素的高度
  • 将 background 颜色设置为 block 元素的文本宽度,而不必指定宽度

2.另一个框模型 hack 替代

在pc机上,盒模型 hack 用于修复渲染问题,其中边框和填充都包含在元素宽度中,而不是添加到元素。 提出了一些基于css的解决方案来补救这个问题,因这里我们真正喜欢另一个方案:

padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/14em; 

所有浏览器都读取第一个宽度命令;除了 IE5.x 上的以外,所有浏览器都会读取第1 个宽度命令。 因为第二个命令是第二个命令优先于第一个命令,第二个命令将始终覆盖前面的命令。 那么,这些工作是如何工作的?

通过在冒号前面放置空的注释标记 (/**/),IE5.0 将忽略命令。 同样,通过将这些空注释标记放在冒号之后,IE5.5 将忽略命令。 通过使用这两个规则相互结合,我们可以隐藏所有 IE5.x.的命令

3。页面的最小宽度

一个非常便捷的CSS命令是 min-width 命令,可以指定任何元素的最小宽度。 这对于指定页面的最小宽度尤其有用。

不幸的是,IE 不理解这个命令,因这里我们需要在这里浏览器中提供一种新的方法。 首先,在 <body> 标记下插入一个 <div>,因为我们不能为 <body> 指定最小宽度:

<body><divid="container">

接下来,创建CSS命令,以创建最小宽度 600像素:

#container
{
 min-width: 600px;
 width:expression(document.body.clientWidth <600?"600px":"auto" );
} 

第一个命令是常规最小宽度命令;第二个命令是只有 IE 才能理解的简短的JavaScript命令。 尽管如这里,这个命令将导致CSS文档无效,因这里你可以能希望将它插入每个HTML文档的头部。

你可能还希望将这里最小宽度与最大宽度组合在一起:

#container
{
 min-width: 600px;
 max-width: 1200px;
 width:expression(document.body.clientWidth <600?"600px" : 
 document.body.clientWidth> 1200?"1200px" :"auto");
} 

4.IE 和宽度&高度问题

IE 有一种相当奇怪的方式来做事情。 它不理解 min-widthmin-height 命令,而是将 widthheight 解释为 min-widthmin-height - go !

这可能会导致问题,因为我们可以能需要大小的框,需要更多文本或者用户调整文本。 如果我们只使用 widthheight 命令,那么非浏览器就不允许框调整大小。 如果我们只使用 min-widthmin-height 命令,那么我们不能控制 IE 中的宽度或者高度 !

在使用 background 图像时,这可能会。 如果使用的背景图像是 80px 和 35px 高,那么你将需要确保使用这里图像的框的默认大小是 80 x 35 x。 但是,如果用户调整文本大小,则框大小需要适当扩展。

要解决这里问题,可以将下面的代码用于带有 class="box"的框:

.box
{
 width: 80px;
 height: 35px;
}
html>body. box
{
 width: auto;
 height: auto;
 min-width: 80px;
 min-height: 35px;
} 

所有浏览器都会通过第一个CSS规则读取,但是 IE 将忽略第二条规则,因为它使用子选择器命令行。 浏览器会通过第二个规则读取第二个规则,因为这个CSS规则更加具体,CSS规则总是覆盖那些特定于java的CSS规则。

5.text-transform 命令

一个鲜为人知的但真正有用的CSS命令是 text-transform 命令。 这里规则的三个更常见的值是: text-transform: uppercasetext-transform: lowercasetext-transform: capitalize。 第一个规则将所有字符转换成大写字母,第二个字母变成小字母,第三个字母。

这个命令非常有用,以帮助确保整个网站的风格一致,特别是如果有许多内容编辑器。 比如你的风格指南要求标题中的单词必须以大写字母开头。 为了确保始终是这种情况,使用 text-transform: capitalize。 即使网站编辑忘记了大写,他们的错误也不会出现在网站上。

使用 text-transform: uppercase 可以更好地利用单词,因为屏幕读者可以用大写字母作缩写字母。 一个很好的例子是'联系我们',它被一些屏幕阅读器以'联系你'的形式发音。

6.在 IE 中消失文本或者图像?

IE 有一个非常奇怪的Bug,文本或者 background 图像有时会从视觉中消失。 这些项目仍然在那里,如果你在屏幕上 Highlight 或者点击刷新,它们通常会显示出来。 有点奇怪啊?

这个问题主要发生在 background 图像和被浮动元素旁边的文本上。 为了解决这个问题,只要将 position: relative 插入到消失元素的CSS命令中,对于一些奇怪的原因,通常会修复问题。 如果这不是( 有时候't ),那么在CSS中为问题元素指定一个宽度,应该修复问题。

7.不可见文本

有时你可能想让文本不可见。 可以见文本对于屏幕阅读器用户尤它的有用,也许为表单项指定标签或者在部分前插入标题。 不希望通过插入以下内容来更改外观外观? 让它们不可见,而且没有人使用可视浏览器知道它们在那里。

如果你使用打印或者手持CSS文件,你可能还想使文本不可见,因为某些信息可能不需要显示在这些媒介的任何一个页面上。

要使文本不可见,可以使用 display: none - easy ! 这对于隐藏手持设备( 如果支持 CSS ) 和打印网页的文本很适合,但对于许多屏幕读者来说不太好。 屏幕读者现在变得太聪明了,有些人会忽略任何有规则 display: none的文本。

因此,对于屏幕阅读器用户,需要一种新的方法: position: absolute; left: -9000px 它基本上接受文本并将它的放置在屏幕左边缘的左边,基本上使它的不可见。

用于手持设备的8.CSS文档

可以为pda和移动电话创建一个单独的CSS文档,只有在使用这些设备之一时才会激活。 越来越多的网站为打印 CSS文档,所以当用户选择打印页面时,网页会自动变成打印友好的页面。 你也可以对手持设备进行同样的操作。

下面的命令用于调用用于手持设备的CSS文档:

<linktype="text/css"rel="stylesheet"href="handheldstyle.css"media="handheld"/>

CSS文件中的CSS命令覆盖主CSS文档中的所有等效命令。 那么,在这个文件中应该放置什么命令?

理想情况下,你需要手持网络用户避免滚动。 要测试这个,在一个常规浏览器窗口打开你的网站,并将它的大小调整为 150px。 然后在文档的底部打开主CSS文件并插入一些新命令。 你在这里放置的命令应调整网站的布局,以便它不需要在 150px 宽度上进行水平滚动。 然后,打开一个新文档,剪切并粘贴这些新命令,并将它的保存为 handheldstyle.css ( 或者任何你想给它的NAME )。

你的网站提供给手持web用户应该与传统web浏览器相当不同,因为用户体验非常不同。 有关更多信息,如手持可用性插件的书是一个伟大的阅读。

9.3-d 按钮效果

回到网站的早期时间,3-d 按钮似乎已经被推入了一些时候,它们都被激发了。 当时,这只能通过图像和JavaScript来实现,但现在随着CSS的出现,我们可以创建这个效果。

你需要的主要CSS命令如下:

a {
 display: block;
 border: 1px solid;
 border-color: #aaa #000 #000 #aaa;
 width: 8em;
 background: #fc0;
}
a:hover
{
 position: relative;
 top: 1px;
 left: 1px;
 border-color: #000 #aaa #aaa #000;
} 

除了这些命令,你可以插入任何其他命令来达到想要的表达效果- 唯一的限制是你的想象力 !

10.每页上的导航代码相同

大多数网站在网站上搜索用户位置的导航项目,帮助用户定位自身。 这是基本可以用性的基本要求,但是可以能需要调整HTML代码 behind 和每个页面的导航。 那么我们能拥有两个世界中最好的? 是否可以在每页上突出显示导航,而不必在每页上调整HTML代码。 是的。

首先,你需要为每个导航项指定一个类:

<ul><li><ahref="#"class="home">Home</a></li><li><ahref="#"class="about">About us</a></li><li><ahref="#"class="contact">Contact us</a></li></ul>

然后你需要在 <body> 标签中插入一个 idid 应该代表用户在站点中的位置,当用户移动到不同的站点部分时应该更改。 在'主页'中,它应该读取 <body id="home">,在'关于我们'中应该是 <body id="about">,而在'联系我们'<body id="contact"> 中。

接下来,你将创建一个新的CSS规则:

#home. home, #about. about, #contact. contact
{
 commands for highlighted navigation go here
} 

这基本上创建一条规则,只有当 class="home" 包含在 id="home" 中,并且 class="about"id="about"class="contact" 中时才生效。 只有当用户在适当的站点部分,无缝创建突出显示的导航项目时,才会出现这些情况。


相关文章