css的详细使用

语法

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

在这里插入图片描述
在这里插入图片描述
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

CSS的引入方式

内联样式(行内样式)
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。
特点:缺乏整体性和规划性,不利于维护,维护成本高,代码复用度低;

<body>
		<!--
			行内式引入
			借助标签的style属性引入的
			style="样式名:样式值;样式名:样式值;... ... "
			问题1 代码复用度不高
			    2更新和维护工作量大
			好处:直观
		-->
		<p style="background-color: lightgray;width: 500px;color: green;" >今天天气很凉快,北京今日无新增</p>
		<p style="background-color: lightgray;width: 500px;color: green;" >后天放假</p>
	</body>

内部样式 (内嵌样式)

当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用

<head>
    <style> 
       h1 {
      background: red; } 
    </style>
</head>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			 
			 /*css中的注释 
			
				内嵌式,在head标签中 使用一对style标签引入css样式表
				 通过选择器来确定样式 的作用标签
				 优点:
				 1提高了代码复用度
				 2维护工作量降低
				 3利于整体风格统一
			 	缺点:
			 	 1通过选择器,不太直观
			 	 2样式只能作用在当前页面内
			*/   
			
			p{
     
				background-color: lightgray;
				width: 500px;
				color: green;
			}
		</style>
	</head>
	<body>
		<!---->
		<p >今天天气很凉快,北京今日无新增</p>
		<p >后天放假</p>
	</body>
</html>

外部样式(推荐)

当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部:

<link rel="stylesheet" type="text/css" href="xxx.css">
外部css文件:
p{
	background-color: lightgray;
	width: 500px;
	color: green;
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			在head标签中通过 link标签引入外部样式表
			1多个html可以使用同样的样式,代码复用度进一步提高
			2利于整个网站风格统一
			3减少当前页面的代码
			
		-->
		<link rel="stylesheet" type="text/css" href="css/mycss.css" />
	</head>
	<body>
		<p >今天天气很凉快,北京今日无新增</p><
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DNCS高级工程师

你的创作是我打赏的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值