HTML样式(style)

最新推荐文章于 2024-09-20 15:16:38 发布

转载最新推荐文章于 2024-09-20 15:16:38 发布 · 621 阅读

HTML 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在HTML文档中利用style元素结合CSS媒体查询实现响应式设计。通过不同的屏幕宽度应用特定样式，使网页能在不同设备上良好显示。

转载出自：http://www.w3cschool.cn/html/html-css-style.html

style元素允许您在HTML文档中内联定义CSS样式。

style元素具有局部属性:type，media，scoped。

HTML5中添加了scoped属性。

<!DOCTYPE html>

<html>
<head>
    <title></title>
    <!--屏幕宽度小于500px 应用此样式-->
    <style media="screen  AND  (max-width:500px)" type="text/css">
        a {
            background-color: grey;
            color: white;
            padding: 0.5em;
        }
    </style>
    <!--屏幕宽度大于500px 应用此样式-->
    <style media="screen  AND  (min-width:500px)">
        a {
            background-color: red;
            color: white;
            padding: 0.5em;
        }
    </style>
</head>
<body>
    <p>This is a test.</p>
    <a href="http://www.w3cschool.cn">Visit  www.w3cschool.cn</a>
</body>
</html>