CSS-老杜-笔记

最新推荐文章于 2024-07-14 10:25:44 发布

yiersano

最新推荐文章于 2024-07-14 10:25:44 发布

阅读量286

点赞数

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/yiersano/article/details/125033286

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS

文章目录

1、什么是CSS，有什么作用？
2、在HTML页面中嵌套使用CSS的三种方式：
3、列表样式
4、CSS样式的绝对定位

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

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

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

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

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

2.1、第一种方式：内联定义方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css样式引入的第一种方式：内联定义方式</title>
	</head>
		<!--
			width 宽度样式
			height 高度样式
			background-color 背景色样式
			display 布局样式（none表示隐藏，block表示显示）
		-->
	<body>
		<!-- display: none隐藏 -->
		<!-- display: block显示 -->
		<div style="width: 300px; height: 200px; background-color: aliceblue; display: block;
		border-color: blue;border-width: 2px;border-style: solid;"></div>
		<br><br>
		<!--
			样式还能这样写：
				border : 1px solid black;
		-->
		<div style="width: 300px; height: 200px; background-color: aliceblue; display: block;
		border: 2px solid blue;"></div>
	</body>
</html>

效果：
在这里插入图片描述

2.2、第二种方式：样式块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第二种方式：样式块</title>
		
		<style type="text/css">
			/*
			css注释
			*/
		   /*
				id选择器
				语法格式：
					#id{
						样式名 : 样式值;
						样式名 : 样式值;
						样式名 : 样式值;
						....
					}
			*/
		   #usernameErrorMsg{
			   color: #8A2BE2;
			   font-size: 40px;
		   }
		   /*
				标签选择器
				语法格式：
					标签名 {
						样式名 : 样式值;
						样式名 : 样式值;
						样式名 : 样式值;
						....
					}
				标签选择器作用的范围比id选择器广。
			*/
		   div{
			   background-color: aliceblue;
			   border: 1px solid blueviolet;
			   width: 100px;
			   height: 100px;
		   }
		   /*
				类选择器
				语法格式：
					.类名{
						样式名 : 样式值;
						样式名 : 样式值;
						样式名 : 样式值;
						....
					}
			*/
		   .myclass{
			   border: 1px solid blueviolet;
			   width: 200px;
			   height: 20px;
		   }
		</style>
	</head>
	<body>
		<!--
			设置样式字体大小12px，颜色为红色！
		-->
		<span id="usernameErrorMsg">对不起，用户名不能为空！</span>
		
		<br><br><br>
		<div></div>
		<div></div>
		<div></div>
		
		<br><br><br>
		<input type="text" class="myclass"/>
		<select class="myclass">
			<option>11111111</option>
			<option>22222222</option>
		</select>
	</body>
</html>

效果：

在这里插入图片描述

2.3、第三种方式：引入外部独立的css文件

a{
	text-decoration: none;
}
/*
	cursor : 鼠标样式，pointer是小手，hand也是，但是hand有浏览器兼容问题。建议使用pointer
*/
#bdspan{
	text-decoration: underline;
	cursor: pointer;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第三种方式：引入外部独立的css文件</title>
		
		<!-- 引入css -->
		<link rel="stylesheet" type="text/css" href="css/1.css"/>
	</head>
	<body>
		<a href="http://www.baidu.com" target="_blank">百度</a>
		
		<br><br><br>
		<span id="bdspan">点击我链接到百度</span>
		
	</body>
</html>

效果：
在这里插入图片描述

3、列表样式

<!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>
		</ul>
	</body>
</html>

效果：
在这里插入图片描述

4、CSS样式的绝对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS样式的绝对定位</title>
		<style type="text/css">
			#div1{
				background-color: #F0F8FF;
				border: 1px solid blueviolet;
				width: 300px;
				height: 300px;
				position: absolute;/* 绝对定位 */
				left: 100px;
				top: 100px;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>

效果：
在这里插入图片描述

yiersano

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
CSS-老杜-笔记

CSS文章目录1、什么是CSS，有什么作用？2、在HTML页面中嵌套使用CSS的三种方式：2.1、第一种方式：内联定义方式2.2、第二种方式：样式块2.3、第三种方式：引入外部独立的css文件3、列表样式4、CSS样式的绝对定位1、什么是CSS，有什么作用？CSS(Cascading Style Sheet):层叠样式表语言。CSS的作用是：修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。 CSS好比是HTML的化妆品一样。HTML还是主体，CSS依赖HTML。C
复制链接

扫一扫