CSS样式小技巧

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

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

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

只需要这样写：

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

2. 使用标签的次序

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

比如说：

…

• 再用
  。。。
• 当有多层嵌套时，比如说二级菜单。可以任意使用列表标签
  < 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;（默认的正文字体样式）即可。