2w前端培训日记day03

1. css层叠式样式表

        css 引入方式

        1  行间引入

        2  内部样式表

        3  外部样式表

            开发的时候常用

        link 和 @import 引入css区别

        1  @import 是css2.1之后推出的，因此可能存在兼容性问题，link不存在兼容性问题

        2  link不仅可以引入css，也可以引入其他类型文件，功能更加强大，推荐使用

       <!-- link:css -->
    <link rel="stylesheet" href="./css/style.css">
    <!-- link:css -->
    
    <style>
        /* 使用@import导入css */
        @import url('./css/goods.css');

2.

 border 属性

        border-width  设置border的宽度

        border-color  设置border颜色

        border-style  设置border样式

        也可以合写

        border ： width style color;

        可以给单独某一个边设置border

        border-top 设置上边

        border-left 设置左边

        border-bottom 设置下面

        border-right 设置右边

        常用的border-style值

            1  solid 实线

            2  dotted 圆点虚线

            3  dashed 短线虚线

            4  none  隐藏border

                不常用

            5  double  双实线

            6  3d边框

                groove  3d凹槽

                ridge  3d凸槽

                inset  内嵌

                outset  外嵌

            color属性  设置文本颜色

            值：

            1.英文单词

            2.16进制颜色 0-F，#后面跟六位表示颜色的数字，前两位表示红色，中间两位表示绿色，后面两位表示蓝色

            #aabbcc 如果两两相等，则可以简写为 #abc

            3.rgb（），rgba（） 设置颜色

              括号当中设置对应的数字，0-255 ，0表示黑色，255表示白色

              rgb（255，0，0）红色

              rgba中的a 表示透明度，取值的范围是0-1，0表示透明，1表示不透明

            文本修饰 text-decoration

              值：

                   1  underline 下划线

                   2  overline 上划线

                   3  line-through 删除线

                   4  none 去掉修饰

            文本转化 text-transform

              值：

                   1  lowercase 全部小写

                   2  uppercase 全部大写

                   3  capitalize 首字母大写

            行高 line-height

            对单行文本，line-height 设的高度如果和标签的高度相同，则可以做垂直居中效果

            如果是多行文本，可以理解为行间距

.wp {
            width: 200px;
            height: 200px;
            /* 设置border宽度 */
            border-width: 5px;
            /* 设置border颜色 */
            border-color: #f00;
            /* 设置border的样式 */
            border-style: dashed;
            border: 10px #040404 ridge;
            /* 单独设置一个边 */
            border-bottom: 10px rgb(31, 131, 237) solid;
            /* 左边没有边 */
            border-left: none;
        }

        .show {
            width: 200px;
            height: 200px;
            color: #ff0;
            background: rgba(7, 69, 176, 0.5);
            /* 给文本设置下划线 */
            text-decoration: underline;
            /* 给文本设置删除线 */
            text-decoration: line-through;
        }

        a {
            text-decoration: none;

        }

        .txt {
            border: 1px #ff0 solid;
            /* 全部小写 */
            text-transform: lowercase;
            /* 全部大写 */
            text-transform: uppercase;
            /* 首字母大写 */
            text-transform: capitalize;
        }

        .hit {
            border: 1px #f00 solid;
            line-height: 30px;
            font: #ff0;
        }

        .layout {
            height: 400px;
            border: 1px #040404 solid;
            text-align: center;
            line-height: 400px;
        }

3. 

 diection 设置文字方向

           ltr  默认  从左向右

           rtl  从右向左

        text-indent  首行缩进，它的值是具体数值

        word-spacin  设置两个单词之间的距离

        letter-spacing  设置两个字符之间的距离

.txt {
            border: 1px #ff0 solid;
            direction: rtl;
            text-indent: 40px;
            word-spacing: 10px;
            letter-spacing: 5px;
        }