CSS中的媒体类型media type[通俗易懂]

CSS中的媒体类型media type[通俗易懂]madiatype作用首先要明白一点,我们平时写的HTML页面,可能在不同的媒体类型中显示,如可能显示在屏幕sreen上,也可能显示在纸质print上。那么当页面在不同的媒体类型中显示时,需要的样式可能是不一样的。比如,一般在screen上显示时,页面字体要大一些,在纸质媒体显示时,页面字体要小一些。那么如何告诉别人某个样式是适用于何种媒体类型的呢?这就要靠声明mediatype来实现了。

大家好,又见面了,我是你们的朋友全栈君。

madia type作用

首先要明白一点,我们平时写的HTML页面,可能在不同的媒体类型中显示,如可能显示在屏幕sreen上,也可能显示在纸质print上。那么当页面在不同的媒体类型中显示时,需要的样式可能是不一样的。比如,一般在screen上显示时,页面字体要大一些,在纸质媒体显示时,页面字体要小一些。那么如何告诉别人某个样式是适用于何种媒体类型的呢?这就要靠声明media type来实现了。

如何声明media type

常用媒体类型有:all,screen,print,handled,speech等;
注意媒体类型是大小写敏感的,只能是小写;
当浏览器遇到错误的媒体类型,或者不存在的媒体类型,就会忽略此媒体类型的存在,如:

@media screen, 3D {
  P { color: green; }
}

这里,3D是不存在的媒体类型,则浏览器会将其解析为

@media screen {
  P { color: green; }
}

如何为样式声明媒体类型?

1、<link>标签的media属性
示例:  
  <link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”screen,print”/>

2、<style>标签的media属性
示例:
    <style media=”all” type=”text/css”>
        p{

            color: #ff0000
        }
    </style>

3、@import方式
示例:
    <style>
        @import url(“xxx.css”) “screen,print”;
    </style>

4、在style里为某些样式指定media
示例:
    <style>
        @media speech {

            p{

                color: #ff0000
            }
        }
        @media print {

            p{

                color: blue;
            }
        }
    </style>

5、若没有指定media,则media为默认值“all”,即此样式适用于所有媒体类型


更多媒体类型相关知识请参阅W3C官网:http://www.w3.org/TR/CSS21/media.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/141522.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Python:2D画图库matplotlib学习总结[通俗易懂]

    Python:2D画图库matplotlib学习总结

    2022年1月27日
  • Java并发面试_常见面试题

    Java并发面试_常见面试题预览并发问题详解请谈谈你对volatile的理解linkCAS你知道吗?link原子类Atomiclntegerl的ABA问题谈谈?原子更新引用知道吗?link我们知道ArrayList是线程不安全,请编码写一个不安全的案例并给出解决方案link公平锁/非公平锁/可重入锁/递归锁/自旋锁谈谈你的理解?请手写一个自旋锁linkCountDownLatch/CyclicBarrier/Semaphore使用过吗?link阻塞队列知道吗?l

    2022年10月8日
  • C++条件运算符_位运算符

    C++条件运算符_位运算符C++条件运算符(?:)的通用格式如下:表达式1?表达式2:表达式3说明:如果表达式1为true,则整个表达式的值为表达式2的值(即,冒号左边的值);如果表达式1为false,则整个表达式的值为表达式3的值(即,冒号右边的值);C++中,条件运算符(?:)是唯一需要3个操作数的运算符。下面举个简单的例子进行说明例如:(1) inta=1; int…

    2022年10月2日
  • 国产操作系统: 盘点8款国产Linux桌面操作系统[通俗易懂]

    国产操作系统: 盘点8款国产Linux桌面操作系统[通俗易懂]2014年4月8日起,美国微软公司停止了对WindowsXPSP3操作系统提供服务支持,这引起了社会和广大用户的广泛关注和对信息安全的担忧。在这种背景下,国家出于计算机安全考虑,加大了针对操作系统开发力度,各软件企业纷纷开发自主操作系统。国产操作系统多以Linux为基础二次开发,今天我们为大家盘点一下二零一八年值得用户使用的国产Linux桌面操作系统。1.深度操作系统…

    2022年5月13日
  • python读取图像的几种方法

    python读取图像的几种方法方法一:利用PIL中的Image函数,这个函数读取出来不是array格式这时候需要用np.asarray(im)或者np.array()函数区别是np.array()是深拷贝,np.asarray()是浅拷贝fromPILimportImageimportnumpyasnpI=Image.open(‘./cc_1.png’)I.show()

    2022年6月19日
  • 超链接样式&图片样式

    超链接样式&图片样式超链接样式&图片样式超链接样式1、去除超链接下划线text-decoration:none2、定义超链接伪类a:link{CSS样式}a:visited{CSS样式}a:hover{CSS样式}a:actived{CSS样式}属性说明a:link定义a元素未访问时的样式a:visited定义a元素访问后的样式a:hover定义鼠标经过显示的样式a:active定义鼠标单击激活时的样式定义这四个伪类,必须按照“link、vi

    2022年7月19日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号