css（层叠样式表）基础知识与常见案例

css（层叠样式表）基础知识与常见案例

一、基础知识

1.作用：渲染页面；提高工作效率,将html和样式分离 ★

2.css和html元素的整合（三种方式）★★
（1）方式1:内联样式表 
    通过标签的style属性设置样式
    例如：<xxx style="属性:值;"/>
（2）方式2:内部样式表（常用） 
    在当前页面中使用的样式，通过head标签的style子标签导入        
    例如:
    <style type="text/css">
        选择器{
            属性:值;
            属性1:值1;
        }
    </style>    
（3）方式3:外部样式表 
    有独立的css文件，后缀名:.css，通过head标签的link子标签导入
    例如:<link rel="stylesheet" href="css/1.css" type="text/css"/>
    
3.选择器（六类）★★
（1）id选择器
    要求:
    html元素必须有id属性且有值   <xxx id="id1"></xxx>
    css中通过"#"引入,后面加上id的值  #id1{...}
（2）class选择器
    要求:
    html元素必须有class属性且有值 <xxx class="cls1"/>
    css中通过"."引入,后面加上class的值  .cls1{...}
（3）元素选择器
    直接用元素(标签)名即可   xxx{...}
（4）属性选择器（派生的选择器）★
    要求:
    html元素必须有一个属性且有值  <xxx att="val1"/>
    css中通过下面的方式使用：元素名[属性="属性值"]{....}                    
    例如:xxx[att="val1"]{....}                
（5）后代选择器（派生的选择器）
    选择器 后代选择器{...}   
    在满足第一个选择器的条件下找后代的选择器,给满足条件的元素添加样式
（6）锚伪类选择器（了解的选择器）
    a:link {color: #FF0000}        /* 未访问的链接 */
    a:visited {color: #00FF00}    /* 已访问的链接 */
    a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
    a:active {color: #0000FF}    /* 选定的链接 */            
（7）选择器使用小结:
    id选择器:一个元素(标签)
    class选择器:一类元素 
    元素选择器:一种元素
    属性选择器:元素选择器的特殊用法        

4.各种属性（字体属性，文本属性，其他属性）（了解）★
（1）字体
    font-family:设置字体(隶书) 设置字体家族
    font-size:设置字体大小
    font-style:设置字体风格
（2）文本:改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进
    color:文本颜色
    line-height:设置行高
    text-decoration: 向文本添加修饰。 none（不加下划线） underline（加下划线）
    text-align:对齐文本
（3）列表:
    list-style-type   :设置列表项的类型 例如:a 1  实心圆 
    list-style-image:设置图片作为列表项类型 使用的时候使用 url函数  url("/i/arrow.gif");
（4）背景:
    background-color:设置背景颜色
    background-image:设置图片作为背景 使用的时候使用 url函数  url("/i/arrow.gif");
（5）尺寸:
    width :宽
    height:高
（6）浮动:
    float: 定义元素在哪个方向浮动  可选值 left right    
（7）分类:
    clear    :设置元素的两边是否有其他的浮动元素；值为:both 两边都不允许有浮动元素
    display:设置是否及如何显示元素。
        none 此元素不会被显示。 
        block 此元素将显示为块级元素，此元素前后会带有换行符。 
        inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

5.框模型（理解）★
  一个元素外面有padding(内边距)  border(边框)  margin(外边距)
  padding:元素和边框的距离
  margin  :元素最外层的空白
  设置值的顺序:上右下左

6.标签        
  div    :块标签 <div></div>    
  span:行内的块标签 <span></span>

  
二、常见案例

案例：用div+css重新布局首页
（1）需求:通过div+css将首页信息展示
（2）技术分析：div,css,选择器,属性,框模型     
（3）步骤分析:
    a.创建一个div
    b.在这个div中创建8个div
    c.第1个div logo 嵌套三个div
    d.第2个div 菜单 嵌套一个列表 display:inline
    e.第3个div 轮播图    
    f. 第4个div 热门商品 
      标题标签 图片 display:inline
      fa:两个div
        左边的div 展示一张图片
        右边的div 展示所有商品
      fb.右边的div中嵌套10个div
    g.第5个div 广告
    h.第6个div 最新商品
    i. 第7个div 广告
    j. 第8个div foot 版权 两个p标签