html网页如何连接到css?css和html连起来的方法介绍

2021-08-25 729

html网页如何连接到css?css和html连起来的方法介绍!在前端页面中,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" rel="external nofollow" >

关于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样式。

h1,h2, h3, h4, h5,h6 {font-size : 100%}
em {font-style:normal}
small {font-size:12px}
ol, ul {list-style:none}
a{text-decoration: none}
a:hover {text-decoration: underline}
legend {color : #000}
fieldset,img {border : 0}
button,input,select,textarea {font-size : 100%}
table {border-collapse:collapse ; border-spacing:0}
img {-ms-interpolation-mode : bicubic}
textarea {resize:vertical}
.left{float : left}
.right{float:right}
.overflow {overflow:hidden}

html中使用内联式的Css样式

常见的内联式的Css样式:

<div style="height:960px;width:auto;"></div>

内联式的Css样式,通常很少使用,因为内联式的Css样式是直接将Css样式写在html标签内,而我们的网页页面是由很多的html标签组成的,所以维护和使用起来都不能方便。

以上就是我们在前端页面制作过程中,html和Css如何链接到其他的方法,一般情况下我们会使用链接式的使用link引入的方法把html代码和css文件链接起来,当然在一些情况下也会使用嵌入式的Css样式。

声明: 本站仅提供资源学习下载,资源费用仅为赞助站长的整理费,不代表资源自身价值也不包含任何服务。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
本站提供的资源来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。
如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:duhaomu@163.com

浩沐资源网 开发技巧 html网页如何连接到css?css和html连起来的方法介绍 https://www.dhaomu.com/1399.html

相关文章

发表评论
暂无评论
  • 0 +

    访问总数

  • 0 +

    会员总数

  • 0 +

    文章总数

  • 0 +

    今日发布

  • 0 +

    本周发布

  • 0 +

    运行天数

浩沐资源网-打造全网优质免费教程资源分享网站!