当前位置:首页 > CSS教程 > 正文内容

详细介绍css属性之媒体类型_css教程,css,媒体类型

搜教程4年前 (2020-04-11)CSS教程174

css如何实现边框长度控制功能_css教程

本文来自CSS入门教程栏目,文中为大家介绍了css实现边框长度控制功能的方法,具有一定的参考价值,希望可以帮助到大家。实现此功能可以考虑使用伪类,这样很方便。

前言:

样式单的一个最重要的特点就是它可以作用于多种媒体,比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体,如"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">

(推荐教程:CSS教程)

可以看出,@import和@media的区别在于,前者引入外部的样式单用于媒体类型,后者直接引入媒体属性。

@import的使用方法是@import加样式单文件的URL地址再加媒体类型,可以多个媒体共用一个样式单,媒体类型之间用","分割符分开。@media用法则是把媒体类型放在前面,其他规则和rule-set基本一样。

下面列出各种媒体类型:

SCREEN:指计算机屏幕。

PRINT:指用于打印机的不透明介质。

PROJECTION:指用于显示的项目。

BRAILLE:盲文系统,指有触觉效果的印刷品。

css如何控制网页背景颜色_css教程

本文为大家介绍了css控制网页背景颜色的方法,具有一定的参考价值,希望可以帮助到大家。背景颜色:【background-color】;背景图片:【background-image】。

AURAL:指语音电子合成器。

TV:指电视类型的媒体。

HANDHELD:指手持式显示设备(小屏幕,单色)。

ALL:适合于所有媒体。

手机端(移动端)自适应样式 @media 的使用

通用手机端样式:

@media all and (orientation : portrait) {
/*竖屏*/
}
@media all and (orientation : landscape) {
/*横屏*/
}

指定手机端高度样式:

@media screen and (max-width: 750px)
@media screen and (min-width: 720px) and (max-width: 960px) {//720 <= xxx < 960的设备}

根据不同的设备设定的样式:

@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }

注意下顺序,如果你把@media (min-width: 768px)写在了下面那么很悲剧,因为css文件是从上至下读取的,后面的css优先级会更高

@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }

因为如果是1440,由于1440>768那么你的1200就会失效。

所以我们用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面

@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }

相关视频教程推荐:css视频教程

以上就是详细介绍css属性之媒体类型的详细内容,更多请关注ki4网其它相关文章!

详细介绍css中的数学表达式calc()_css教程

本文来自CSS教程栏目,文中为大家详细介绍了css中的数学表达式calc(),具有一定的参考价值,希望可以帮助到大家。数学表达式calc()是CSS中的函数,主要用于数学运算。

扫描二维码推送至手机访问。

版权声明:本文由搜教程网发布,如需转载请注明出处。

本文链接:https://www.sojiaocheng.cn/17528.html

标签: css媒体类型
分享给朋友:

“详细介绍css属性之媒体类型_css教程,css,媒体类型” 的相关文章

animation-iteration-count属性怎样用【css教程】,animation-iteration-count属性,CSS3,动画

animation-iteration-count属性怎样用【css教程】,animation-iteration-count属性,CSS3,动画

animation-iteration-count属性是用于定义动画播放次数的,设置animation-iteration-count属性的值为infinite,便可完成动画的无穷轮回播放。 CSS3 animation-iteration-count属性 作用:animation-it...

text-overflow属性怎样用【css教程】,text-overflow属性,CSS3

text-overflow属性怎样用【css教程】,text-overflow属性,CSS3

text-overflow属性用于指定当文本溢出包括它的元素时,应当发作的事变。 CSS3 text-overflow属性 作用:text-overflow 属性规定当文本溢出包括元素时发作的事变。 语法: text-overflow: clip|ellipsis|string;...

CSS怎样设置表格边框间的间隔?border-spacing属性的运用【css教程】,CSS,border-spacing属性,表格边框距离

CSS怎样设置表格边框间的间隔?border-spacing属性的运用【css教程】,CSS,border-spacing属性,表格边框距离

在CSS中,border-spacing属性用于表格的边框在“星散”的状态下,设置相邻单元格的边框间的间隔。下面本篇文章就来带人人相识一下border-spacing属性的运用方法,愿望对人人有所协助。 CSS border-spacing属性 border-spacing属性会在表格边...

浅谈css 3d与空间坐标轴【css教程】,CSS3D,空间坐标轴

浅谈css 3d与空间坐标轴【css教程】,CSS3D,空间坐标轴

本日来给大伙好好说说,这css 3d应当怎样运用,以及相干的空间坐标轴的学问。感兴趣的朋侪来相识一下,愿望对你有所协助。   先上结果图:   基本思路:三层构造:视角容器>>载体>>细致3d图象。   视角容器:决议3d的显现结果,这里的pespectiv...

css类选择符用什么【css教程】,css

css类选择符用什么【css教程】,css

在 CSS 中,类挑选器以一个点号显现: .center {text-align: center} 在上面的例子中,一切具有 center 类的 HTML 元素均为居中。 鄙人面的 HTML 代码中,h1 和 p 元素都有 center 类。这意味着二者都将恪守 ".center" 挑...

为什么用div css规划【css教程】,css

为什么用div css规划【css教程】,css

为何用div css规划? 方才打仗前端,一向以为table规划在代码上看起来比div+css更整齐,div+css规划的页面,一堆的<div><div><div>...</div></div></div>看起来都让人犯麋...