点击切换帐号登陆
帐号密码登陆

  • 章节

  • 笔记

  • 评论
第1章 CSS 入门教程
1-1CSS速查总表
1-2CSS 教程学习导读
1-3CSS简介
1-4CSS语法
1-5CSS 创建
1-6CSS 定位(Position)
1-7CSS 布局(Layout)
1-8CSS 尺寸 (Dimension)
1-9CSS 外边距(Margin)
1-10CSS 填充(Padding)
1-11CSS 背景(Backgrounds)
1-12CSS 边框(Border)
1-13CSS 颜色(Color)
1-14CSS 字体(Fonts)
1-15CSS 文本(Text)
1-16CSS 文本装饰(Text Decoration)
1-17CSS 书写模式(Writing Modes)
1-18CSS 列表样式(List)
1-19CSS 表格(Table)
1-20CSS 内容(Content)
1-21CSS用户界面(User Interface)
1-22CSS打印(Print)
1-23CSS媒体查询(Media Queries)
1-24CSS 链接(Link)
1-25CSS 轮廓(Outline)
1-26CSS 分组 和 嵌套(Grouping and Nesting)
1-27CSS 浮动 (Float)
1-28CSS 盒子模型(Box Model)
1-29CSS 显示(Display)
1-30CSS 导航栏(Navigation Bar)
1-31CSS 溢出(Overflow)
1-32CSS 下拉菜单(Drop down menu)
1-33CSS 对齐(Align)
1-34CSS 提示工具(Prompt Tool)
1-35CSS 图片廊(Image Gallery)
1-36CSS 图像透明/不透明(Opacity)
1-37CSS 图像拼合技术(Image stitching technique)
1-38CSS 媒体类型(Media Type)
1-39Only IE
1-40Only Webkit
1-41Only Firefox
1-42CSS 总结
第2章 CSS 原生手册
2-1CSS 手册导读
2-2CSS 选择器
2-3CSS 听觉参考手册
2-4CSS Web安全字体组合
2-5CSS 动画
2-6CSS 函数
2-7CSS 单位
2-8CSS 颜色
2-9CSS 颜色值
2-10CSS 颜色名
2-11CSS 颜色十六进制
第3章 CSS 函数 Function
3-1CSS attr() 函数
3-2CSS calc() 函数
3-3CSS linear-gradient() 函数
3-4CSS radial-gradient() 函数
3-5CSS repeating-linear-gradient() 函数
第4章 CSS选择器 Selectors
4-1元素选择符
4-2关系选择符
4-3属性选择符
4-4伪类选择符
4-5伪对象选择符
第5章 CSS取值与单位 Values and Units
5-1CSS 长度(Length)
5-2CSS 角度(Angle)
5-3CSS 时间(Time)
5-4CSS 频率(Frequency)
5-5CSS 布局(Layout-specific)
5-6CSS 分辨率(Resolution)
5-7CSS 文本(Textual)
5-8CSS 函数(Functional)
5-9CSS 生成内容(Content)
5-10CSS 图像(Image)
5-11CSS 数字(Numeric)
第6章 CSS语法与规则 Rules
6-1!important
6-2comment
6-3@import
6-4@page
6-5@supports
第7章 CSS 属性 Property
7-1border-top
7-2scan
7-3border-top-color
7-4overflow-wrap
7-5border-top-left-radius
7-6text-size-adjust
7-7border-top-right-radius
7-8text-decoration-skip
7-9text-underline-position
7-10border-top-style
7-11column-break-before
7-12border-top-width
7-13column-break-after
7-14border-width
7-15column-break-inside
7-16bottom
7-17text-fill-color
7-18box-align
7-19box-reflect
7-20box-direction
7-21tap-highlight-color
7-22user-drag
7-23box-flex
7-24border-colors
7-25box-flex-group
7-26border-top-colors
7-27box-lines
7-28border-right-colors
7-29box-ordinal-group
7-30border-bottom-colors
7-31border-left-colors
7-32box-orient
7-33scrollbar-3dlight-color
7-34box-pack
7-35scrollbar-darkshadow-color
7-36box-shadow
7-37scrollbar-highlight-color
7-38box-sizing
7-39scrollbar-shadow-color
7-40caption-side
7-41scrollbar-arrow-color
7-42clear
7-43scrollbar-arrow-color
7-44clip
7-45scrollbar-face-color
7-46color
7-47scrollbar-track-color
7-48column-count
7-49scrollbar-base-color
7-50column-fill
7-51behavior
7-52column-gap
7-53column-rule
7-54column-rule-color
7-55column-rule-style
7-56column-rule-width
7-57column-span
7-58column-width
7-59columns
7-60content
7-61counter-increment
7-62counter-reset
7-63cursor
7-64direction
7-65display
7-66empty-cells
7-67filter
7-68flex
7-69flex-basis
7-70flex-direction
7-71flex-flow
7-72flex-grow
7-73flex-shrink
7-74flex-wrap
7-75float
7-76font
7-77@font-face
7-78font-family
7-79font-size
7-80font-size-adjust
7-81font-stretch
7-82font-style
7-83font-variant
7-84font-weight
7-85grid-columns
7-86grid-rows
7-87hanging-punctuation
7-88height
7-89icon
7-90justify-content
7-91@keyframes
7-92left
7-93letter-spacing
7-94line-height
7-95list-style
7-96list-style-image
7-97list-style-position
7-98list-style-type
7-99margin
7-100margin-bottom
7-101margin-left
7-102margin-right
7-103margin-top
7-104max-height
7-105max-width
7-106@media
7-107min-height
7-108min-width
7-109nav-down
7-110nav-index
7-111nav-left
7-112nav-right
7-113nav-up
7-114opacity
7-115order
7-116outline
7-117outline-color
7-118outline-offset
7-119outline-style
7-120outline-width
7-121overflow
7-122overflow-x
7-123overflow-y
7-124padding
7-125padding-bottom
7-126padding-left
7-127padding-right
7-128padding-top
7-129page-break-after
7-130page-break-before
7-131page-break-inside
7-132perspective
7-133perspective-origin
7-134position
7-135punctuation-trim
7-136quotes
7-137resize
7-138right
7-139rotation
7-140tab-size
7-141table-layout
7-142target
7-143target-name
7-144target-new
7-145target-position
7-146text-align
7-147text-align-last
7-148text-decoration
7-149text-decoration-color
7-150text-decoration-line
7-151text-decoration-style
7-152text-indent
7-153text-justify
7-154text-outline
7-155text-overflow
7-156text-shadow
7-157text-transform
7-158text-wrap
7-159top
7-160transform
7-161transform-origin
7-162transform-style
7-163transition
7-164transition-delay
7-165transition-duration
7-166transition-property
7-167transition-timing-function
7-168unicode-bidi
7-169pointer-events
7-170vertical-align
7-171user-select
7-172visibility
7-173ime-mode
7-174white-space
7-175zoom
7-176width
7-177-webkit-appearance
7-178word-break
7-179@charset
7-180word-spacing
7-181text-stroke
7-182word-wrap
7-183text-stroke-width
7-184z-index
7-185text-stroke-color
7-186writing-mode
7-187<angle>
7-188deg
7-189​grad
7-190rad
7-191turn
7-192s
7-193align-content
7-194ms
7-195<frequency>
7-196align-items
7-197Hz
7-198align-self
7-199kHz
7-200all
7-201<fraction>
7-202animation
7-203<grid>
7-204animation-delay
7-205fr
7-206animation-direction
7-207gr
7-208animation-duration
7-209<resolution>
7-210animation-fill-mode
7-211dpi
7-212animation-iteration-count
7-213dpcm
7-214dppx
7-215animation-name
7-216unset
7-217animation-play-state
7-218<string>
7-219<url>
7-220animation-timing-function
7-221<identifier>
7-222appearance
7-223calc()
7-224backface-visibility
7-225toggle()
7-226background
7-227counter()
7-228background-attachment
7-229counters()
7-230attr()
7-231<image>
7-232background-blend-mode
7-233image()
7-234background-clip
7-235image-set()
7-236background-color
7-237<gradient>
7-238background-image
7-239repeating-radial-gradient()
7-240background-origin
7-241<integer>
7-242background-position
7-243<percentage>
7-244background-repeat
7-245background-size
7-246border
7-247border-bottom
7-248border-bottom-color
7-249border-bottom-left-radius
7-250border-bottom-right-radius
7-251border-bottom-style
7-252border-bottom-width
7-253border-collapse
7-254border-color
7-255border-image
7-256border-image-outset
7-257border-image-repeat
7-258page
7-259border-image-slice
7-260page-break-before
7-261border-image-source
7-262page-break-after
7-263page-break-inside
7-264border-image-width
7-265border-left
7-266border-left-color
7-267border-left-style
7-268border-left-width
7-269border-radius
7-270border-right
7-271device-width
7-272border-right-color
7-273device-height
7-274border-right-style
7-275orientation
7-276border-right-width
7-277aspect-ratio
7-278border-spacing
7-279device-aspect-ratio
7-280border-style
7-281color-index
7-282monochrome
7-283initial
7-284inherit
7-285RGBA
7-286Color Name
7-287HEX
7-288RGB
7-289HSL
7-290HSLA
7-291transparent
7-292currentColor
7-293<length>
7-294em
7-295ex
7-296ch
7-297rem
7-298vw
7-299vh
7-300vmax
7-301vmin
7-302cm
7-303mm
7-304q
7-305in
7-306pt
7-307pc
7-308px
7-309<number>
第8章 CSS附录 Appendix
8-1颜色关键字(Color Keywords)
8-2媒体类型(Media Types)
第9章 CSS HACK
9-1条件Hack
9-2属性级Hack
9-3选择符级Hack
第10章 问题和经验
10-1Bugs及解决方案列表
10-2CSS技巧和经验列表
10-3其它技巧和经验列表
10-4参考资源列表

CSS 媒体类型(Media Type)

CSS 媒体类型

媒体类型允许所指定的文件将如何在不同的媒体上呈现,该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等 

媒体类型

一些 CSS 属性只设计了某些媒体。例如 voice-family 属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如, font-size 属性可用于屏幕和印刷媒体,但有不同的值。屏幕和纸上的文件不同,通常需要一个更大的字体,sans-serif 字体比较适合在屏幕上阅读,而 serif 字体更容易在纸上阅读

@media规则

@media 规则使你有能力在相同的样式表中,使用不同的样式规则来针对不同的媒介。

下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打印,将使用 10 个像素的 Times 字体,字体颜色为粉色。其中不论显示器还是纸媒介,都将font-weight 设置为粗体

实例

<style>
@media screen
{
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
    p.test {
    	color:pink;
    	font-family:times,serif;font-size:10px;
    }
}
@media screen,print
{
    p.test {font-weight:bold;}
}
</style>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:


不同的媒介类型


注意:媒介类型名称对大小写不敏感。

媒介类型描述
all用于所有的媒介设备。
aural用于语音和音频合成器。
braille用于盲人用点字法触觉回馈设备。
embossed用于分页的盲人用点字法打印机。
handheld用于小的手持的设备。
print用于打印机。
projection用于方案展示,比如幻灯片。
screen用于电脑显示器。
tty用于使用固定密度字母栅格的媒介,比如电传打字机和终端。
tv用于电视机类型的设备。

任务

?不会了怎么办
无数据提示暂无评论哟...我要评论
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号