CSS介绍

最新推荐文章于 2022-12-02 20:20:38 发布

鑫.

最新推荐文章于 2022-12-02 20:20:38 发布

阅读量161

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/qq_43505736/article/details/112859821

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

CSS介绍和三种引入方式

块标签 >>> 块元素 在页面上独占一行的标签
行内标签 >>> 行内元素 在页面上不会独占一行的标签
span行内标签 网页上划定范围 结合CSS样式 确定某些效果的作用范围
div块标签 网页布局
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p></p>
		<span style="color: red;">巍巍华夏，千载春秋，
		身为炎黄子孙的我们总能为有一个历史悠久而又伟大富强的祖国而感到自豪骄傲，</span>
		<span style="color: yellow;">一腔爱国激情油然而生。在新中国建立伊始
		于艰苦岁月中，不少的科学家，研究学者放弃国外诱人的名利，</span>
		<span style="color: green;">毅然决然地回来投身于建设新<div style="color: yellow;border: 1px;">中国</div>的行列。钱学森就是一个具有代表性的例子，
		他历经种种磨难只为回国的故事耳熟能详。此外，在当代，</span>
		hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
	</body>
</html>

引入方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*选择器*/
			/*span{
				color: red;background-color:burlywood ;
			}*/
			 
		</style>
		<link  rel="stylesheet" href="css/mycss.css" /><!--type="text/css"-->
	</head>
	<body>
		<span>
			<!--行内式引入：style属性 当前标签
				内嵌式：将CSS样式代码选出 用选择器确定作用范围head标签中用style 多个标签
				链接式：可作用于其他网页
				优先级：就近原则
			-->
			哈哈哈哈哈哈哈哈欢迎阅读啊
		</span><br/>
		<span>
			哈哈哈哈哈哈哈哈欢迎阅读啊
		</span><br/>
		<span>
			哈哈哈哈哈哈哈哈欢迎阅读啊
		</span><br/>
	</body>
</html>

在这里插入图片描述

三大基本选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*标签名选择
			id选择
			类选择器*/
			/*标签名选择器*/
			span{
				color: darkgreen;
				font-size: 40px;
				font-family: "微软雅黑";
				background-color:skyblue ;
			}
			/*id选择器
			语法:标签名:样式		
			不可重复
			#id值{样式}
			*/
			#ab{
				color: red;
			}
			/*类选择器
			 一般body中所有标签都有class属性
			 可重复
			 标签的class属性确定样式的作用范围
			 语法.class属性值{样式}
			 */
			.c1{
				color: brown;
			}
		</style>
	</head>
	<body>
		<span id="ba">今天是2021年01月25日</span><br/>
		<span id="ab">今天是2021年01月25日</span><br/>
		<p id="s1" class="c1">今天是2021年01月25日</p>
		<h1 class="c1">哈哈哈2021年啦加油少年</h1>
	</body>
</html>