资讯详情

【Web前端】——CSS基础知识总结

在这里插入图片描述

?? 作者: 阿伟 ?? 个人主页: Flyme awei

?? 希望大家多支持一起进步！

?? 文章对你有帮助，关注和赞美收藏

前端技术之CSS

文章目录

前言

??HTML可以让我们实现静态页面效果，但页面没有酷好看的效果，通过CSS该技术可以装饰静态页面，使页面更加美观。

一、CSS的引入

1.为什么要学习？CSS？

（HTML画页面)这个页面列出了页面上需要的元素，但是页面效果很差，不好看。为了让页面好看，为了修改页面，引入CSS。

1.2CSS的作用

修饰HTML页面 用了CSS之后，样式和元素本身就分开了。(降低代码耦合)

1.3HTML和CSS的关系？

先有HTML，先有页面，CSS修饰页面

1.4CSS名字

CSS：cascading style sheets (层叠样式表)

层叠：风格叠加 风格表：各种风格的集合

二、CSS三种写作方式

2.1内联样式

<!DOCTYPE html> <html>  <head>   <meta charset="UTF-8">   <title>css内联样式</title>  </head>  <body>  <!-- 书写方式：内联风格 在标签中签style属性，css样式为属性值 多个标签之间使用；连接 -->   <h1 style="color: deeppink; font: '微软雅黑';">CSS内联样式</h1> </body> </html>

2.2内部样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css内部样式</title>
		<!-- 书写方式：内部样式 head标签中加入一个style标签，在里面定位到你需要修饰的元素， 然后再{}中加入你要修饰的样式 -->
		<style type="text/css"> h1{ 
          font: "微软雅黑";color: aqua;} </style>
	</head>
	<body>
		<h1>css内部样式</h1>
	</body>
</html>

2.3外部样式

首先要创建一个css文件，css文件的后缀.css

h1{ 
        
	color: red;
	font-family: "宋体";
}

再创建html页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--y引入外部资源：link-->
		<link rel="stylesheet" href="css/css外部样式.css" />
	</head>
	<body>
		<h1>css外部样式</h1>
	</body>
</html>

实际开发中三种书写方式用的最多的是：外部样式：因为这种方式真正做到了 元素页面和样式 分离

2.4三种书写方式优先级

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--外部样式-->
		<link rel="stylesheet" href="css/css外部样式.css" />
		<!--内部样式-->
		<style type="text/css">h1{ 
          color: coral;}</style>
	</head>
	<body>
		<!--内部样式-->
		<h1 style="color: darkorchid;font-family: '微软雅黑';">css的书写方式</h1>
	</body>
</html>

三、学习CSS的重点

css的作用：修饰页面上的元素 利用选择器定位页面上要修饰的元素

四、基本选择器

4.1元素选择器

通过元素的名字进行定位，，他会获取页面上所有这个元素
格式:
元素名{css样式;}

4.2类选择器

应用场合：不同的类型标签使用相同的类型
格式:
.clss的名字{css样式；}

4.3id选择器

应用场合，可以定位唯一的元素
不同的标签确实可以使用相同的id，但是一般会进行人为的控制，让id可以是唯一定位到一个元素
格式：
#id名字{css样式}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> /* 【1】基本选择器：元素选择器 通过元素的名字进行定位，，他会获取页面上所有这个元素 格式； 元素名{css样式;} * */ h1{ 
          color: #00FFFF;} h2{ 
          color: chartreuse;} i{ 
          color: #FF7F50;font: "微软雅黑";} /* 【2】基本选择器：类选择器 应用场合：不同的类型标签使用相同的类型 格式： .clss的名字{css样式；} * */ .mycls{ 
          color: #FF7F50;} /* 【3】id选择器 应用场合，可以定位唯一的元素 不同的标签确实可以使用相同的id，但是一般会进行人为的控制，让id可以是唯一定位到一个元素 格式： #id名字{css样式} * */ #myid{ 
          color: blueviolet;} </style>
	</head>
	<body>
		<h1>css基本选择器</h1>
		<h1>这是<i>一个h1</i>标题</h1>
		<h1>这是一个h1标题</h1>
		<h1 class="mycls">这是一个h1标题</h1>
		<h2>这是一个h2标题</h2>
		<h2 id="myid">这是一个h2标题</h2>
		<h2 class="mycls">这是一个h2标题</h2>	
	</body>
</html>

4.4基本选择器优先级

id选择器>class选择器>元素选择器

五、关系选择器

5.1 div 和 span

可以把div理解为一个框
div叫做块级元素，有换行效果	 
span属于行内元素，没有换行效果
span：里面内容占多大，span包裹的区域就有多大

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> /* 可以把div理解为一个框 div叫做块级元素，有换行效果 span属于行内元素，没有换行效果 span：里面内容占多大，span包裹的区域就有多大 * */ div{ 
          border: 1px red solid;} span{ 
          border: 1px darkmagenta solid;} </style>
	</head>
	<body>
		<div>关系选择器</div>
		<div>关系选择器</div>
		<span>选择器</span>
		<span>选择器</span>
		<span>关系选择器</span>
	</body>
</html>

div和span 结合css用于页面的布局。div+css 用于页面布局。

5.2关系选择器

关系选择器 后代选择器：只要是这个元素的后代，样式都会发生变化 div下面的所有h1标签都会发生变化 子代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> /*关系选择器 后代选择器：只要是这个元素的后代，样式都会发生变化 div下面的所有h1标签都会发生变化 * */ div h1{ 
          color: #00FFFF;} /*子代选择器*/ div>h1{ 
          color: #8A2BE2;} </style>
	</head>
	<body>
		<div>
			<h1>关系选择器</h1>
			<h1>关系选择器</h1>
			<span>
				<h1>关系选择器</h1>
				<h1>关系选择器</h1>
			</span>
		</div>
	</body>
</html>

六、属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> /*属性选择器*/ input[type="password"]{ 
           color: #00FFFF;background-color: cadetblue; } input[type="text"]{ 
           background-color: cyan; } </style>
	</head>
	<body>
		<form>
			用户名<input type="text" value="Flyme awei"/><br />
			密&emsp;码<input type="password" value="123123"/>
			<input type="submit" value="登录"/>
		</form>
	</body>
</html>

七、伪类选择器

伪类选择器 向某些选择器添加特殊效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> /* 伪类选择器: 鼠标悬浮在上面才变色*/ h1:hover{ 
          color: #00FFFF;} </style>
	</head>
	<body>
		<h1>伪类选择器</h1>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> /*设置静止状态*/ a:link{ 
          color: black;} /*设置鼠标悬浮状态*/ a:hover{ 
          color: red;} /*设置触发状态*/ a:active{ 
          color: blue;} /*设置完成状态*/ a:visited{ 
          color: green;} </style>
	</head>
	<body>
		<h1><a href="index.html" target="_blank">超链接</a></h1>
	</body>
</html>

八、练习百度导航栏

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> /*取消无序列表前的图标*/ ul{ 
          list-style-type: none;} /*设置鼠标悬浮效果*/ a:hover{ 
          color: deepskyblue;} /*设置静止状态 去除下划线*/ a:link{ 
           color: black; text-decoration: none; font: 13px; } li{ 
           float: left; /*向左浮动*/ margin-left: 15px;} /*设置间隔15px*/ </style>
	</head>
	<body>
		<ul>
			<li><a href="http://news.baidu.com/" target="_blank">新闻</a></li>
			<li><a href="" target="_blank">hao123</a></li>
			<li><a href="" target="_blank">地图</a></li>
			<li><a href="" target="_blank">贴吧</a></li>
			<li><a href="" target="_blank">视屏</a></li>
			<li><a href="" target="_blank">图片</a></li>
			<li><a href="" target="_blank">网盘</a></li>
			<li><a href="" target="_blank">更多 

        标签： 聚丙烯膜介质电容器cbb80b
 
锐单商城拥有海量元器件数据手册、
          IC替代型号，打造
          电子元器件IC百科大全！

锐单商城 - 一站式电子元器件采购平台