分別寫出引入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.pswp.cn/news/456426.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/456426.shtml
英文地址,請注明出處:http://en.pswp.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;無法將一個大程序拆分成互相依…