css選擇器筆記整理,DW中如何設置CSS面板?
首先這里我們是需要你新建一個HTML文檔的,這里我們直接打開工具,之后選擇新建HTML即可
建立完畢之后這里我們使用快捷鍵,Shift+F11隨后我們就可以看到CSS面板如下圖中所示,在面板中用鼠標右擊之后選擇里面的“新建” 之后會彈出新建CSS規則表格
將選擇類型設置~為類,名稱設置為~測試,定義在~僅對該文檔,點擊“確定”
隨后彈出圖下中所示的測試CSS規則定義
在css定義框中我們是可以看到。類型 背景 區塊 方框 邊框 列表 定位 擴展。在類型框中將字體大小,樣式、行高等進行設置
隨后是個背景的設置,這里我們是可以設置背景顏色和背景圖像的這里還可以設置區塊模式定位,列表等都是可以通過自己的設置而變得美化的,這里我就不一一介紹了
設置完畢,輸入內容我們就可以看到我們設置的結果
當然了,這里我們是可以點擊代碼模塊的,這里我們是可以看到我們代碼部位的設置的,如果你覺得輸入代碼太過于繁瑣的話,這個方式是可以值得一試的。
解析css中的選擇符命名?
基本上這些命名都符合標識符的命名規則1、必須由字母、數字、下劃線和美元符號組成2、首字母必須是字母或下劃線3、建議采用駝峰式命名如:newCont,從第二個單詞開始首字母大寫
怎樣區分后代選擇器和子代選擇器?
1.第一從符號上來區分后代選擇器:是用空格來分隔開來 例如<h1>一個<span>人</span>的戰爭</h1> 就是h1 span{}子代選擇器:用特殊符號> 例如 h1>span{}
2.第二從用法上區分后代選擇器html部分:<ul class="study"> <li>物理 <ul> <li>力學</li> <li>聲學</li> <li>電磁學</li> </ul> </li> <li>數學 <ul> <li>微積分</li> <li>概率論</li> <li>博弈論</li> </ul> </li> </ul> css部分//使用子代選擇器的效果.study >li{ border:1px solid red;/*只給物理和數學加一個紅色方框*/}//使用后代選擇器的效果.study li{ border:1px solid red;/*給物理 力學 聲學 電磁學 和數學 微積分 概率論博弈論都加一個紅色方框*/}這說明子代是他是單傳只給物理和數學就斷子絕孫,后代是一代傳一代。
子代選擇器時效果圖:
后代選擇器時效果圖:
dom操作?
文檔對象模型( DOM, Document Object Model )主要用于對HTML和XML文檔的內容進行操作。DOM描繪了一個層次化的節點樹,通過對節點進行操作,實現對文檔內容的添加、刪除、修改、查找等功能。
一、DOM樹
DOM樹有兩種,分別為節點樹和元素樹。
節點樹:把文檔中所有的內容都看成樹上的節點;
元素樹:僅把文檔中的所有標簽看成樹上的節點。
二、DOM常用操作
2.1 查找節點
document.getElementById('id屬性值');
返回擁有指定id的第一個對象的引用
document/element.getElementsByClassName('class屬性值');
返回擁有指定class的對象集合
document/element.getElementsByTagName('標簽名');
返回擁有指定標簽名的對象集合
document.getElementsByName('name屬性值');
返回擁有指定名稱的對象結合
document/element.querySelector('CSS選擇器');
僅返回第一個匹配的元素
document/element.querySelectorAll('CSS選擇器');
返回所有匹配的元素
document.documentElement
獲取頁面中的HTML標簽
document.body
獲取頁面中的BODY標簽
document.all['']
獲取頁面中的所有元素節點的對象集合型
2.2 新建節點
document.createElement('元素名');
創建新的元素節點
document.createAttribute('屬性名');
創建新的屬性節點
document.createTextNode('文本內容');
創建新的文本節點
document.createComment('注釋節點');
創建新的注釋節點
document.createDocumentFragment( );
創建文檔片段節點
2.3 添加新節點
parent.appendChild( element/txt/comment/fragment );
向父節點的最后一個子節點后追加新節點
parent.insertBefore( newChild, existingChild );
向父節點的某個特定子節點之前插入新節點
element.setAttributeNode( attributeName );
給元素增加屬性節點
element.setAttribute( attributeName, attributeValue );
給元素增加指定屬性,并設定屬性值