前端学习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的宽度 */
            border-width: 5px ;
            /* 设置border的颜色 */
            border-color: #f00;
            /* 设置边框样式 */
            border-style: dashed;

        它们三个也可以合写：

        border：width style color;

 /* 设置边框样式 */
            border-style: dashed;

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

        border-top  设置上边

        border-left 设置左边

        border-bottom   设置下边

        border-right    设置右边

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

        常用的border-style值

        1.solid  实线

        2.dotted圆点虚线

        3.deshed短线虚线

        4.none隐藏border

        不常用

        5.double双实线

        6.3d边框

            groove  3d凹槽

            ridge   3d凸槽

            inset   内嵌

            outset  外嵌

border-style: solid;

   color属性，设置文本颜色

        值：

        1.英文单词

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

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

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

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

        rgb（255，0，0）红色

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

border-color:#f00 ;
border-color: rgba(225,0,0,0.5);

      文本修饰text-decoration

        值：

            1.underline 下划线

            2.overline  上划线

            3.line-through 中划线（删除线）

            4.none   去掉线（没有文本修饰线）

   

            /* 给文本设置下划线 */
            text-decoration: underline;
            /* 上划线 */
            text-decoration:overline;
            /* 中划线 */
            text-decoration: line-through;

        文本转化   text-transform

        值：

            1.lowercasse 全部小写

            2.uppercase  全部大写

            3.capitalize 首字母大写

    text-transform:lowercase ;
 
    text-transform: uppercase;

    text-transform: capitalize;

        行高line-height

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

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

                  direction设置文字方向

            ltr 默认，从左向右

            rtl 从右向左

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

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

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

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