linux下如何让网站支持用一个连接加载多个CSS或者JS文件

html-css06

linux下如何让网站支持用一个连接加载多个CSS或者JS文件,第1张

js做按需加载,只导入一个js文件,然后这个js里面处理载入更多js,教程百度可以搜到很多

css里面可以再包含css,比如你网页里面引用:style.css

然后用在@import语句,里面可以再包含其他样式表:

@import "base.css"

@import "forms.css"

<div class="listclass">

<ul id="listlistssssss">

<li></li>

<li></li>

<li></li>

</ul></div>

<script src="js/dropload.min.js"></script>

<script type="text/javascript">

var u = navigator.userAgent, app = navigator.appVersion

var isAndroid = u.indexOf('Android') >-1 || u.indexOf('Linux') >-1//android终端或者uc浏览器

//var isiOS = !!u.match(/\(i[^]+( U)? CPU.+Mac OS X/)//ios终端

/*alert('是否是Android:'+isAndroid)

alert('是否是iOS:'+isiOS)*/

$(function(){

// 页数var page = 0

// 每页展示10个

var size =5

// dropload

$('.listclass').dropload({

scrollArea : window,

loadDownFn : function(me){

page++

// 拼接HTML

var result = ''

$.ajax({

type: 'get',

url: "text.txt",

dataType: 'text',

success: function(data){

//alert(222)

var arrLen = data.length

if(arrLen >0){

//for(var i=0i<arrLeni++){

//var html = $("#listlist").html()+data

// alert(html)

$('.dropload-refresh').html('加载更多...')

$('.dropload-refresh').css('font-size:','1.875rem')

// me.resetload()

// }

// 如果没有数据

//alert(arrLen )

}else{

// 锁定

me.lock()

// 无数据

me.noData()

}

// 为了测试,延迟1秒加载

// setTimeout(function(){

// 插入数据到页面,放到最后面

// $('.listclass').append(result)

$('#listlistssssss').append(data)

// 每次数据插入,必须重置

me.resetload()

// },1000)

},

error: function(xhr, type){

alert('Ajax error!')

// 即使加载出错,也得重置

me.resetload()

}

})

}

})

})

</script>

Html中引入css的主要方式有四种,分别是外部样式、内部样式、内联样式、导入式。

一、外部样式

(一) 使用外部样式的好处

1.减少代码量 ,网站中相同部分的样式只需要编写一次,我们只需要把css文件引入到不同的html页面中即可实现展示效果。

2.更改网站风格方便,我们可以通过修改一个css文件就可以实现整个网站的外观修改。

3.Html页面渲染时,css文件能够被同时加载。

4.结构与表现分离,便于后期维护。

(二) 适用于多个页面需要相同样式内容的时候使用

(三) 书写位置:新建单独的后缀名为.css文件,使用link标签引入到html页面中,将link标签放到Html页面的head标签中

例:

rel:规定当前文档与被连接文档之间的关系.

href:规定为连接文档的位置

type:规定被连接文档的MIME类型

二、内部样式

(一) 使用内部样式的好处

1.结构与表现分离,便于后期维护。

2.所有的CSS控制都是针对单独的面,没有多余的CSS代码。

3.同样页面中相同的样式可以重复使用。

(二) 使用内部样式的缺点

1.只能在一个页面中使用

2.网站更换风格麻烦

3.Css在html页面中,页面显得臃肿

(三) 适用于个别页面需要特殊样式时

(四) 书写位置:写在html页面的head标签之间,在head标签之间书写style标签

例:

三、行间样式

(一) 使用内部样式的好处

1. 单独修改单个标签的样式

(二) 使用内部样式的缺点

1. 结构与表现没有分类,不利于后期维护。

2. 只能修改单个标签的样式,代码重复利用率不高,代码冗长。

(三) 适用于个别标签需要特殊样式时

(四) 书写位置:在标签的开始标签内部书写style=””

例:

四. 导入式

(一) 使用导入的好处

1.减少代码量,网站中相同的部分的样式只需要书写一次,后续只需要把css文件引入到不同的Html页面中即可。

2.更改网站风格方便,我们可以通过修改一个css文件,就可以修个整个网站的外观。

3.结构与表现分离,便于后期维护。

(二) 使用导入的缺点

1.需要等Html页面全部加载完才能加载css文件。

(三) 适用于多个页面需要展示相同样式的时候

(四) 书写位置:写在Html页面的head标签中的style表现中,用@import导入css文件

以上就是html导入css代码的详细介绍,更多关于html方面的知识点,可以看下这个视频教程:网页链接,希望我的回答能帮到你。