建站资讯
|
想要做好网站设计？这10个CSS技巧怎能不知道 CSS（层叠样式表）是一种用来表现HTML或XML等文件样式的计算机语言。CSS 能够对网页中元素位置的排版进行控制，支持几乎所有的字体字号样式，可谓是网页设计师的基础课程。对CSS越了解，网页设计师越能巧妙修饰、编辑网页模式，设计出更加精致美观的网站。不过有关CSS的知识和技巧实在是太多了，我们当然也不可能一下子记住所有的CSS规则和语法，但这有一些非常实用的CSS技巧。如果你想要让自己的网站更加独特，从一众竞争对手中脱颖而出，那下面这10条CSS技巧你可一定要掌握。 1. @font-face如果你不能在服务器上找到想要的字体，你可以在样式中使用这个方法将自定义的字体嵌入到网页中。目前，Internet Explorer 9, Firefox, Opera, Chrome, 和 Safari支持@font-face 规则，但Internet Explorer 8 及更早IE版本不支持。  2. .clearfix通过浮动，我们在布局上很是方便，但也会给网站带来一些副作用。如果你想要清除元素的浮动，.clearfix是一种很好的方法。你可以对任何HTML元素使用。  3. @media使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面时，@media 是非常有用的。在你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。  4. transform: rotate(30deg);结合这些transform属性和CSS转场效果，你可以在网站中创造出有趣的动态效果。  5. background-sizebackground-size 属性规定背景图像的尺寸。学会使用这个技巧可以让你在网站中适应全屏幕的背景，这也不像之前的CSS版本那么麻烦，不需要写笨重、冗长的代码。  6. input[type="text"]Input[type="text"]是关于选择器定义的一个CSS属性。它和和其他高级选择器一样，可以帮助你进阶，提高建站水平。使用这个属性选择器来控制输入元素的提交版本或为一个外链增加一个图标都是不错的选择。  7. margin: 0 auto;Margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right。因为Margin后面跟的是0和auto，这表示上下边界为0，左右根据宽度自适应相同值，也就是居中。这个技巧可以是块级元素在父元素中居中。  8. a {outline: none;}在网站上点击链接时出现一个横跨整个页面的虚线框，这将严重影响用户愉悦的心情。使用“a {outline: none;}”这个属性就能周围的虚线框，但为了网站的易用性还要记得给链接加上:focus状态。  9. overflow: hiddenOverflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，其实它也可以清除元素浮动，加快网站相应速度。  10. color: rgba();PNG图片因为它的透明度在网页设计中受到流行并广泛使用，但是现在你可以使用下面这种方法实现透明度（透明背景色、透明边框色、透明前景色等）。RGB色彩模式是工业界的一种颜色标准，通过对红（R）、绿（G）、蓝（B）三个颜色通道的变化以及它们之间相互的叠加来得到各种各样的颜色，而RGBA在RGB的基础上添加了控制Alpha透明度的参数。不过它最大的弊端可能在于与占据大市场份额的IE浏览器不兼容。  |
