CSS-DOM介紹

三位一體的網頁:

我們在瀏覽器里看到的網頁其實是由以下三層信息構成的一個共同體:

1、結構層:

結構層是由HTML和XHTML之類的標記語言所構成的。所就是哪些出現在html標簽里面的單詞,對網頁內容的語義含義作出了如下描述,例如,<p>This is a paragraph</p>標簽表達了這樣一個語意:這是一個文本段落。但這些標簽并不包含任何關于段落如何顯示的信息。

2、表示層:

表示層由CSS負責完成。CSS描述頁面內容應該如何呈現。

3、行為層:

行為層負責內容應該如何響應事件這一問題,這是JavaScript語言和DOM所主宰的領域.

?

注意:網頁的顯示層和行為層總是存在的即使創建的網頁為給定任何具體的指令也是如此。此時Web瀏覽器將應用它給出的默認樣式和默認事件處理函數,比如:瀏覽器會在呈現文本段元素時,留出默認頁邊距,當用戶把鼠標指針懸停在某個元素上方時,有時候瀏覽器會彈出一個顯示著該元素title屬性值的彈出框等等。

?

在所有的產品設計過程中,選擇最適用的工具去解決問題是最基本的原則。具體到網頁設計工作,這意味著:
我們將使用(X)HTML去搭建文檔的結構;

使用CSS去設置文檔的呈現效果;

使用DOM腳本去實現文檔的行為;

?

但是在這三種技術之間存在著一些潛在的重疊區域,相信大家都會遇到過,用DOM可以改變結構層的結構,諸如createElement()和appendChild()之類的方法允許你動態創建標記,表現層可以用:hover和:focus之類的偽類觸發事件來改變元素的展示效果。改變元素的呈現效果當然是表示層的"勢力范圍",但響應用戶觸發的事件確實行為層的領地。行為層和表示層的這種重疊形成了一種灰色地帶。確實,CSS正在利用偽類走進DOM的領地,但DOM也有反擊之道。你也可以利用DOM來給元素設置樣式。

轉載于:https://www.cnblogs.com/GreenLeaves/p/5753528.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/271158.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/271158.shtml
英文地址,請注明出處:http://en.pswp.cn/news/271158.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

java 開發注意項_JAVA開發注意事項集錦

本篇博客用于持續記錄開發過程中的常用的需要注意的事項&#xff0c;都是嚴重的生產問題大家總結出來的、記得持續更新喔。一&#xff0c;不要以時間戳作為唯一健時間戳精確到ms級別&#xff0c;并不能作為唯一入口參數&#xff0c;數據庫更新唯一查詢參數&#xff0c;唯一健需…

系統開發基礎:UML中圖的相關知識筆記(上)

1、圖的概念圖(Diagram) 是一組元素的圖形表示&#xff0c;大多數情況下&#xff0c;把圖畫成頂點&#xff08;代表事物&#xff09;和弧(表示關系)的連通圖。2、UML中圖的分類UML2.0中的圖主要有&#xff1a;類圖、對象圖、用例圖、序列圖、通信圖、狀態圖、活動圖、構件圖、部…

python循環頂帖_設計Python數據庫連接池1-對象的循環引用問題

在Python中如果對象定義了__del__方法的話&#xff0c;在對象的引用記數為0時會自動調用__del__方法(很象c中的析構函數)&#xff0c;但如果A對象引用B對象&#xff0c;B對象又引用A對象&#xff0c;就形成循環引用&#xff0c;此時A&#xff0c;B對象引用次數都為1。python就無…

編譯時類型 和運行時類型的 區別(1)

class T{ void f(int x){ System.out.println("int in T:" x); } void f(double x){ System.out.println("double in T:"x); } void f(Object x){ System.out.println("Object in T:" x); }} class S extends T{ void f(int x){  //子類覆蓋基…

系統開發基礎:UML中圖的相關知識筆記(下)

1、狀態圖狀態圖展現了一個狀態機&#xff0c;它由狀態、轉換、事件、活動組成。狀態圖關注系統的動態視圖&#xff0c;它對于接口、類、協作的行為建模尤為重要&#xff0c;它強調對象行為的事件順序。組成&#xff1a;簡單狀態、組合狀態、轉換&#xff08;事件和動作&#x…

java京東左側固定層_京東首頁右側固定層

需求說明制作京東首頁右側的固定層&#xff0c;6個圖標&#xff1a;京東會員、購物車、我的關注、我的足跡、我的消息和咨詢JIMI默認狀態下僅顯示圖標&#xff0c;背景顏色為深灰色&#xff1b;當鼠標移至圖標上時&#xff0c;背景顏色為深紅色&#xff0c;并且顯示文本css*{ma…

云開發技術應用python_云開發技術應用(Python)

本書共14章&#xff0c;從Python語言的語法特性開始&#xff0c;介紹了Python的安裝和配置、數據類型及表達式、流程控制、序列和字典、文件處理、函數等&#xff0c;由淺入深&#xff0c;循序漸進&#xff0c;逐步引入高級話題&#xff0c;包括面向對象編程、模塊和包、異常處…

記錄下Linux難記實用的命令

1 看文件大小&#xff1a;du -sm * | sort -n 2 合并多個文件&#xff0c;可以跨文件夾合并&#xff1a;cat *_.txt >> news.txt 3 給文件改編碼&#xff1a;iconv -f GBK -t UTF-8 原文件名 -o 新文件名 4 查找文件內容&#xff1a;grep "thermcontact" */*.i…

系統設計基礎:系統設計基本任務相關知識

1、系統設計的目的提前為系統指定藍圖&#xff0c;在各種技術和實施方法中進行權衡&#xff0c;精心設計&#xff0c;合理利用各種資源、最終確定新系統的詳細設計方案。2、系統設計的內容系統設計的內容主要包括系統總體結構設計、代碼設計、輸出設計、輸入設計、處理過程設計…

java7 3dm下載_3DM游戲運行庫合集安裝包v2.8

游戲運行庫大全 游戲運行環境 所有游戲組件 32位 64位系統常用運行庫合集 3DM游戲常用運行庫安裝包 下載 幸姨作品本安裝包集成32位和64位運行庫&#xff0c;是目前互聯網上最新最全的常用運行庫合集&#xff0c;能自動識別系統版本以提供適合您的組件&#xff0c;無人值守自動…

uci數據集_干貨收藏!三大領域常用十大開源數據集

全文共1144字&#xff0c;預計學習時長2分鐘機器學習的研究與實現離不開大數據。知曉通用的開源數據集&#xff0c;一方面可以驗證自己算法&#xff0c;另一方面也可以與其他算法進行比較。本文介紹了計算機視覺、自然語言處理和語音識別三大領域的十個開源數據集以供你參考&am…

系統設計知識:系統設計的基本原理介紹

1、抽象抽象主要用來將復雜的現象簡化到可以分析、實驗或者可以理解的程度。抽象的最低層就是實現該軟件的源程序代碼。在進行模塊化設計也可以有多個抽象層次&#xff0c;最高抽象層次的模塊用概括的方式描述問題的解決方案。較低層次的模塊是對更高抽象層次模塊對問題描述的細…

Wpf Binding.Path設置

Binding.Path 獲取或設置綁定源屬性的路徑。 每個綁定通常都具有四個組件&#xff1a;綁定目標對象、目標屬性、綁定源&#xff0c;以及要使用的綁定源值的路徑。有關這些數據綁定概念的更多信息&#xff0c;請參見數據綁定概述。 使用 Path 屬性可以指定您要綁定到的源值&…

java內存溢出怎樣查找代碼_JVM - 內存溢出,問題查找

當內存溢出會拋出 java.lang.OutOfMemoryError: Java heap space 的異常&#xff0c;那這個時候怎樣去分析到底哪里導致內存溢出呢&#xff1f;我們可以通過在vm的參數&#xff0c; -XX:HeapDumpOnOutOfMemoryError 記住這個理是大寫XX。當內存溢出后&#xff0c;顯示java.lang…

系統設計知識:系統模塊結構設計知識筆記

1、什么是模塊&#xff1f;模塊可以認為是組成系統的基本單位&#xff0c;它具有可組合、分解、更換的特點。系統中任何一個處理功能都能看成是一個模塊。模塊根據具體化的程度可劃分為邏輯模塊和物理模塊。模塊的要素&#xff1a;輸入輸出&#xff1a;模塊的輸入來源和去向都是…

安卓掃一掃自動跳轉軟件_ipad軟件使用技巧

適用于三款ipadipad pro 1ipad pro2ipad 2018三個ipad軟件分別是notability、goodnotes、和MarginNote&#xff0c;這三個軟件各有特點。其中notability、goodnotes是筆記軟件&#xff0c;同樣都可以自己創立筆記本配合蘋果筆像手寫一樣做筆記&#xff0c;也可以導入pdf作為閱讀…

第12章 使用Samba或NFS實現文件共享

章節簡述&#xff1a; 本章節為讀者講述文件共享系統的作用&#xff0c;了解Samba與NFS服務程序的開發背景以及用法。 詳細逐條講解Samba服務配置參數&#xff0c;演示安全共享文件的配置策方法&#xff0c;并使用autofs服務程序自動掛載設備&#xff0c; 學會后即可實現Linux…