Web 前端学习之CSS基础

最新推荐文章于 2024-10-13 19:30:05 发布

菇毒

最新推荐文章于 2024-10-13 19:30:05 发布

阅读量103

点赞数

分类专栏： web 前端学习文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_43960383/article/details/120557933

版权

web 前端学习专栏收录该内容

90 篇文章 4 订阅

订阅专栏

Web 前端学习之CSS基础

1. 标签选择器
2. class 选择器
3. id 选择器
4. 通配符
5. 完整代码如下所示
结束语

1. 标签选择器

/* 标签选择器 */
			h1 {
				color: #f0f;
			}

2. class 选择器

/* class 选择器 */
			.ch2 {
				color: #0ff;
			}

3. id 选择器

/* id 选择器 */
			#ih3 {
				
				color: rgb(255,0,0);
			}

4. 通配符

/* 通配符 所有元素都会生效 */
			* {
				/* 文字对其 center  居中  left  居左   right  居右 */
				text-align: center;
				/* 行高  控制文字的上线 */
				line-height: 50px;
			}

5. 完整代码如下所示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 标签选择器 */
			h1 {
				color: #f0f;
			}
			/* class 选择器 */
			.ch2 {
				color: #0ff;
			}
			/* id 选择器 */
			#ih3 {
				/* 颜色表示方式 */
				/* 1. 单词 red blue yellow  pink */
				/* 16进制 #表示十六位进制数 #00ff00=#0f0 */
				/* #ff0000  红色 */
				/* #00ff00  绿色 */
				/* #0000ff  蓝色 */
				/* 三原色  红绿蓝可组成各种颜色 */
				/* 前两位表示红色  中间两位表示绿色  后两位表示蓝色 */
				/* 白色  #ffffff */
				/* 黑色  #000000 */
				/* color: #000000; */
				/* 3.rgb  r(red)  g(green)  b(blue) */
				/* rgb(255,0,0)  红色 */
				/* rgb(0,255,0)  绿色*/
				/* rgb(0,0,255)	 蓝色 */
				/* rgb(0,0,0)    黑色 */
				/* rgb(255,255,255) 白色 */
				color: rgb(255,0,0);
			}
			/* 通配符 所有元素都会生效 */
			* {
				/* 文字对其 center  居中  left  居左   right  居右 */
				text-align: center;
				/* 行高  控制文字的上线 */
				line-height: 50px;
			}
			.hyrz {
				/* 字体大小 */
				font-size: 30px;
			}
			.jmqs {
				/* 字体 取值范围 100-900 bold=700 normar=400*/
				font-weight: 700;
			}
			.smbb {
				/* 字体样式 italic 字体倾斜 */
				font-style: italic;
				font-size: 50px;
				/* 字体类型  华文彩云 */
				font-family: "华文彩云";
			}
		</style>
	</head>
	<body>
		<!-- css 引入 -->
		<!-- 外部样式 -->
		<!-- 内部样式 -->
		<!-- 内联样式 -->
		
		<!-- 优先级：内联样式>内部样式=外部样式 -->
		
		<!-- 在优先级相同的情况下 后面的样式 -->
		<!-- 优先级不同的情况下   优先级较高的 -->
		
		<!-- 常用的选择器 -->
		<!-- 标签选择器   直接写标签名 -->
		<!-- class选择器	 以. 号开头 -->
		<!-- id选择器    以# 号开头 -->
		
		<!-- css的文字样式 -->
		<!-- 字体颜色 -->
		<!-- 字体大小 -->
		<!-- 字体加粗 -->
		<!-- 字体类型  宋体  楷体 -->
		<!-- 字体样式  倾斜 -->
		<!-- 行高 -->
		<div  class="box">
			<h1 style="color: pink;">西游记</h1>
			<h2 class="ch2">喜洋洋与灰太狼</h2>
			<h3 id="ih3">迪迦奥特曼</h3>
			<p class="hyrz">火影忍者</p>
			<p class="jmqs">jmqs</p>
			<p class="smbb">数码宝贝</p>
		</div>
	</body>
</html>