复习css

最新推荐文章于 2024-07-19 15:50:46 发布

atitude

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量157

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/chenchw/article/details/123092781

版权

#div1{
	background: #FF0000;
	width: auto;
	height: 6.25rem;
}
/*标签选择器 */
input{
	border: #FF0000;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中嵌入css演示的第一种方式：内联定义</title>
	</head>
	<style type="text/css">
		/* 
		这是css的注释
		 */
		/* 这类应该 这样选择样式
		 选择器{
			 样式名：样式值；
			  样式名：样式值；
			   样式名：样式值；
		 }
		 
		 css中常见的选择器：最常用的三种选择器。
		 包括：标签选择器，id选择器  class选择器。
		 
		 */
		/* 标签选择器
		 标签名 {}
		 
		 
		 */
		.student{
			font-size:12px;
			color:#FF0000;
		}
		div{
			/* 作用的范围比较广，不加限制就是所有的div
			要想限制的话，就要加选择器。
			 */
			width: 100px;
			height:100px;
		}
		
		/* id选择器  
		 使用格式：#id {}
		 */
		#userName{
			width:200px;
			height: 200px;
		}
		<input type = "text" id = "userName">
		
		/* 类选择器 ：作用于当前网页中某一类的标签*/
		<!-- class属性是任何一个标签都有的，class相同的，都可以看作同一类标签 -->
		
		
	
	</style>
	<!-- style 和body一定要区分开 
		body中写内容，
		style中写具体的格式
	-->
	
	<body>	
			<span class = "student">
				文本内容
			</span>
			
			
			<p class = "student">
				1——1
			</p>
			
			<!-- 内联定义方式：
						<标签 style = "样式名： 样式值";></标签>
						style :风格 ，样式
			任何一个HTML都可以指定style属性		 
					 
					 -->
					 <div id="div" style = "width :300px
											height :300px
											">
					 </div>
					 <!-- html 嵌入css的第二种方式： 定义内部演示块对象
						head 标签中是用style标签，定义样式块对象
						-->
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html中嵌入css样式的第三种方式：链入外部样式表文件</title>
		<link rel="stylesheet" type="text/css" href="1.css"/>
		<!-- 上面的语句就是链接外部表文件 -->
	</head>
	<body>
		<!--引入外部独立的css样式表文件 -->
		<div id="div1">
			我很好
		</div>
		
		提交<input type="text"  class = "input" />
	</body>
</html>
<!-- 最高优先级是标签选择器：其次是类选择器，最后是标签选择器 -->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				background-color: red;
				border: solid 1px black;
				width:100px;
				height: 300px;
				/* position */
				position:absolute
				top:300px;
				left:300px;
			}
			/* 光标变小手 */
			#baidu{
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<span id="baidu">
				baidu
			</span>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内边距外边距</title>
		<style type="text/css">
			#div1{
				width:300px;
				height:300px;
				background: #FF0000;
				border: solid 1px red;
			}
			#div2{
				width:100px;
				height:100px;
				background: black;
				border: solid 1px red;
				margin-top: 10px;
				/* 在顶部的补丁 */
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				
			</div>
		</div>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* hover是用来设置鼠标的悬停效果的
				hover的冒号的两边都是不允许有空格的
			 */
			p:hover{
				color:red;
				font-size:100px;
			}
			
		</style>
	</head>
	<body>
		<p>我是一个段落</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本装饰</title>
		<style type="text/css">
			#baidu{
				text-decoration: underline;
				/*  */
			}
			#bai{
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div id="baidu">
			baidu
		</div>
		<a id = "bai" href="http://www.baidu.com">百度</a>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>隐藏</title>
		<style type="text/css">
			#cities{
				display:none;
			}
			ul{
				list-style-type: none;		
						/* 设置前面小圆点的样式 */
							}
		</style>
		
	</head>
	<body>
		<!-- 隐藏-->
		<ul>
			<li>中国
				<ul id = "cities">
					<li>北京</li>
					<li>天津</li>
				</ul>
			</li>
			<li>美国</li>
			<li>日本</li>
		</ul>
	</body>
</html>

atitude

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复习css

#div1{ background: #FF0000; width: auto; height: 6.25rem;}/*标签选择器 */input{ border: #FF0000;}<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HTML中嵌入css演示的第一种方式：内联定义</title> </head> &l.
复制链接

扫一扫

复习css

“相关推荐”对你有帮助么？