CSS样式引入

内部样式
在head标签内设置style标签,在style内设置选择器

格式:	
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>内部样式</title>
    <meta charset="utf-8" />
   <style>
   	 p{
   		  color: red;
   	 }
   </style>
   
</head>

<body>
    <p>使用内部样式将改变这段文字的颜色</p>
</body>

行内标签

在标签内设置style.

 <p style="color: red;">使用行内样式该表这段文字的颜色</p>

外部样式
单独设置一个css文件,在需要用到的html文件内引入这个css文件
css文件中可以设置各种选择器(不局限相同样式)

我已经在项目下新建了一个名为css文件夹,里面新建了一个style.css文件
里面设置了一个标签选择器

p{
    color:red;
}

在html文件中引用这个外部样式

<!--引入外部样式表-->
<link rel="stylesheet" href="../css/style.css" />

link标签可以放在head内,body内,以及两者之外,不影响效果

原则
个人喜欢称之为 “最底原则
这里说的是外部,内部,行内样式里有重复的部分
比如说:

外部样式表:
p{ 
  color: red;
}

内部样式:
p{
  color: blue;
}

行内样式:
<p style="color: orange;">使用外部样式表改变这段文字的颜色</p>

最终文字显示的颜色是orange,无论什么情况,如果遇到重复样式,最终显示的效果为行内样式,如果只是外部内部遇到重复,那最终显示的是最后加载的样式(html从上到下进行加载),对于不重复的部分,所有的样式表里涉及到的样式均会显示。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值