web学习笔记（2）——style样式使用的一些小案例

程序员文章站 2022-05-15 08:44:24

...

没有样式的H5是没有灵魂的。style样式有三个属性：media，scope，type。type目前是统一的值“text/css”，用来指定样式。scoped 属性是布尔属性。如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素，该功能并不是所有浏览器支持，据我所知，firefox支持该功能。media是用来指定样式适用的媒体，其值有：screen、tty、tv、projection、handheld、print、braille、aural、all。下述案例是基于media=screen 或 media=print 来说的。media=screen表示样式用于设备屏幕； media=print表示样式用于打印预览或打印页面。

来个简单的样式案例：

<!DOCTYPE html>
<html>
    <head>
        <title>style_demo</title>
        <meta charset="UTF-8">

        <!-- 样式 -->
        <style type="text/css" media="screen">
            h1 {color:yellow}
            h2 {color:black}
            p {color:red}
        </style>

    </head>

    <body>
        <h1>style_demo</h1>
        <h3>颜色
            <p id="color1">color1</p>
            <p id="color2">color2</p>
        </h2>
    </body>
</html>

上述是一个简单的样式功能，h1标题定义为黄色字体,h3定义为黑色字体，p是红色字体。效果如下：
web学习笔记（2）——style样式使用的一些小案例

现在需要打印这个页面，但是不需要那么花里胡哨的，所有字体都黑色即可，由于与上述代码中的media值不同，可直接在原script下增加以下样式而不会被覆盖：

        <!-- 打印模式 -->
        <style type="text/css" media="print">
            h1 {color:black}
            h2 {color:black}
        </style>

在打印模式(ctrl+p)下查看，所有字体均为黑色。效果如下：
web学习笔记（2）——style样式使用的一些小案例

很多时候，浏览器是需要做适配的，如果说，在浏览器宽度不低于200px并且不高于1200px的时候，需改变字体颜色，如何做到呢？（也可以在上述script下直接增加以下样式）

        <!-- 屏幕适配 -->
        <style type="text/css" media="screen and (min-width:200px) and (max-width:1200px)">
            h1 {color:black}
            h2 {color:black}
            p {color:red}
        </style>

调整浏览器看下效果吧：
web学习笔记（2）——style样式使用的一些小案例

在上述需求的基础上，现在需要对p标签下id=color1的颜色为红色，id=color2的颜色设为绿色：

        <style type="text/css" media="screen and (min-width:200px) and (max-width:1200px)">
            h1 {color:black}
            h2 {color:black}
            p[id="color1"] {color:red}
            p[id="color2"] {color:green}
        </style>

上述代码可直接在script标签下添加，因为解析是从上而下的，当meidia属性相同，样式不同而产生冲突时，后解析的会覆盖先解析的样式。效果如下：
web学习笔记（2）——style样式使用的一些小案例

在屏幕适配的样式案例中，发现media可以使用逻辑运算符：”and”, “,”, “not”。“and”表示并且的意思，“，”表示或者的意思，“not”表示非的意思。上述案例展示了and的使用方法，下面来看一下“，”或者的使用：

        <style type="text/css" media="screen and (min-width:1200px), (max-width:1500px)">
            h1 {color:black}
            h2 {color:black}
            p {color:purple}
        </style>

上述代码意思是，当浏览器不低于1200像素，或者不高于1500像素的时候采用下述样式。如果你将上述代码仍放在script标签后，你会发现p标签的字体并未变成紫色。其实是由于你之前的样式中有对p标签下更加细致的样式描述而引起的：

            p[id="color1"] {color:red}
            p[id="color2"] {color:green}

就是这两行，你可以注释之前的这个样式，或者在当前样式下也用详细描述每个id：

        <!-- 逻辑符或者(,) -->
        <style type="text/css" media="screen and (min-width:1200px), (max-width:1500px)">
            h1 {color:black}
            h2 {color:black}
            p[id="color1"] {color:purple}
            p[id="color2"] {color:purple}
        </style>

效果如下：
web学习笔记（2）——style样式使用的一些小案例

“not”是用来排除某种制定的媒体类型：

        <!-- not -->
        <style type="text/css" media="not print and (max-width:1920px)">
            h1 {color:black}
            h2 {color:black}
            p[id="color1"] {color:blue}
            p[id="color2"] {color:blue}
        </style>

script标签下增加上述代码，效果如下：
web学习笔记（2）——style样式使用的一些小案例

style支持的media还有很多，如果有设备条件的话，可以试试，也是一番乐趣。基于media设备，还有其他一些属性，亦可尝试尝试。初学咋到，多多关照！！

相关标签： style样式 style样式案例

下一篇： java中对文件的操作