CSS

浏览数：28 / 时间：2015年06月09日

CSS
   (1)什么是CSS?
   级联样式表/层叠样式表 cascading stylesheet 为页面提供展现方式(即数据以何种方式去显示)

   (2)w3c推荐网页设计标准
       数据与结构:html
       样式:CSS
       行为:javascript

    (3)css基本语法
        选择器{
            属性名：属性值；
            。。。。
        }

     (4)选择器
       元素选择器(选择器的名称是一个标签的名称)　　——>伪元素选择器
           标签的名称{
                属性名：属性值；
                ......
            }

       class选择器　　　　　　　　　　　　　　　　 ——>伪类选择器
         .任意名称{
              属性名：属性值；
              .....
         }

         或者
         标记名称.任意名称{

         }

         id选择器
         #任意的名称{
            属性名:属性值;
            ......
         }

(5)样式的继承
     子标记会继承父标记的样式
     <div id="nav">
         <p></p>
     </div>

   (6)样式的优先级
     行内样式>内部样式>外部样式
     id选择器>类选择器>标签选择器

    (7)重点的属性
       文本相关属性
       font-size:12px;//字体大小
       font-weight:900//磅
       text-align:right/center/left;
       letter-spacing:5px;//文字之间间隔
       white-space:nowrap;//不换行
       text-decoration:underline;//下划线文本修饰属性
       line-height://行高；


       背景相关属性
       background-color:#ffff;背景颜色
       background-image:url(images/1.jpg);背景图片
       background-repeat:no-repeat; repeat-x repeat-y
       background-position: //背景偏移用于截取相应小图


       边框
       border:1px solid red;//宽度样式颜色
       border-left:
       border-right:
       border-top:
       border-bottom:

       位置
       width:100px;
       height:100px;
       margin:10px 11px 12px 13px;
       margin-top:10px;
       margin-right:11px;
       margin-bottom:12px;
       margin-left:13px;
       margin:1px; 上下左右都是1px;
       margin: 20px auto;上下位20px 左右自动居中

       padding://内边距
       padding-left:
       padding-top:
       padding-right:
       padding-bottom:
       padding:10px 11px 12px 13px;

       块级标签和行内标签(自行填充)
       块元素：
          另起一行：h1/p/div/form/ul/ol/hr/
          行内标签：span/img/br/a

       position属性
         static;//默认摆放，从左到右，从上到下
         absolute://按照父元素的位置偏移
         relative:先按照默认方式摆放，然后偏移


    float属性:
        left；
        取消块级元素的中换行，向左浮动；