CSS笔记

最新推荐文章于 2025-05-10 16:22:55 发布

原创最新推荐文章于 2025-05-10 16:22:55 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #列表 #html

CSS 专栏收录该内容

20 篇文章

订阅专栏

博客介绍了CSS相关知识，包括其定义为层叠样式表语言，作用是修饰HTML页面。还阐述了HTML引入CSS的三种方式，即内联定义、样式块和链入外部样式表文件，其中链入外部样式表文件最常用且易维护，此外还提及了列表样式和绝对定位。

概述

什么是CSS，有什么用？

CSS（Cascading Style Sheet）：层叠样式表语言

CSS的作用：修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。

HTML引入CSS的三种方式

第一种方式

在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式

语法格式：
<标签 style = "样式名:样式值; 样式名:样式值; 样式名:样式值; ..."></标签>

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

第二种方式

在head标签中使用style块，这种方式被称为样式块方式

语法格式：
<head>
    <style type = "text/css">
        选择器 {
            样式名:样式值;
            样式名:样式值;
            ......
        }
        选择器 {
            样式名:样式值;
            样式名:样式值;
            ......
        }
    </style>
</head>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第二种方式：样式块</title>
		
		<style type="text/css">
			/*
				这是CSS的注释
			*/
		   
		   /*
				id选择器
				语法格式：
					#id{
						样式名:样式值;
						样式名:样式值;
						......
					}
		   */
		    #usernameErrorMsg {
				color: red;
				font-size: 24px;
			}
			
			/*
				标签选择器
				语法格式：
					标签名 {
						样式名:样式值;
						样式名:样式值;
						......
					}
			*/
			div {
				background-color: black;
				border: 1px red solid;
				width: 100px;
				height: 100px;
			}
			
			/*
				类选择器
				语法格式：
					.类名 {
						样式名:样式值;
						样式名:样式值;
						......
					}
			*/
		   .myclass {
			   border: 1px red solid;
			   width: 400px;
			   height: 20px;
		   }
		</style>
	</head>
	<body>
		<!--设置样式字体大小为12px，颜色为红色-->
		<span id="usernameErrorMsg">对不起，用户名不能为空！</span>
		
		<div></div><br>
		<div></div><br>
		<div></div><br>
		
		<!--class相同的标签可以看作是同一类标签-->
		<input type="text" class="myclass"/><br>
		
		<select class="myclass">
			<option>专科</option>
			<option>本科</option>
		</select>
	</body>
</html>

第三种方式

链入外部样式表文件，这种方式最常用。（将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了）

语法格式：
<link type = "text/css" rel = "stylesheet" href = "css文件的路径" />

这种方式易维护，维护成本较低。

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

a {
	text-decoration: none;
}

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

列表样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表样式</title>
		
		<style type="text/css">
			ul {
				/*list-style-type: none;去掉圆点*/
				/*list-style-type: circle;圆点*/
				list-style-type: square;/*方块*/
			}
		</style>
	</head>
	<body>
		<ul>
			<li>中国
				<ul>
					<li>北京</li>
					<li>上海</li>
					<li>广州</li>
				</ul>
			</li>
			<li>日本</li>
			<li>美国</li>
		</ul>
	</body>
</html>

绝对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS样式的绝对定位</title>
		
		<style type="text/css">
			#div1 {
				background-color: red;
				border: 1px black solid;
				width: 300px;
				height: 300px;
				position: absolute;/*绝对定位*/
				/*上面那句没写下面的设置没有效果！！！*/
				left: 100px;
				top: 100px;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>