CSS书写规范

一、css简写规则
1.边距（4边）：

border-width:1px 2px 3px 4px;（分别表示上 右 下 左）
border-width:1px 2px 3px;（1=上，2=左=右，3=下）
border-width:1px 2px;（上等于下=1px，左等于右=2px）
border-width:1px;（四边相同）

2.简写边框（border）特定样式：

border:1px solid #ffffff;/*粗细   样式   颜色*/
border-width:0 1px 2px 3px;/*上、右、下、左*/

3.文字的缩写：

font-style:italic; /*斜体形式*/
font-variant:small-caps/normal; /*变体样式：小型大写字母/正常*/
font-weight:bold;/*粗体*/
font-size:12px;/*字体大小*/
line-height:1.2em(120%)/1.5em(150%);/*行高*/
font-family:arrial,sans-serif,verdana;/*字体样式*/
font:italic small-caps bold 12px/1.5emarrial,sans-serif;

4.背景图片：

background:#FFF url(log.gif) no-repeat fixed top/cover;
/*颜色      背景图    是否平铺   固定于可视区   上对齐/铺满整个盒子*/

二、引用css样式的方法：
1.Link

<link rel=”stylesheet” type=”text/css”href=”a.css”>
/*rel 关系  type 数据类型    href 路径*/

2.内部样式：

 <style>
     .aa {
        Color:red;
         }
 </style>

3.内联样式：

<div class="aa" style="color:red;width:100px;height:100px;"></div>

使用情景：
行内样式=>本地调试
内部样式=>单页面样式
外联样式=>便于后期维护
三、选择器：
1.规则结构：

h1{
color:red;
border: 3px solid #000000;
  }//选择器{属性:值;}

2.ID选择器:即与id属性对应的样式

定义:#a{
            color:red;
        } //这个定义对用id=”a”的元素

3.不常见选择器：
（1）父子结构，跟文档结构图对应（后代/子代选择器）
①p>span{},匹配所有p元素下的所有的span标签
②p+span{},匹配紧接着p元素后出现的第一个span标签，2者要有相同的父标签
（2）伪类和伪元素：
日常使用中主要是标签的几个伪类🔗hover:active:visited
以及:first-child:first:before:left:right:lang:focus:fist-line等等；
动态伪类可以应用到任何元素：

Input:focus{background:red}//当input标签获得焦点时背景变红

四、选择器优先级：
ID选择器>class选择器>元素选择器>通配符选择器(*)
注意：优先级相同时，会有代码执行顺序进行样式覆盖
样式优先级：
行内样式>内部样式=外联样式
五、使用float属性的元素要注意的问题
1.利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错，这时为元素添加border属性确定元素边界，错误原因即水落石出
2.float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug，所以不管float元素的内容如何，一定要为器指定width属性。另外指定元素时尽量用em而不是px左单位。
3.float元素的宽度之和要 小于100%
如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示，因此请保证卡运毒之和小于99%