10个网页设计师必备的CSS技巧（转）

清疚 2021-12-22 08:53 279阅读 0赞

英文原文：[10 Essential CSS Rules for Web Designers][]

CSS是网页设计师的基础，对CSS的了解能使他们能够设计出更加美观别致的网页。使用CSS技巧来巧妙地处理CSS是非常令设计师着迷的事情。在CSS 的深海世界里有很多有意思的东西，你只需要找到最适合你的就好。当然我们不可能一下子就记住所有CSS的规则和语法，但为了以后的发展我们还是应该记住那 些非常有用的CSS技巧。今天我们精心准备了10条对网页设计师最有用的CSS技巧，如果你想设计出独一无二脱颖而出的网页你必须得好好注意了。这篇博客 是在与一家提供高质量印刷服务的在线印刷公司“ Business Card Printing”合作时写的。

**1. @font-face**

一种用其他服务器上的字体的好方法。很明显，如果你不能在托管服务器上找到你需要的字体，你可以在样式中使用这个方法来引入你需要的字体。

@font-face {
        
        font-family: Blackout;
        src: url("assests/blackout.ttf") format("truetype");
    }

**2. .clearfix**

如果你没法清除元素的浮动，这是清除浮动一种方法。你可以对任何HTML元素单独使用这种方法。

.clearfix:after {
        
         content: ".";
         display: block;
         clear: both;
         visibility: hidden;
         line-height: 0;
         height: 0;
     }

**3. @media**

@media 可以设置你当前响应网站的媒介，它能帮助你根据用户的显示器调整网站的宽度。

@media  screen and (max-width: 960px) {
     }

**4. transform: rotate(30deg);**

结合这些转换属性和CSS转场效果来创造有意思的动态效果。

.title {
             transform: rotate(40deg); }

**5. background-size**

这条规则帮助你在网站中适应全屏幕背景。这不像之前的CSS版本必须写很笨重的代码。

body {
        
         background: url(image.jpg) no-repeat;
         background-size: 100%;
     }

**6. input\[type="text"\]**

这个input\[type="text"\]选择器和其他高级选择器把你从一般水平带到高级水平非常有帮助。使用属性选择器来控制输入元素的提交版本或为一个外链增加一个图标这样很不错吧？

input[type="text"]{
          width: 250px; }