首頁 > 開發者 > JavaScript
標籤：
層疊樣式 表和動態HTML 層疊樣式表(CSS)是指定HTML文檔或XML文檔的表現的標準。 使用CSS和Javascript，可以建立出各種視覺效果，這些效果可以統稱為動態HTML(DHTML)CSS樣式是一個名稱/值的屬性列表指定的，屬性之間用分號隔開，名字屬性和值屬性之間用冒號隔開。 1、給文件項目應用樣式規則（兩種方法）a、在HTML標記的style屬性中使用它們。如：<p style=margin-left:Lin;margin-right:lin;"/>b、使用樣式表 stylesheet檔案 css樣式表由樣式規則的集合構成。每條規則以一個選取器開頭，它指定文件項目，其後是用大括弧括起來的樣式屬性和它們值的集合 2、關聯樣式表和文檔a、將樣式表放置在文檔<head>部分中的 <style></style>之間，使它們合并到HTML文檔中b、將樣式表儲存在一個樣式表檔案中，然後在<head></head>部分，使用link 匯入CSS檔案。 註：可通過 @import "檔案名稱" 將樣式匯入到<style></style>或者另一個樣式表檔案當中。 3、層疊CSS中的C代表cascading 。這個術語說明應用到文檔中指定元素的樣式規則來自不同的層疊。 優先規則 使用者樣式表覆蓋預設的瀏覽器樣式表(CSS檔案當中定義的)，作者樣式表覆蓋使用者樣式表(放在<head><style>標記中的樣式)，內聯樣式覆蓋所有樣式表(放在HTML標記的style屬性當中)。這條通用規則的一個特殊是，值包括!important修飾符的使用者樣式屬性覆蓋作者樣式，在一個樣式表中，如果一個元素上應用了多條樣式規則，最詳細的規則定義的樣式將覆蓋不太詳細的規則定義的發衝突的樣。指定元素id的規則最詳細，其次是指定class屬性的規則，僅指定一個標記名的規則最不詳細，指定多個嵌套標記名的規則比指定一個標記名的規則詳細。 4、DHTML的CSS4.1 最關鍵的：定位 position 只有:absoulte fixed relative 才可以用top left等屬性定位 static定位的元素不是DHTML元素，不可用top left 定位。這也是元素預設值。 4.2 z-index堆疊只適用於兄弟元素（同一個容器中的同級元素，如果兩個不是兄弟的元素重疊，必須設定這兩個元素的視窗的z-index才有效，當然這兩個視窗了得 是兄弟元素。） 4.3 JavaScript中的css屬性 指令碼化內聯樣式element.Style.css屬性名稱=值 （均為字串） 一般css屬性名稱 第一個單詞小寫，以後的每個單字首大寫，餘下小寫。如e.Style.left="30px";e.Style.fontFamily="sans-serif"; 註：在JavaScript中設定新式屬性時，單位是必需的 4.4 DHTML動畫本質和原理：周期性地改變元素的一個或多個樣式屬性，使用setInerval()和setTimeout()函數。所有的DHTML動畫都需要使用這兩個函數。 5、指令碼化CSS類通過改變任意HTML元素的className屬性來指令碼化HTML class屬性的值（動態設定一個樣式類名） className可能包含多個類的字串，類名之間用空格隔開。設定時，可通過重新設定字串來控制新的類或者類列表。 6、指令碼化樣式表HTML 2級DOM 標準為 <link> <script> 元素都定義了一個disabled屬性。 可以在JavaScript設定元素的disabled的值，如果為true，和<link> 和script元素相關的樣式就會被關閉，且會被瀏覽器忽略。 樣式表對象和樣式表規則2級DOM 定義了一個完整的API，用來查詢，遍曆和操作樣式表本身。應用於一個文檔的樣式表，儲存在文檔對象的styleSheets[]數組。 此數組中的每個元素都是一個CSSStyleSheet對象。 一個CSSStyleSheet對象有一個包含了樣式表規則的cssRules[]數組。cssRules[]數組中的每一個對象為CSSRule對象， 代表一條CSS規則。 有兩個屬性可以可移植地的使用 selectorText style通過以上的style和selectorText可對樣式表中的任意一個樣式進行操作，也可添加新樣式。 不兩隻的瀏覽器可能略有不同 W3C CSSStyleSheet介面定義了 insertRule()方法和deleteRule()方法用來添加和刪除規則。IE的為addRule()和removeRule()函數。JavaScript 用戶端JavaScript之樣式表操作(DOM API 提供模組之一)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
