精华内容
下载资源
问答
  • 既然css是用来给html添加各种样式的,那么,html中如何引入外部css文呢?本篇文章将给大家来介绍关于html引入css文件的四种方法,下面我们就来看看具体的内容。 1、html引入css文件之直接在div中使用css样式制作...

    在学习前端的时候,我们应该知道css给html标记添加各种样式,用来告诉浏览器,因该如何显示这些标记里面的内容。既然css是用来给html添加各种样式的,那么,html中如何引入外部的css文呢?本篇文章将给大家来介绍关于html引入css文件的四种方法,下面我们就来看看具体的内容。

    1、html引入css文件之直接在div中使用css样式制作div+css网页

    <div style="border:1px red solid;">html引入css文件</div>

    说明:html引入css文件的这种方法不建议使用,因为会让页面的标签很多,看起来很累赘,体现不了css的优势,当然如果你非常想用这种方法,在不经常更改的地方可以用一用,但是还是不推荐。

    打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)

    2、html引入css文件之html中使用style自带式

    直接在header 里面写css

    <style type="text/css">

    div{margin: 0;padding: 0;border:1px red solid;}

    </style>

    说明:html引入css文件的这种方法适合在页面较少的情况下使用。优点:速度 快,所有的css控制都是针对本页面标签的,没有多余的css命令;再者不用外链css文件。直接在html文档中读取样式。缺点如果页面较多改版会很麻烦,单个页 面显得臃肿,css不能被其他html引用造成代码量相对较多,维护也麻烦些。但是采用这种方法的公司大多有钱,对他们来说用户量是关键,他们不缺人进 行复杂的维护工作。

    3、html引入css文件之使用@import引用外部CSS文件

    将一个独立的.css文件引入HTML文件中,导入式使用css规则引入外部css文件,<style>标记也是写在<head>标记中,使用的语法如下:

    <style type="text/css">

    @import"mystyle.css"; 此处要注意.css文件的路径

    </style>

    4、html引入css文件之使用link引用外部CSS文件

    在网页的标签对中使用标记来引入外部样式表文件,使用html规则引入外部css

    <link href="./mystyle.css" rel="stylesheet" type="text/css"/>

    说明:html引入css文件的这种方法就不需要style标签,而是直接通过link一个样式来引用外部样式,推荐使用link来引用外部的css样式方法。

    以上就是给大家介绍的四种html引入外部css文件的四种方法,更多关于html和css的内容可以关注我!!!

    展开全文
  • html引入外部css的用法

    千次阅读 2017-12-30 13:50:12
    / 代表根目录,慎用 ../ 代表上一级目录 ../../ 代表上两级目录...text/css" href="theme0.css" /&gt;下级 同级目录/下级目录/文件名 &lt;link rel="stylesheet" type="text/

    / 代表根目录,慎用 
    ../ 代表上一级目录 
    ../../ 代表上两级目录 
    /.. 代表下级目录 
    /../.. 代表下两级目录

    标准写法: 

    同级 直接引用文件名 
    <link rel="stylesheet" type="text/css" href="theme0.css" />


    下级 同级目录/下级目录/文件名 

    <link rel="stylesheet" type="text/css" href="css/theme0.css" />


    html代码引用外部css文件时若css文件在本文件的父目录下的其他目录下,可使用绝对路径。此时路径要写为  “ /... ”形式,如在tomcat下建立一个test文件,在该文件中建立两个文件 夹as与css,在as下建立一个html文件,在css文件夹下建立一个css文件test.css,若html文件想要引用css文件夹下的css文件,则引用格式为 <link rel="stylesheet" href="/test/css/test.css"> ,这种方法仅在tomcat下尝试有效,其他地方我尝试了一下发现没有效果


    在不使用tomcat服务器,仅双击打开html文件时,若要链接其它目录的css文件,路径要追溯到html文件与css文件的共同根节点的父节点。比如:文件夹a下建立一个文件夹b,b下建立文件夹ht与css,ht中建立一个html文件,css下有一个css文件d.css,当html文件引用css文件时,引用格式为<link rel="stylesheet" href="/a/b/css/d.css">

    展开全文
  • html引入外部 css 、js 文件

    千次阅读 2019-02-12 12:15:34
    引入外部 css 文件代码如下,css文件引入代码应放在 <head></head>中。 <!-- 本地相对路径," ../ "是上翻一个目录级,样例如下:导入本地 index.css 文件 --> <!-- 目录级的解释见样例 --&...

    1. 引入 css 文件

           引入外部 css 文件代码如下,css文件引入代码应放在 <head></head> 中。

    <!-- 本地相对路径," ../ "是上翻一个目录级,样例如下:导入本地 index.css 文件  -->
    <!-- 目录级的解释见样例 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- url 方式, 样例如下:导入 bootstrap.min.css 文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">

    2.  引入 js 文件

     引入外部 js 文件代码如下,js 文件引入代码应放在 body 的最底部(原因:页面加载更快)。

    <!-- 本地相对路径," ../ "是上翻一个目录级,样例如下:导入本地 bootstrap.js 文件  -->
    <script type="text/javascript" src="../js/bootstrap.js" />
    <!-- url 方式, 样例如下:导入 d3.js 库 -->
    <script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>

    3. 完整的实例

    3.1 工程目录

    项目目录如图所示:

    3.2 目录级的解释

    在同一个文件夹中的文件为同一级,例:css 文件夹 、fonts 文件夹 、img 文件夹、fonts 文件夹 、index.html、 test.html 为同一级;index.css,bootstrap.min.css 同一级;

    index.css 是 css 文件夹的下一级, index.css 也是 test.html 的下一级;

     css 文件夹 是 index.css 的上一级,test.html  也是  index.css的上一级;

    test.html 引入外部 css 文件, js 文件源代码如下:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>LCXXKG</title>
    		<link rel="stylesheet" href="css/index.css">
    		<link rel="stylesheet" href="css/bootstrap.min.css" >
    	</head>
    	<body>
    		
    		<script type="text/javascript" src="js/bootstrap.js" />
    		<script src="js/jquery-3.2.1.min.js" />
    	</body> 
    </html>
    

     

    展开全文
  • 引入外部css

    2020-09-24 17:13:04
    <!dectype html> <...style type="text/css"> p{ color:red; font-size:40px; } </style> <!-- 内部样式表 在head中设置所有的<p></p>中的字体 -->

    内部样式表(是样式与结构分离的一种表现,并未完全分离)
    即在body中设置所有的样式

    <head>
    		<meta charset="utf-8"/>
    		<title></title>
    		<style type="text/css">
    		p{
    			color:red;
    			font-size:40px;
    		}
    	</style>
    	</head>
    

    这里是在head中设置所有的p中的字体


    引入外部文件
    为什么要引入外部css文件
    文本样式追求的是样式与文本分离,在文本标签里直接设置文本样式虽然方便,但这是样式(css)与结构(html)耦合,并不方便后期维护,所以我们提倡样式与结构分离,通过引入外部css文件来为结构设置样式

    引入外部文件 (样式与结构完全分离)
    引入语法

    <head>
    		<meta charset="utf-8"/>
    		<title></title>
    	<link rel="stylesheet" type="text/css" href="一.css"/>
    	</head>
    

    rel: 定义当前文档与被链接文档之间的关系,这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件
    type: 定义所链接文档的类型,这里需要指定为"text/css",表示链接的外部文件为css
    引入外部样式表的语法格式中 hrel和type中的输入内容是固定的
    href中写的是要引入css文件的相对路径 或者绝对路径


    题外话:路径问题
    路径中
    . . / 表示源文件所在目录的上一级目录,. . /. . /表示源文件所在目录的上上级目录,以此类推 即两个紧挨着的点再紧挨着/符号
    选择下一级目录直接写下级目录名加/就行
    比如 . . /1/2/3.html

    <!dectype html>
    <html>
    	<head>
    		<meta charset="utf-8"/>
    		<title></title>
    		<style type="text/css">
    		p{
    			color:red;
    			font-size:40px;
    		}
    	</style> <!-- 内部样式表 在head中设置所有的<p></p>中的字体 -->
    	<link rel="stylesheet" type="text/css" href="一.css"/>
    	<!-- 引入外部样式表的格式hrel跟type中的是固定的 
    		href写的是要引入css文件的相对路径 -->
    	</head>
    	<body>
    		<h1>试试</h1>
    		<p></p>
    		<p></p>
    		<p>撞撞</p>
    		<p style="color:red;font-size:40px;">奔向你</p>
    		<!-- 也可在这里面直接设置(不推荐) -->
    	</body>
    	
    </html>
    
    展开全文
  • HTML文件引入外部CSS文件时路径的写法总结,列举了各种情况的路径写法
  • HTML引入外部CSS和JS

    千次阅读 2016-09-30 17:12:54
    自定义外部JS和CSS文件引入HTML
  • html5使用link引入外部css

    万次阅读 2016-07-21 19:36:40
    html5/link/css
  • 刚开始的代码是这样的,使用react router4.x写的demo路由跳转后,页面的没有渲染,是因为没有引入外部css文件(或者说引入外部文件路径错误) <!DOCTYPE html> <html lang="en"> <head> ...
  • HTML外部引入CSS文件

    2021-04-28 09:06:36
    HTML外部引入CSS文件 引入css在head标签中,使用rel、type、href。 <head> <link rel="stylesheet" type="text/css" href="文件路径" /> </head>
  • 在学习前端的时候,我们应该知道css给html标记添加各种样式,...1、使用@import引用外部CSS文件将一个独立的.css文件引入HTML文件中,导入式使用css规则引入外部css文件,标记也是写在标记中,使用的语法如下:@im...
  • 标签属于html标签,而@import是css提供的一种方式,标签不仅可以引入css,还可以做其他事,而@import只能引入css 加载顺序的区别:当一个页面被浏览时,link引入css会被同步加载,而@import引用的css是等到其他...
  • 久未更 系列一:在html引入外部css样式表 1 //引入外部css样式表 2 //<lilnk>要放在<head>标签的第一行,否则不起作用 3 //如下 4 <head> 5 <link rel="stylesheet" type=...
  • 引入外部css文件时发现怎么样都无效,html文件和css文件在同一个文件夹,用的相对路径 用浏览器的f12开发工具检查之后发现确实没有引入css文件 最后发现是因为前面敲的一个base标签,当时也没有注意,后来就完全...
  • 1.link属于HTML标签,而@import是CSS提供的一种方式 2.@import有次数限制,只能引入31次 3.当页面被加载时,link引用的CSS会同时被加载,而@import引用的CSS则是等待主页面全部被加载完后才会被加载,所以当网速较...
  • CSSHTML 的结合能产生非常奇妙的化学反应,CSS 的样式可以让 HTML 更美的呈现在用户眼前,本篇我们来介绍如何把 CSS 嵌入到 HTML 中。一、嵌入式第一种方法嵌入式指的是使用 HTML 的 ​​ 元素,在​​ 内添加 ​...
  • 但是我昨天想要在html引入外部的放在static文件夹中的CSS和JS时,出现引入不进去的错误。而且这个路劲无论怎么写都是不对。 后来经过百度,发现windows下在写html的时候,不能再文件开头加上<!DOCTYPE ...
  • 导入外部js文件:  1.cript" src="myjs/xx.js">  2.cript" src="myjs/xx.js"> 注意:type是一个未来趋势,在HTML 4 标准里并不赞成使用language属性,而赞成使用type属性。language属性可以用来指定...
  • 用import引入外部js文件 index.js(用来引入的文件) let a = 1 export default { a } html文件 index.html //type="module 一定要加 不然无法使用模块化 ...用import引入外部css文件 新建index.css文
  • protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { HtmlLink link = new HtmlLink(); link.Att...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,758
精华内容 703
关键字:

html引入外部css