CSS样式小技巧

做网页时，注重每一个小细节，精益求精。

1. 设置一个元素的边框和轮廓

当在制作网页的时候，有时默认存在的边框线，点击元素浏览器会出现轮廓是很不美观的。
比如说显示一个button：

只需要这样写：

 input[type="button"]{
           border:none;
           outline:none;
        }

2. 使用标签的次序

• 在使用标签的时候，为了更加规范，先使用语义化的。

比如说：<h3> <a> <img> <label> …

• 再用<div> <span> <strong> 。。。
• 当有多层嵌套时，比如说二级菜单。可以任意使用列表标签<ul > <ol> < dl>， < dl>里有< dd>< dt>（首选）

网站优化，一般三层嵌套为最佳。

3. 设置margin 值

• 当想给两个框设置Margin（间距）时，别忘了先浮动它们。
• 浏览器默认是有距离的。

4. box-shadow (阴影)

box-shadow:10px 10px 5px #f00;

box-shadow :h-shadow v-shadow blur spread color inset;

• h-shadow（水平阴影位置，必需，允许负值）
• v-shadow（水平阴影位置，必需，允许负值）
• blur（模糊距离，可选）
• spread （阴影大小，可选）
• color（阴影颜色，可选）
• inset（从外侧的阴影改变阴影内侧阴影）;

继续使用前面button的例子：

5. 设置框中溢出的文字为省略号

在固定宽高的框中添加的文字过多，溢出后如下设置：

overflow:hidden;
text-overflow:eclipse;
/*省略号*/
white-space:nowarp;

我们来看看效果，比如说京东官网页面：

6. 渐变（Gradients）

（1） 线性渐变（linear-gradient）

/*::选择器;      :和::都是一样的，在css3之后是：：*/
 div::after
        {
            content:"hello";
            /*和这句话起作用，必须有，可以""*/
            height:50px;
            width:200px;
            position:absolute;
            /*如果是relative,不显示效果的*/
            top:50px;
            background:linear-gradient(90deg,turquoise,#e40015,yellow);
        }
}

deg是指方向，将方向按90deg,180deg,270deg,360deg设置，效果如下：


我们可以看到图片是顺时针旋转的。

• 可以改变属性值，调出合适的渐近线。

• ctrl+F 快捷键搜索

7. 雪碧图

雪碧图（CSS sprite）：将很多小图标放在一张照片上，按需通过定位来使用。可解决资源问题，方便且占内存小。

• 上面的图要如下使用:
  
  这样写就好：

.i1{
    background: url("images/css-sprite.png") no-repeat left top;
}
.i2{
    background: url("images/css-sprite.png") no-repeat -20px top;
    /*把图整体往左移动*/
    /*雪碧图*/
}
.i3{
    background: url("images/css-sprite.png") no-repeat -40px top;
}
.i4{
    background: url("images/css-sprite.png") no-repeat left -16px;
}
.i5{
    background: url("images/css-sprite.png") no-repeat -20px -15px;
}

• 小知识点：

• 设置width和height值时，有时不需要固定值，可以用百分比来定义，使得它的宽高值随浏览器变化。

• 在一个框有一个字体图标和文字，字体图标是绝对定位的（不占位置），所以会覆盖文字。
  解决方法：设置行高大于高度，把文字挤下来。

• 在使用h1~h6标题标签，但是不想继承标题的粗体，设置 font-weight: normal;（默认的正文字体样式）即可。