当前位置:网站首页 / web前端 / 正文

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>

image.png

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>

image.png


语法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里面写

image.png

下面的同名的会覆盖上方的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>

image.png

优先附加效果等级最高



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





推荐您阅读更多有关于“web前端,”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

合肥科大智能常年招聘.NET,Java,Web前端,有想找想换工作的私聊我AY唯一QQ:875556003和AY交流

抖音号:wpfui,可以看到我的很多作品效果

AYUI8社区版Github地址:前往获取

作者:杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没公司AY唯一QQ:875556003和AY交流

高中学历,2015年1月17日开始,兴趣学习研究WPF,目前工作繁忙,不接任何活

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费.AY主要靠卖技术服务挣钱

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

vs2015 企业版密钥HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

vs2017 企业版密钥NJVYC-BMHX2-G77MM-4XJMR-6Q8QF

标签列表