AY H5笔记8-css导入

时间：2020年09月18日 | 作者 : aaronyang | 分类 : web前端 | 浏览: 121次 | 评论 0 人

入门：

测试一段简单的html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr>
            <td>AY</td>
        </tr>
        <tr>
            <td>WPF</td>
        </tr>
        <tr>
            <td>WEB学习</td>
        </tr>
     
    </table>
</body>
</html>

EMMET语法，然后修改text

输入
table>tr*3>td
然后tab，嘎嘎就出来了

新建一个css1.css文件

输入

table{
    background-color: #003366;
    width: 400px;
}
td{
    background-color: #fff;
    font-family: "微软雅黑";
    font-size:20px;
    text-shadow: -8px 6px 2px #333;
}

然后html引入css

EMMET： link:css然后tab

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css1.css" type="text/css">
</head>
<body>
    <table>
        <tr>
            <td>AY</td>
        </tr>
        <tr>
            <td>WPF</td>
        </tr>
        <tr>
            <td>WEB学习</td>
        </tr>
     
    </table>
</body>
</html>

语法1：

Selector{

property:value

}

通过@import引入，开发者尽量不要使用这种方式

    <style type="text/css">
        @import url("css1.css");
    </style>

或者

    <style type="text/css">
        @import "css1.css";
    </style>

style节点可以指定 media属性，用来针对设备生效的

====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========

screen 计算机屏幕
tty 等宽字符的显示设备
tv 电视机类型的显示设备
projection 投影仪
handheld 小型手持设备
print 打印机
embossed 适用于凸点字符（盲文）印刷设备
braille 盲人点字法反馈设备
aural 语音合成器
all 全部设备

直接html里面写

下面的同名的会覆盖上方的css效果

.样式选择器，下方使用 class="名字"

行内样式

    <div class="title">
        <table>
            <tr>
                <td style="font-size: 40px;color:green">AY</td>
            </tr>
            <tr>
                <td>WPF</td>
            </tr>
            <tr>
                <td>WEB学习</td>
            </tr>

        </table>
    </div>