css01

html结构与css样式分离
css:层叠样式表,主要作用美化界面,
    目的:设置版面布局和外观显示样式
    分类:
        1:行内式(内联样式):在标签内部声明属性
            1:使用方式:<h1 style="color: #ff0000; font-size: 18px;"></h1>
            2:所有的标签都具有样式属性
                color,font-size
        2:内部样式表(内嵌样式表)
            1:使用方式:放入head标签中 
                <style type="text/css">
                    tr/td/h1......{
                        color: #ff0000;
                        font-size: 18px;
                    }
                </style>
            2:注意:
                1:(理论上可以放到html的任何位置),但是放在head中更规范
                2:在h5中"type="text/css""可以省略
                3:只能控制当前界面
        3:外部样式表(外链式)
            1:使用方式:在head标签中:
                <link rel="stylesheet" type="text/css" href="css文件的路径">
                在css文件内部:
                    tr/td/h1......{
                            color: #ff0000;
                            font-size: 18px;
                    }
            2:优势:
                1:真正实现样式与结构分离,解耦
                2:实现样式共享,多个html文件共用一个css文件
            3:规范:
                1:属性分行;
                2:小写;
        二:选择器的使用:
            1:基础选择器:
                1:标签选择器:使用的较多,缺点不能差异化选择
                    元素选择器,直接使用标签名即可
                    缺点:相同标签属性必须一样
                2:类选择器:使用最多,推荐使用
                    1:使用方式:
                        1:在style中: ".类名"(类名自定义)
                        2:在标签中声明class属性
                    2:多类名选择器:解决相同属性多次声明的问题
                        1:class="first second"
                3:id选择器:不推荐使用
                        1:在style中:"#id名"
                        2:在标签中声明id属性
                        3:与类选择器的区别,
                            元素中的id是唯一的
                            类选择器不是唯一
                        4:最的区别在于使用次数上,class可以使用多次,调用多次,id只能使用一次
                        5:css用类,js用id
                4:通配符选择器:不推荐使用
                        1:*{
                            margin:0;
                            padding:0;
                        }
                        2:会降低页面相应速度,一般情况下不建议使用
        三:字体样式的设置:
            font:
                1:font-size:px  默认16px
                    1:一般指定body的字体大小数值
                    body{
                        font-size: 16px;
                    }
                2:font-family:字体//微软雅黑,宋体,黑体
                    1:可以指定多种字体,用逗号隔开
                    2:方式:font-family:Arial,"Microsoft Yahei" , "微软雅黑"
                    3:使用unicode编码代替汉字
                3:font-weight:粗细
                    1:normal:默认,正常,去除加粗
                    2:bold:加粗
                    3:number:100-900(整百数)700等同于bold 不加单位  (推荐使用)
                                           400等同于normal
                4:font-style:风格
                    1:normal:默认,标准字体,去除倾斜<em></em>
                    2:italic:显示斜体 
                5:综合用法:(必须严格按照格式书写)(必须保留font-size和font-family两个属性)
                    p{
                        font: italic 700 20px "微软雅黑";
                        font: 20px "微软雅黑";

                    }
                6:使用em标签做引用效果
        四:css外观样式设置:
            1:color:文本颜色:#ff0000 --> #f00
                            #ffffff --> #fff
                            两两相同可以简写

            2:line-heigh:行间距:比字号大7或8像素
            3:text-align:文本对齐方式:center,设置文字的对齐方式
            4:text-indent:首行缩进:2em,表示两个字符的宽度
            5:text-decoration文本的装饰:
                1:none(常用)
                2:underline:下划线(常用)
        五:emmet语法