011初识css 类选择器 id选择器 html选择器

最新推荐文章于 2024-05-09 10:01:30 发布

sky_悒晨

最新推荐文章于 2024-05-09 10:01:30 发布

阅读量394

点赞数

本文链接：https://blog.csdn.net/u011700006/article/details/38641205

版权

第十一讲初识css 类选择器 id选择器 html选择器

1、css 使用必要性

css 使用的基本语法

选择器{

属性1：属性值

属性2：属性值

.....

}

例1：html文件

<html>
<!--css部分可以单写一个文件，然后引入，也可以直接嵌入到html本身-->
<link rel="stylesheet" type="text/css" href="demo2.css"/>
<body>
<!--span元素通常用于存放小块内容-->
<span class="s1">栏目一</span>
<span class="s2">栏目二</span>
<span class="s3">栏目三</span>
<span class="s4">栏目四</span>
<span class="s5">栏目五</span>
</body>
</html>

css文件

/* .s1 用术语 类选择器*/
.s1{
	color: green;
	font-size: 30px;
}
.s2{
	color: yellow;
	font-size: 12px;
}
.s3{
	color: blue;
	font-style: italic;
}
.s4{
	color: green;
	font-weight: bold;
}
.s5{
	color: #9c3131;
}

结果如图示：

2、css 的必要性2：可以使用滤镜

例二：

html代码：

<html>
<head>
<!--如何把css直接嵌入到html文件中（内联css）-->
<style type="text/css">
	a:link img{
		filter:gray;
	}
	a:hover img{
		filter:"";
	}
</style>
</head>
<body>
<a href="3"><img src="1.jpg" width="200px"/></a>
<a href="3"><img src="1.jpg" width="200px"/></a>
<a href="3"><img src="1.jpg" width="200px"/></a>
<a href="3"><img src="1.jpg" width="200px"/></a>
</body>
</html>

css代码：

img{
	filter: gray;
}

结果示意图：（点击第一张图片）

3、css 中常用的四种选择器

（1）类选择器（class选择器）

基本使用

.类选择器{

属性名：属性值；

....

}

（2）id 选择器

基本使用

#id 选择器{

属性名：属性值;

}

（3）html 元素选择器

某个html 元素{

属性名：属性值;

....

}

（4）通配符选择器

css 文件可以使用在各种文件（php, html, jsp, asp....）

例3：html文件：

<html>
<head>
<link rel="stylesheet" type="text/css" href="select.css">
</head>
<body>
北京你好！
<span class="s1">新闻一</span>
<span class="s1">新闻二</span>
<span class="s1">新闻三</span>
<span class="s1">新闻四</span>
<span class="s1">新闻五</span><br/><br/>

<span id="id1">这是一则非常重要的新闻</span>
</body>
</html>

css文件：

.s1{
	background-color: pink;
	font-weight: bold;
	font-size: 16px;
	color: black;
}

/*id选择器的使用*/
#id1{
	background-color: silver;
	font-size: 20px;
	color: black;
}

/*html选择器*/
body{
	color: orange;
}

结果如图所示：