先了解:

【1】       “Table”和“DIV”这两个网页元素诞生的目的不同,首先Table诞生的目的是为了存储数据,而DIV诞生的目的就是为了架设页面结构

W3C,是World Wide Web Consortium的缩写,中文是W3C组织或者万维网联盟。W3C标准不是一个标准,而是一系列标准的集合,

包含三部分的标准:结构(Structure)、表现(Presentation)行为(Behavior)。

结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAscript等

一般不能说是“DIV+CSS",要说就说成”XHTML+CSS",两种叫法倾向于后者。

【2】    CSS控制页面有四种方式:行内样式、内嵌样式、链接样式、导入样式

1. 行内样式如:

会导致HTML页面不够纯净,文件体积过大,不利于搜索蜘蛛爬行,从而导致后期维护成本高。

2: 内嵌样式如:

......

如果一个网站有很多页面,内嵌方式每个文件都会变大,后期维护难度也大,如果文件很少,CSS代码也不多,这种方式也顶号好~

3: 链接样式如:

... ...

这种样式将HTML文件和CSS文件彻底分成两个或者多个文件,实现了页面框架HTML代码与表现CSS代码的完全分离,使得前期制作和后期维护都十分方便,推荐使用这种方式。

4: 导入样式如: @import "style.css" ;

在HTML初始化时,会被导入到HTML文件中,成为文件的一部分,类似内嵌样式

================================================================================================================

【3】链接样式与导入样式的区别:

link

link就是把外部CSS与网页连接起来。

@import

import文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件。

另一个主要的原因就是当你的网页需要引入几个外部CSS文件时.

你可以使用link引入一个CSS,[email protected]��件.这样看起来更容易管理.

为什么使用link

使用link方式一个最主要的原因就是你可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel="alternate stylesheet"属性

(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式.

@import的小毛病

如果你网页head标签里面十分简单,[email protected],当用户浏览的网速较慢时,他会看到一个没有风格样式的页面,然后随着CSS文件被下载完成才可以看到应有的风格.要避免这样的问题,你需要确保head里至少有一个script或是link标签.

@import会使得CSS整体载入时间变长.并且在IE中会导致文件下载次序被更改,[email protected]��.

到底要用那种方式

就目前看来小型的网站还是使用link比较合适(或者说比较流行),

当然如果将来我们需要把CSS进行模块化管理也肯定[email protected]

举个例子 可以用此做法:

建立三个CSS文件(base.css/common.css/page.css),

[email protected](style.css,其它名字也可以,随便你),

然后在页面上只连接style.css,这样可以更好实现代码的维护

网页编程html link,Web--CSS控制页面(link与import方式区别)详解相关推荐

  1. php带旋转动画刷新页面,css旋转动画效果的简单实现示例详解

    我们可以通过css来做出动画效果,下面我为大家演示的是p的旋转,颜色过渡的动画 a{ text-align:center; line-height:100px; transition:all 2s; ...

  2. CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】

    一.px(像素) [绝对单位,页面按精确像素展示] px就是pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率. px表示像素 (计算机屏幕上的一个点:1px = 1/96in),是绝对单位,不 ...

  3. CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解

    原文网址:CSS之排列系列--块级元素.内联元素.内联块元素--区别/详解_IT利刃出鞘的博客-CSDN博客 简介 本文介绍CSS的块级元素(block).内联元素(inline)和内联块元素(inl ...

  4. html怎么添加积分系统,CSS动画实现领积分效果的思路详解

    最近项目中要做一个领积分的效果,根据老板的描述,这个效果类似于支付宝蚂蚁森林里的领取能量.整体效果是就是在树周围飘着几个积分元素,上下滑动,类似星星闪烁,点击领取后,沿着树中心的位置滑动并消失,树上的 ...

  5. php为什么需要配置路由器,laravel 配置路由 api和web定义的路由的区别详解

    1.路由经过中间件方面不同 打开kerenl.php就可以看到区别 protected $middlewareGroups = [ 'web' => [ \App\Http\Middleware ...

  6. 并发编程-04线程安全性之原子性Atomic包的4种类型详解

    文章目录 线程安全性文章索引 脑图 概述 原子更新基本类型 Demo AtomicBoolean 场景举例 原子更新数组 Demo 原子更新引用类型 Demo 原子更新字段类型 使用注意事项: Dem ...

  7. 操作系统:基于页面置换算法的缓存原理详解(下)

    概述: 在上一篇<操作系统:基于页面置换算法的缓存原理详解(上)>中,我们主要阐述了FIFO.LRU和Clock页面置换算法.接着上一篇说到的,本文也有三个核心算法要讲解.分别是LFU(L ...

  8. CSS浮动、定位与z-index层叠等级详解——响应式Web系列学习笔记

    文章目录 CSS的浮动 框1{float:none;} 框1{float:right;} 框1{float:left;} 框1.2.3{float:left;} CSS的定位 浮动和定位的使用区别 C ...

  9. web常见性能优化总结(浏览器渲染过程详解)

    文章目录 一.什么是web的性能优化 二.web性能优化的目的 三.web性能优化的原理 3.1 加载文档 3.2 生成dom树 3.3 加载css 和js 3.4 生成CSS OM 3.5 rend ...

最新文章

  1. 为什么静态方法在Java中不能是抽象的
  2. Windows下Git的安装和基本使用、搭建Git服务器
  3. 读《UNIX编程艺术》随记
  4. 10048 mysql_MySQL 的 10048问题,如何解决?
  5. Opencv中的阈值函数
  6. mysql vfp_vfp+mysql问题|交流区 - 梅子Visual FoxPro 编程 - Powered by phpwind
  7. django-rest-swagger显示接口备注内容
  8. POJ3628:Bookshelf 2【01背包】
  9. 网络通信之TCP Client通信(基于Arduino)
  10. Hibernate保存对象出现 org.hibernate.NonUniqueObjectExce
  11. mysql基本语法 外键_MySQL语法创建外键?
  12. 金山要剥离WPS词霸等,会不会是Google的一大阴谋?!
  13. MySQL函数及用法
  14. 滴滴估值630亿美元开启新一轮融资,2021年前上市;索信达新三板退市后二次“流血”冲击香港IPO;蜻蜓FM COO肖轶离职...
  15. 小米10青春版刷鸿蒙,功能齐全也不行!小米10青春版现已跌至新低价,高刷已成趋势?...
  16. 使用Vmware workstation出现权限不足
  17. s24.基于 Kubernetes v1.25 (二进制) 和 Docker部署高可用集群
  18. Linux C/C++编程:netstat分析tcp状态转移(socket通信)
  19. 上银驱动器使用手册_上银伺服电机调试说明书.ppt
  20. 赖床星人的枕头arduino

热门文章

  1. linux下删除乱码文件、目录
  2. 解决JavaScript中使用$.ajax方式提交数组参数
  3. 教程-Win7极速优化20项
  4. jquery给元素添加样式表的方法
  5. struts2点滴记录
  6. 网络营销再掀波澜,微博独领风骚
  7. linux中-i选项的作用,linux – find中的-prune选项有什么作用?
  8. pythonlambda内判定_python lambda和列表推导式判断列表中元素中指定值得max
  9. 美国康奈尔大学计算机科学的教授,美国康奈尔大学教授Robbert van Renesse访问并做学术报告...
  10. 台式您想使用系统还原计算机吗,联想台式机一键恢复,小编教你怎么使用联想电脑一键恢复...