CSS初探

题外话

前端开发接触最多的就是浏览器，那么主流的浏览器都有哪些呢？
有人可能会说搜狐、百度、UC这些比较常见的浏览器，但是主流浏览器的评判标准不仅仅是市场占有率，还要有自己独立的内核，以上这些都没有。
一个浏览器最重要的是两个东西，一个是shell,浏览器外壳，这个基本都能写，重点就是内核，浏览器运转的快不快，识别代码的路径问题，优化问题都是内核来干的。

主流浏览器           内核
IE                           trident
Opera                    presto
Safari                    Webkit
Google chrome    Webkit/blink
Firefox                    Gecko
这个会不会都不影响开发工作，但是了解自己常打交道的浏览器，应该算是基础吧。

一、写布局的三种方式

第一种是在div的style里面写，第二种是在head里面用<style></style>双标签，第三种是引用外部css文件，用<link>标签

二、布局优先级：！important>行间样式>id>class|[id]属性通配符>*页面通配符

权重比（上面数字每一位是256进制，不是一百一千）

组合选择器

除了上图几个单个选择器，还可以多个选择器组合，根据权重值决定谁的优先级，优先级一样的，后来居上

父子（后代）选择器：不一定都是标签、也不一定有直接的父子关系 div .box em{}都行,从右向左找，中间用空格隔开

直接子元素选择器：div>em{}

并列选择器(交集)：div.demo{}，中间无空格，多个限制条件,选中某一个元素，标签必须在前面
<div>1</div>
<div class="demo">2</div>
<p class="demo">3</p>

分组（并集）选择器em, strong, span{} 逗号隔开

兄弟选择器：用加号链接,会选中符合所有条件的最后一个选择器的所有标签（选择器之间紧跟着，隔开的不算）
div+a{
}

通用兄弟选择器：用～链接（符合先后顺序的所有标签）

属性选择器
/*设置有id属性的p标签*/
p[id]{
}
/*设置id=cc的p标签*/
p[id=cc]{
}

区别
共同点

css3新增

<!--选中同级别的第一个标签，不区分类型-->
        p:first-child{
            color: red;
        }
        /*选中同级别同类型的第一个*/
        p:first-of-type{

        }
        /*选中同级别的第几个标签，不区分类型，只要同级别第几个是p标签，就会变，
        n可以是数字，也可以是odd所有奇数，even所有偶数
        xn+y:x\y随便写，n从0开始*/
        p:nth-child(2){

        }
        /*选中同级别同类型的第几个标签，区分类型，只有同级别第几个是p标签，才会变*/
        p:nth-of-type(2)
        {

        }
        /*选中父级只有一个子元素的那个p标签*/
        p:only-child{

        }
        /*选中同级别只有一个p标签的那个p标签*/
        p:only-of-type{

        }
        /*选中alt属性值以abc开头的p标签*/
        p[alt^=abc]
        {

        }
        /*选中alt属性值以abc结尾的p标签*/
        p[alt$=abc]
        {

        }
        /*选中alt属性值包含abc的p标签*/
        p[alt*=abc]
        {

        }

三、布局

1em=1font-size,2em就是空两格

div{
    text-align:center;/*水平居中*/
    height:200px;
    line-height:200px;/*跟标签高度一样,可实现单行文本垂直居中*/
    text-indent:2em；/*首行缩进，实现段落缩进*/
}

span{
    text-decoration:line-through;/*可实现价格删除线效果*/
    cursor: help;/*光标挪到上面时的鼠标样式，有多个，根据自己需要*/
}
/*伪类：实现鼠标挪上去时标签的改变*/
a:hover{
    background-color:red;
}

css元素分类

凡是带有inline的元素，都有文字特性，多张图片放一起时会有间隔，是因为代码换行了
. 行级元素 inline
feature:内容决定元素所占位置，不可以通过css改变宽高
span strong em a del 等

. 块级元素 block
feature:独占一行，可以通过css改变宽高
div p ul li form address

. 行级块元素 inline-block
feature:内容决定大小，可以改宽高

           /*斜体*/
            font-style: italic;
            /*粗细*/
            font-weight: bold;
            /*字体样式 字体如果不存在会使用系统默认字体，逗号后面可以有备选方案
            如果想单独设置中文、英文的字体，可以设置两种字体，英文在前，中文在后
            英文字体只包含英文，中文字体包含英文，可以处理英文
            */
            font-family: "楷体","微软雅黑";
            /*跟上面代码效果一样 style\weight可以省略，size\family不可以省略,并且位置不能换*/
            font: italic bold 10px "楷体";