div+css小案例

最新推荐文章于 2024-04-20 20:12:46 发布

亲休息吧

最新推荐文章于 2024-04-20 20:12:46 发布

阅读量3.2k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/wfdtxz/article/details/8284625

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

demo.html

<html>
<head>
<title>这是个css体验例子</title>
<!--引入CSS-->
<link rel = "stylesheet" type = "text/css" href = "my.css"/>
</head>
<div class = "style">
<img src = "2.png">
</div>
</html>

my.css

.style{
	/*宽度*/
	width:400px;/*一定要有分号*/
	height:300px;
	background-color: silver;
	border:1px solid red;
	margin-left:400px;
	margin-top:250px;
	padding-top:20px;
	padding-left:40px;
}

为了让栏目一到栏目五格式统一，只需要修改class对应的名字。

demo2.html

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

demo2.css

/*s1 类选择器*/
.s1{
	color:blue;
	font-size:30px;
	font-style:italic;
	text-decoration:underline;
}
.s2{
	color:yellow;
	font-size:12px;
}
.s3{
	color:blue;
	font-style:italic;
}
.s4{
	color:green;
	font-weight:bold;
}
.s5{
	color:#F89582;
}

如何在html中直接嵌入css，图片使用滤镜效果。

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

类选择器格式：

.类选择器名{

属性名：属性值；

……

}

id选择器

#id{

属性名：属性值；

……

}

html选择器

html元素{

属性名：属性值；

……

}

通配符选择器（用星号表示），作用于所有的html元素，但是优先级别最低

属性名：属性值;

……

}

四个选择器优先级别：

id选择器 > class选择器 > html选择器 > 通配符选择器

select.css

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

/*id*/
#id1{
	background-color:silver;
	font-size:40px;
	color:black;
}
/*html选择器*/
body{
	color:orange;
}

select.html

<html>
<link rel = "stylesheet" type = "text/css" href = "select.css">
<body>
北京您好。
<span class = "s1">新闻一</span>
<span class = "s1">新闻二</span>
<span class = "s1">新闻三</span>
<span class = "s1">新闻四</span><br/><br/>
<span id = "id1">这是一则非常重要的新闻</span>
</body>
</html>

html选择器的优先级低于类选择器和id选择器

假如对于两个不同段落需要不同的格式，但是都用同样的元素<p></p>

在CSS里面用p.类名来区分，在html里面用class = “类名” 来引用格式

p.cls1{
	color:blue;
	font-size:30px;
}
p.cls2{
	color:red;
	font-size:20px;
}

<p class = "cls1">hellow world</p>
<p class = "cls2">hello world</p>

父子选择器：

1 可以有多级（实际中最多不超过三级）

2 父子选择器有严格的层级关系

css

/*父子选择器*/
#id1 span{
	color:red;
	font-style:italic;
}

#id1 span span{
	color:green;
}

#id1 span span a{
	color:blue;
}

html

<span id = "id1">这是一则<span>非常<span>重<a href = "http://www.baidu.com">链接到百度</a></span>要</span>的新闻</span><br/>

亲休息吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div+css小案例

demo.html这是个css体验例子my.css.style{ /*宽度*/ width:400px;/*一定要有分号*/ height:300px; background-color: silver; border:1px solid red; margin-left:400px; margin-top:250px; padding-t
复制链接

扫一扫