＜HTML＞＜type＞标签

最新推荐文章于 2023-10-12 18:12:22 发布

小李子还挺酸

最新推荐文章于 2023-10-12 18:12:22 发布

阅读量1k

点赞数 1

分类专栏： web 文章标签： html

本文链接：https://blog.csdn.net/qq_44830106/article/details/115145353

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

style

定义

属性

属性	值	描述
media	screen、tty、tv、projection、handheld、print、braille、aural、all	指定样式适用的媒体。
type	text/css	指定样式的类型

实例1

<html>
    <head>
        <title>Name of Web</title>
        <style type="text/css">
            h1 {color:red}
            p {color :yellow}
            a{
                color:blue;
                backgroud:brown;
            }
        </style>
    </head>
    <body>
        <h1>标题</h1>
        <p>正文</p>
        <a href="https://explainshell.com/explain/1/open">链接入口</a>
    </body>
</html>

运行结果：
在这里插入图片描述

实例2

文章初始状态：
在这里插入图片描述

   <style>
        h1{
            text-align: center;
            color:black;}
        h2{
            margin-left: 60%;
            color:black;}
        body{color:white;
            background-image: url("scene.jpg");
        }
    </style>

text-align:center---------将标题居中
margin-left:60% ---------左外边距60%
网页的所有可见内容都是放在body里面，因此设置网页的背景图片在body里面输入:

 background-image: url("scene.jpg");

修改背景和正文字体颜色后：
在这里插入图片描述
正文中，应该首行空两个字符，即32px,字体1个字符，即16px。
在style标签块中加入：

        p{
            text-indent: 32px;
            font-size: 16px;
            line-height: 32px;
            
        }

text-indent:32px----------设置缩进
font-size:16px------------------设置字体尺寸
line-height:32px-------------设置行高
现在就变成了这样：
在这里插入图片描述

media属性

以print为例：
print ：将样式用于打印预览或打印页面。

现在的界面用于打印的话显示如下：
在这里插入图片描述
敲入如下命令：

    <style media="print">   //style中不指定则默认全部，指定则指修改特定情形，此时是修改打印的情形
        h1{color:black}    
        h2{color: black;}
        p{color: black;}
        </style>

修改后打印文章界面为：
在这里插入图片描述

小李子还挺酸

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
＜HTML＞＜type＞标签

style定义<style>标签用于为HTML文档定义样式信息不像title元素，title元素只能放在<head>标签中。而style元素可以放在HTML文档中的各个部分，并且一个文档可以包含多个style元素。属性属性值描述mediascreen、tty、tv、projection、handheld、print、braille、aural、all指定样式适用的媒体。typetext/css指定样式的类型实例<html&
复制链接

扫一扫