1、使用行内样式表

语法:在标签内部写入一个style属性。

优点:没有样式表文件,在某些时候可以提高效率;

优先级高。

缺点:多个页面难以共享样式,不利于代码复用;

HTML和CSS代码混杂,不利于程序员和搜索引擎阅读。

2、使用内部样式表

语法:在head标签写一个style标签,在style标签里面通过选择器(元素选择器、类选择器、ID选择器)来选择标签,从而控制该标签的样式。

优点:没有样式表文件,在某些时候可以提高效率;

缺点:多个页面难以共享样式,不利于代码复用,只能单个页面使用;

HTML和CSS代码混杂,不利于程序员和搜索引擎阅读。

3、外部样式表

语法:(1)需要新建一个外部CSS文件,在里面书写CSS样式;

(2)在head标签里面通过link来关联外部CSS文件。

例如:<link rel="stylesheet" href="css/style.css">,这样就可以在HTML文档里面直接书写界面的内容,在css文件里面调整格式,设计样式了。

优点:实现了内容结构和表现形式代码分离,方便复用和维护;

使HTML代码更加纯净,有利于程序员和搜索引擎阅读。

HTML-css样式引用方式的更多相关文章

  1. CSS 选择器及各样式引用方式

    Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...

  2. CSS基础知识总结之css样式引用的三种方式

    在html中增加css样式有三种: 1.在标签中增加style属性: <!DOCTYPE html> <html lang="en" xmlns="ht ...

  3. CSS-使用CSS样式的方式

    1.HTML<!DOCTYPE>声明标签 (1)定义和用法 <!DOCTYPE>声明必须是HTML文档的第一行,位于<html>标签之前. <!DOCTYPE ...

  4. web前端(7)—— 了解CSS样式,引入css样式的方式

    CSS 在前面大概的介绍了css,从本片博文开始,会详细的介绍它,在最开始介绍web前端时,打开百度首页,当时我提出了一个问题,为什么百度首页的输入框可以放在正中间,就是由于有css的控制,我们可以打 ...

  5. css样式引入方式,及常用设置标签样式

    一. 三种样式引入方式   1. 内联式-直接写在div标签中,不推荐用 <div style="color:red;font-size:20px;font-family:'Micro ...

  6. CSS的引用方式(引用外部样式表、内部样式表、内联样式表)

    CSS引用外部样式表的优点:一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件,所以外部引用相对于内部引用和内联引用来说是是节省资源的. CSS使用内部样式表.内联样式表的优点:可以直观的 ...

  7. css基础 引用方式 标签选择器 优先级 各式布局

    今天讲的css基础,了解了css即层叠式表,是美化网页,控制页面的样式. 样式表引进网页的3种方式1内联式,语法例子:<div style="width: 100px;height: ...

  8. 测开之路九十:css的引用方式

    第一种:内联,直接在标签里面加style属性,优先级别最高,但是不利于维护 第二种:页面嵌入,在head标签里面写一个style标签,以类选择器的形式写入,优先级别第二 第三种:外联,样式表链接,单独 ...

  9. 四种CSS样式的引入方式

    准备 1.首先准备一个html文件:test.html,不建议使用记事本创建文件,建议使用Notepad++来创建并编辑文件,注意编码格式为:以UTF-8无BOM格式编码,否则会出现中文乱码,内容如下 ...

随机推荐

  1. 前端小知识-js

    一.对象冒充 function student(name,age){ this.name = name; this.age = age; this.show = function(){ console ...

  2. notepad 写html乱码,已解决

    写一些简单基础的html文件时,突然发现新建的demo2,在浏览器打开乱码,而昨天的demo1打开没乱码,真奇怪,开始排查原因. 1.检查代码,,设了charset=UTF-8,看不出毛病. 2.索性 ...

  3. 携程PMO--如何召开卓有成效的回顾会

      话题介绍   回顾会提供团队反思迭代过程并提出改进措施的机会.回顾会是团队成员共同进行的协作活动,让团队成员跟进并落实改进措施,使团队在下一个冲刺中更高效,这是相当重要的.   我们给出了回顾会的 ...

  4. JVM调优实战:G1中的to-space exhausted问题

    最近刚刚将自己的一个应用从CMS升级到G1,在一天早上,刚刚到办公室坐下,就收到手机一阵报警,去查看了监控,发现机器的内存出现了一个90度的涨幅,如下图所示: 在查看GC日志后,发现那个时间点附近出现 ...

  5. 2019-在iOS里添加admob横幅广告示例

    下载sdk , 解压 导入项目文件夹:   在info.plist里加入应用id(不是广告单元id): GADApplicationIdentifier 设置Build Settings选项 设置ap ...

  6. java两个对象属性比较

    两个对象进行比较相等,有两种做法: 1,情况一:当仅仅只是判断两个对象是否相等时,只需重写equals()方法即可.这里就不用说明 2.情况二:当除了情况一之外,还需知道是那个属性不同,那么就需要采用 ...

  7. 新手学习FFmpeg - 调用API完成录屏

    调用FFMPEG Device API完成Mac录屏功能. 调用FFMPEG提供的API来完成录屏功能,大致的思路是: 打开输入设备. 打开输出设备. 从输入设备读取视频流,然后经过解码->编码 ...

  8. MyBatis_Generator (MBG)逆向工程的四种方式

    mybatis是目前很流行的持久层框架,其逆向工程更是大大缩减了我们的开发时间.有兴趣的可以看文档. 文档地址: http://www.mybatis.org/generator/index.html ...

  9. 手把手教你用深度学习做物体检测(五):YOLOv1介绍

    "之前写物体检测系列文章的时候说过,关于YOLO算法,会在后续的文章中介绍,然而,由于YOLO历经3个版本,其论文也有3篇,想全面的讲述清楚还是太难了,本周终于能够抽出时间写一些YOLO算法 ...

  10. poj 2649 Factovisors 对n!进行因数分解

    Factovisors Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4431   Accepted: 1086 Descr ...