`

CSS的Media类型

CSS 
阅读更多

CSS属性:
1、媒体(Media)类型

样式单的一个最重要的特点就是它可以作用于多种媒体,比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体,如"font-size"属性只对可卷动的媒体类型有效(屏幕)。

声明一个媒体属性可以用@import或@media引入:

@import url(loudvoice.css) speech;
@media print {
/* style sheet for print goes here */
}
也可以在文档标记中引入媒体:
<LINK rel="stylesheet" type="text/css" media="print" href="foo.css">
可以看出,@import和@media的区别在于,前者引入外部的样式单用于媒体类型,后者直接引入媒体属性。@import的使用方法是@import加样式单文件的URL地址再加媒体类型,可以多个媒体共用一个样式单,媒体类型之间用","分割符分开。@media用法则是把媒体类型放在前面,其他规则和rule-set基本一样。下面列出各种媒体类型:
SCREEN:指计算机屏幕。
PRINT:指用于打印机的不透明介质。
PROJECTION:指用于显示的项目。
BRAILLE:盲文系统,指有触觉效果的印刷品。
AURAL:指语音电子合成器。
TV:指电视类型的媒体。
HANDHELD:指手持式显示设备(小屏幕,单色)
ALL:适合于所有媒体。

分享到:
评论

相关推荐

    CSS3 Media Query CSS3媒介查询

    **CSS3 Media Queries详解** CSS3 Media Queries是Web开发中的一个重要工具,它允许开发者根据设备的物理特性,如视口宽度、设备像素比等,来应用不同的样式规则。这一功能使得响应式网页设计成为可能,使得网站能...

    CSS media queries

    在CSS2中,媒体查询主要通过`@media`规则与媒体类型相结合来应用特定的样式。媒体类型包括`all`(所有设备)、`handheld`(手持设备)、`print`(打印)、`projection`(投影)和`screen`(屏幕)等。例如,我们可以...

    用css3 media queries创建手机版网站

    CSS3 Media Queries作为一种强大的工具,帮助设计师和开发者针对不同类型的设备定制化网页布局与样式,从而确保优秀的用户体验。下面将详细介绍如何使用CSS3 Media Queries为网站创建手机版版本。 #### CSS3 Media ...

    通过CSS3 Media Query实现响应式Web设计

    CSS3 Media Queries是实现这一目标的关键工具。通过Media Queries,我们可以根据设备特性,如视口宽度、设备像素比等,来定义不同的样式规则,从而让网站在手机、平板电脑和桌面电脑上都能呈现出最佳的布局和视觉...

    CSS教程:css属性之媒体(Media)类型

    样式单的一个最重要的特点就是它可以作用于多种媒体,比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体,如...link rel="stylesheet" type="text/css" media="print" href="foo.css"&gt; 可以看出

    HTML+CSS婚纱类型展示页面.rar

    在“婚纱类型展示页面”的设计中,CSS的作用有: 1. **选择器与属性**:CSS通过选择器(如类名 `.class`、ID `#id` 或元素名 `element`)定位HTML元素,并应用样式属性,如`color`、`font-size`、`background-color...

    css资源css3-mediaqueries

    CSS3中的媒体查询(Media Queries)是Web设计领域的一个重要技术,它允许内容根据设备的特定特性,如视口宽度、设备像素比等进行适配。这种能力使得开发者能够创建响应式网页设计,确保网站在不同设备上都能提供良好...

    简单介绍CSS设置打印页面的方法及css里media的使用

    @media是CSS3中引入的一个功能强大的查询特性,允许开发者根据不同的媒体类型和条件应用不同的样式规则。这使得我们能够根据不同的输出设备(如屏幕、打印机)提供定制的样式。 在使用@media之前,我们可以通过链接...

    全面解析CSS Media媒体查询使用操作(推荐)

     media属性用于为不同的媒介类型规定不同的样式 screen 计算机屏幕(默认值)  tty 电传打字机以及使用等宽字符网格的类似媒介 tv 电视类型设备(低分辨率、有限的屏幕翻滚能力) projection 

    简单介绍CSS3中Media Query的使用

    CSS3中的Media Query是网页设计中的一个重要工具,它允许开发者根据设备特性,如视口宽度、设备像素比等,来应用不同的样式。Media Query的引入极大地增强了网站的响应式设计能力,使得页面能够自适应不同屏幕尺寸的...

    彻底弄明白CSS3

    在CSS2时代,虽然可以通过`@media`规则定义不同媒体类型的样式表,但这种做法存在局限性,主要体现在对设备类型的支持不足。相比之下,CSS3 的 Media Queries 更加强大和灵活: - **获取更多设备信息**:除了屏幕...

    CSS 屏幕大小自适应的实现示例

    要想实现css屏幕大小自适应,首先得引入 CSS3 @media 媒体查询器: media的使用和规则:  ①被链接文档将显示在什么设备上。  ②用于为不同的媒介类型规定不同的样式。 语法:  @media 设备名 only (选取条件) ...

    详解CSS3中@media的实际使用

    在CSS3中,`@media`规则是响应式网页设计的核心,它允许我们根据不同的设备特性和视口大小来定义和应用不同的样式。`@media`查询让我们能够创建适应各种屏幕尺寸、分辨率和颜色深度的多样的用户体验。 首先,我们来...

    css经典教程 css电子书

    - **响应式设计**:利用媒体查询(media queries)和灵活的网格布局,确保网站在不同设备上都能良好展示。 - **过渡(transitions)与动画(animations)**:通过CSS实现平滑的视觉变化效果。 - **Flexbox**:一种...

    css2.0和css3.0的中文参考手册

    5. **媒体查询**:虽然CSS3.0中的媒体查询更为强大,但CSS2.0也具有初步的媒体类型,允许根据不同设备或屏幕尺寸应用不同的样式。 6. **渐变和透明度**:CSS2.0允许使用`linear-gradient`创建简单的线性渐变,同时...

    CSS3中的Media Queries学习笔记

    CSS3中的Media Queries(媒体查询)是前端开发中用于实现响应式网页设计的关键技术之一。响应式设计是指网页能够根据不同的屏幕尺寸和设备特性(如分辨率、宽高比等)来自动调整其布局和展示内容,以提供良好的用户...

    css2|css3

    5. **媒体查询**:虽然不全面,但CSS2已经有了初步的媒体查询,允许针对不同的设备类型应用不同的样式。 6. **浮动布局**:`float`属性使得元素可以浮动在文本周围,是早期实现响应式设计的一种方式。 **CSS3** ...

    CSS,CSS3基础

    1. **选择器增强**:CSS3增加了更多的选择器类型,如伪类选择器(:hover、:active、:focus)、属性选择器([attr=value])、兄弟选择器(~和+)以及更强大的子元素选择器(:nth-child()和:nth-of-type()),使选择元素更加...

    定义css设备类型-Media Queries图表简介及使用方法

    CSS3的Media Queries是网页设计领域的一大创新,它允许开发者根据设备的不同特性应用相应的样式,以实现响应式设计。Media Queries使得网站能够自适应不同尺寸的屏幕,无论是电脑、平板还是手机,都能提供良好的用户...

Global site tag (gtag.js) - Google Analytics