css学习笔记

最新推荐文章于 2024-11-03 11:09:26 发布

原创最新推荐文章于 2024-11-03 11:09:26 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

个人学习笔记专栏收录该内容

8 篇文章

订阅专栏

css学习笔记

css可以理解为用于修饰HTML的语言

1.嵌入HTML的方法

1.1.内联定义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内联定义</title>
	</head>
	<body>
		<div id="div1" style="background-color: aliceblue;
							width: 300px;
							height:300px;
							position: absolute;
							top: 100px;
							left: 100px;
							border-style: solid;
							border-color: aquamarine;
							border-width: thick;">
			
		</div>
	</body>
</html>

1.2.定义内部样式块对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内联定义</title>
		<!-- 定义样式块对象 -->
		<style type="text/css">
			/*可以这样注释*/
			/*标签选择器*/
			div{
				background-color:aliceblue;
				width:200px;
				height:100px;
				position:absolute;
				top:100px;
				left:100px;
				border-style:solid;
				border-color:aquamarine;
				border-width:thick;
			}
			/*id选择器*/
			#username{
				width:400px;
				height: 30px;
				border-color: black;
				border-style: solid;
				border-width: 1px;
			}
			
			/*类选择器*/
			.student{
				font-size: 12px;
				color: #FF0000;
				/*注意优先级*/
			}
		</style>
	</head>
	<body>
		<div>
		</div>
		<div id="username">
			
		</div>
		
		<font class="student">woshi</font>
	</body>
</html>

1.3.链接css文件

在同一个目录下建立css文件

#div1{
	background-color: #555500;
	width: 100px;
	height: 100px;
}

input{
	border: solid red 1px;
}

然后HTML文件如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="new_file.css" />
	</head>
	<body>
		<div id="div1">
			
		</div>
		<input type="button"/>
	</body>
</html>

1.4.隐藏样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#city{
				display: none;
                list-style-type: none;
			}
			input{
				display: none;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>中国
				<ul id="city">
					<li>不显示的条目</li>
				</ul>
			</li>
		</ul>
		<ul>
			<li>中国
				<ul>
					<li>显示的条目</li>
				</ul>
			</li>
		</ul>
		<input type="text"/>
	</body>
</html>

1.5.文本装饰样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#z1{
				text-decoration: underline;
			}
			#z2{
				text-decoration: overline;
			}
			#z3{
				text-decoration: line-through;
			}
			#z4{
				text-decoration: blink;
			}
		</style>
	</head>
	<body>
		<div id="z1">text1</div>
		<font id="z2">text2</font>
		<span id="z3">text3</span><br />
		<a id="z4" href="rabbitttt.com">博客</a>
	</body>
</html>

1.6.设置鼠标悬停效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p:hover{
				color: red;
				font-size: 10px;
			}
			
			/*冒号两边不允许空格*/
			input:hover{
				border-color: black;
			}
		</style>
	</head>
	<body>
		<p>text1</p>
		<br />
		<input type="text" />
	</body>
</html>

1.7.内补丁与外补丁

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div{
				width: 300px;
				height: 300px;
				background-color: #555500;
				border: solid 1px red;
				/*内补丁*/
				padding-left: 200px;
				/*外补丁*/
				margin-left: 300px;
			}
		</style>
	</head>
	<body>
		<div style="
		border: solid 1px red;
		width:1000px;
		height: 1000px;">
			<div id="div">
				<div style="border: solid 1px red;
				width: 100px;
				height: 100px;">
					
				</div>
			</div>
		</div>
	</body>
</html>

1.8.浮动效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
				float: right;
			}
		</style>
	</head>
	<body>
		<p>
			<img src="img.gif"/>
			text...
		</p>
			</body>
</html>

1.9.定位样式

<!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: 100px;
				
				/*定位*/
				position: absolute;
				top: 100px;
				left:100px;
			}
			#div1:hover{
				cursor: pointer;
				text-decoration: underline;
				color: blue;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			rsdemon
		</div>
	</body>
</html>