CSS_05_图片
CSS 图片廊
以下是使用CSS创建图片廊：
图片廊
以下是使用CSS的float:left所创建图片廊:
代码如下:
beyondの心中の动漫神作
未闻花名
这个杀手不太冷
美国往事
寒蝉鸣泣之时
注意:
图片画廊演示demo
效果如下:
CSS 图像透明/不透明 Opacity
使用CSS很容易创建透明的图像。
注意：CSS Opacity属性是W3C的CSS3建议的一部分。
更多实例
创建透明图像 - 悬停效果
代码如下:
beyondの心中の动漫神作
注意:
opacity属性控制透明度
效果如下:
创建一个具有文本的拥有背景图像的透明框
代码如下:
beyondの心中の动漫神作
在我们走过的季节里
路旁盛开的花朵也在不断变化
那个季节盛开的花是叫什么来着?
轻轻摇曳着,一碰会微微刺痛
靠近一闻,隐约有股青涩的阳光的气息
那气息渐渐地淡去,我们也在慢慢长大
可是,那朵花一定还在某个地方盛开着……
对,我们永远都会继续实现那朵花的愿望.
注意:
一个半透明的效果
效果如下:
实例1 - 创建一个透明图像
CSS3中属性的透明度是 opacity.
首先，我们将向您展示如何用CSS创建一个透明图像。
看看下面的CSS：
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度opacity属性可以将图像变的不透明。
Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。
IE8和早期版本使用滤镜 filter:alpha(opacity=x)
x可以采取的值是从0 - 100。较低的值，使得元素更加透明。
提示：在本站的CSS参考手册中对 CSS opacity 属性有详细介绍。
实例2 - 图像的透明度 - 悬停效果
将鼠标移到图像上时,图片由半透明变成清晰可见：
CSS样式：
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
第一个CSS块是和例1中的代码类似。
此外，我们还增加了当用户将鼠标悬停hover在其中一个图像上时发生什么。
在这种情况下，当用户将鼠标悬停在图像上时，我们希望图片是清晰的。
此CSS是：opacity=1.
IE8和更早版本使用： filter:alpha(opacity=100).
当鼠标指针远离图像时，图像将重新具有透明度。
CSS 图像拼合技术
图像拼合
图像拼合就是单个图像的集合。
图像许多的网页 可能需要很长的时间来加载和生成多个服务器的请求。
使用图像拼合技术 就能够降低服务器的请求次数，并节省带宽。
图像拼合 - 简单实例
与其使用三个独立的图像，不如我们使用这种单个图像（"img_together.gif"）：
有了CSS，我们可以只显示我们需要的图像的一部分。
在下面的例子CSS指定显示 "img_together.gif" 的图像的一部分:
代码如下:
beyondの心中の动漫神作
注意:
从大图中切小图,先加载一个透明的小图,再设置背景图
效果如下:
核心代码:
width:46px;
height:44px;
background:url(img_together.gif) 0 0;
}
实例解析：
-因为src不能为空,所以src属性定义了一个小的透明图像。但是,将来显示的图像将是我们在CSS中指定的背景图像- 宽度：46px;高度：44px; 定义我们使用的是哪一部分图像
- background:url(img_together.gif) 0 0; 定义背景图像和它的位置（左0px，顶部0px）
唯一没有搞清楚的是: 为啥裁切第2张next图标时, 用的坐标是-91px 0px???Excuse Me???
这是使用图像拼合最简单的方法，现在我们使用链接和悬停效果。
图像拼合 - 创建一个导航列表
我们想使用拼合图像 ("img_together.gif")，以创建一个导航列表。
我们将使用一个HTML列表li，因为它既可以链接a，同时还支持背景图像:
代码如下:
beyondの心中の动漫神作
注意:
从大图中切小图做导航
效果如下:
实例解析：
- #id_ul_container{position:relative;} - 位置设置父容器为相对定位relative，目的是让里面的子元素li可以使用绝对定位absolute
- #id_ul_container li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding设置为0，列表样式被删除，所有列表项是进行绝对定位absolute的
- #id_ul_container li, #id_ul_container a{height:44px;display:block;} - 所有图像的高度是44px
现在开始每个具体部分的定位和样式：
- #id_li_home{left:0px;width:46px;} - 绝对定位到最左边的方式，以及图像的宽度是46px
- #id_li_home{background:url(img_together.gif) 0 0;} - 定义背景图像和它的位置（左0px，顶部0px）
- #id_li_previous{left:63px;width:43px;} - 左外边距定位63px（＃home宽46px+项目之间的一些多余的空间），宽度为43px。
- #id_li_previous{background:url('img_together.gif') -47px 0;} - 定义背景图像向右侧定位47px（＃home宽46px+分隔线的1px）
- #id_li_next{left:129px;width:43px;}- 左外边距定位129px(#prev 63px + #prev宽是43px + 剩余的空间), 宽度是43px.
- #id_li_next{background:url('img_together.gif') no-repeat -91px 0;} - 定义背景图像向右侧定位91px（＃home 46px+1px的分割线+＃prev宽43px+1px的分隔线）
图像拼合 - 悬停效果
现在，我们希望我们的导航列表中添加一个悬停hover效果。
 |
:hover 选择器用于鼠标悬停在元素上的显示的效果 提示： :hover 选择器可以运用于所有元素。 |
|---|
我们的新图像 ("img_together_hover.gif") 包含三个导航图像和三幅hover图像：
因为这是一个单一的图像，而不是6个单独的图像文件，当用户停留在图像上不会出现延迟加载。
完整代码如下:
beyondの心中の动漫神作
注意:
从大图中切小图做导航,带hover效果
效果如下:
跟上一个例子相比,我们为了添加悬停效果,仅仅只添加了三行代码：
实例
#id_li_previous a:hover{background: url('img_together_hover.gif') -47px -45px;}
#id_li_next a:hover{background: url('img_together_hover.gif') -91px -45px;}
实例解析：
- 由于该列表项包含一个链接a，所以我们才可以使用：hover伪类
- #id_li_home a:hover{background: transparent url(img_together_hover.gif) 0 -45px;} - 对于所有三个悬停图像，我们指定相同的背景位置，只是每个再向下45px
CSS 媒体类型
媒体类型允许你指定 文件将以何种面目 在不同的媒体上 进行展示。
该文件可以以不同的方式显示在不同的屏幕上，在纸张上，在电视上, 或听觉浏览器等等。
媒体类型
某些 CSS 属性仅仅被设计为针对某些媒介。
比方说 "voice-family" 属性被设计为针对听觉用户终端。
其他一些属性可用于不同的媒体类型。
例如，"font-size"属性可用于屏幕和印刷媒体，但有不同的值。
屏幕和纸上的文件不同，通常屏幕上需要一个更大号的字体，以减少眼部疲劳
sans - serif字体比较适合在屏幕上阅读，
而serif字体更容易在纸上阅读。
@media 规则
@media 规则允许在 相同样式表 为 不同媒体 设置 不同的样式。
在下面的例子告诉我们浏览器屏幕上显示一个14像素的Verdana字体样式。
但是如果页面打印，将是10个像素的Times字体。
请注意，font-weight在屏幕上和纸上设置为粗体:
一般屏幕需要更大字体 和 无衬线,以减少眼部疲劳
一般纸质需要小号字体 和 有衬线
代码如下:
beyondの心中の动漫神作
未闻花名
注意:
@media 可以分别为不同设备如screen或print指定样式
效果如下:(不好演示...略)
你可以自己尝试看看 ! 如果您使用的是Mozilla / Firefox或IE5+打印此页，
你会看到，"Media Types"将使用另一种比其他文本字体大小更小点的字体显示。
提示：有关 @media 规则的更多信息，请参考CSS参考手册的CSS @media 查询部分。
其他媒体类型
注意：媒体类型名称不区分大小写。
| 媒体类型 | 描述 |
|---|---|
| all | 用于所有的媒体设备。 |
| aural | 用于语音和音频合成器。 |
| braille | 用于盲人用点字法触觉回馈设备。 |
| embossed | 用于分页的盲人用点字法打印机。 |
| handheld | 用于小的手持的设备。 |
| 用于打印机。 | |
| projection | 用于方案展示，比如幻灯片。 |
| screen | 用于电脑显示器。 |
| tty | 用于使用固定密度字母栅格的媒体，比如电传打字机和终端。 |
| tv | 用于电视机类型的设备。 |
扩展阅读
CSS3教程：CSS3 多媒体查询
CSS 属性 选择器 牛X
顾名思义，CSS 属性选择器就是指可以根据元素的属性以及属性值来选择元素。
具有特定属性的HTML元素样式
具有特定属性的HTML元素样式 不仅仅是class和id属性喔。
注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。
属性选择器
下面的例子是把包含标题（title）的所有元素变为蓝色:
代码如下:
beyondの心中の动漫神作
未 闻 花 名
我们仍未知道那年夏天所见到的花的名字
那朵花
注意:
拥有title属性的元素,全是red喔~
效果如下:
核心代码:
color:red;
}
属性和值 选择器
下面的实例改变了 所有 标题title属性的值='anohana'的元素 的字体颜色全为green:
代码如下:
beyondの心中の动漫神作
未 闻 花 名
我们仍未知道那年夏天所见到的花的名字
那朵花
龙与虎
注意:
[title=anohana]
表示:所有title属性值为anohana的元素,全是red喔~
效果如下:
核心代码:
color: green;
}
属性和值的选择器 ~= 包含 必须是单词
下面是 包~=含 指定值的title属性的元素样式的例子，使用（~）分隔属性和值:
代码如下:
beyondの心中の动漫神作
未 闻 花 名
我们仍未知道那年夏天所见到的花的名字
花
龙与虎
注意:
[title~=hana]
表示:所有title属性值包含hana这个word的元素,必须是word喔~
效果如下:
核心代码: 必须是包含独立的hana这个单词喔
下面是包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值
完全匹配,或者后面接-
完整代码如下:
beyondの心中の动漫神作
未 闻 花 名
hana-us
hana us
hanaus
hana
anohana
ano-hana
ano hana
注意:
[title|=hana]
表示:完全匹配,或者后面跟-
效果如下:
核心代码如下: 完全匹配,或者后面接-
表单样式 input[type="text"] {}
如果是表单,则属性选择器样式 无需使用class或id的形式:
完整代码如下:
beyondの心中の动漫神作
未 闻 花 名
注意:input[type="text"]
如果是表单,则属性选择器,直接上
效果如下:
核心代码:
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
相关文章
CSS 参考手册：CSS [attribute|=value] 选择器 完全匹配,或后面接-
你已经学习了CSS,下一步学习什么呢?
CSS 总结
本教程已向你讲解了如何创建样式表来同时控制多重页面的样式和布局。
你已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距。
同时，你也学会了如何定位元素、控制元素的可见性和尺寸、设置元素的形状、
将一个元素置于另一个之后，以及向某些选择器添加特殊的效果，比如链接。
你已经学习了CSS,下一步学习什么呢?
下一步应该学习 JavaScript 。
JavaScript
JavaScript 是最流行的语言之一。
JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。
JavaScript可以使您的网站更具活力。
许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。
几乎每个人都有能力将小的 JavaScript 片段添加到网页中。
未完待续,下一章节,つづく
