css

CSS:层叠式样式表
CSS语法风格
就是一个选择器，键值对形式
学习重点
CSS属性
颜色表示：单词，十六进制(#ff0000),rgb(255,0,0)

选择器
    标签选择器：作用与当前页面所有该标签,不管标签在哪里，都会被施加样式。
                通常给标签施加默认样式。

    ID选择器：id属性有关，任何标签，都有id属性，页面上不能有相同id属性值的标签
            命名规范：
                    必须字母开头，数字，下划线
                    大小写敏感
                    名字不能是标签名
                    名字中不能有空格

            main_nav  content header footer p1 p2

    类选择器  Class选择器
             一个标签可以有多个class，中间使用空格隔开
             一个类选择器可以施加给多个元素


    标签名.类名(交集选择器)
    

    后代选择器    中间有空格

    div.box p{}   选中页面中class=box的div的后代p  
    div.box p.haha 选中页面中class=box的后代中class=haha的p标签 


    分组选择器（并集选择器）
    选择器,选择器{

    }

    通用选择器
    *{
        //一般用于清除默认的margin和padding
    }

CSS重要特性
继承性
具有继承性的属性
color：前景色
font系列 font-size font-weight font-style font-family:字体
text系列 text-algin text-decoration 下划线
list系列 list-style
line-height 行高
cursor:鼠标形态

不能继承
        backgroud-color
        float
        position
        盒模型：margin padding border

层叠性
    一个标签获得的样式可能出现冲突，就是层叠性需要解决的问题

    权重：id 100 类 10  标签 1  继承的权重是0  权重相同，就近原则

    !important 权重无限大,继承来的还是0

样式表的维护
1

盒模型：CSS认为网页上的所有标签都是盒模型
盒模型：width宽度（块级元素：默认是父盒子100% 行内元素：默认就是内容宽度） height高度（不设置就是0） padding内边距 margin外边距 border：边框

一个盒子占网页宽度：width+左右padding+左右border

padding:内边距,内容与边框距离，子盒子与父盒子距离 有背景颜色，就是盒子的颜色

    有些元素默认有padding  ul

border：边框

margin外边距 没有背景颜色 body除外(body设置背景颜色，margin区域有颜色的)

塌陷现象
        上下盒子margin冲突，谁的值大听谁的

盒子居中
    .box3{
        width: 500px;
        height: 80px;
        background-color: green;
        margin:0 auto;//盒子居中
        text-align: center;//文本水平居中
        line-height: 80px;//文本垂直居中
        color: red;
        font-size: 30px;
    }