CSS图像拼合技术
CSS 图像拼合技术 图像拼合图像拼合就是单个图像的集合。有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。使用图像拼合会降低服务器的请求数量,并节省带宽。 图像拼合 - 简单实例与其使用三个独立的图像,不如我们使用这种单个图像(”img_navsprites.gif”): 有了CSS,我们可以只显示我们需要的图像的一部分。在下面的例子CSS指定显示 “img_navsprites.gif” 的图像的一部分: 实例 img.home{width:46px;height:44px;background:url(img_navsprites.gif) 0 0;}尝试一下 » 实例解析: -因为不能为空,src属性只定义了一个小的透明图像。显示的图像将是我们在CSS中指定的背景图像宽度:46px;高度:44px; - 定义我们使用的那部分图像background:url(img_navsprites.gif) 0 0; - 定义背景图像和它的位置(左0px,顶部0px) 这是使用图像拼合最简单的方法,现在我们使用链接和悬停效果。 图像拼合 -...
CSS听觉参考手册
CSS 听觉参考手册 听觉样式表使用了语音合成和声音效果的结合,让用户收听信息,而不是读取信息。有声显示可用于: 失明人士帮助用户学习阅读帮助具有阅读问题的用户家庭娱乐在车上 听觉呈现通常会把文档转化为纯文本,然后传给屏幕阅读器(可读出屏幕上所有字符的一种程序)。听觉样式表的一个例子:实例h1,h2,h3,h4{ voice-family:male; richness:80; cue-before:url(“beep.au”)} 上面的例子用语音合成器播放声音,开头有一个男性的声音说话。 CSS 听觉参考手册CSS”列表示在CSS版本的属性定义(CSS1或CSS2)。 PropertyDescriptionValuesCSS azimuth设置声音应该来自哪里angle left-side far-left left center-left center center-right right far-right right-side behind ...
CSS合法颜色值
CSS 合法颜色值 CSS 合法的颜色值可以通过多种方式指定,包括命名颜色、十六进制、RGB、RGBA、HSL、HSLA,以及颜色函数。以下是几种常见的合法颜色值格式:命名颜色:直接使用颜色名称,例如:red、blue、green 等。 color: red;十六进制颜色:使用 #RRGGBB 或 #RGB 形式的十六进制值。color: #ff0000; /* 红色 /color: #f00; / 简写形式,红色 */RGB 颜色:使用 rgb() 函数指定红、绿、蓝三色的值,每个值在 0-255 之间。 color: rgb(255, 0, 0); /* 红色 /RGBA 颜色:类似于 rgb(),但增加了 alpha 通道,用于指定透明度,值范围在 0(完全透明)到 1(完全不透明)。color: rgba(255, 0, 0, 0.5); / 半透明红色 */HSL 颜色:使用 hsl() 函数指定色调(0-360°)、饱和度(0%-100%)和亮度(0%-100%)。 color:...
CSS参考手册
CSS 参考手册 菜鸟教程的 CSS 参考手册在所有主流浏览器中测试通过. CSS 属性CSS 属性组: 动画背景边框和轮廓框颜色内容页的媒体属性尺寸盒子模型(新)盒子模型(旧)字体内容生成 网格超链接线框列表外边距字幕多列内边距页面媒体定位 分页Ruby语音表格文本2D/3D 转换过渡用户界面 “CSS” 列指示属性是在哪个 CSS 版本中定义的 (CSS1, CSS2, 或者 CSS3).动画属性 属性描述CSS @keyframes定义一个动画,@keyframes定义的动画名称用来被animation-name所使用。3 animation复合属性。检索或设置对象所应用的动画特效。3 animation-name检索或设置对象所应用的动画名称...
CSS单位
CSS 单位CSS 有几个不同的单位用于表示长度。 一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。 长度有一个数字和单位组成如 10px, 2em, 等。 数字与单位之间不能出现空格。如果长度值为 0,则可以省略单位。 对于一些 CSS 属性,长度可以是负数。 有两种类型的长度单位:相对和绝对。 浏览器支持下表中的数字表示支持该长度单位的最低浏览器版本。 长度单位ChromeIEFirefoxSafariOpera em, ex, %, px, cm, mm, in, pt, pc1.03.01.01.03.5 ch27.09.01.07.020.0 rem4.09.03.64.111.6 vh, vw20.09.019.06.020.0 vmin20.09.0*19.06.020.0 vmax26.0不支持19.0不支持20.0 注意: Internet Explorer 9 通过不标准的名称 vm 来支持 vmin...
CSS动画
CSS 动画定义和用法一些 CSS 属性是可以有动画效果的,这意味着它们可以用于动画和过渡。动画属性可以逐渐地从一个值变化到另一个值,比如尺寸大小、数量、百分比和颜色。 浏览器支持表格中的数字表示支持该方法的第一个浏览器的版本号。紧跟在数字后面的 -webkit-, -moz-, 或 -o- 指定了第一个支持该属性的浏览器版本前缀。 4.0 -webkit-10.016.05.0 -moz-4.0 -webkit-15.0 -webkit-12.112.0 -o- 实例背景颜色逐渐地从红色变化到蓝色: @keyframes mymove{from {background-color:red;}to {background-color:blue;}}/Safari 和 Chrome:/@-webkit-keyframes mymove{from {background-color:red;}to {background-color:blue;}} 尝试一下 » 动画属性CSS 中的动画属性: 属性实例 background尝试一下...
CSS创建
CSS 创建 当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。 如何插入样式表插入样式表的方法有三种: 外部样式表(External style sheet)内部样式表(Internal style sheet)内联样式(Inline style) 外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部: 浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子: hr {color:sienna;}p {margin-left:20px;}body {background-image:url(“/images/back40.gif”);} 不要在属性值与单位之间留有空格(如:”margin-left: 20 px” ),正确的写法是...
CSS列表
CSS 列表 CSS 列表属性作用如下: 设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像 列表在 HTML中,有两种类型的列表: 无序列表 ul - 列表项标记用特殊图形(如小黑点、小方框等)有序列表 ol - 列表项的标记有数字或字母 使用 CSS,可以列出进一步的样式,并可用图像作列表项标记。无序列表如下所示: CoffeeTeaCoca Cola CoffeeTeaCoca Cola 有序列表如下所示: CoffeeTeaCoca Cola CoffeeTeaCoca Cola 不同的列表项标记list-style-type属性指定列表项标记的类型是: 实例 ul.a {list-style-type: circle;}ul.b {list-style-type: square;}ol.c {list-style-type: upper-roman;}ol.d {list-style-type: lower-alpha;} 尝试一下...
CSS分页实例
CSS 分页实例 本章节我们将为大家介绍如何通过使用 CSS 来创建分页的实例。 简单分页如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航。以下实例演示了如何使用 HTML 和 CSS 来创建分页: CSS 实例 ul.pagination { display: inline-block; padding: 0; margin: 0;}ul.pagination li {display: inline;}ul.pagination li a { color: black; float: left; padding: 8px 16px; text-decoration: none;}尝试一下 » 点击及鼠标悬停分页样式 «1234567» 如果点击当前页,可以使用 .active 来设置当前页样式,鼠标悬停可以使用 :hover选择器来修改样式: CSS 实例 ul.pagination li a.active { background-color: #4CAF50; color:...
CSS分组和嵌套选择器
CSS 分组 和 嵌套 选择器 分组选择器在样式表中有很多具有相同样式的元素。 h1 {color:green;}h2 {color:green;}p {color:green;}为了尽量减少代码,你可以使用分组选择器。每个选择器用逗号分隔。在下面的例子中,我们对以上代码使用分组选择器: 实例 h1,h2,p{color:green;}尝试一下 » 嵌套选择器它可能适用于选择器内部的选择器的样式。在下面的例子设置了四个样式:p{ }: 为所有 p 元素指定一个样式。.marked{ }: 为所有 class=”marked” 的元素指定一个样式。.marked p{ }: 为所有 class=”marked” 元素内的 p 元素指定一个样式。p.marked{ }: 为所有 class=”marked” 的 p 元素指定一个样式。 实例 p{color:blue; text-align:center;}.marked{background-color:red;}.marked...