css学习笔记-B站动力节点

最新推荐文章于 2024-06-28 06:22:31 发布

KK-Greyson

最新推荐文章于 2024-06-28 06:22:31 发布

阅读量328

点赞数 1

分类专栏： Web前端文章标签： css 学习

本文链接：https://blog.csdn.net/m0_52041525/article/details/122972659

版权

Web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中嵌入CSS的三种方式：内联定义、样式块(id选择器)和外部引入，并通过实例展示了CSS在设置页面样式、列表样式和元素定位中的应用。学习目标包括理解并掌握常见CSS样式、能读懂他人CSS代码，以及如何通过link标签引入外部CSS文件提高页面维护性。

摘要由CSDN通过智能技术生成

1.什么是CSS，有什么作用？

CSS(Cascading Style Sheet):层叠样式表语言。
CSS的作用是：
	修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
	CSS好比是HTML的化妆品一样。
HTML还是主体，CSS依赖HTML。CSS的存在就是修饰HTML，所以新建的文件还是xx.html文件。

2.CSS我们要求掌握到什么程度？

* 常见的CSS样式要求会写。
* 别人写的CSS样式要能看懂。
注意：这里学习基础的CSS2.0 可以查看CSS2.0.CHM文档

在这里插入图片描述

3.在HTML页面中嵌套使用CSS的三种方式：

第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。
	语法格式：
		<标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签>
	
第二种方式：在head标签中使用style块，这种方式被称为样式块方式。
	语法格式：
		<head>
			<style type="text/css">
				选择器 {
					样式名 : 样式值;
					样式名 : 样式值;
					.....
				}
				选择器 {
					样式名 : 样式值;
					样式名 : 样式值;
					.....
				}
			</style>
		</head>

第三种方式：链入外部样式表文件，这种方式最常用
（将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了）
	语法格式：
		<head>
			<link type="text/css" rel="stylesheet" href="css文件的路径" />
		</head>
	这种方式易维护，维护成本较低。
		xxx.css文件
			1.html中引入了
			2.html中引入了
			3.html中引入了
			4.html中引入了

4.HTML中引入CSS样式的第一种方式：内联定义方式

<!doctype html>
<html>
	<head>
		<title>HTML中引入CSS样式的第一种方式：内联定义方式</title>
	</head>
	<body>
		
		<!--
			查文档：所有的样式都可以在CSS2.0.CHM文件中的属性中找到

			width 宽度样式
			height 高度样式
			background-color 背景色样式
			display 布局样式（none表示隐藏，block表示显示）

			为div添加边框：
				第一种方式如下"
				border-color : red;border-width : 1px;border-style : solid;
		-->
		<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block;
		border-color : red;border-width : 1px;border-style : solid;"></div>

		<br><br>

		<!--
			为div添加边框：
				第二种方式如下：
				border:border-width||border-style||border-color;
				border : 1px solid black;
		-->
		<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block;
		border : 1px solid black;"></div>

	</body>
</html>

在这里插入图片描述

5.HTML中引入CSS样式的第二种方式：样式块和id选择器

<!doctype html>
<html>
	<head>
		<title>HTML中引入CSS样式的第二种方式：样式块</title>

		<style type="text/css">
			/*
				css的注释是这样的
			*/

			/*
				id选择器
				语法格式：
					#id{
						样式名 : 样式值;
						样式名 : 样式值;
						样式名 : 样式值;
						...
					}
			*/
			#usernameErrorMsg{
				color : red;
				font-size : 12px;
			}
		</style>
	</head>
	<body>
		
		<!--设置样式字体大小12px，颜色为红色-->
		<span id="usernameErrorMsg">对不起，用户名不能为空！</span>

	</body>
</html>

6.标签选择器和类选择器

<!doctype html>
<html>
	<head>
		<title>HTML中引入CSS样式的第二种方式：样式块</title>

		<style type="text/css">
			/*
				标签选择器：
					语法格式：
						标签名{
							样式名 : 样式值;
							样式名 : 样式值;
							...
						}
				标签选择器的作用范围比id选择器广，同一标签都可以作用到
			*/
			div{
				background-color : black;
				border : 1px solid red;
				width : 100px;
				height : 100px;
			}
		</style>
		
	</head>
	<body>
		
		<!--标签选择器：-->
		<div></div>
		<div></div>
		<div></div>

	</body>
</html>

<!doctype html>
<html>
	<head>
		<title>HTML中引入CSS样式的第二种方式：样式块</title>

		<style type="text/css">
			/*
				类选择器：
					语法格式：
						.类名{
							样式名 : 样式值;
							样式名 : 样式值;
							...
						}
				同一类的所有标签可以设置相同的样式
			*/
			.myclass{
				border : 1px solid red; /*设置边框*/
				width : 400px;
				height : 30px;
			}

		</style>
		
	</head>
	<body>

		<!--类选择器：-->
		<input type="text" class="myclass"/>
		
		<br><br><br>

		<select class="myclass">
			<option>专科</option>
			<option>本科</option>
		</select>
		

	</body>
</html>

7.在HTML中使用CSS样式的第三种方式：引入外部独立的css文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在HTML中使用CSS样式的第三种方式：引入外部独立的css文件</title>
		
		<!--引入css文件-->
		<link type="text/css" rel="stylesheet" href="css/1.css">
		
	</head>
	<body>
			
		<a href="http://www.baidu.com">百度</a>
		
		<!--
			href="..." 超链接
			src="..."  文件路径
			<img src="...">
		-->
		
		<span id="baiduSpan">点击我链接到百度！</span>
			
	</body>
</html>

1.css文件

/*
	使用标签选择器，使百度超链接的下面那条线消失
*/
a{
	text-decoration: none;
}

/*
	使用id选择器，使"点击我链接到百度！"下有横线，鼠标触碰到变成小手
	cursor鼠标样式：hand和pointer都是小手，但是hand有浏览器兼容问题，建议使用pointer
*/
#baiduSpan{
	text-decoration: underline;
	cursor: pointer;
}

8.列表样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表样式</title>
		
	   <style type="text/css">
		/*
		   	使用标签选择器
		   	将列表左边的小圆点去除
		*/
			ul{
				list-style-type: none;
			}
	   </style>
	   
	</head>
	<body>
		
		<ul>
			<li>中国
				<ul>
					<li>北京</li>
					<li>上海</li>
					<li>重庆</li>
				</ul>
			</li>
			<li>美国</li>
			<li>俄国</li>
		</ul>
			
	</body>
</html>

9.CSS样式的绝对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS样式的绝对定位</title>
		
		<style type="text/css">
			#div1{
				background-color: red;/*div1的背景色*/
				border: 1px black solid;/*div1的边框设置*/
				width: 300px;/*div1的宽度*/
				height: 300px;/*div1的高度*/
				
				position: absolute;/*绝对定位，以方框左上角那个点来定位*/
				
				left: 100px;/*距离网页的左边100px*/
				top: 100px;/*距离网页的上边100px*/
			}
		</style>
		
	</head>
	<body>
		
		<div id="div1"></div>
		
	</body>
</html>