03.CSS高级教程.pptx

CSSAdvanced 演讲人部门 单位 尺寸 高度 默认值为auto值可以用px cm等单位height 10px 百分比基于包含它的块级元素的百分比height 50 最大高度限制max height 100px 最小高度限制min height 20px 宽度 默认值为auto值可以用px cm等单位width 10px 百分比基于包含它的块级元素的百分比width 50 最大高度限制max width 100px 最小高度限制min width 20px 对图像的宽高设置 仅设置高度 宽度 则对图片未设置的宽度 高度 实际值是由原图比例和设置的高度 宽度 值计算出来的同时设定了宽度和高度图片会按照设置的宽高值拉伸显示仅设置最大高度 宽度 在图片原始的高度 宽度 未超过设定的最大值时 保持不变如果超过最大值 则按照最大高度 宽度 值设限后 再将宽度 高度 同比缩放 仅设置最小高度 宽度 在图片原始的高度 宽度 未小于设定的最小值时 则保持不变如果小于最小值 则按照最小高度 宽度 值设限后 再将宽度 高度 同比缩放 同时设置最大 最小 高度和宽度以优先达到限制的高度或宽度值为最大限制值 然后再同比缩放图片大小 图片的宽高设置 Demo 行高 line height 该属性影响行框的布局line height与font size的计算值之差 即 行间距 分为两半 分别加到一个文本行内容的顶部和底部 可以包含这些内容的最小框就是行框 在应用到一个块级元素时 它定义了该元素中基线之间的最小距离而不是最大距离文字内容显示在line height的纵向中间位置 所以在布局中经常被用来做文字的上下居中效果 分类属性 clear none默认值 允许浮动元素出现在两侧 left在左侧不允许浮动元素 right在右侧不允许浮动元素 both在左右两侧均不允许浮动元素 cursor auto默认浏览器设置的光标 default默认光标 通常是一个箭头 pointer光标呈现为指示链接的指针 一只手 move此光标指示某对象可被移动 text此光标指示文本 wait此光标指示程序正忙 通常是一只表或沙漏 help此光标指示可用的帮助 通常是一个问号或一个气球 url需使用的自定义光标的URL display inline 默认值 此元素会被显示为内联元素 元素前后没有换行符 block此元素将显示为块级元素 此元素前后会带有换行符 none此元素不会被显示 list item此元素会作为列表显示 visibility visible默认值元素是可见的 hidden元素是不可见的 即使不可见的元素也会占据页面上的空间 请使用 display 属性来创建不占据页面空间的不可见元素 CSS的存放位置 CSS的位置 样式表 这个段落将被显示为黄底红字粗体 CSS的层叠特性 这是第1行文本这是第2行文本这是第3行文本这是第4行文这是第5行文本 层叠样式的优先级 媒介类型 媒介类型 MediaTypes 允许你定义以何种媒介来提交文档 文档可以在显示器 纸等媒介上显示 不同媒介的样式表 mediascreen p test font family verdana sans serif font size 14px mediaprint p test font family times serif font size 10px mediascreen print p test font weight bold 不同的媒介类型 打印属性 尺寸 Windows8中的媒介类型 media ms view state fullscreen landscape 横向全屏 media ms view state fullscreen portrait 纵向全屏 media ms view state snapped 侧边停靠 media ms view state filled 填充 Windows8App中CSS的媒介适配 Demo CSS3 新的选择器 色彩模型 HSL工业界的颜色标准 色调 H 饱和度 S 亮度 L HSLAHSL的基础上增加了一个透明度 A 的设置opacity透明度 用0 1之间的浮点数设置透明度 0完全透明 1完全不透明 RGBARGB的基础上增加了一个透明度 A 的设置 多列布局 columns 215px3 列间边框 column rule 5pxdashed DCDCDC 列间据 column gap 200px 网格对齐 grid display ms grid ms grid columns 1fr3fr1fr ms grid rows 80pxautoauto header nav footer ms grid column 1 header footer ms grid column span 3 nav article aside ms grid row 2 article ms grid column 2 aside ms grid column 3 footer ms grid row 3 边框 圆角边框 border radius 20px20px20px20px 盒阴影 box shadow 2px2px2pxrgba 0 0 0 5 渐变 转换 transform skew 30deg 10deg 多背景图 div background url example jpg topleftno repeat url example2 jpg bottomleftno repeat url example3 jpg centercenterrepeat y 第一个图离用户最近 font face font face font family DroidSans src url fonts DroidSans ttf format truetype p font family DroidSans 边框背景 border image url example png 18252518stretchstretch 我是有边框背景的文字哦 Q A 2011MicrosoftCorporation 保留所有权利 Microsoft Windows WindowsVista及其他产品名称是或者可能是在美国和 或其他国家 地区的注册商标和 或商标 此处包含的信息仅供参考 并代表MicrosoftCorporation截至