HTMl中引入使用CSS几种方式

最新推荐文章于 2022-10-04 17:29:41 发布

mih？？？

最新推荐文章于 2022-10-04 17:29:41 发布

阅读量456

点赞数

文章标签： HTMl中引入使用CSS几种方式

本文链接：https://blog.csdn.net/qq_43392346/article/details/100087248

版权

HTMl中引入使用CSS几种方式

作为一个刚刚开始学习前端的小白,在学习的过程中遇到了很多的难题,当然也学习到了很多的知识,技术.
我们在前端的工作和学习中主要的就是使用HTML,CSS和js了，今天在这里就我目前的了解，分享一下几种在HTML中引入或使用CSS的方法.

CSS
在HTML中使用CSS,有三种方法;内联样式, 内部样式, 外部样式

内联样式
内联样式就是直接写在标签内部的一种CSS样式,这种样式在三种样式中优先级最高;使用方法如下:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
 </head>
 <body>
   //创建一个div,在标签内添加style属性,
   //然后把我们想要的样式写在style的引号里面(注意:一定要写在引号里面)
   //每个属性之间要用分号隔开
  <div id="box" style="width: 100px;height: 100px;background: red;">
   
  </div>
 </body>
</html>

内部样式
内部样式就是把样式写在<style type="text/css"> 这里写样式</style> 里,然后把style放在head(我一般用内部样式的话习惯放在head里面)里,当然放在别的地方也可以使用 . 具体使用如下:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
  //如果给div加的是ID的话,就需要使用#box(id选择器)

   #box{   
   width: 100px;
   height: 100px;
   background: red;
   }
    //如果给div加的是class的话,就需要使用.box(class选择器)
    
   .box{   
   width: 100px;
   height: 100px;
   background: red;
   }
   //这个是元素选择器(或称类型选择器),直接使用元素的名称,前面不用加任何东西
   div{   
   width: 100px;
   height: 100px;
   background: red;
   }
  //注意着三中选择器不要搞错了,要不然就用不了了,一般的话使用class选择器较多

  </style>
 </head>
 <body>
  <div id="box">
   hello world!!!
  </div>
  <div class="box">
   hello world!!!
  </div>
 
 </body>
</html>

3.外部样式
嗯!我现在一般就是说那个这种方式,这样代码看着比较清晰,容易管理. 在使用外部样式时,我们要先创建一个单独的CSS文件,我们在这里把这个CSS文件命名为external.css,具体使用如下:

htmL代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  //使用link标签引入外部的CSS样式,注意link标签的三个属性都不能少(使用编辑软件一般都会提示)
  //使用link元素导外部样式是,需要将该元素写在文档的头部,即<head></head>之间
  //rel:用于定义文档关联,表示 关联样式表
  //type:定义文档类型,这里为CSS
  //href:填写文件的路径及文件名全称,(这个也会提示,没有提示的话就要自己写啦)
  //@import也可以导入外部样式,但是我没有用过,在这里就不介绍了,有兴趣的话,可以查查看
  <link rel="stylesheet" type="text/css" href="css/external.css"/>
 </head>
 <body>
  <div id="box">
   hello world!!!
  </div>
  <div class="box">
   hello world!!!
  </div>
 </body>
</html>

CSS代码

#box {
 width: 100px;
 height: 100px;
 background: red;
}
.box {
 width: 100px;
 height: 100px;
 background: red;
}
 div{   
   width: 100px;
   height: 100px;
   background: red;
   }

css文件内的样式写法,和内部样式的写法相同,不过不用加入其它的东西,直接在选择器里面写样式就可以了.
下面再说一下相对路径的写法(就是上面href里面要写的东西):
1.当前文件与目标文件在同一目录下(如下图的情况),这种情况的话直接在href里面写CSS文件名就可以了,记得加后缀 href="external.css";这样就行了.
在这里插入图片描述
2.当前文件与目标文件所在的文件夹在同一目录下(如下图);external.css文件在一个CSS文件里面,html文件则在CSS文件夹外面,这个时候就需要在external.css前面加上文件夹的名称了;href="css/external.css",文件夹名和文件名中间要用"/"隔开.
在这里插入图片描述
3.当前文件所在的文件夹与目标文件所在的文件夹在同一目录下(如下图);external.css文件在一个CSS文件里面,html文件则在page文件夹里面,这时就需要在css/external.css前再加上"../",现在href="../css/external.css","../"代表返回上一级.
在这里插入图片描述
以上就是我对html中引入和使用css文件的几种方法的总结,如有错误或者不严谨不到位的地方希望大家体量,和指出.谢谢.