引用CSS到html网页里的4种方法

1、行内式
在标记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，因此不推荐使用
    <div style="width:100px;height:100px;background:red;"></div>

2、嵌入式（内嵌式）
嵌入式则将对页面中各种元素的设置集中写在<head>标签内的<style>标签中。
对于单一的网页，这种方法很方便，但是对于一个包含很多页面的网站，如果每个页面都以内嵌方式设置各自的样式，就失去了CSS带来的巨大优点。
<style type="text/css">
    p{
        color:red;
    }
</style>  

3、导入式
导入式和链接式的目的都是将一个独立的CSS文件引入HTML文件，二者的区别在于其语法规则不一致。
<style type="text/css">
    @import"mystyle.css";
</style>

4、链接式（外链式）
此方法不需要style标签，而是直接通过link一个样式来引用外部样式。一般推荐使用link来引用外部的css样式方法。
    <link href="mystyle.css" rel="stylesheet" type="text/css" />

使用link来引用外部的css的优势

  • 1、有利于SEO，使用此方法引用外部css文件，将使得html页面的源代码少很多比起直接加入css样式，因为搜索引擎蜘蛛爬行网页的时候是不爬行css文件的，这样使得html源代码很少，使得蜘蛛爬行更快，处理更少，增大了此网页的权重，有利于排名。
  • 2、节约html使得浏览器下载网页时候分开线程了，就像加载一个页面同时有两条线在打开一个页面道理，使得网页打开格外快。（用户浏览此网页的时候html源代码和css文件同时下载，使得更加快速）
  • 3、修改网页的样式方便，只需修改css样式即可修改网页的美工样式，如果在网站项目中此方法，因整站应用了共用的css基本样式，这样修改整站风格样式根据快捷方便。

JS代码也有类似的两种写法

1、行内式
    <button onclick="alert('你好吗')">外双内单</button>
2、嵌入式（内嵌式）
    <script>
        …
    </script>
3、链接式（外链式）
    <script src="my.js" type="text/javascript"></script>

使用CSS、JS的几种方法的更多相关文章

  1. HTML5结合CSS的三种方法+结合JS的三种方法

    HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...

  2. MyEclipse取消验证Js的两种方法

    MyEclipse取消验证Js的两种方法 作者: 字体:[增加 减小] 类型:转载 通过js写一个web工程的相关页面时感觉很卡,修改内存也不行下面有两种解决方法,大家可以尝试下 前言:有时我们通过j ...

  3. (一)JQuery动态加载js的三种方法

    Jquery动态加载js的三种方法如下: 第一种: $.getscript("test.js"); 例如: <script type="text/javascrip ...

  4. CSS垂直居中的8种方法

    CSS垂直居中的8种方法 1.通过verticle-align:middle实现CSS垂直居中. 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注 ...

  5. js和jquery设置css样式的几种方法

    一.js设置样式的方法 1. 直接设置style的属性  某些情况用这个设置 !important值无效 element.style.height = '50px'; 2. 直接设置属性(只能用于某些 ...

  6. 异步加载js的三种方法

    js加载时间线 : 它是根据js出生的那一刻开始记录的一系列浏览器按照顺序做的事,形容的就是加载顺序,可以用来优化什么东西,理论基础,背下来. 1.创建Document对象,开始解析web页面.解析H ...

  7. CSS清除浮动八种方法

    在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设 ...

  8. a 标签中调用js的几种方法 文章摘自他人

    我们常用的在a标签中有点击事件:1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题 ...

  9. a 标签中调用js的几种方法

    我们常用的在a标签中有点击事件: 1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问 ...

随机推荐

  1. opencv数据结构总结

    OpenCV里面用到了很多图像相关的数据结构,熟练掌握它们是学习图像的基础. 1.IplImage IplImage IplImage IPL 图像头 typedef struct _IplImage ...

  2. 怎么用notepad配置来运行C语音环境

    想要运行C语言,我们可以用notepad软件来进行编辑,那么怎么用notepad 配置运行c语言开发环境呢? Notepad++是一款很好的编辑器,可以用来开发很多的工具,具体大家请看下文给大家详细讲 ...

  3. Plan-9效应：为什么东西不坏就不要去修它

    http://www.aqee.net/the-plan-9-effect-or-why-you-should-not-fix-it-if-it-aint-broken/ Plan-9是一个很棒的.很 ...

  4. Unity 网络斗地主 牌的一些算法

    Unity 网络斗地主  牌的一些算法 在这儿说一下,我的项目是用svn的方式,上传在https://v2.svnspot.com/18666451713.doudizhu这个svn上,大家可以下载T ...

  5. linux系统开机过程描述

    本文描述linux系统开机过程,属于个人理解范畴,如果文中表述有误请大家批评指正! 计算机开机之后,首先要加载BIOS(基本输入输出系统)信息,BIOS包含了很多重要的信息,包括CPU信息,设备启动顺 ...

  6. 【HDOJ】1401 Solitaire

    双向BFS+状态压缩. /* 1401 */ #include <iostream> #include <queue> #include <map> #includ ...

  7. One day

    1.c的格式化输入输出:  printf()和scanf()函数可以较好实现格式化输入输出,例子如下:  printf("%3d",3); //结果为__3 (_为空格)  pri ...

  8. Single Number III——LeetCode

    Given an array of numbers nums, in which exactly two elements appear only once and all the other ele ...

  9. 课后习题 SPJ

    CREATE TABLE S ( SNO char(2) primary key, SNAME varchar(20), STATUS char(4), CITY char(10) ); create ...

  10. hdu 1175 连连看 DFS

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1175 解题思路:从出发点开始DFS.出发点与终点中间只能通过0相连,或者直接相连,判断能否找出这样的路 ...