CSS(一)基础

最新推荐文章于 2022-12-28 11:01:37 发布

司天宏

最新推荐文章于 2022-12-28 11:01:37 发布

阅读量187

点赞数

本文链接：https://blog.csdn.net/qq_41532872/article/details/86368767

版权

前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

1.引入样式方式1-行内样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!-- 行内样式:只对它所修饰的元素起作用
			语法：style=”属性1：值1;属性2：值2...属性n:值n”
		-->
		<p style="color: red;font-size: 18px;">我是一个段落</p>
		<p>我也是一个段落</p>
	</body>
</html>

在这里插入图片描述

2.引入样式方式1-内部样式


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 内部样式：在头部使用一个或多个style元素来定义样式，每个style元素就是一个内部样式表
			语法：
		  <style>
		   	选择器{
		   	   属性1:值1;
		   	 属性2：值2;
		   	 ...
		   	 属性n:值n
		   }
		   </style>-->
		   <style>
		   	   /*给所有的p元素添加统一的样式*/
		   	 p{
		   	 color:red;
		   	 font-size: 18px;
		   	 }
		   </style>
	</head>
	<body>
		
		<p>我是一个段落</p>
		<p>我也是一个段落</p>
	</body>
</html>

在这里插入图片描述

3.引入样式方式3-外部样式


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入外部的css文件-->
		<link type="text/css"  href="../css/style.css" rel="stylesheet">
	</head>
	<body>
		 <h1>我是一号标题标签</h1>
	</body>
</html>

在这里插入图片描述

样式优先级


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 内部样式 -->
		<style>
			h1{
				color:red;
			}
			
		</style>
		<link type="text/css"  href="../css/style.css" rel="stylesheet">
		
	</head>
	<body>
	<!--	样式的优先级： 当有多个样式作用在同一元素上时，谁离元素近，就使用谁的样式，即谁离得近，谁的优先级高-->
		<h1 style="color:green">我是h1元素</h1>
	</body>
</html>

在这里插入图片描述

长度和颜色单位


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--长度单位em:1em就是当前一个字体的尺寸，text-indent: 2em;让文本缩进2个字符 -->
		<p style="text-indent: 2em;">
			 武汉市是湖北省的省会<br>
		  这是个有百湖之称的城市，拥有全亚洲最大的城中湖---东湖
		</p>
		  
		<!-- 
			颜色的三种表示法：
		1.rgb颜色表示法：rgb(red,green,blue)，其中三个参数代表三种颜色的强度，值是[0,255]
		 2.十六进制表示法：用十六进制的值表示颜色，#RRGGBB
		 3.英文单词表示法：用英文单词表示颜色，例如红色是red
		 -->
		 <h2 style="color: rgb(198,150,71);">我是一个h2元素</h2>
		
		 <h3 style="color: #FF760A;">我是一个h3元素</h3>
		  <h3 style="color:chartreuse">我是一个h4元素</h3>
		  <img src="../img/adv_1.jpg">
		  
	</body>
</html>

在这里插入图片描述

司天宏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS(一)基础

1.引入样式方式1-行内样式&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- 行内样式:只对它所修饰的元素
复制链接

扫一扫