CSS学习，常用常记（媒体类型，属性选择器，实例）

最新推荐文章于 2024-05-20 16:11:24 发布

hhjian6666

最新推荐文章于 2024-05-20 16:11:24 发布

阅读量552

点赞数

分类专栏： ***CSS + CSS3***Study***

本文链接：https://blog.csdn.net/qq_30796379/article/details/88764900

版权

***CSS + CSS3***Study*** 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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

媒体类型

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

@media 规则

@media 规则允许在相同样式表为不同媒体设置不同的样式。在下面的例子告诉我们浏览器屏幕上显示一个 14 像素的 Verdana 字体样式。但是如果页面打印，将是 10 个像素的 Times 字体。请注意，font-weight 在屏幕上和纸上设置为粗体

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

其他媒体类型

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

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

属性选择器

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

<!DOCTYPE html>
<html>
<head>
	<style>
		[title]{color:blue;}
	</style>
</head>

<body>
	<h2>Will apply to:</h2>
	<h1 title="Hello world">Hello world</h1>
	<a title="runoob.com" href="http://www.runoob.com/">runoob.com</a>
	<hr>
	<h2>Will not apply to:</h2>
	<p>Hello!</p>
</body>
</html>

属性和值选择器

下面的实例改变了标题title='runoob'元素的边框样式；

[title=runoob]{border:5px solid green;}

属性和值的选择器 - 多值

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

[title~=hello]{color:blue;}

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

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

表单样式

属性选择器样式无需使用class或id的形式；

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>菜鸟教程(runoob.com)</title>  
	<style>
		input[type="text"]{
			width:150px;
			display:block;
			margin-bottom:10px;
			background-color:yellow;
		}
		input[type="button"]{
			width:120px;
			margin-left:35px;
			display:block;
		}
	</style>
</head>
	
<body>
	<form name="input" action="demo-form.php" method="get">
		Firstname:<input type="text" name="fname" value="Peter" size="20">
		Lastname:<input type="text" name="lname" value="Griffin" size="20">
		<input type="button" value="Example Button">
	</form>
</body>
</html>

                CSS 属性选择器 *=, |=, ^=, $=, *= 的区别
先上总结:
"value 是完整单词" 类型的比较符号: ~=, |=
"拼接字符串" 类型的比较符号: *=, ^=, $=

1.attribute 属性中包含 value:　

[attribute~=value] 属性中包含独立的单词为 value，例如：
[title~=flower]  -->  <img src="/i/eg_tulip.jpg" title="tulip flower" />

[attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行，例如：
[title*=flower]   -->  <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />

2.attribute 属性以 value 开头:

[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开：，例如：
[lang|=en]     -->  <p lang="en">  <p lang="en-us"> 

[attribute^=value] 属性的前几个字母是 value 就可以，例如：
[lang^=en]    -->  <p lang="ennn">

3.attribute 属性以 value 结尾:

[attribute$=value] 属性的后几个字母是 value 就可以，例如：
a[src$=".pdf"]

CSS实例大全；

hhjian6666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS学习，常用常记（媒体类型，属性选择器，实例）

媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。媒体类型一些 CSS 属性只设计了某些媒体。例如voice-family属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如，font-size属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，sans-serif字体比较适...
复制链接

扫一扫