10个必备的CSS技巧总结

所属分类: 网页制作 / CSS 阅读数: 1370
收藏 0 赞 0 分享

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

1. @font-face

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

CSS Code复制内容到剪贴板
  1. @font-face {   
  2.     font-family: Blackout;   
  3.     srcurl("assests/blackout.ttf"format("truetype");   
  4. }  

2. .clearfix

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

CSS Code复制内容到剪贴板
  1. .clearfix:after {   
  2.     content".";   
  3.     displayblock;   
  4.     clearboth;   
  5.     visibilityhidden;   
  6.     line-height: 0;   
  7.     height: 0;   
  8. }  

3. @media

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

CSS Code复制内容到剪贴板
  1. @media  screen and (max-width960px) {   
  2.      
  3. }  

4. transform: rotate(30deg);

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

CSS Code复制内容到剪贴板
  1. .title {   
  2.     transform: rotate(40deg);   
  3. }  

5. background-size

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

CSS Code复制内容到剪贴板
  1. body {   
  2.     backgroundurl(image.jpg) no-repeat;   
  3.     background-size: 100%;   
  4. }  


6. input[type="text"]

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

CSS Code复制内容到剪贴板
  1. input[type="text"] {   
  2.     width250px;   
  3. }  

7. margin: 0 auto;

很奇怪,没有任何特定的标准来使块级元素居中。这个方法可以使块级元素在父元素中居中。
 

CSS Code复制内容到剪贴板
  1. #container {   
  2.     margin: 0 auto;   
  3. }  

8. a {outline: none;}

在浏览你的网站的时候,点一个链接一个巨大的虚线框就横跨整个网页这将严重影响用户的心情。这个“a {outline: none;}”声明将移除这个,但为了易用性别忘了给你的链接也加上:focus状态。
 

CSS Code复制内容到剪贴板
  1. a {outlinenone;}  

9. overflow: hidden

这是最好的清除还没加载到你CSS里面的元素浮动的方法。使用它使网站的响应速度更快。
 

CSS Code复制内容到剪贴板
  1. .container {   
  2.     overflowhidden;   
  3. }  

10. color: rgba();

PNG图片因为它的透明性使它在网页设计中很流行并广泛使用,但是现在你可以使用下面这种方法同样实现透明。它使用红、绿、蓝三通道并设置其不透明度值来实现透明,像0.5对应%50的不透明度。
 

CSS Code复制内容到剪贴板
  1. .btn {   
  2.     color: rgba(0,0,0,0.5);   
  3. }  
更多精彩内容其他人还在看

CSS3实现背景透明文字不透明的示例代码

这篇文章主要介绍了CSS3实现背景透明文字不透明的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅谈CSS中的尺寸单位

这篇文章主要介绍了浅谈CSS中的尺寸单位的相关资料,浏览器的兼容性越来越好,移动端基本是清一色的webkit,经常会用到css的不同尺寸/长度单位,这里做个整理。感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

CSS中有些属性的前面会加上“*”或“_”所代表的意思

这篇文章主要介绍了CSS中有些属性的前面会加上“*”或“_”所代表的意思,需要的朋友可以参考下
收藏 0 赞 0 分享

CSS 设置滚动条样式的实例代码

这篇文章主要介绍了CSS 设置滚动条样式的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
收藏 0 赞 0 分享

纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)

这篇文章主要介绍了纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

纯css实现多级折叠菜单折叠树效果

这篇文章主要介绍了纯css实现多级折叠菜单折叠树效果,运用checkbox的checked值来判断下级栏目是否展开,通过css3选择器提供的checked伪类来实现此效果,感兴趣的朋友参考下吧
收藏 0 赞 0 分享

CSS Grid 网格布局全解析

这篇文章主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

css flex 弹性布局详解

这篇文章主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

CSS3 二级导航菜单的制作的示例

这篇文章主要介绍了CSS3 二级导航的制作的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

使用css禁用input、checkbox、select等html控件实现disable效果

这篇文章主要介绍了使用css禁用input、checkbox、select等html控件实现disable效果,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多