首页 > 代码库 > CSS

CSS

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;
        取消块级元素的中换行,向左浮动;

CSS