h5小白笔记day03

 一.css的引入方式

css 层叠式样式表

        css 引入方式

        1、行间引入

        2、内部样式表

        3、外部样式表

            开发的时候常用

        link 和 @import 引入css 的区别

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

        2. link不仅可以引入css,也可以引入其他类型的文件，功能更加强大

        推荐使用 link

<link rel="stylesheet" href="./css/style.css">
    <link rel="shortcut icon" href="favicon.ico"  type="image/x-icon">
    <style type="text/css">
        /* 使用 @import 导入css */
        @import url('./css/goods.css');
    </style>

二.css文本操作

border 属性

        border-width 设置 border 的宽度

        border-color 设置 border 的颜色

        border-style 设置 border 的样式

        他们三个可以合写

        border: width style color;

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

        border-top 设置 上边

        border-left 设置 左边

        border-bottom 设置 下边

        border-right 设置 右边

.wp {
            width:200px;
            height:200px;
            /* 设置border的宽度 */
            border-width:5px;
            /* 设置border的颜色 */
            border-color:#f00;
            /* 设置border的样式 */
            border-style: dashed;

            border:10px #04be01 outset;
            /* 单独设置一个边 */
            border-bottom:10px #f00 solid;
            border-left:10px #666 solid;

        }

常用的 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 , # 后面跟6为表示颜色的数字，前面两位表示红色，中间两位表示绿色，后面两位表示蓝色 #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 去掉线(没有文本修饰线)

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

文本转化 text-transform

            值：

                1.lowercase 全部小写

                2.uppercase 全部大写

                3.capitalize 单词的首字母大写

            行高 line-heigth

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

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

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

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

direction 设置文字方向

            ltr 默认，从左向右

            rtl 从右向左

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

        word-spacing: 30px; 设置 两个单词之间的距离

        letter-spacing: 15px; 设置 两个字符之间的距离

 <style type="text/css">
        .txt {
            border:1px #f00 solid;
            direction: ltr;
            text-indent:40px;
            word-spacing: 30px;
            letter-spacing: 15px;
        }
        .pic {
            border:200px #fff solid;
            border-bottom:200px #f00 solid;
            width:0;
        }
    </style>
<p class="txt">随风奔跑自由是方向,追逐雷和闪电的力量,my name</p>
     <div class="pic"></div>