day7——搜索页面

最新推荐文章于 2024-07-08 16:01:05 发布

蹦居大蹦居

最新推荐文章于 2024-07-08 16:01:05 发布

阅读量186

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/jumao555/article/details/120396336

版权

1.复合选择器

(1)标签指定式选择器

由两个选择器构成，第一个为标记选择器，第二个为class或id选择器，用.或#连接。如h2.special或p#one。

(2)后代选择器

外层标记在前，内层标记在后，中间用空格分隔。如p trong{color:red;}。

(3)并集选择器

各个选择器通过逗号连接。如h2,h3,p{color:red;font-size:14px;}或h3,.special,#one{text-decoration:underline;}

2.CSS的层叠性和继承性

层叠性：样式叠加。

如：<p class="special" id="one">文本段落</p>

继承性：子标记继承父标记的某些样式。

如：p,div,h1,h2,h3,h4,ul,ol,dl,li{color:black;} 可写为 body{color:black;}

但不是所有CSS都具有继承性，如边框属性、内外边距属性、背景属性、定位属性、布局属性、元素宽高属性。

3.CSS的优先级：优先显示优先级高的样式

id选择器（权重100）>类选择器器（权重10）>标记选择器（权重1）

多个选择器构成的复合选择器的权重为各个选择器权重的叠加。

4.案例实现：制作搜索页面

【example07】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜索页面</title>
	<style type="text/css">
		body{font-family:'微软雅黑';font-size:14px;color:#333;}
		em{font-style:normal;}
		.header{
			font-size:18px;
			color:#D52D2D;
			text-decoration:underline;
			font-weight:normal;
			}
		.header em{
			color:#2525D3;
			text-decoration:underline;
			}
		.red{color:#D52D2D;}
		.green{color:#167A16;}
		.gray{
			color:#595959;
			text-decoration:underline;
			}
	</style>
</head>

<body>
	<h2 class="header">什么是CSS<em>——CSS教程</em></h2>
    <p>猴子提示：可以通过简单的更改<em class="red">CSS</em>文件，改变网页的整体表现形式，可以减少我们的工作量，所以它是每一个网页设计人员的必修课。知道什么是<em class="red">CSS</em>了，现在就开始学习<em>CSS</em>吧...
    </p>
    <p>
    	<em class="green">www.dreamdu.com/css/wh...</em>-<em class="gray">百度快照</em>-<em class="gray">85%好评</em>
    </p>
</body>
</html>

图1 搜索页面效果图