03css引入方式,CSS文本操作

day03

01css的引入方式

css 层叠式样式表

css 引入方式

1.行间引入
2.内部样式表
3.外部样式表
    开发的时候常用  

link 和 @import 引入css 的区别
1. @import 是 css2.1 之后才推出的，因此可能存在兼容问题，link 不存在兼容问题
2. link 不仅可以引入css，也可以引入其他类型的文件，功能更加强大
    推荐使用 link

<!-- 链接外部样式表 -->
<link rel="stylesheet" href="./css/style.css">
<!-- 给标签页加图标 favicon.ico -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- rel = 类型 -->
    <style type="text/css">
        /* 使用@import 导入 css 外部样式表*/
        @import url('./css/goods.css');

02css文本操作

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 ， # 后面跟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 去掉线(没有文本修饰线)

文本转化 text-transform

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 #04be02 outset;
            /* 单独设置一个边 */
            border-bottom: 10px #f00 solid;
            border-left: none;

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

        a {
            text-decoration: none;
        }

        .txt{
            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;
        }

03css文本操作

direction 设置文字方向

        ltr 默认，从左向右
        rtl 从右向左

text-indent

首行缩进，他的值是具体的数值

word-spacing

设置 两个单词之间的距离

letter-spacing

设置 两个字符之间的距离

.txt{
            border: 1px #f00 solid;
            direction: ltr;
            text-indent: 40px;
            word-spacing: 30px;
            letter-spacing: 15px;
        }
        
        .lx{
            line-height: 30px;
            text-indent: 32px;
        }