CSS学习笔记

最新推荐文章于 2024-08-15 09:26:58 发布

Wnlife

最新推荐文章于 2024-08-15 09:26:58 发布

阅读量208

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/TDOA1024/article/details/83049759

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS：层叠演示

css和html结合的第一种方式：
   1.每一个html标签都有一个style样式的属性。该属性的值就是css的代码。
   2.使用style标签的方式。一般都定义在head中
   3.使用css文件导入
   4.使用html链接

demo1：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


	<style type="text/css">
	div {
	background-color: black;
	color: yellow;
	}	
	</style>

</head>

<body>
	
	<!-- css和html结合的第一种方式
	1.每一个html标签都有一个style样式的属性。该属性的值就是css的代码。
	2.使用style标签的方式。一般都定义在head中
	3.使用css文件导入
	4.使用html链接
	 -->


	<div style="background:blue;color: orange; ">这是一个div区域1</div>
	<div>这是一个div区域2</div>
	
	<span>这是一个span区域1</span>
	<span>这是一个span区域2</span>

	<p>这是一个段落1</p>
	<p>这是一个段落2</p>

</body>
</html>

demo2：

@charset "UTF-8";
div {
	background-color: #00ff40;
	color: #ff0080;
	}	

@charset "UTF-8";
p{
	background-color: #ff0000;
	color: #00ff00;
}

@charset "UTF-8";
	/*
	在该文件中导入其他css文件
	*/
  	@import url("div.css");
	@import url("span.css");
	@import url("p.css");

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

	<link rel="stylesheet" href="1.css" type="text/css"/> 
	
	<style type="text/css">
	
	/*@import url("1.css");*/
	
	</style>


</head>
<body>


	<div>这是一个div区域1</div>
	<div>这是一个div区域2</div>
	
	<span>这是一个span区域1</span>
	<span>这是一个span区域2</span>

	<p>这是一个段落1</p>
	<p>这是一个段落2</p>


	
</body>
</html>

选择器：
       html选择器有3种：
       1.html标签名选择器。使用的是html的标签名；
       2.class类选择器。使用的是标签中的class属性；
       3.id选择器。使用的是标签中的id属性。通常id的取值在页面中是惟一的，因为该属性除了给css使用，还给js使用，id通常是为了标记页面中的一些特定区域使用的。

       选择器优先级：标签选择器<类名选择器<id选择器<style属性

demo3：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	
	<style type="text/css">
	
	
 	div {
	background-color: green;
	color: yellow;
	}
	
	span.hah{
	background-color: white;
	color: white;
	}
	
	.haha{ 
	background-color: orange;
	color: red;
		
	}
	
	p#xixi{
	background-color: purple;
	color: silver; 
	}
	
	#xixi{
	background-color: purple;
	color: silver; 
	}
	
 	
	</style>

</head>
<body>
		<!-- 选择器 
		
		html选择器有3种：
		1.html标签名选择器。使用的是html的标签名；
		2.class类选择器。使用的是标签中的class属性；
		3.id选择器。使用的是标签中的id属性。通常id的取值在页面中是惟一的，因为该属性除了给css使用，还给js使用，id通常是为了标记页面中的一些特定区域使用的。
		
		选择器优先级：标签选择器<类名选择器<id选择器<style属性
		 -->
		

	<div>这是一个div区域1</div>
	<div>这是一个div区域2</div>
	
	<span class="haha">这是一个span区域1</span>
	<span >这是一个span区域2</span>

	<p id="xixi">这是一个段落1</p>
	<p>这是一个段落2</p>


</body>
</html>

扩展选择器
   1.关联选择器：选择器中的选择器
       标签是可以嵌套的，要让相同标签的不同标签显示不同的样式，就可以用此选择器。
   2.组合选择器：
       对多个选择器进行相同样式的设置时用它。

demo4：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

	<style type="text/css">
		/*关联选择器，只让span标签中的b起作用 选择器中的选择器*/
		span b{ 
			border-bottom-color: yellow;
			color: red;
		}
		/*组合选择器,多个不同用逗号隔开*/
		div.haha,span#xixi b{
			border-bottom-color: silver;
			color: purple;
		 }
		
	</style>


</head>
<body>
	
	<!-- 扩展选择器
	1.关联选择器：选择器中的选择器
		标签是可以嵌套的，要让相同标签的不同标签显示不同的样式，就可以用此选择器。
	2.组合选择器：
		对多个选择器进行相同样式的设置时用它。
	 -->
	
	
	<div class="haha">这是<b>一个</b>div区域1</div>
	<div>这是一个div区域2</div>
	
	<span>这是<b>一个</b>span区域1</span>
	<span id="xixi">这是一<b>个</b>span区域2</span>

	<p>这是一个段落1</p>
	<p>这是一个段落2</p>


</body>
</html>

3.伪元素选择器：

demo5：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

	<style type="text/css">
		/*
		伪元素：
		超链接的状态
		*/
		
	/*未访问*/
	a:link {
	background-color: blue;
	color: white;
	text-decoration: none;
	font-size: 18px;		
}

	/*鼠标悬停*/	
	a:hover {
	background-color: white;
	color: red;
	font-size: 24px;
}	
	
	/*点击效果*/
	a:active {
	border-bottom-color: black;
	color: white;
	font-size: 36px;
}

	/*访问后效果*/
	a:visited {
	background-color: yellow;
	color: menu;
	text-decoration: line-through;
}
	/*  L  V  H  A   */
	/*段落的第一个元素*/
	p:first-letter {
	color: red;
}
	/*div的悬停*/
	div:hover {
	background-color: yellow;
}
	/*具有焦点的元素*/
	input:focus {
	background-color: blue;
}
	
	
	</style>


</head>
<body>

	
	<a href="http://www.sina.com.cn" target="_blank">伪元素选择器演示</a>
	<hr/>
	<p>这是一个段落</p>
	<div>这是一个div区域</div>
	<div>这是一个div区域</div>
	<div>这是一个div区域</div>
	<hr/>
	<input type="text">
	<input type="text">
	
	
</body>
</html>

demo6：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<style type="text/css">
	
		ul{
		list-style-type:disc;	
}
		table {
		border-bottom: green double 3px;	
		border-left: red solid 5px;
		border-right:yellow groove 2px;
		width: 500px;  
}
		div {
		border: green; 
		width: 52px;
		heigh: 30px;
}
		input {
		border: none;
		border-bottom: black 1px solid;
}
		
	
	</style>


</head>
<body>
	
	姓名：<input type="text">成绩：<input type="text">
	
	<div>div区域</div>
	<hr/>
	<table>
		<tr>
			<td><input type="text" class="haha"></td>
			<td><input type="text" class="haha"></td>
			<td><input type="text" class="haha"></td>	
		</tr>
		<tr>
			<td>单元格1</td>
			<td>单元格1</td>
			<td>单元格1</td>	
		</tr>
		<tr>
			<td>单元格1</td>
			<td>单元格1</td>
			<td>单元格1</td>	
		</tr>
	</table>
	
	
	
	
	<hr/>
	<ul>
		<li>无序项目</li>
		<li>无序项目</li>
		<li>无序项目</li>	
	</ul>
</body>
</html>

盒子模式：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

	<style type="text/css">
		#imgtext{
		border:black dashed 1px;
		width: 500px;
		height:320px;
		position: absolute;
		}
		#img{
		float: right;
		
		}
		#text{
		size: 60px;
		width:100;
		height:80;
		color:yellow;
		position: absolute;
		top: 50px;
		left: 30px;
		}
	
	
	</style>
	
	
</head>
<body>
	
	<div id="imgtext">
		<div id="img">
			<img src="123.jpg" width="500"height="300"/>
		</div>
		<div id="text">
			多少年以后，往事随云走，我们一直流连在贝加尔湖畔。
			多少年以后，往事随云走，我们一直流连在贝加尔湖畔。
			多少年以后，往事随云走，我们一直流连在贝加尔湖畔。
			多少年以后，往事随云走，我们一直流连在贝加尔湖畔。
		</div>
	</div>
</body>
</html>