CSS基础总结

CSS概述

• HTML缺陷
  
  • 不能适应多种设备
  • 要求浏览器必须智能化足够大
  • 数据和显示没有分开
  • 功能不够强大
• CSS优点
  
  • 使数据和显示分开
  • 降低网络流量
  • 使整个网站视觉效果一致
  • 提高开发效率

CSS语法

        <style type = "text/css">
        p{  //所有的p标签所应用的样式,只用一个就行
            font-weight:bold;
            font-style:italic;
        }
    style>

选择器{属性名：属性值 ;}
       选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号
       属性名和冒号之间最好不要有空格。

CSS与HTML相结合

• CSS中注释，/* */

• 1,行级样式表:可以写在开始标签里面,采用style属性完成
  *

  你好！

• 2,内部样式表:采用style标签完成,针对整个页面

    <style type = "text/css">
        p{  
            font-weight:bold;
            font-style:italic;
        }
    style>

• 3,外部样式表:采用外部css文件完成,针对多个页面
  
  • 文件中不用写style标签了
  • 要想在页面中使用,需要引入
    

css选择器

• 1,基本选择器
  
  • a,标签选择器:就是选择了页面上一类标签

        div{
            border:1px solid red;
        }

* b,类选择器:规定用圆点. 来定义,比较灵活,哪个想用哪个引    //如两个标签用同样的样式

        .one{
            border:1px solid red;
        }

<div class = "one">萌萌哒^_^div>

* c,ID选择器:用#来定义,针对特定的一个标签用(ID是唯一的)

    #two{
        border:3px dashed green;
    }
    
你好
* d,通用选择器,*来定义,代表页面上所有的标签
    *{
        padding:0px;
        margin:0px;
        color:blue;
    }

* 2,扩展选择器
* a,组合选择器:用逗号隔开多个选择器

        div,p,h1,.one,#two{
            border:5px double blue;
        }

* b,关联选择器(后代选择器):用空格格开,表示
    * h3里面的i标签会变红色,下面的i标签不会变

        h3 i{
                color:red;
            }
            <h3>我爱<b>北京<i>开安门i>b>h3>br>
            <i>北京i>

* c,伪类选择器
    * 1):静态伪类:只能用于超链接(2个),:link,:visited
        * link:超链接点击之前的颜色
        * visited:点击之后的颜色
            a:link{
                color:red;
            }
            a:visited{
                color:green;
            }
        * a()与a:link{}区别:
            * a()包括了锚点,a:link{}不包括锚点
    * 2):动态伪类:适用于各种标签
        * :onfocus 控件获得焦点
                input:focus{
                    border:1px solid red;
                    color:green;
                    background-color:#ffccff;
                }
                
        * :active 点击控件的时候
        * :hover 当鼠标移动到某个控件上方的时候

样式表冲突的解决

• 1,行级 > 内部 > 外部
• 2,ID选择器 > 类选择器 > 标签选择器
  * 外部ID选择器 > 内部标签选择器
  * 原则:就近原则,指定义还有引入的位置

link标签的rel属性

• rel属性值
  
  • 1,stylesheet:定义样式表
  • 2,alternate stylesheet:候选样式表

css各种属性

• 字体属性

        p{
            font-size:30px;
            font-family:华文彩云,幼圆,宋体;     //","隔开,前面的优先调用,当字体库中没有时再调用其它
            font-weight:bolder;
            font-style:italic;
            font-variant:small-caps;                //小写变大写
        }

• 文本属性
  
  • color,direction,letter-spacing(字母间距),text-align,text-decoration

        p{
            letter-spacing:0.1cm;
            word-spacing:0.5cm;
            text-align:center;              //容器的中间
            text-decoration:underline;      //修饰,下划线
            text-transform:capitalize;      //每个单词首字母大写
            color:red;
        }

• 背景属性

        body{
            background-image:url(images/1.jpg); //背景图片
            background-repeat:no-repeat;            //不重复,repeat-x横向平铺
            background-position:center center;  //位置,正中
            background-attachment:scroll;       //背景滚动，fixed跟着滚动条一起移动，scroll不动
            background-color:#ffff66;           //背景颜色
        }

• 列表属性

        ol{
            list-style-image:url(images/1.jpg); //列表图片
            margin-left:100px;                  //图片的位置
        }

• 盒子模型
  
  

  • padding:是内容到边的距离
    
    • //两个值(上下,左右)，三个值(上,左右，下),四个值(上,右，下，左【顺时针】)
  • border: 是边的粗细
  • margin:是控件到控件的距离

        div{
            width:100px;
            height:100px;
            border:1px solid red;
            padding:10px;
            margin:30px;        //浏览器默认body 8px
        }

• 定位属性position
  
  • 1,绝对定位: 原点在父容器的左上角,向上、向右为正

        div{
            position:absolute;
            left:20px;
            top:20px;
            width:200px;
            height:200px;
            border:1px solid red;
        }

        p{
        position:absolute;
        left:20px;
        top:20px;
        }

* 2,相对定位：相对于自己原来的位置(左上角为原点)

        #d1{
            position:relative;
            left:50px;
            top:-50px;
            width:200px;
            height:200px;
            border:3px dotted red;
        }

* 顺序流:所有标签初始排列顺序为顺序流
    * 两种情况控件脱离顺序流
        * 1,把控件的位置设置为绝对定位absolute
        * 2,当设置控件的float属性时

float,z-index,overfloat属性

• float属性:浮动(向左和向右)

            //两个div左右并排
            div{
                width:200px;
                height:200px;
                float:left;
            }

            #d{
                background-color:#ff99ff;
            }

            #d1{
                background-color:#00ff33;
            }

* 用clear去除float
    * clear:both;       //两边都不要float对象,但没有去掉float,还是脱离顺序流

• overflow:盒子里的内容超出类范围

  • overflow:auto; //浏览器自己解决,会给你自动加滚动条
  • visiable; //会自动加大,一般用auto
  • hidden; //隐藏

• z-index属性:垂直于页面的方向看作一个层,值越大离我们越近（大的在上面,小的在下面）

鼠标的样式

• hand不支持就改成pointer

        p:hover{
            cursor:pointer;
        }

滤镜(了解)

        style = "filter:wave()"

导航栏菜单制作

    <style type="text/css">
        li{
            float:left;
            margin-left:20px;
        }

        ul{
            list-style:none;
            width:900px;
            height:30px;
            background-color:black;
            padding-top:10px;
            padding-left:0px;
        }

        a{
            text-decoration:none;
            color:white;
        }
    style>