CSS

-隐函数-

已于 2022-03-12 11:34:16 修改

阅读量911

点赞数 1

分类专栏： front-end 文章标签： css 前端 css3

于 2022-02-15 18:49:18 首次发布

本文链接：https://blog.csdn.net/weixin_56777219/article/details/122947567

版权

front-end 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、概述

是一种用来表现HTML和XML等文件样式的计算机语言

叠层样式表(Cascading Style Sheets)：

CSS可以修饰美化网页

CSS可以配合各种脚本语言动态地对网页各元素进行格式化

内容与表现分离，页面外观的维护更加容易

2、CSS基本语法

CSS规则由两个主要的部分构成：选择器以及一条或多条声明

选择器通常是需要改变样式的HTML元素

每条声明由一个属性和一个值组成

3、CSS导入方式

内联方式：

把CSS样式嵌入到HTML标签当中，类似属性的用法

内部方式：

在head标签中使用style标签引入CSS

外部方式：

将CSS样式抽成一个.CSS文件，使用link标签引入或@import导入

link标签：

rel:代表当前页面与href所指定文档的关系

type：文件类型，告诉浏览器使用css解析器去解析

href：css文件地址

@import方式：

link和@import方式的区别：

link所有浏览器都支持，@import某些版本低的IE不支持

@import是等待html加载完成才加载

@import不支持js动态修改

优先级从高到低：内联>内部>外部

4、基本选择器

选择器：

主要用于选择需要添加样式的html元素

元素选择器：

在head中使用style标签引入在其中声明元素选择器

语法：标签{属性：属性值}

ID修改器：

给需要修改样式的html元素添加id属性标识

语法：#id值{属性：属性值;...}

class选择器：

给需要修改样式的html元素添加class属性标识

语法：.class名{属性：属性值;...}

标签选择器：通过标签名来获取标签，引入后，所有的同一标签都按统一方式修饰

a{
	color: black;/*字的颜色*/
	text-decoration: none; /*去除下划线*/
}
a:hover{
	color: orange;/*鼠标触碰的时候字的颜色*/
	text-decoration: underline;/*鼠标触碰的时候增加下划线*/
}


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
        <!--引入外部的样式表文件-->
		<link rel="stylesheet" href="../css/demo8.css"/> 
	</head>
	<body>
		<ul>
			<li><a href="#">为建设体育强国注入冰雪力量</a></li>
			<li><a href="#">为建设体育强国注入冰雪力量</a></li>
			<li><a href="#">为建设体育强国注入冰雪力量</a></li>
			<li><a href="#">为建设体育强国注入冰雪力量</a></li>
			<li><a href="#">为建设体育强国注入冰雪力量</a></li>
			<li><a href="#">为建设体育强国注入冰雪力量</a></li>
			<li><a href="#">为建设体育强国注入冰雪力量</a></li>
		</ul>
	</body>
</html>

类选择器：.类名声明引入时 class=“类名” 可以重复

.aclass{
	color: green;
	font-size: 100px;
	text-decoration: none;
}

.aclass:hover{
	color:orange;
	text-decoration: underline;
}




<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入外部的样式表文件-->
		<link rel="stylesheet" href="../css/demo8.css"/> 
	</head>
	<body>		
		<a href="#" class="aclass" >为建设体育强国注入冰雪力量</a>
	</body>
</html>

id选择：#id名方式

#demo8second{
	color: green;
	font-size: 50px;
	text-decoration: none;
}




<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入外部的样式表文件-->
		<link rel="stylesheet" href="../css/demo8.css"/> 
	</head>
	<body>		
		<a href="#" id="demo8second" >为建设体育强国注入冰雪力量</a>
	</body>
</html>

id不重复可以用name

#456{
	color: purple;
}


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入外部的样式表文件-->
		<link rel="stylesheet" href="../css/demo8.css"/> 
	</head>
	<body>		
		<a href="#" name="456" >为建设体育强国注入冰雪力量</a>
	</body>
</html>

5、属性、伪类、层级选择器

属性选择器：

根据元素的属性及属性值来选择元素

语法：标签[属性=‘属性值’]{属性：属性值;...}

伪类选择器：

CSS伪类用于向某些选择器添加特殊的效果。

语法：标签；伪类{属性：属性值;...}

层级选择器：

后代选择器，语法：父级子级{属性：属性值;...}

子代选择器，语法：父级>子级{属性：属性值;...}

6、文字属性

7、文本属性

8、背景属性

9、列表属性

10、尺寸、显示、轮廓属性

手风琴表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* li是显示系统功能的 要把li下边的进行隐藏 */
			.menue ul{
				display: none;
			}
			
			/* 给li添加伪类 触碰到li的时候 会显示li下的东西 */
			.menue li:hover ul{
				display: block;

			}
			/* 给最里边的li进行设置 */
			.menue ul li:hover{
				text-decoration: underline;
				color: orange;
			}
		</style>
	</head>
	<body>
		<ul class="menue">
			<li>
				系统功能1
				<ul>
					<li>修改个人信息</li>
					<li>修改个人信息</li>
					<li>修改个人信息</li>
					<li>修改个人信息</li>
				</ul>
			</li>
			<li>
				系统功能2
				<ul>
					<li>修改个人信息</li>
					<li>修改个人信息</li>
					<li>修改个人信息</li>
					<li>修改个人信息</li>
				</ul>
			</li>
			<li>
				系统功能3
				<ul>
					<li>修改个人信息</li>
					<li>修改个人信息</li>
					<li>修改个人信息</li>
					<li>修改个人信息</li>
				</ul>
			</li>
			<li>
				系统功能4
				<ul>
					<li>修改个人信息</li>
					<li>修改个人信息</li>
					<li>修改个人信息</li>
					<li>修改个人信息</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

11、样式表的使用三种方式

行内样式(不推荐)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="" style="width: 100px; height: 90px; background-color: red;"></div>
	</body>
</html>

内部样式(不推荐)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--内部样式-->
		<style>
			div{
				width: 100px;
				height: 50px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>