每个网页设计师都应该知道的 CSS 技巧

每个网页设计师都应该知道的 CSS 技巧

1.字体速记

像往常一样，我们将字体样式编写如下

 字体粗细：粗体；  
 字体样式：斜体；  
 字体变体：小型大写；  
 字体大小：1em；  
 行高：1.5em；  
 字体系列：verdana，无衬线；

但是没有必要使用上面的长代码，你可以简单地使用下面的缩短代码：

 字体：FONT-WEIGHT FONT-STYLE FONT-VARIANT FONT-SIZE/LINE-HEIGHT FONT-FAMILY； 字体：粗斜体小型大写字母 1em/1.5em verdana,sans-serif；

2. 使用两个或多个类选择一个元素

另一个 CSS 技巧是您可以为每个 HTML 标记分配多个类，以便使用类属性中的空格分隔多个类

**HTML**  
 <p class="text side">...</p> **CSS**  
 .text.side{  
 }

3. 将您的打印样式写在一个单独的文件中

您可以使用媒体查询进行打印，也可以不使用媒体查询写入单独的文件，只需在 HTML 链接标签中添加媒体属性即可。

 <link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

4. CSS 中的垂直对齐

想象一下，您的网站上有一个导航菜单，其高度设置为 2em。现在您在 CSS 中使用 vertical-align 命令。但是使用vertical-align 将没有效果，文本仍然会放在框的顶部！

那么该怎么办？

将 line-height 的值设置为所需元素的高度就足够了！

在这里，我们想要的元素的高度是 2em，所以将 line-height 值设置为 2em 就足够了，文本将放置在框的中间。

5. 覆盖所有样式

他应该谨慎使用，因为如果你对所有事情都这样做，从长远来看，你会发现自己有麻烦。但是，如果您想为特定元素覆盖另一个 CSS 样式，请使用 ！重要的 在 CSS 中的样式之后。例如，如果我希望我网站的特定部分中的 H2 标头是红色而不是蓝色，我将使用以下 CSS：

 .section h2 {颜色：红色 **！重要的** ; }

继续……

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/39232/38382511