html网页如何连接到css?css和html连起来的方法介绍
- 2022年12月2日
- 1,730 次
在前端页面中,Html、css、js被称之为前端三剑客,html代码在css和Js的作用下,一个网页或者说是网站看上去才会更美观,那么在Html页面中如何引入Css文件,Html页面如何链接到css?Css和html连起来的方法有哪些呢?
在我们制作前端页面的时候,通常在html代码中引入Css有三种方式:
一、在html代码中使用link标签引入
通常在html代码的head标签内引入Css文件,例如以下的方式引入css文件。
<link rel="stylesheet" href="style/style.css">
关于link标签的使用,在《html中link标签有什么作用?html中link标签如何使用?》一文做了详细的记载。
使用link标签引入css,需要我们在link标签的href属性中正确引入css的url地址或者是路径,如果引入的Css地址不正确,那么我控制html美化的Css设置将不会生效,html页面将出现错位等情况。
二、在html中使用嵌入式的Css样式
嵌入式Css就是直接将Css的样式写在html代码中,嵌入式的Css样式也比较常用,嵌入式的Css代码我们通常放在head标签下的style标签内,style标签是一个需要闭合的标签,style标签内放入我们需要写入的Css样式即可。本站在之前有很多的实例代码,基本上都是使用的嵌入式的Css。嵌入式Css样式最出名的就是百度的MIP,MIP要求将Css样式以嵌入式的方式写在html页面中,当然百度等很多大网站也会使用到嵌入式的Css样式。
三、html中使用内联式的Css样式
常见的内联式的Css样式:
<div style="height:960px;width:auto;"></div>
内联式的Css样式,通常很少使用,因为内联式的Css样式是直接将Css样式写在html标签内,而我们的网页页面是由很多的html标签组成的,所以维护和使用起来都不能方便。
以上就是我们在前端页面制作过程中,html和Css如何链接到其他的方法,一般情况下我们会使用链接式的使用link引入的方法把html代码和css文件链接起来,当然在一些情况下也会使用嵌入式的Css样式。
若非作者标注皆为李涛自留地原创文章,转载或复制请以超链接形式并注明出处。
- 使用Css3的Flex布局实例:元素横轴两头布局纵轴居中对齐 2022-05-04
- 美国和欧洲 VPS和国内的VPS有什么区别? 2022-01-07
- 四行jQuery代码实现导航栏下拉菜单功能 jQuery实现导航栏下拉菜单的代码 2022-11-25
- jQuery回到顶部实例代码 jQuery怎么实现回到顶部 2022-10-03
- html中link标签有什么作用?html中link标签如何使用? 2022-12-01
- ZblogPhp主题幻灯片轮播制作教程 ZblogPhp主题幻灯片制作插件版 2022-10-12
