CSS基本语法

1CSS入门

1.1引入
    HTML：负责网页的结构
    css：负责网页的美观（样式）
1.2定义
    CSS（Cascading Style Sheet 层叠样式表） 简称 样式
    主要： 负责网页的样式
注释有  /*   注释内容
        */
1.3CSS的使用方式
    1）行内的样式
        注意
            1）使用标签的style属性进行CSS控制，CSS卸载style属性值中
            2）弊端：只能控制一个标签的样式
        <a href=""  style=" font-size：80px; color：#000;"></a>
    2） 内部的样式
        注意：
            1）使用style的标签进行CSS控制，CSS的内容写在style标签中
            2）一个可以控制多个标签样式
            3)弊端：和HTML标签混杂在一起。不好维护，css样式内容无法在多个HTML页面中使用
        <style type=‘text/css">
            a{
                font-size:24px;
                color:#000;
            }
        </style>
    3）外部样式（推荐使用）
        注意：
        1）建立独立后缀名为css的文件，css内容写在该文件中
        2）在使用css的HTML页面中，导入外部的css文件
        href :表示外部文件的位置
        rel: 表示关联的是样式表 
        <link href="01.css" rel="stylesheet"/>

    2css语法
        选择器（selector）：使用选择器选择需要添加样式的标签
        css属性（property）：给选择的标签添加什么样式，例如；字体大小，颜色，背景...
        css值（value）：添加样式的具体的值、12px,红色，背景图片

    2.1选择器
        标签选择器
            作用：选择同名的标签
            注意：
                1）选择到所有的同名标签
            div{
            }
        类选择器
            作用：选择同一类的标签
            .cc{
            }
            <p class="cc"></p>
            注意：
                1）选择的标签必须有class的属性，同类的标签使用同名。
                2）当一个标签同时被标签选择器和类选择器同时选中，则类选择器优先
        ID选择器
            作用：选择一个标签
            #id{
            }
            <p id="id"></p>
            注意：
                1）选择的标签必须要有ID属性
                2）在同一个HTML页面中，建议不要出现俩个同名的ID属性的标签后面使用JavaScript代码选择标签的时候
                getElemeById("id属性值")
                3)id的优先级是最高的

        并集选择器
            .c1,#id{
            }
            作用：当多个选择器的css内容相同，那么可以使用并集选择器来合并css内容

        交集选择器
            div span(id span)(c1 span)
            <div class="c1" id="id"><span></span></div>
            作用：选择某个选择器中的子标签

        通用选择器
            *（代表所有的标签）{
            }
            作用：选择到所有的标签的

        伪类选择器
            注意：
                1）在css定义中 a:hover  必须被置于 a:link  和 a:visited 之后才有效，
                2）在css定义中 a:active 必须被置于   a:hover之后才有效
            正确顺序： link  visited hover active
            作用：控制标签在不同的状态下的样式
            标签的四种状态
                link: 没有访问的状态
                    a:link{
                        font-size:24px;
                        color:#f00;  红色
                    }
                visited：已经访问过的状态（鼠标点下且松开）
                    a:visited{
                        font-size:24px;
                        color:#ccc;   灰色
                        text-decoration:none;   
                    }                           
                hover： 鼠标经过状态
                    a:hover{
                        font-size:24px;
                        color:#00f;  蓝色
                        text-decoration:none;   
                    }                           
                active：鼠标激活（按下去但是没有松开）的状态
                    a:active{
                        font-size:24px;
                        color:#0f0;     绿色
                        text-decoration:underline;  
                    }                           

    2.2常用的CSS属性和值
        css文本
            color: #000；文本的颜色
            letter-spacing：10px字符间距
            text-align:center ，right，left;对齐方式 默认左对齐
            text-decoration：underline； 文本修饰 下划线underline 中划线-line-through 上划线 -overline 没有 none
            单词间距
            word-spacing：30px;  中间有空格的算词的分界线

        css字体
            字体类型
                注意：这里的字体类型是读取系统的默认的字体库尽量使用通用的字体，如果你设置的字体
                用户的系统没有，就是使用默认的宋体显示
            font-family：“黑体”； 找系统里面支持的字体
            字体大小
            font-size：10px;
            字体样式 正(normal) 斜(italic)
            font-style：italic;
            字体的粗细  bold加粗 
            font-weight；bold；
            简写属性
            font：字体样式italic  字体粗细bold 字体大小36px 字体类型 "黑体“

        css背景
            背景颜色
            background-color：#00f;
            背景图片
            background-image：url(地址)
            设置背景图片是否重复 或如何重复
            no-repeat；不重复
            repeat-x：x轴重复
            repeat-y;y轴重复
            repeat：x和y轴重复（默认的值）
            background-repeat：no-repeat；
            背景图片的起始位置
            参数一：图片显示的起始位置
            参数二：图片从指定的标签的那个位置开始显示
            top     left
            center  center              
            bottom  right
            background-position：top left；
            简写属性
            background：颜色 背景图片URL（） 是否重复 no-repeat 位置 top  center；
        css列表
            list-style-type
            属性
                disc  实心圆
                circle 空心圆
                square 方块
                none：不要
            list-style-image 作为列表单元前面的符号的图片
            list-style-image：URL地址）；

            例子：
                ul{
                    列表类型
                    list-style-type: square；
                }
                系统菜单
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
        css表格
            table{
                合并表格边框
                border-collapse：collapse；

            }
        css边框
            div{
            边框的颜色
            简写属性
            1）设置方向： 上  右 下 左 默认顺序  
            2）如果当前方向没有设置颜色：那么取对面的颜色
            3）如果写一个则代表全部
            border-color：#0f0 #00f #0f0 #c60; 
            border-left-color：  左边线的颜色
            border-right-color： 右
            border-top-color：上
            border-bottom-color：下
            边框的宽度
            border-width:10px;  
            border-left-width；
            border-right-width：
            border-top-width：
            border-bottom-width:
            边框的样式***
            solid 单实线
            none：无
            dashed 虚线
            dotted：点
            double：双实线
            border-style：none；无
            border-left-style：
            border-right-style：
            border-top-style：
            border-bottom-style：            
            }
    所有属性的简写属性：
    border： 宽度  样式  颜色；
    border：2px  solid #f00;


3.盒子模型  
    3.1定义：
        可以把HTML页面页面上的每一个标签看做是一个盒子
        盒子相关的属性
            宽度和高度：（width和height）：决定；这个盒子的容量
            设置边框
            border：3px solid #000;
            padding:内边距;边框和内容的距离
            border：边框 盒子的厚度
            设置内边距
            padding-left：10px;
            设置上边距
            padding-top：10px;

            盒子与盒子之间的距离
            margin:外边距

    css的定位
        定位属性（
        position：
        属性
        相对定位 ：相对于元素原来的位置移动
        relative
        left     向右移（左边留空白）
        top  向下移
        决定定位：对于父标签而言当前的位置发生移动
        用于广告
        absolute
        固定定位 对于浏览器而言，当前位置发生移动
            （不会随着滚动条的滚动，位置发生改变）
        fixed
    CSS的布局漂浮

    float 
    属性值：
    none
    left    文本属性流向对象的右边
    right   文本属性流向对象的左边