CSS学习笔记

整理自某学习视屏（具体也忘了，或许是兄弟连，或许是其他人的）

<!--
CSS
    cascading style sheets层叠样式表
    CSS就是要对网页的显示效果实现与Word一样的排版控制
    一个样式表由演示规则组成
    HTML是为了将内容放到页面上，而CSS是为了样式
    任何一个标签都可以有四个属性：
        id class style name
    例1：一个段落，字体：红色；背景：黄色;有一个2个像素的实现边框，字体大小为4cm
    实现：style="color:red;backcolor:yellow;font-size:4cm;border:2px solid blue;text-align:center"
语法：
    格式：属性1：值；属性2：值；属性3：值……
          属性和值用冒号隔开；多个属性用分号隔开
        color，background-color，font-size，border边框，text-align
    单位：
        颜色：#rgb #8fa #aaffaa red（green） 数字（0-255）
        字符大小：em  元素的字体的高度
              px  像素（常用）
              上述是相对单位
              pt磅 cm mm in  绝对单位
              百分比：%  + -
        URL：
    注释：/*开始       */结尾
        注意： 注释里面不能再包含注释


四种设置
    内联样式表
        在任何一个标签中使用style指定样式，就是内联式
        如：<p style="color:red;font-size=4cm">
        灵活，但不利于更新，且标签不能共用一种样式
    嵌入样式表
        通过html的<style></style>将CSS嵌入到HTML里面
        <style>
            样式
        </style>
        可以控制当前页面的所有的样式
        但不能控制所有页面的样式
    外部样式表
        将样式单独定义在一个后缀名为.css的文档中，并且在HTML中通过link连接到HTML中使用
        所有的页面都可以使用该文档，也就使得所有的页面能够共享样式
        <link rel="stylesheet" type="text/css" href="css文件所在的文件夹">
        多个页面都可以使用
    输入样式表
        可以将一个css文件输入到另外一个样式文件中，获奖一个样式文件输入到<style></style>元素中
        可以将多个样式表组合成一个样式表，如何可以使用多个样式表
            使用@import url(css所在位置);导入其他的CSS文件
            在<style>中使用@import url(css所在位置)</style>
四种样式表的优先级
    内联样式表高于其他的
    嵌入样式表，外部样式表，输入样式表的优先级与加载的顺序有关
字体
    font-family 
        字体族科，宋体，楷体等，可以使用多个族科赋值，中间用逗号隔开，以防止选择不存在的字体族科
    font-size
        可以使用绝对大小，相对大小，长度，或百分比
    font-style
        normal（普通），Italic（斜体），oblique（倾斜）
    font-weight
        normal，bold，或者数字表示（1-500是窄字体），bolder，lighter

    font-variant
        normal，small-caps（大小写转换，对字母来说）  
    一行写时注意顺序：
        font:[<字体风格>||<字体变形>||<字体加粗>]？<字体大小>[</行高>]？字体族科
    color：
文本
    letter-spacing:字母间隔
    word-spacing：文字间隔
    text-decoration：设置下划线(underline) 删除线(line-through),上划线（overline）闪烁线(bink)
            这个属性可以去除超链接的下划线，如设置为none;
    text-indent：设置缩进，必须是长度或百分比
    text-transform:lowercase(小写成为大写)
    line-height：行高，上下居中时使用
    text-align:横向排列，left，right ，center，justify
背景
    background-color 背景颜色
    background-image：背景图像 默认平铺，x，y两个方向重复
        后加：url(图片地址)
    background-repeat 背景重复
        repeat,repeat-x ,repeat-y,no-repeat
    background-position 背景位置
        center,bottom或者百分比，长度
    background-attachment：背景附件 当拉动滚动条时，背景图片是否随着滚动条滑动
        fixed，scroll
    整合属性：
        background：<颜色><图像><重复><附件><位置>
    应用：
        多个图标放到同一个图片里，通过定义某区块的背景定位，调用同一个图片中不同位置上的小图标，好处是可以减少对服务器的请求次数，从而加快页面的访问速度
位置
边框
    边框属性是用于设置一个元素的边框分割，边框 宽度，边框颜色的略写，可以一起设置4边的边框，也可对上边框，下边框，左边框，右边框单独设置
    通过border-style设定上下左右边框的风格，该属性用于设置一个元素边框的样式，而且必须用于指定可见的边框。
    可以使用border-top-style，border-buttom-style，border-left-style，border-right-style单独设置各边的属性
    border-width:  以top，right，buttom，left的顺序指出
            也可以单独指出，利用border-top-width,border-right-width border-buttom-width border-left-width.
    border-color:指定颜色，用法如上
    属性值：
        none
        dotted，点线式
        dashed：破折线
        solid：实线
·       double:双线式
        groove：槽线式
        ridge：脊线式
        inset：内嵌效果
        outset：突起效果
    注意：如果统一制定四个边框，可以使用<border-width><border-style><border-color>的顺序给出三个值；如border：14px solid red
鼠标
        cursor：值
        属性值：help，pointer，move，text，hand，wait，crosshair
列表
    list-style-type
        针对无序列表
            circle 
            square
            none
        针对有序列表
            lower-roman
            upper-roman
            lower-alpha
            upper-alpha
            默认数字
    list-style-image
        url()
    list-style-position
样式选择器
    定义
        secletor{
            property：value
            ……
        }
        当定义一条规则时，必须制定受这条样式规则作用的元素，在一条规则中定义的网页元素就是selector（选择器），也就是选择该样式规则作用于的网页元素
    形式：
        .nvv{}
        #nvv{}
        a,b,h1,#one{}
        a b h1 #one{}
        a:hover,a:link{}
    类别
        HTML选择器
            HTML有标签，CSS就用选择器
            选择符就是赋予内部或外部样式表的名字
            HTML标签就是用来改变一个指定标签的样式
            任何一个HTML元素都可以是一个CSS选择器
            如：p{} div{} ul{} b{} table{} input{} select{}
        类选择器
            同一个选择器能有不同的类，因而允许同一个元素有不同的样式
            定义的方式
            [tag].类名{}
            如此实现同一个元素有不同的表现
            例：定义p.cla1{} p.cla2{} p.cla3.{}
                使用<p class="cla1">……</p> <p class="cla2">……</p>
            同一个元素可以使用多个类，类名之间用空格隔开
            注：如果tag省略，则任何一个元素都可以使用这个类，实现多个元素共享同一个类
            综上可知：即可以实现一个元素使用不同的样式类，又可以实现不同的元素使用同一个样式类
        ID选择器
            在HTML页面中，ID属性指定了某个单一元素，id属性用来对单一元素定义单独的样式
            注意： 一个HTML中，id属性值要唯一
            定义：
                #idname{}(idname是自定义的名称)
            用法： <tag id="idname">
        关联选择器
            只不过是一个用空格隔开的两个或多个的单一选择器组成的字符串
            因为层叠顺序的规则，所以他们的优先权比单一的选择符要大
            因为按关联关系使用，不能有反顺序
            只要能保持关联关系就可以，不管是在多少层
        组合选择器
            为了减少样式表的重复声明，组合是允许的
            定义：
                只要使用英文逗号隔开每一个选择符
        伪元素选择器
            对同一个HTML元素在不同的状态下的一种定义方式
            目前只有a和p两处HTML元素可以使用
            定义：
                标签：伪元素  标签[.类名]:伪元素
            使用： 
                a:link  ，没有任何动作的状态 
                a:hover   光标移动到超链接上的状态
                a:active  选中超链接的状态
                a:visited 访问过超链接的状态
                注意：a:hover必须位于a:link和a:visited之后
                      a:active必须位于a:hover之后
                p：first-letter   一个段落中首个字母的状态 
                p: first-line   一个段落中首行的状态
    样式的继承
        所有嵌套在某个HTML标签中的HTML标签都会去继承外层标签中设置的样式规则
    样式规则的优先级

        关联 > ID > class > HTML
DIV+CSS
    准备软件
        IETEST
        FirFox
        FirFox的组件FireBug组件
    要安装多种浏览器，以利于调试
    注意：就算在不同的浏览器中效果不完全一致，也要做到大概一致
    “无意义”的div 和span标签
        div：会自动换行
        span：不自动换行
        div，大容器；span，小容器
    盒子模型
        每一个HTML元素都可以看成一个装了东西的盒子，盒子具有宽度，和高度，盒子里面的内容到盒子的边框之间的距离即填充，盒子本身有边框，而盒子边框外和其他合资之间，还有边界
    布局中的主要样式
        font                        width
        line-height                 height
        color                       float
        margin                      clear
        padding                     displayhttp://localhost:8088/test.php
        border
        text-align
        background
        定位属性
        position    用于定义一个元素是否absolute relative static  fixed
        top     层距离顶点纵坐标的距离     
        left        层距离定点横坐标的距离
        width       层的宽度
        height      层的高度
        z-index     决定层的先后顺序和覆盖关系，值高的元素会覆盖掉比较低的元素
        display     block，以块显示，在元素后添加换行符，其他元素不饿能够在其后并列显示
                inline，内联显示，在元素后面删除换行符，多个元素可以在一行并列显示
                none，将关闭指定元素及其子元素的显示
        visible
        overflow
    区块模型
        margin
-->