CSS_05_图片

最新推荐文章于 2024-07-05 23:24:20 发布
最新推荐文章于 2024-07-05 23:24:20 发布
阅读量377 收藏
点赞数 1
分类专栏： # CSS/CSS3 文章标签： CSS 图片 图像
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pre_eminent/article/details/79505455
版权



CSS 图片廊

以下是使用CSS创建图片廊：

Klematis
添加图片描述
Klematis
添加图片描述
Klematis
添加图片描述
Klematis
添加图片描述






图片廊

以下是使用CSS的float:left所创建图片廊:

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->

	<style type="text/css">
		body{
			font-size: 100%;
			background-image: url("sakura4.png");
			background-repeat: no-repeat;
			background-position: center center;
			/*声明margin和padding是个好习惯*/
			margin: 0;
			padding: 0;
		}
		div.class_div_container {
			margin: 2px;
			border:1px solid #000;
			height: auto;
			width: auto;
			/*左浮动*/
			float: left;
			text-align: center;
		}
		div.class_div_container a img {
			/*转成inline*/
			display: inline;
			margin: 3px;
			/*边框为白色,当hover的时候才显示*/
			border:1px solid #fff;
		}
		div.class_div_container a:hover img {
			/*当a是hover的时候,a里面的img的边框才显颜色*/
			border:1px solid #00f;
		}
		div.class_div_description {
			text-align: center;
			font-weight: normal;
			width: 150px;
			margin: 3px;
			
		}
	</style>
</head>

<body>
	
		
		<div class="class_div_container">
			<a href="">
				<img src="menma.png" width="150" height="150" alt="未闻花名" />
			</a>
			<div class="class_div_description">
				未闻花名
			</div>
		</div>

		<div class="class_div_container">
			<a href="">
				<img src="mathilda.jpg" width="150" height="150" alt="这个杀手不太冷" />
			</a>
			<div class="class_div_description">
				这个杀手不太冷
			</div>
		</div>

		<div class="class_div_container">
			<a href="">
				<img src="jennifer.png" width="150" height="150" alt="美国往事" />
			</a>
			<div class="class_div_description">
				美国往事
			</div>
		</div>

		<div class="class_div_container">
			<a href="">
				<img src="hurutelika.png" width="150" height="150" alt="寒蝉鸣泣之时" />
			</a>
			<div class="class_div_description">
				寒蝉鸣泣之时
			</div>
		</div>
		

		<p class="sgcontentcolor sgcenter" style="clear:left;">
			<b>注意:</b>
			图片画廊演示demo
		</p>
		<!-- <a style="color:red;"></a> -->
		<footer id="copyright">
			<p style="font-size:14px;text-align:center;font-style:italic;">
			Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
			</p>		
		</footer>


	
</body>
</html>

效果如下:





CSS 图像透明/不透明 Opacity

使用CSS很容易创建透明的图像。

注意：CSS Opacity属性是W3C的CSS3建议的一部分。

Examples

更多实例

创建透明图像 - 悬停效果


代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->

	<style type="text/css">
		body{
			font-size: 100%;
			background-image: url("sakura4.png");
			background-repeat: no-repeat;
			background-position: center center;
			/*声明margin和padding是个好习惯*/
			margin: 0;
			padding: 0;
		}
		img {
			opacity: 0.4;
			filter:alpha(opacity=40);
		}
		img:hover {
			opacity: 1.0;
			filter:alpha(opacity=100);
		}
	</style>
</head>

<body>
		
		<img src="menma.png" width="150" height="150" alt="面码" />
		<img src="mathilda.jpg" width="150" height="150" alt="这个杀手不太冷" />
		<p class="sgcontentcolor sgcenter" style="clear:left;">
			<b>注意:</b>
			opacity属性控制透明度
		</p>
		<!-- <a style="color:red;"></a> -->
		<footer id="copyright">
			<p style="font-size:14px;text-align:center;font-style:italic;">
			Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
			</p>		
		</footer>


	
</body>
</html>

效果如下:



创建一个具有文本的拥有背景图像的透明框

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->

	<style type="text/css">
		body{
			font-size: 100%;
			background-image: url("sakura4.png");
			background-repeat: no-repeat;
			background-position: center center;
			/*声明margin和padding是个好习惯*/
			margin: 0;
			padding: 0;
		}
		div.class_div_container {
			width: 500px;
			height: 250px;
			background:url(menma.png) repeat;
			border:2px solid black;
		}
		div.class_div_translucent {
			width: 400px;
			height: 180px;
			margin: 30px 50px;
			background-color: #fff;
			border:1px solid black;
			opacity: 0.6;
			filter:alpha(opacity=60);
		}
		div.class_div_translucent p {
			margin: 30px 40px;
			font-weight: bold;
			color: #000;
		}
	</style>
</head>

<body>
		
		<div class="class_div_container">
			<div class="class_div_translucent">
				<p>
					在我们走过的季节里<br/>
路旁盛开的花朵也在不断变化<br/>
那个季节盛开的花是叫什么来着?<br/>
轻轻摇曳着,一碰会微微刺痛<br/>
靠近一闻,隐约有股青涩的阳光的气息<br/>
那气息渐渐地淡去,我们也在慢慢长大<br/>
可是,那朵花一定还在某个地方盛开着……<br/>
对,我们永远都会继续实现那朵花的愿望.
				</p>
			</div>
		</div>
		<p class="sgcontentcolor sgcenter" style="clear:left;">
			<b>注意:</b>
			一个半透明的效果
		</p>
		<!-- <a style="color:red;"></a> -->
		<footer id="copyright">
			<p style="font-size:14px;text-align:center;font-style:italic;">
			Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
			</p>		
		</footer>


	
</body>
</html>

效果如下:



实例1 - 创建一个透明图像

CSS3中属性的透明度是 opacity.

首先，我们将向您展示如何用CSS创建一个透明图像。

看看下面的CSS：

img {
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样式：

img {
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"）：

navigation images

有了CSS，我们可以只显示我们需要的图像的一部分。

在下面的例子CSS指定显示 "img_together.gif" 的图像的一部分:

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->

	<style type="text/css">
		body{
			font-size: 100%;
			background-image: url("sakura4.png");
			background-repeat: no-repeat;
			background-position: center center;
			/*声明margin和padding是个好习惯*/
			margin: 0;
			padding: 0;
		}
		img.class_img_home {
			width: 46px;
			height: 44px;
			background:url(img_together.gif) 0 0;
		}
		img.class_img_next {
			width: 43px;
			height: 44px;
			/*为啥是负数???*/
			background:url(img_together.gif) -91px 0;
		}

	</style>
</head>

<body>
		<img src="img_transparent.png" class="class_img_home" />
		<img src="img_transparent.png" class="class_img_next" />
		
		<p class="sgcontentcolor sgcenter" style="clear:left;">
			<b>注意:</b>
			从大图中切小图,先加载一个透明的小图,再设置背景图
		</p>
		<!-- <a style="color:red;"></a> -->
		<footer id="copyright">
			<p style="font-size:14px;text-align:center;font-style:italic;">
			Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
			</p>		
		</footer>


	
</body>
</html>

效果如下:



核心代码:

img.home {
   width:46px;
   height:44px;
   background:url(img_together.gif) 0 0;
}

实例解析：

  • <img class="home" src="img_transparent.gif" /> -因为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，同时还支持背景图像:

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->

	<style type="text/css">
		body{
			font-size: 100%;
			background-image: url("sakura4.png");
			background-repeat: no-repeat;
			background-position: center center;
			/*声明margin和padding是个好习惯*/
			margin: 0;
			padding: 0;
		}
		#id_ul_container {
			/*做absolute父容器*/
			position: relative;
		}
		#id_ul_container li {
			margin: 0;
			padding: 0;
			list-style: none;
			position: absolute;
			top: 0;
		}
		#id_ul_container li, #id_ul_container a {
			height: 44px;
			/*转成block块元素*/
			display: block;
		}
		#id_li_home {
			left: 0px;
			width: 46;
			background:url(img_together.gif) 0 0;
		}
		#id_li_previous {
			left: 63px;
			width: 43px;
			/*为啥是负数???*/
			background:url(img_together.gif) -47px 0;
		}
		#id_li_next {
			left: 129px;
			width: 43px;
			/*为啥是负数???*/
			background:url(img_together.gif) -91px 0;
		}
	</style>
</head>

<body>
		<ul id="id_ul_container">
			<li id="id_li_home">
				<a href=""></a>
			</li>
			<li id="id_li_previous">
				<a href=""></a>
			</li>
			<li id="id_li_next">
				<a href=""></a>
			</li>
		</ul>
		<br/>

		<p class="sgcontentcolor sgcenter" style="clear:left;">
			<b>注意:</b>
			从大图中切小图做导航
		</p>
		<!-- <a style="color:red;"></a> -->
		<footer id="copyright">
			<p style="font-size:14px;text-align:center;font-style:italic;">
			Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
			</p>		
		</footer>


	
</body>
</html>

效果如下:


实例解析：

  • #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效果。

lamp:hover 选择器用于鼠标悬停在元素上的显示的效果

提示： :hover 选择器可以运用于所有元素。

我们的新图像 ("img_together_hover.gif") 包含三个导航图像和三幅hover图像：

navigation images

因为这是一个单一的图像，而不是6个单独的图像文件，当用户停留在图像上不会出现延迟加载。

完整代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->

	<style type="text/css">
		body{
			font-size: 100%;
			background-image: url("sakura4.png");
			background-repeat: no-repeat;
			background-position: center center;
			/*声明margin和padding是个好习惯*/
			margin: 0;
			padding: 0;
		}
		#id_ul_container {
			/*做absolute父容器*/
			position: relative;
		}
		#id_ul_container li {
			margin: 0;
			padding: 0;
			list-style: none;
			/*绝对布局*/
			position: absolute;
			top: 0;
		}
		#id_ul_container li, #id_ul_container a {
			height: 44px;
			/*转成block块元素*/
			display: block;
		}
		#id_li_home {
			left: 0px;
			width: 46;
			background:url(img_together_hover.gif) 0 0;
		}
		/*多了一个hover效果*/
		#id_li_home a:hover {
			background:url(img_together_hover.gif) 0 -45px;
		}
		#id_li_previous {
			left: 63px;
			width: 43px;
			/*为啥是负数???*/
			background:url(img_together_hover.gif) -47px 0;
		}
		/*多了一个hover效果*/
		#id_li_previous a:hover {
			background:url(img_together_hover.gif) -47px -45px;
		}
		#id_li_next {
			left: 129px;
			width: 43px;
			/*为啥是负数???*/
			background:url(img_together_hover.gif) -91px 0;
		}
		/*多了一个hover效果*/
		#id_li_next a:hover {
			background:url(img_together_hover.gif) -91px -45px;
		}
	</style>
</head>

<body>
		<ul id="id_ul_container">
			<li id="id_li_home">
				<a href=""></a>
			</li>
			<li id="id_li_previous">
				<a href=""></a>
			</li>
			<li id="id_li_next">
				<a href=""></a>
			</li>
		</ul>
		<br/>

		<p class="sgcontentcolor sgcenter" style="clear:left;">
			<b>注意:</b>
			从大图中切小图做导航,带hover效果
		</p>
		<!-- <a style="color:red;"></a> -->
		<footer id="copyright">
			<p style="font-size:14px;text-align:center;font-style:italic;">
			Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
			</p>		
		</footer>


	
</body>
</html>

效果如下:


跟上一个例子相比,我们为了添加悬停效果,仅仅只添加了三行代码：

实例

#id_li_home a:hover{background: url('img_together_hover.gif') 0 -45px;}
#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在屏幕上和纸上设置为粗体:

一般屏幕需要更大字体 和 无衬线,以减少眼部疲劳

一般纸质需要小号字体 和 有衬线

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->

	<style type="text/css">
		body{
			font-size: 100%;
			background-image: url("sakura4.png");
			background-repeat: no-repeat;
			background-position: center center;
			/*声明margin和padding是个好习惯*/
			margin: 0;
			padding: 0;
		}
		/*一般屏幕需要更大字体 和 无衬线,以减少眼部疲劳*/
		@media screen {
			p.class_p_container {
				font-family: verdana,sans-serif;
				font-size: 14px;
			}
		}
		/*一般纸质需要小号字体 和 有衬线*/
		@media print {
			p.class_p_container {
				font-family: times,serif;
				font-size: 10px;
			}
		}
		/*也可以同时指定*/
		@media screen,print {
			p.class_p_container {
				font-weight: bold;
			}
		}
	</style>
</head>

<body>
		
		<div>
			未闻花名
		</div>
		<p class="sgcontentcolor sgcenter" style="clear:left;">
			<b>注意:</b>
			@media 可以分别为不同设备如screen或print指定样式
		</p>
		<!-- <a style="color:red;"></a> -->
		<footer id="copyright">
			<p style="font-size:14px;text-align:center;font-style:italic;">
			Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
			</p>		
		</footer>


	
</body>
</html>

效果如下:(不好演示...略)

你可以自己尝试看看 ! 如果您使用的是Mozilla / Firefox或IE5+打印此页，

你会看到，"Media Types"将使用另一种比其他文本字体大小更小点的字体显示。

提示：有关 @media 规则的更多信息，请参考CSS参考手册的CSS @media 查询部分。

其他媒体类型

注意：媒体类型名称不区分大小写。

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

扩展阅读

CSS3教程：CSS3 多媒体查询



CSS 属性 选择器 牛X

顾名思义，CSS 属性选择器就是指可以根据元素的属性以及属性值来选择元素。 

具有特定属性的HTML元素样式

具有特定属性的HTML元素样式  不仅仅是class和id属性喔。

注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。

属性选择器

下面的例子是把包含标题（title）的所有元素变为蓝色:

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->

	<style type="text/css">
		body{
			font-size: 100%;
			background-image: url("sakura4.png");
			background-repeat: no-repeat;
			background-position: center center;
			/*声明margin和padding是个好习惯*/
			margin: 0;
			padding: 0;
		}
		/*拥有title属性的元素  全为red*/
		[title] {
			color: red;
		}

	</style>
</head>

<body>
		
		<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
			未 闻 花 名
		</h1>
		<h3 title="anohana">我们仍未知道那年夏天所见到的花的名字</h3>
		<hr/>
		<a title="anohana" href="">那朵花</a>
		<p class="sgcontentcolor sgcenter" style="clear:left;">
			<b>注意:</b>
			拥有title属性的元素,全是red喔~
		</p>
		<!-- <a style="color:red;"></a> -->
		<footer id="copyright">
			<p style="font-size:14px;text-align:center;font-style:italic;">
			Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
			</p>		
		</footer>


	
</body>
</html>

效果如下:


核心代码:

[title] { 
   color:red; 
}

属性和值 选择器

下面的实例改变了 所有 标题title属性的值='anohana'的元素 的字体颜色全为green:

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->

	<style type="text/css">
		body{
			font-size: 100%;
			background-image: url("sakura4.png");
			background-repeat: no-repeat;
			background-position: center center;
			/*声明margin和padding是个好习惯*/
			margin: 0;
			padding: 0;
		}
		/*所有title属性值为anohana的元素  全为green*/
		[title=anohana] {
			color: green;
		}

	</style>
</head>

<body>
		
		<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
			未 闻 花 名
		</h1>
		<h3 title="anohana">我们仍未知道那年夏天所见到的花的名字</h3>
		<hr/>
		<a title="anohana" href="">那朵花</a>
		<a title="tiger" href="">龙与虎</a>
		<p class="sgcontentcolor sgcenter" style="clear:left;">
			<b>注意:</b>
			[title=anohana]<br/>表示:所有title属性值为anohana的元素,全是red喔~
		</p>
		<!-- <a style="color:red;"></a> -->
		<footer id="copyright">
			<p style="font-size:14px;text-align:center;font-style:italic;">
			Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
			</p>		
		</footer>


	
</body>
</html>

效果如下:



核心代码:

[title=anohana] { 
  color: green; 
}

属性和值的选择器  ~=  包含  必须是单词

下面是 包~=含 指定值的title属性的元素样式的例子，使用（~）分隔属性和值:

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->

	<style type="text/css">
		body{
			font-size: 100%;
			background-image: url("sakura4.png");
			background-repeat: no-repeat;
			background-position: center center;
			/*声明margin和padding是个好习惯*/
			margin: 0;
			padding: 0;
		}
		/*所有title属性值 包含 hana这个word的元素  全为Teal*/
		[title~=hana] {
			color: Teal;
		}

	</style>
</head>

<body>
		
		<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
			未 闻 花 名
		</h1>
		<h3 title="a no hana">我们仍未知道那年夏天所见到的花的名字</h3>
		<hr/>
		<a title="hana" href="">花</a>
		<a title="tiger" href="">龙与虎</a>
		<p class="sgcontentcolor sgcenter" style="clear:left;">
			<b>注意:</b>
			[title~=hana]<br/>表示:所有title属性值包含hana这个word的元素,必须是word喔~
		</p>
		<!-- <a style="color:red;"></a> -->
		<footer id="copyright">
			<p style="font-size:14px;text-align:center;font-style:italic;">
			Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
			</p>		
		</footer>


	
</body>
</html>

效果如下:


 

核心代码:  必须是包含独立的hana这个单词喔

[title~=hana] { color:Teal; }


下面是包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值

完全匹配,或者后面接-

完整代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->

	<style type="text/css">
		body{
			font-size: 100%;
			background-image: url("sakura4.png");
			background-repeat: no-repeat;
			background-position: center center;
			/*声明margin和padding是个好习惯*/
			margin: 0;
			padding: 0;
		}
		/*所有title属性值 包含 hana这个word的元素  全为SteelBlue*/
		[title|=hana] {
			color: MediumBlue;
		}

	</style>
</head>

<body>
		
		<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
			未 闻 花 名
		</h1>
		
		<p title="hana-us" >hana-us</p>
		<p title="hana us" >hana us</p>
		<p title="hanaus" >hanaus</p>
		<p title="hana" >hana</p>
		<p title="anohana" >anohana</p>
		<p title="ano-hana" >ano-hana</p>
		<p title="an ohana" >ano hana</p>
		<p class="sgcontentcolor sgcenter" style="clear:left;">
			<b>注意:</b>
			[title|=hana]<br/>表示:完全匹配,或者后面跟-
		</p>
		<!-- <a style="color:red;"></a> -->
		<footer id="copyright">
			<p style="font-size:14px;text-align:center;font-style:italic;">
			Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
			</p>		
		</footer>


	
</body>
</html>

效果如下:


核心代码如下: 完全匹配,或者后面接-

[lang|=en] { color:blue; }

表单样式 input[type="text"] {}

如果是表单,则属性选择器样式 无需使用class或id的形式:

完整代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->

	<style type="text/css">
		body{
			font-size: 100%;
			background-image: url("sakura4.png");
			background-repeat: no-repeat;
			background-position: center center;
			/*声明margin和padding是个好习惯*/
			margin: 0;
			padding: 0;
		}
		/*如果是表单,则属性选择器,直接上*/
		input[type="text"] {
			width: 150px;
			/*转成block块*/
			display: block;
			margin-bottom: 10px;
			background-color: #eee;
			color: red;
		}
		input[type="button"] {
			width: 120px;
			margin-left: 35px;
			/*转成block块*/
			display: block;
		}

	</style>
</head>

<body>
		
		<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
			未 闻 花 名
		</h1>
		<form name="name_form" action="" method="post">
			动漫名称:<input type="text" name="anime_name" value="那朵花" size="20" />
			动漫女主:<input type="text" name="anime_actress" value="面码" size="20" />
			<input type="button" value="submit" />
		</form>
		<p class="sgcontentcolor sgcenter" style="clear:left;">
			<b>注意:</b>input[type="text"]<br/>
			如果是表单,则属性选择器,直接上
		</p>
		<!-- <a style="color:red;"></a> -->
		<footer id="copyright">
			<p style="font-size:14px;text-align:center;font-style:italic;">
			Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
			</p>		
		</footer>


	
</body>
</html>

效果如下:



核心代码:

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 片段添加到网页中。 

未完待续,下一章节,つづく



pre_eminent
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
达内教学课件html_css_js.zip
12-27
在《java_html_css_js_day01.xps》到《java_html_css_js_day05.xps》的教学课件中，可能详细讲解了HTML5的新特性，如语义化标签（例如、、、和）、音频和视频嵌入、离线存储以及拖放功能等。 CSS（Cascading Style ...
CSS_PPT课程...
10-26
同时，多媒体的处理包括图片优化、响应式图像、视频和音频的嵌入和样式控制。 通过这个全面的“CSS_PPT课程”，学习者不仅可以掌握CSS的基础知识，还能了解到HTML标签的使用、XHTML的重要性以及SEO的实践技巧，...
CSS 图像：Image
梁辰兴的博客
09-20 1306
在上面的示例中，使用了一个名为"spritesheet.png"的图像文件，它包含了三个小图像，每个图像的大小为100px*100px，分别表示1、2和3。在CSS中，使用背景图像属性将每个图像项的背景设置为拼合图像的一部分，通过指定不同的背景位置来实现。在上面的示例中，使用了一个名为"navbar.png"的图像文件，它包含了三个小图像，每个图像的大小为50px*50px，分别表示主页、关于和联系。在CSS中，使用背景图像属性将每个链接的背景设置为拼合图像的一部分，通过指定不同的背景位置来实现。
图片专题css
A123ppleQueen的博客
09-14 144
图片大小 background-size
css图像属性
最新发布
2301_76255666的博客
07-05 1139
img是单个标记，图像样式由img标记将图像插入网页中，也可以使用CSS设置成某元素的背景图像，根据图像格式的不同，适用的地方也不同。图像与文字之间的对齐方式通过img标记的align属性来设置。图像对其方式分水平对齐和垂直对齐方式两种，其中水平对齐方式有left、center、right，垂直方式的取值有top、middle、bottom，表示图像与同行文字的相对位置。hspace调整图像左右两边的空白距离，vspace调整图像上下两边的空白距离。valu为边框线的宽度，用数字表示，单位为像素。
Css 图片处理
benben0729的专栏
09-28 283
图片等比例缩放 img{ max-width:100%; max-height:100%; } 背景图 #背景图覆盖 div{ background:url(img_flwr.gif); background-size:80px 60px; #background-size:cover; background-repeat:no-repe...
背景
webpon
08-17 125
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
20_06_05
03-29
11. **CSS（层叠样式表）集成**：通过`<style>`标签或`<link>`标签引入CSS文件，实现页面的样式控制。 12. **JavaScript交互**：HTML可以与JavaScript结合，通过`<script>`标签引入JS代码，实现动态效果和用户交互...
CSS_JS_精华实例
04-06
9. **22-最强图片滚动(JS封装类)**：这个实例提供了一个高效的图片滚动插件，可以实现平滑的图片轮播效果，适合用于产品展示或相册展示区域。 10. **17-DIV拖动(许愿墙)**：通过JavaScript实现的可拖动DIV元素，常...
php3_KaoriIshimaru_05
04-08
7. **资源文件**：如图片、样式表（.css）、JavaScript文件（.js）等。 8. **脚本**：如build.sh、install.sh，用于自动化构建或安装过程。 9. **LICENSE**：说明项目使用的许可协议。 10. **贡献指南**：...
JS+CSS 控制Img在div中居中显示一部分
10-24
JS+CSS 控制Img在div中居中显示一部分
纯div+css轮播图片切换图片
11-07
纯DIV+CSS做的三种图片滚动，轮播图片 1.2.3.4图片切换 电子相册
css图片位置
baidu_33548663的博客
09-15 1884
在一个固定宽高的盒子中，要放置一张宽高比不定的图片（比如说后台上传的图片），这时候图片应该如何设置样式呢？ object-fit fill//不保持纵横比缩放图片，使图片完全适应,图片可能会变形 contain//（保持纵横比缩放图片，使图片的长边能完全显示出来） cover//（保持纵横比缩放图片，只保证图片的短边能完全显示出来） none//（保持图片宽高不变） scale-down//...
CSS：图片样式设置
yyyyyyyyyyy_9的博客
08-02 644
本文将记录Vue开发中，应用到的CSS样式案例代码和解释。
CSS中的Img样式
Hello World!
03-03 2703
一、基础代码 二、加边框 1、普通黑色边框（浏览器默认黑色） 2、简单的CSS装饰框 ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ①　②　③　④　⑤　⑥　⑦　⑧ 三、加CSS滤镜 1、无参数滤镜 ①黑白 ②底片 ③X光片 ④水平翻转 ⑤垂直翻转 ①　②　③　④　⑤ 2、透明效果（opacity=100 透
CSS之img标签
weixin_30443731的博客
02-10 505
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试图片</title> <link rel="shortcut icon" href="image/rose.jpg"> </h...
〖CSS技巧①〗4个实用的图片处理技巧
xzhlg57656的博客
04-14 841
4个CSS图片处理技巧，你未必知道，但实用的技巧，来康康你都会吗👉
css img布局
潇蓝诺依的博客
12-04 4649
img标签之间的间距问题原理 img标签之间的间距问题原理 图片占位 &amp;amp;amp;lt;img src=&amp;amp;quot;http://placehold.it/600x300/0f0/ccc.png&amp;amp;quot; alt=&amp;amp;quot;&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;img src=&amp;amp;quot;http://tem
DIV CSS图片_CSS img
evilcry2012的专栏
09-11 971
DIV CSS图片_CSS img css图片_DIV CSS图片_CSS img 这里为大家介绍的是DIV CSS对img图片控制（css img图片大小）。 我们常常会遇到以下情况： 1、img图片多了边框，特别是链接后的图片带边框 2、图片超出撑破DIV 查看 CSS设置图片宽度高度 下面我们通过CSS来解决这2个问题。 1、img图片多了
htmldemo05
09-09
盒子模型是一个CSS样式，定义了一个名为box的div元素以及一些图片的样式。id选择器则是定义了一个名为p4的段落元素的样式。这些代码块可以分别运行，并且可以通过引用文件或链接的方式在HTML文件中引用它们的样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值