`

【转载】在网页中引入CSS的方法

    博客分类:
  • web
css 
阅读更多

HTMLCSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须通过一些方法,将CSSHTML挂接在一起,才能正常工作。HTML中,引入CSS的方法主要有行内式、内嵌式、导入式和链接式4种(优先级从高到低)。

 

1, 行内式

<div style="border:2px #00F solid; width:80px; height:30px;">文本内容</div> 

 在标记的style属性中设置CSS样式,这种方法无法体现CSS的优势,不提倡使用。

 

2, 嵌入式

将页面中元素的属性的设置写在<head></head>之间。

<html>  
<head>  
<title>webpage</title>  
<style type="text/css">  
   div{  
          border:2px #00F solid;   
          width:80px;   
          height:30px;  
       }  
</style>  
</head>  
<body>  
      <div>文本内容</div>  
</body>  
</html>  

 

这种方式对于单一的网页很方便,但是对于包含较多页面的网站,如果对每一个页面都以内嵌的方式设置各自的样式,就失去了CSS的优点,而实际上对于一个网站都编写一个单独的CSS文件,用以下两种方法引入HTML文件中。

 

3,导入式与链接式

导入式与链接式的目的都是将一个独立的CSS文件引入HTML文件,二者的区别不大,但是深入了解还是有些地方不同。

实际上,链接式是使用HTML的标记引入外部CSS文件:

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

 而使用导入式则是使用CSS规则引入外部CSS文件

<style type="text/css">    
       @import"mystyle.css";    
</style>  

 

这两种方法在显示效果上也略有区别:

 

1,使用链接式,会在装载页面主体之前装载CSS文件,这样显示出来的网页一开始就带有样式效果,而使用导入式时,会在整个页面加载完成后再装载CSS文件,对于网页体积较大时,可能在开始浏览时没有显示效果,等待数秒后才会显示样式。

 

2,对于一些较大的网站,为了便于维护,可能会希望把所有的CSS样式分类别放在几个CSS文件中,这样如果使用链接式,就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类,就需要同时调整HTML文件。而使用导入式,则可以只引进一个总的CSS文件,在这个文件中再导入其他独立的CSS文件;而链接式不具备这个性质。

 

3,如果希望通过JavaScript来动态决定引入哪个 文件,则必须使用链接式才能实现。

分享到:
评论

相关推荐

    网页三级菜单制作(转载)

    网页制作中的菜单设计是用户体验的重要组成部分,特别是在复杂的网站结构中,三级菜单的运用能有效组织信息,方便用户快速导航。本教程将分享一种基于jQuery的横向滑动三级下拉菜单的实现方法,它具有良好的视觉效果...

    HTML5CSS3 3D雷达扫描动画.zip

    在这个雷达扫描动画中,CSS3的3D转换和关键帧动画可能被用来创建雷达扫描的动态轨迹和旋转效果。 要实现3D雷达扫描动画,开发者可能使用以下关键技术: 1. **CSS3 3D变换**:通过`transform`属性,应用`rotateX()`,...

    精心整理的一份CSS学习笔记+CSS思维导图

    作者|Panda 转载请注明出处。 文章目录一、CSS简介二、选择器2.1 基本选择器:2.2 组合(复合)选择器2.3...3.外联样式:将一个独立的.css文件引入到HTML文件中,使用标记写在标记中。 链接式会以网页文件主体装载前装

    小程序UI库 转载

    1. 引入库:在小程序项目的`app.json`或相关页面的`json`配置文件中引入ColorUI的CSS文件,这样所有的组件样式就生效了。 2. 学习API:仔细阅读readme文件,了解每个组件的可用属性和方法,这将帮助你理解和定制组件...

    layui-progress+element+jquery+js设计一个动态进度条

    1. 引入layui.css、layui.js、element.css、element.js以及jQuery库到HTML文件中。 2. 在HTML中创建一个layui-progress元素,设置初始样式和ID。 3. 使用JavaScript初始化layui-progress,设置初始进度值。 4. 编写...

    javascript中文转拼音(转载)

    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要在用户端运行,用于操作网页中的HTML、CSS以及数据。在给定的资源中,"javascript中文转拼音(转载)"是一个关于使用JavaScript实现中文字符转换为...

    2020.6.4xueli.zip

    2. **HTML与CSS结合**:在这个压缩包中,HTML和CSS被一起使用来创建完整的网页。HTML通过标记文本内容来构建网页结构,而CSS通过选择器匹配HTML元素,添加样式规则,实现内容与样式的分离,提高了代码的可维护性和...

    带收藏转载的jquery瀑布流.zip

    瀑布流布局,又称为Masonry布局,是一种常见的网页设计样式,尤其在图片展示网站中广泛应用。这种布局方式模仿了物理世界中的瀑布,使得页面中的元素可以像水滴一样自然地垂直下落,形成错落有致的效果。在HTML5、...

    帝国cms个人博客(转载)

    【标题】"帝国cms个人博客(转载)"所涉及的知识点主要集中在网站开发领域,特别是使用帝国CMS系统来创建一个个人博客的过程。帝国CMS是一款基于PHP+MySQL开发的内容管理系统,它以其强大的功能、灵活的扩展性和易用...

    【转载】透明圆角化背景图片(二)

    CSS3引入了边框半径属性,使得我们可以直接通过CSS为元素设置圆角。基本语法如下: ```css element { border-radius: top-left top-right bottom-right bottom-left; } ``` 这里的`top-left`、`top-right`、`...

    转载:酷炫背景------瀑布流

    瀑布流布局,也被称为Masonry布局,是一种网页布局方式,常用于图片展示或者内容加载,其特点是元素在页面上自适应地以不规则的方式填充,就像水流从高处落下形成瀑布一样。这种布局方式最早由Pinterest网站推广开来...

    jquery 分页 为了收藏纯属转载

    这个插件允许开发者轻松地在网页中添加Ajax分页功能。首先,我们需要在HTML中添加必要的结构,然后通过jQuery代码来激活插件。 #### HTML基础结构 ```html &lt;div id="pagination"&gt;&lt;/div&gt; &lt;!-- 数据行 --&gt; ``...

    使用 HTML5 开发离线应用[转载]

    通过`window.history.pushState()`和`window.history.replaceState()`方法,开发者可以在不改变URL的情况下更新浏览器的历史记录,从而提供更加流畅的用户体验。同时,`popstate`事件可以监听到浏览器历史记录的变化...

    微信UI(转载共享)

    在压缩包`weui`中,通常会包含CSS样式文件、JavaScript文件、示例代码和文档等资源。开发者可以根据项目需求,将WeUI的相关文件引入到自己的项目中,然后按照文档指导进行配置和使用。 总的来说,微信UI(WeUI)是...

    tab页小插件(转载

    在网页或应用中,Tab页是一种将不同内容区域分隔开的交互设计,用户可以通过点击不同的Tab标签在各个内容间切换,而无需刷新整个页面。这种设计模式可以节省空间,使复杂的界面保持整洁,并帮助用户更快地定位所需...

    兼容所有浏览器的弹出层登录

    在IT行业中,网页开发是一项关键任务,而创建一个兼容所有浏览器的登录弹出层是确保用户体验一致性和流畅性的重要步骤。本文将详细讲解如何实现这样一个功能,并分享一个模仿Win7风格的弹出层实例。 首先,我们需要...

    2008十大优秀Java应用程序(转载)

    它遵循开源LGPL许可证,是Java应用中生成高质量网页文档的理想选择。Mozilla Rhino则是一个完全用Java实现的JavaScript引擎,可嵌入Java应用中,为用户提供脚本能力,增强了Java应用程序的交互性。 7. **UltraMixer...

    最新存款利息计算器源码程序.pdf

    pvf21b76d3545dc298" rel="Stylesheet" type="text/css"&gt;`引入了外部样式表,用于设置网页的样式和布局。 4. **JavaScript函数**:`&lt;script language="javascript"&gt;`包含了一个名为`perSaving`的JavaScript函数,这...

    web前端工程狮 HTML 笔记

    2.5 HTML5 多媒体支持HTML5 支持音频()和视频()元素,使得在网页中嵌入多媒体资源变得简单: ```html Your browser does not support the video tag. ``` 2.6 HTML5 Canvas 和 SVGHTML5 的 Canvas 允许通过...

    my1(java基础+页面设计)

    这是一套学习资源,包括课件、实例、练习、答案以及开发工具的使用指南,旨在帮助初学者掌握Java编程语言的基础知识以及如何在实际项目中设计用户界面。 【描述】"java基础(课件pdf+课堂事例+练习+练习答案+...

Global site tag (gtag.js) - Google Analytics