CSS 文件的4种引入方式
(1)链接式 : 在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件,使用html规则引入外部css (用得比较多) :
<link href="./mystyle.css" rel="stylesheet" type="text/css"/>
(2)导入式 : 将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,<style>标记也是写在<head>标记中,使用的语法如下:
<style type="text/css">
@import"mystyle.css"; 此处要注意.css文件的路径
</style>
比较:link引用和import引用区别是:link是html加载前就引用,而import是html加载后才引用。举例,采用impor引用,会先显示无样式的页面,然后再把样式放进去。如果用JavaScript动态引用CSS,得使用link引用方式才可实现。
(3)内联css文件,直接在header 里面写css,如:
<style type="text/css">
div{margin: 0;padding: 0;border:1px red solid;}
</style>
这种方法的使用情况要少的多,最长见得就是访问量大的门户网站。或者访问量较大的企业网站的首页。与第一种方法比起来,优点突出,弊端也明显。优点:速度 快,所有的CSS控制都是针对本页面标签的,没有多余的CSS命令;再者不用外链CSS文件。直接在HTML文档中读取样式。缺点就是改版麻烦些,单个页 面显得臃肿,CSS不能被其他HTML引用造成代码量相对较多,维护也麻烦些。但是采用这种方法的公司大多有钱,对他们来说用户量是关键,他们不缺人进 行复杂的维护工作。
(4) 直接在标签里面写样式
<div style="border:1px red solid;">测试信息</div>
不经常改的地方 。可以一用,,但是 还是 谨慎使用,很不符合大众。
CSS 文件的4种引入方式的更多相关文章
- CSS文件的三种引入方式
CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例:<h1 style="color:red;">st ...
- CSS简单的四种引入方式
CSS一共有四种引入方式 (1)最简单的两种方式是直接在html标签里面引入,或者在html文件前面声明,以下是简单的代码示例 <!DOCTYPE html> <html lang= ...
- CSS的4种引入方式及优先级
第一:css的四种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; " ...
- js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- html(常用标签,标签分类),页面模板, CSS(css的三种引入方式),三种引入方式优先级
HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...
- CSS【03】:CSS 基础选择器与三种引入方式
基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...
- 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作
一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- 前端 CSS 三种引入方式
CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...
随机推荐
- python第三方扩展库及不同类型的测试需安装相对应的第三方库总结
如何安装第三方库 1.通过python的第三方仓库pypi中查找想要的第三方库 pypi地址:https://pypi.python.org/pypi pip是一个安装和管理Python包的工具,通过 ...
- 一个简单易懂的javascrip selection&range小案例
在制作富文本编辑器,尤其是在制作以div元素为编辑器区域时,当鼠标离开编辑区域以后会失去焦点,失去选区,这时候就要通过selection&range来重新设置选区.[以下代码尚未考虑IE低版本 ...
- VC#2010 视图设计器无法打开 问题的正解
继上次VC#2010中视图设计器无法打开的问题的讨论后,我感觉每次都重新安装一次安装包未免也太麻烦了,程序员的时间都灰常宝贵. 所以在这次人工智能作业的时候,找到了一个简单的途径: 打开VC#2010 ...
- losbyday Linux查找命令
PS:第一次发表博客,试一下水,晚一点修改文本格式 linux下的命令都存放在/bin /sbin /usr/bin /usr/sbin路径下等echo $PATH which 是用来查询命令存放的路 ...
- 在windos 环境下安装
在windows 环境下安装node 和 StrongLoop需要一些几个步骤. 本人使用的安装软件,文章最后的分享. 1,安装Git: 2,安装Node.js: 3,安装npm: 4,安装Stron ...
- iOS平台软件开发工具(一)-新建的工程使用CocoaPods工具集成第三方框架
CocoaPods是一款集合了上千个第三方开源库的开发工具,能够大幅度的提升团队项目的开发效率,降低时间成本. 那么就看一下CocoaPods这个工具在项目中的使用体现吧. 我们马上用ASIHTTPR ...
- JAVA基础--适配器模式
interface Window{ // 定义Window接口,表示窗口操作 public void open() ; // 打开 public void close() ; // 关闭 public ...
- Mysql导入zabbix的sql语句时报错:ERROR 1045 (28000)
#Warning: Using a password on the command line interface can be insecure.#ERROR 1045 (28000): Access ...
- 全方位分析Objcetive-C Runtime
本文详细整理了 Cocoa 的 Runtime 系统的知识,它使得 Objective-C 如虎添翼,具备了灵活的动态特性,使这门古老的语言焕发生机.主要内容如下: 引言 简介 与Runtime交互 ...
- make的参数
转载自 陈皓<跟我一起写 Makefile> 下面列举了所有GNU make 3.80版的参数定义.其它版本和产商的make大同小异,不过其它产商的make的具体参数还是请参考各自的产品文 ...