HTMl中引入使用CSS几种方式
作为一个刚刚开始学习前端的小白,在学习的过程中遇到了很多的难题,当然也学习到了很多的知识,技术.
我们在前端的工作和学习中主要的就是使用HTML,CSS和js了,今天在这里就我目前的了解,分享一下几种在HTML中引入或使用CSS的方法.
CSS
在HTML中使用CSS,有三种方法;内联样式, 内部样式, 外部样式
- 内联样式
内联样式就是直接写在标签内部的一种CSS样式,这种样式在三种样式中优先级最高;使用方法如下:
- 内部样式
内部样式就是把样式写在<style type="text/css"> 这里写样式</style>
里,然后把style放在head(我一般用内部样式的话习惯放在head里面)里,当然放在别的地方也可以使用 . 具体使用如下:
3.外部样式
嗯!我现在一般就是说那个这种方式,这样代码看着比较清晰,容易管理. 在使用外部样式时,我们要先创建一个单独的CSS文件,我们在这里把这个CSS文件命名为external.css,具体使用如下:
htmL代码
CSS代码
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文件的几种方法的总结,如有错误或者不严谨不到位的地方希望大家体量,和指出.谢谢.