Web前端H5之CSS样式总结

1、CSS介绍
    概念：层叠样式表或者级联样式表(Cascading Stylr Sheets)
    层叠;CSS特性
    CSS作业：设置网页结构的样式（改变html标签的样式），通过CSS给HTML标签设置属性到改变样式
    CSS书写位置介绍：
        * 内嵌式写法:书写在HTML的head位置
            <style type="text/css">书写CSS代码style>
        * 外链式写法
        * 行内式写法
    CSS语法：
        * 选择器 {属性：值；属性：值}
            选择标签的过程
            ** 标签选择器
            ** 类选择器
            ** id选择器
            ** 通配符选择器
            ** 交集选择器（标签指定式）
            ** 后代选择器
            ** 子代选择器
            ** 并集选择器
            补充选择器(C3)：
                伪类选择器：
                属性选择器
                伪元素选择器：
        * CSS样式的基本属性（字体属性，颜色属性，边框属性）
            ** 字体属性：主要包括字体综合设置、字体名称、字体大小、字体风格、字体加粗、字体英文大小写转换
                font:设置或者检索对象中文本特性的复合属性
                font-family:一个指定字体名称或者一个种类的字体名称(一次可以设置多个字体，字体与字体之间用“，”隔开)
                    * 直接设置字体对应的名称（黑体，宋体）
                    * 设置字体对应的英文名称（SimSun,NSimSun,SimHei）
                font-size：字体显示的大小
                font-style:以3种方式的一种显示字体：normal(普通)、italic(斜体)和oblique(倾斜)
                font-weight:使字体加粗或者变细（normal，700-加粗，bold-加粗，400-正常显示）
                font-variant：设置英文大小写转换
            ** 颜色和背景属性
                CSS的颜色属性允许设计者指定页面元素的颜色，背景属性用于指定页面的背景颜色或背景图像的属性
                color:设定页面颜色的前景色
                background-cokor:设定页面元素的背景色
                background-image:设定页面元素的背景图像
                background-repeat:设定一个指定的背景图像被重复的方式
                background-attachment:设定背景图像是的跟随页面滚动
                background-position:谁当水平或者垂直方向上的位置
                background:背景属性的综合指定
            ** 边框属性
                用于设置一个元素边框的宽度、样式和颜色
                border  边框符合属性
                border-top：上边框
                border-left:左边框
                border-right：右边框
                border-bottom：下边框
                border-color:边框颜色
                border-style:边框样式
                border-width：边框宽度
                border-top-color：上边框颜色
                border-bottom-color：下边框颜色
                border-left-color:左边框颜色
                border-right-color：右边框颜色
                border-top-style：上边框样式
                border-bottom-style：下边框样式
                border-left-style:左边框样式
                border-right-style：右边框样式
                border-top-width：上边框宽度
                border-bottom-width：下边框宽度
                border-left-width:左边框宽度
                border-right-width：右边框宽度
            **边框样式属性
                none:无边框
                hidder：隐藏边框（IE不支持）
                dotted:边框由点组成
                dashed:边框由短线组成
                solid:边框是实线
                double：边框是双实线
                groove：边框带有立体感的沟槽
                ridge：边框成脊型
                inset：边框内嵌一个立体边框
                outset:边框外嵌一个立体边框



        * 标签选择器
            HTML标签名 {属性：值；}:会把页面中的所有相同的标签都会选中
                常用属性：
                    color：设置前景色（文字颜色）
                    background-color:设置背景色
                    font-size：设置文字大小
                    width：设置宽度
                    height：设置高度
                    text-align: center;设置内容（文字、图片）显示位置
                        注意：该属性只能给块级元素设置
                    text-indent: 2em; 设置首行缩进两个字符

                    <style type="text/css">
                        /*标签选择器*/
                        p {
                            color: rgb(234,12,12);  /*改变文字颜色*/
                            font-size: 50px; /*改变文字大小 */
                            background-color: #D82F92; /*改变背景颜色*/
                            width: 300px; /*设置宽度*/
                            height: 300px;  /*设置高度*/

                        }   
                    style>    
        * 单位介绍
            px:像素
            em:1em = 一个文字大小
        * 颜色的表示方式
            ** 直接设置颜色的名称：red,green,pink
            ** 使用十六进制表示 #0-f
            ** 使用三原色rgb()
                    r：0-255
                    g:0-255
                    b:0-255
            ** 半透明颜色:background-color: rgba(0,0,0,0.5);
                rgba()
                a : 0-1
            ** 使用opacity实现半透明
                opacity:0-1
                background-color: #D82F92;
                opacity: 0.5;
                filter:Alpha(opacity=50);/*IE8以及更早版本的浏览器*/
        * 类选择器
            .自定义类名 {属性：值；}
            使用：
                ** 通过.自定义类名，定义一个类样式
                    .p_red { color: red;}
                ** 标签通过class属性调用类样式
                    <p class="p_red">类选择器1p>
            特点：
                ** 一个类样式可以被多个标签调用
                ** 一个标签可以同时调用多个类样式，只需要在类名字之间加一个空格
                    <p class="p_red public_size">类选择器1p>
                    <p class="p_green public_size">类选择器2p>
            命名规范：
                头;header
                内容：content、container
                尾：footer
                导航：nav
                侧栏：sidebar
                栏目：column
                页面外围控制整体布局宽度;wrapper
                左右中;left right center
                登录条：loginbar
                标志:logo
                广告：banner
                页面主体：main
                热点：hot
                新闻：news
                下载：download
                子导航：subnav
                菜单：menu
                子菜单：submenu
                搜索：search
                友情链接：friendlink
                页脚：footer
                版权：copyright
                注意：不能使用纯数字或者以数字开头定义类名
                      不能使用中文命名
                      不能使用特殊字符或者使用特殊字符开头定义类名
                      不推荐使用类名和标签名定义类名
        * ID选择器(不建议用)
            语法：#自定义名称 {属性：值；}
            使用：
                ** 首先通过#自定义名称，定义一个id选择器样式
                    #p_color {color:red;}
                ** 标签通过id属性调用id样式
                    <div id="p_color">gerrynihaodiv>
            ID选择器与类选择器的区别：
                ** 页面中标签的id必须唯一，不能重用样式的定义
                ** 一个标签只能调用一个id样式，id选择器不能调用多个ID样式，类选择器可以调用多个类样式
        * 通配符选择器
            语法：* {属性：值；}
            特点：该选择器会把所有标签都选中（包括body选择器）
            应用：样式初始化使用（因为不同的浏览器有不同的默认样式，需要初始化页面的文字样式）
        * font属性联写
            font:font-size font-weight font-style font-family line-height
            font:700(粗体) italic(斜体) 30px(字体大小)/20px(行高) 微软雅黑;
            注意：
                1.属性联写书写过程中必须要设置font-size和font-family，其他可以设置也可以不设置
                2.在属性联写中font-size必须要放在font-family之前（例如：30px/20px 微软雅黑）
                3.如果font属性联写中的属性都要设置，则按照上面顺序设置
        * 复合选择器
            **标签指定式选择器
                语法：
                    标签名.类名 {属性：值；}
                或者 标签名#id名 {属性：值；}
                div.one {
                    color: red
                }
            ** 后代选择器
                注意：
                    1,后代选择器标签之间必须是嵌套关系
                    2.选择器与选择器之间必须用空格隔开
                    3.后代选择器只能选择后代标签
                语法：
                    选择器 选择器 选择器 {属性：值；}
                div p {
                    color: green
                }
            * 并集选择器
                语法：
                    选择器，选择器 {属性：值}
                注意：
                    1.选择器与选择器之间必须用“，”隔开
                    2.选择器标签之间的结构可以是任意一种关系
            * 子代选择器
                语法：
                    选择器>选择器 {属性：值；}
                注意：
                    1.子代选择器之间必须是嵌套结构
                    2.子代选择器只能选中直接后代元素
                    3.后代选择器可以选中所有后代元素
                    div>span {
                        color: red;
                    }
            * 属性选择器(会把页面中所有的属性相同的样式进行改变)
                语法:
                    [属性名] {属性：值；}
                    [id][class] {
                        color: red;
                    }
                属性其他选择器
                    [属性=值] {}   
                    [属性^=字母] { }  选中以字母开始的标签
                    [属性$=字母] { }  选中以字母结尾的标签
                    [属性*=字母] { }  选中包含字母的标签

            * 伪类选择器（用于列表标签）
                ◇ 结构伪类
                  语法：
                        选择器：first-child {属性: 值;}
                        选择器：last-child {属性: 值;}
                        选择器: nth-child(n) {属性: 值;}
                        选择器:nth-last-child(n) {属性: 值;}
                        选择器:nth-child(odd) {属性: 值;} 奇数
                        选择器:nth-child(even) {属性: 值;} 偶数
                ◇ 目标伪类
                ◇ 空伪类
                ◇ 排除伪类