分别写出引入CSS的3种方式, 特点, 优先级

第一:css的三种引入方式


1.行内样式

最直接最简单的一种,直接对HTML标签使用style="",例如:

<p style="color:#F00; "></p>

缺点:HTML页面不纯净,文件体积大,不利于蜘蛛爬行,后期维护不方便。

2.内嵌样式

内嵌样式就是将CSS代码写在<head></head>之间,并且用<style></style>进行声明,例如:

<style type="text/css">

body,div,a,img,p{margin:0; padding:0;}

</style>

优缺点:页面使用公共CSS代码,也是每个页面都要定义的,如果一个网站有很多页面,每个文件都会变大,后期维护难度也大,如果文件很少,CSS代码也不多,这种样式还是很不错的。

3.外部样式

    31.链接样式(推荐)


    链接样式是使用频率最高,最实用的样式,只需要在<head></head>之间加上<link…/>就可以了,如下:

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


    优缺点:实现了页面框架代码与表现CSS代码的完全分离,使得前期制作和后期维护都十分方便

    3.2.导入样式(不建议使用)

    导入样式和链接样式比较相似,采用@import样式导入CSS样式表,在HTML初始化时,会被导入到HTML或者CSS文件中,    成为文件的一部分,类似第二种内嵌样式。

    @import在html中使用,如下:

    <style type="text/css">
    @import url(style.css);
    </style>

    @import在CSS中使用,如下:

    @import url(style.css);

  

    链接式和导入式的区别:
    <link>
        1、属于XHTML
        2、优先加载CSS文件到页面
    @import
        1、属于CSS2.1
        2、先加载HTML结构在加载CSS文件。

第二:四种CSS引入方式的优先级

1.就近原则

2.理论上:行内>内嵌>链接>导入

3.实际上:内嵌、链接、导入在同一个文件头部,谁离相应的代码近,谁的优先级高(页面多种方式使用css样式引入)

综合代码如下:

<!DOCTYPE>
<html><head><meta charset="utf-8" /><title>行内样式/内嵌样式和外部样式的优先级</title><!--外部样式表--><link rel="stylesheet" type="text/css" href="css/style.css" /><!--内嵌样式表--><style type="text/css">p{color: blue;}</style><!--外部样式表--><!--<link rel="stylesheet" type="text/css" href="css/style.css" />--></head><body><p>我是p段落(注意:内嵌样式和外部引入样式 离我最近的那种样式方式给我带来的影响)</p><div >我是div,我什么样式都没有</div><!--行内样式--><div style="color: hotpink;">我是行内样式</div><ol><li>欢迎进入博客一起学习</li><li>https://blog.csdn.net/muzidigbig</li></ol></body>
</html>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/456426.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[Go] Template 使用简介

Golang 提供了两个标准库用来处理模板 text/template 和 html/template。我们使用 html/template 格式化 html 字符。 模板引擎 模板引擎很多&#xff0c;Python 的 jinja&#xff0c;nodejs 的 jade 等都很好。所谓模板引擎&#xff0c;则将模板和数据进行渲染的输出格式化后的…

内存泄露监测

2019独角兽企业重金招聘Python工程师标准>>> iOS 内存泄露监测 144 作者 谢谢生活 已关注 2017.05.19 17:38* 字数 4235 阅读 209评论 0喜欢 6 iOS可能存在的内存泄露&#xff1a;block 循环引用。当一个对象有一个block属性&#xff0c;而block属性又引用这个对象…

玩Azkaban跳过的坑

文章目录一号坑&#xff1a;启动Azkaban报错&#xff1a;User xml file conf/azkaban-users.xml doesnt exist.二号坑&#xff1a;报错&#xff1a;failed SslSocketConnector0.0.0.0:8443: java.io.FileNotFoundException: /home/hadoop/app/azkaban/azkaban-web-2.5.0/bin/ke…

两种解除禁止右键、选中、复制的方法

我在网上找的 两种解除禁止右键、选中、复制的方法 1、直接存到书签点击即可 javascript:(function(){var docdocument;var bddoc.body;bd.onselectstartbd.oncopybd.onpastebd.onkeydownbd.oncontextmenubd.onmousemovebd.onselectstartbd.ondragstartdoc.onselectstartdoc.o…

删除节点removeChild()

http://www.imooc.com/code/1700 删除节点removeChild() removeChild() 方法从子节点列表中删除某个节点。如删除成功&#xff0c;此方法可返回被删除的节点&#xff0c;如失败&#xff0c;则返回 NULL。 语法: nodeObject.removeChild(node) 参数: node &#xff1a;必需&…

机器学习自主解决安全威胁离我们还有多远?

曾经听见不止一次这样的问题&#xff1a; “机器学习会替代基于人工经验规则的安全解决方案么&#xff1f;”把这个问题放在去年来看&#xff0c;我们已经得到了非常多的讨论甚至是一些已经实际应用的解决方案&#xff0c;对于人工智能在安全以及其它各种对数据进行价值挖掘的场…

Linux执行定时任务(crontab)遇到的坑

文章目录前言&#xff1a;1、建立定时任务的两种方式1.1、crontab -e1.2、vi /etc/ crontab2、两种方法的区别2.1、用户级2.2、系统级3、解决办法前言&#xff1a; 之前第一次要在生产环境部署定时任务&#xff0c;无奈的是&#xff0c;博主对定时任务这块还是个小白&#xff…

Vue:解决[Vue warn]: Failed to resolve directive: modle (found in Anonymous)

解决问题 [Vue warn]: Failed to resolve directive: modle (found in <ComponentA>) console.error(("[Vue warn]: " msg trace)); 原因是 我把model 写成了 modle 这类错误一般是单词写错了 (found in <Anonymous>) 解决思路

Oracle树查询及相关函数

Oracle树查询的最重要的就是select...start with... connect by ...prior 语法了。依托于该语法&#xff0c;我们可以将一个表形结构的中以树的顺序列出来。在下面列述了Oracle中树型查询的常用查询方式以及经常使用的与树查询相关的Oracle特性函数等&#xff0c;在这里只涉及到…

Mysql常用函数总结

文章目录前言&#xff1a;1、日期相关函数1.1、mysql获取未来、现在、过去的时间&#xff1a;DATE_SUB&#xff08;&#xff09;、DATE_ADD()1.2、格式化日期&#xff1a;date_format&#xff08;&#xff09;1.3、MySQL 日期、时间相减函数&#xff1a;datediff(date1,date2),…

一行Python代码制作动态二维码

目录 1、普通二维码 2、艺术二维码 3、动态二维码 在GitHub上发现了一个比较有意思的项目&#xff0c;只需要一行Python代码就可以快捷方便生成普通二维码、艺术二维码(黑白/彩色)和动态GIF二维码。 GitHub网站参加&#xff1a;https://github.com/sylnsfar/qrcode 用法比…

Vue常用经典开源项目汇总参考-海量

Vue常用经典开源项目汇总参考-海量 Vue是什么&#xff1f; Vue.js&#xff08;读音 /vjuː/, 类似于 view&#xff09; 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是&#xff0c;Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层&#xff0c;并且非常…

鼠标移入视频播放,鼠标移出播放停止,恢复到原来状态

<!doctype html> <html lang"en"> <head><meta charset"UTF-8"><title>鼠标移入视频播放&#xff0c;鼠标移出播放停止&#xff0c;恢复到原来状态</title><link rel"shortcut icon" href"http://f…

Pycharm常用高效技巧总结

文章目录1、PyCharm如何自动生成函数注释2、pycharm运行程序时在Python console窗口中运行3、Pycharm在创建py文件时,如何自动添加文件头注释4、Pycharm配置远程调试5、pycharm同一目录下无法import明明已经存在的.py文件1、PyCharm如何自动生成函数注释 一般在函数def()行下敲…

EntityFramework中常用的数据删除方式

最近在学EF&#xff0c;目前了解到删除操作有三种方式&#xff0c; 第一&#xff0c;官方推荐的先查询数据&#xff0c;再根据查询的对象&#xff0c;删除对象。 这是第一种&#xff0c;官方推荐 第二&#xff0c;自己创建一个对象&#xff0c;然后附加&#xff0c;然后删除。 …

Elasticsearch的前后台运行与停止(tar包方式)

备注&#xff1a;在生产环境中&#xff0c;往往一般用后台来运行。jps查看。 1、ES的前台运行 [hadoopdjt002 elasticsearch-2.4.3]$ pwd/usr/local/elasticsearch/elasticsearch-2.4.3[hadoopdjt002 elasticsearch-2.4.3]$ bin/elasticsearch 2、ES的后台运行 [hadoopdjt002 e…

解决pycharm运行Flask指定ip、端口更改无效

后来查了一下官网文档&#xff0c;原来Flask 1.0 版本不再支持之前的FLASK_ENV 环境变量了。 Prior to Flask 1.0 the FLASK_ENV environment variable was not supported and you needed to enable debug mode by exporting FLASK_DEBUG1. This can still be used to control…

Freeswitch总结大全

文章目录1、Freeswitch安装2、Freeswitch中文文档3、Freeswitch的event socket event list的中文简介4、freeswitch之sip协议的注册、呼叫、挂断流程5、Freeswitch之mod_cdr_csv6、一款第三方收费的mod_vad&#xff08;看介绍挺不错的&#xff0c;有做语音交互的童鞋可以看下&a…

Android中SimpleAdapter的使用—自定义列表

本人初学Android&#xff0c;今天研究到Adapter这块感觉挺有意思的&#xff0c;写了个自定义列表进行测试 首先我们新建一个layout列表布局文件&#xff0c;具体布局可以自己设定。 下面贴上我的自定义布局文件代码 1 <?xml version"1.0" encoding"utf-8&qu…

Module 的语法

Module 的语法 概述严格模式export 命令import 命令模块的整体加载export default 命令export 与 import 的复合写法模块的继承跨模块常量import()概述 历史上&#xff0c;JavaScript 一直没有模块&#xff08;module&#xff09;体系&#xff0c;无法将一个大程序拆分成互相依…