CSS（上）

最新推荐文章于 2022-06-28 14:05:48 发布

疯子在辉

最新推荐文章于 2022-06-28 14:05:48 发布

阅读量104

点赞数

分类专栏：笔记文章标签： css html html5

本文链接：https://blog.csdn.net/m0_53679492/article/details/120005966

版权

笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS

文章目录

CSS概述

CSS——级联样式表

级联：关联。样式表与标签之间的关联关系

样式表语言：

修饰网页外观的语言
它的特点是类似于对java重复代码的提取和调用
HTML是网页的基本内容
CSS是；修饰控制网页的外观
CSS基本语法：
1、行内样式表：直接写在标签行内，优先级最高

每个标签中都有style属性，在此属性中写CSS语法，修饰标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 级联：关联  样式表与标签之间的关联关系
		样式表语言：修饰网页外观的语言
		它的特点是类似于对java重复代码的提取和调用
		HTML是网页的基本内容
		CSS是；修饰控制网页的外观
		CSS基本语法：
			1、行内样式表：直接写在标签行内，优先级最高
			每个标签中都有style属性，在此属性中写CSS语法，修饰标签
			<p style="属性：值;属性：值;....">诗和雪缴缠</p>
		 
		 -->
		<p style="color: blue;font-size: 30px;">诗和雪缴缠</p>
		<p style="color: blue;font-size: 30px;">诗和雪缴缠</p>
		<p>诗和雪缴缠</p>
		
	</body>
</html>

2、内嵌样式表（开发测试期间使用）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{color: blue;font-size: 30px;}
		</style>
	</head>
	<body>
		<!-- 级联：关联  样式表与标签之间的关联关系
		样式表语言：修饰网页外观的语言
		它的特点是类似于对java重复代码的提取和调用
		HTML是网页的基本内容
		CSS是；修饰控制网页的外观
		CSS基本语法：
			1、行内样式表：直接写在标签行内，优先级最高
			每个标签中都有style属性，在此属性中写CSS语法，修饰标签
			<p style="属性：值;属性：值;....">诗和雪缴缠</p>
			2、内嵌样式表（开发测试期间使用）
			
		 -->
		<p>诗和雪缴缠</p>
		<p>诗和雪缴缠</p>
		<p>诗和雪缴缠</p>
	</body>
</html>

3、关联外部样式表（开发最终使用）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<!-- 级联：关联  样式表与标签之间的关联关系
		样式表语言：修饰网页外观的语言
		它的特点是类似于对java重复代码的提取和调用
		HTML是网页的基本内容
		CSS是；修饰控制网页的外观
		CSS基本语法：
			1、行内样式表：直接写在标签行内，优先级最高
			每个标签中都有style属性，在此属性中写CSS语法，修饰标签
			<p style="属性：值;属性：值;....">诗和雪缴缠</p>
			2、内嵌样式表（开发测试期间使用）
			3、关联外部样式表（开发最终使用）
		 -->
		 <link rel="stylesheet" href="out.css" />
		<p>诗和雪缴缠</p>
		<p>仰天大笑出门去</p>
		<p>诗和雪缴缠</p>
	</body>
</html>

out.css

p{color: blue;font-size: 30px;}

选择器

id选择器：一对一（id是唯一的） #类名{} 通过标签选择器可以选择页面中的所有指定标签

class选择器（类名可以重复） .类名{} 通过标签的class属性值选中一组标签

标签选择器 p,a,h1…{} 通过标签选择器可以选择页面中的所有指定标签

通配选择器 *{ } 用来选中页面中的所有标签

选择器优先级：行内样式表>id选择器>类选择器>标签选择器>通配选择器

选择器组合：通过选择器分组可以同时选中多个选择器对应的标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		 <style type="text/css">
		/* 标签选择器 */
		 	p{
				color: red;
			}
			/* id选择器 */
			#p1{
				color: aqua;
			}
			/* class选择器 */
			.p2{
				color: blueviolet;
			}
			/* 通配选择器 */
			*{
				color: blue;
			}
			/* 选择器组合 */
			#d1,.h{
				color: darkblue;
				font-size: 20px;
			}
		 </style>
		 <!--
		 
		 选择器优先级：行内样式表>id选择器>类选择器>标签选择器>通配选择器
		  
		  -->
	</head>
	<body>
		李白
		<p id="p1" class="p2" style="color: #FF7F50;">静夜思</p>
		<p class="p2">窗前明月光</p>
		<p>疑是地上霜</p>
		<p class="p2">举头望明月</p>
		<p>低头思故乡</p>
		<h1 class="h">嗷呜</h1>
		<h2 id="d1">阿吧</h2>
	</body>
</html>