1、網頁設計css樣式表 選擇器+屬性。下面是代碼。把每一行代碼解釋下,分別是什麼選擇器以及作用
1 設置頁面所有元素 默認字體為arial
2 標簽選擇器 body是標簽 color是屬性 gray是值
作用:設置body的顏色為gray
3 標簽選擇器 p和span是標簽 font-style是屬性 italic是值
作用:設置所有的p 和 span標簽的字體 設置為傾斜
4 標簽選擇器 P下面的span是標簽 color font-size是屬性 #00ff00 12pt是值
作用:設置p下面的span 的color為綠色,字體大小12pt
下面都以此類推吧
5 ID選擇器
作用:設置p下面id=t的元素的顏色跟字體
6 類別選擇器
作用:設置p下面class=test的元素的字體跟顏色
7 標簽選擇器
作用:設置p下面id=hello 的span元素的字體跟顏色
8 類別選擇器
作用:設置class=test的顏色 字體大小 和加粗
2、網頁設計中標簽選擇器,類選擇器,ID選擇器,組合選擇器區別在哪裡?
class 是類選擇器
id 是id選擇器
都是在css定義類名的時候用到,原則上都可以用,但是一般用類選擇器,用id可能與後台程序id類重名
3、關於網頁設計里的三種基本選擇器和三種復合選擇器分別是什麼?舉例下~
1.標記選擇器主要應用在HTML頁中的標記樣式選擇。如P選擇器就用於聲明網頁中有P標記的文本內容,同理,H1選擇器則可以標記頁面中H1的樣式。例如:H1 { font-size:14px;font-weight:bold;color:#ccc;}以上代碼表示在所有應用H1選擇器的地方,將文字的大小設為14像素並加粗,同時將顏色設為灰色,如果要改變H1的顏色,只需將color屬性更改就可以了,比如將color設為#e7eefe來與網頁的其他地方協調。2.類別選擇器這是一類最常用的選擇器,用它來定義網頁中需要特殊表現的樣式,類別選擇器的名稱可以由作者自由定義,一般來講類別選擇器的命名最好有一定的意義,使CSS代碼更易維護和閱讀。例如定義導航就可以使用.hang{}或者是.nav{},不要使用簡略或者特殊的字元串,否則可能三天後當你再讀你的CSS代碼時,就連你自己都搞不清一個樣式到底是做什麼用的!類別選擇器就是CSS類,在HTML表現為調用的class。例如:(1)style.css文件中定義.title { margin:10px;padding:2px 5px;}(2)HTML文件中<p class="title"></p>在上述定義中,p標簽將引用CSS文件中的title樣式應用到整個p覆蓋的范圍。p將顯示為一個上下左右margin各為10px,上下padding為2px,左右padding為5px的矩形。請注意類別選擇器CSS定義和標記選擇器的區別:在CSS文件中,標記選擇器前邊沒有"."號,下面我們還會講到ID選擇器,它的定義也不一樣,每個ID選擇器樣式前有一個"#"號,以確定其為ID選擇器,而在HTML中則用ID="style"引用。值得注意的是,一個標簽可以同時應用多個class選擇器,如<h3 class="style1 style2"></h3>,具體大家可以在下邊思考並做下實驗,筆者在這就不舉例了。3.ID選擇器(1)ID選擇器用法和class基本沒有區別,他們的不同之處就在於ID選擇器只能在HTML頁中使用一次,而class則可以任意多次調用,在CSS文件中,ID 選擇器一般寫成#idname { bgcolor:#339;font-size:16px;}如果一個ID應用於多個HTML標記,則有可能造成IE編譯錯誤,並且由於ID選擇器可以被JAVASCRIPT等調用,所以多個ID會導致JAVA編譯錯誤並崩潰!(2)HTML的引用在HTML中引用ID選擇器的代碼如下所示:<div id="name"></div>並且ID選擇器不能像類別選擇器那樣同時被一個標簽調用。這也是完全錯誤的語法。 復合選擇器就是基本選擇器通過不同的鏈接方式構成的。復合選擇器就是兩個或多個基本選擇器,通過不同方式鏈接而成的選擇器。
4、計算機,網頁設計中CSS各選擇器的含義,用途和不同,尤其是復合內容選擇器?
1元素選擇器
HTML文檔的元素名稱就是元素選擇器。 1)語法,例如:html<color:black;>、h1{color:blue;}、p{color:silver;} 2)缺點:不同的元素樣式相同,即不能跨元素。所以做不到同一類元素下的細分。
2類選擇器
自定義的某種選擇器。 1)語法:.className{樣式聲明} 例如:.myClass{ background-color:pink;font-size:47px; } <h2>h2中的文本</h2> <p>p中的文本</p>
注意事項:
html文件中,所有元素都有一個class屬性,如:<p></p>
類選擇器還一種用法:<div id="d1"class="s1 s2">hello</div>,樣式s1和樣式s2對div共同起作用。
3分類選擇器
將類選擇器和元素選擇器結果起來使用,以實現同一類元素下不同樣式的細分控制。如<input>元素,又有按鈕又有文本框的,採用分類選擇器。 1)語法:元素選擇器.className{樣式聲明} 例如: p.myClass{ color:red;font-size:27px } <h2>h2中的文本</h2> <p>p1中的文本</p> <p>p2中的文本</p>
4元素id選擇器
以某個元素id的值作為選擇器。比較特殊的、頁面整體結構的劃分一般使用id選擇器。 1)語法:定義id選擇器時,選擇器前面需要有一個「#」號,選擇器本身則為文檔中某個元素的id屬性的值。 例如:#header{ color:red;background:yellow; } <h1 id="header">This is Title<h1>
u 注意事項:
v html文件中,所有元素都有一個id屬性。且某個id選擇器僅使用一次。
5派生選擇器
依靠元素的層次關系來定義。某一包含元素下的一些相同子元素使用派生選擇器。 1)語法:通過依據元素在其位置的上下文關系來定義樣式,選擇器一端包括兩個或多個用空格分隔的選擇器。 例如:h1 span{color:red;} <h1>This is a<span>important</span>heading</h1>
6選擇器分組
對某些選擇器定義一些統一的設置(相同的部分)。 1)語法:選擇器聲明為以逗號隔開的元素列表。 例如:h1,p,div{ border:1px solid black;}
7偽類選擇器
偽類用於向某些選擇器添加特殊的效果。 1)語法:使用冒號「:」作為結合符,結合符左邊是其他選擇器,右邊是偽類。 2)常用偽類:有些元素有不同的狀態,典型的是<a>元素。 ①:link:未訪問過的鏈接 ②:active:激活 ③:visited:訪問過的鏈接 ④:hover:懸停,滑鼠移入,所有元素都能用 ⑤:focus:獲得焦點 例如:a:link{ color:black;font-size:20px; } a:visited{ color:pink;font-size:20px; } a:hover{ font-size:27px; } a:active{ color:red; }
8選擇器優先順序
1)基本規則:內聯樣式 > id選擇器 > 類選擇器 > 元素選擇器
2)優先順序從低到高排序:
div < .class < div.class < #id < div#id < #id.class < div#id.class 例如:<div id="id" style="color:black;"></div>
5、網頁製作的選擇器問題
重用:
經常會用到一些基本的式樣疊加,比如字體的顏色和加粗。網頁中可能同時出現三種情況:1.字體為紅色 2.字體加粗 3.字體紅色加粗
這時我們只需要定義前兩個css:
.red{color:red;}
.b{font-weight:bold;}
第三種情況時用<div class="red b"></div>
子選擇器:
相對來說,簡化html文件的代碼更加重要,因此在css中使用子選擇器非常有益,同時也使css代碼更加容易理解。比如下面的代碼:
<div id="sub_nav">
<ul>
<li> <a href="#">Item 1</a></li>>
<li> <a href="#">Item 2</a></li>
<li> <a href="#">Item 3</a></li>
</ul>
</div>
如果div li a都有各自的式樣,採用子選擇器,可以省略代碼中li 和a 的class屬性,從而簡化代碼:
#sub_nav { /* Some styling */ }
#sub_nav li { /* Some styling */ }
#sub_nav a { /* Some styling */ }
組選擇器:
當一些元素類型、class或者id都有共同的一些屬性,你就可以使用組選擇器來避免多次的重復定義。這可以節省不少位元組。
例如:定義所有標題的字體、顏色和margin,你可以這樣寫:
h1,h2,h3,h4,h5,h6 {
font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}
如果在使用時,有個別元素需要定義獨立樣式,你可以再加上新的定義,可以覆蓋老的定義,例如:
h1 { font-size:2em; }
h2 { font-size:1.6em; }
重用、子選擇器和組選擇器的靈活使用可以非常有效的減少代碼,同時非常有利的增加代碼的可讀性,具體的應用需要在具體編寫過程中體會。
http://www.souzz.net/html/web/htmlcss/12499.html
6、dreamweaver中三種選擇器的區別?
css 的樣式的引用來大致有源三種:
1. 對於ID作用,樣式的寫法為 #div (#號開頭):當一個內容或標簽被賦予此ID後,自動套用此樣式。
2. 對於標簽起作用,樣式寫法類似 table (直接用標簽來作為樣式名):所有此標簽自動套用,一般定義一些全局性的樣式,比如字型大小,顏色等。
3. 必須引用才能起作用,樣式寫法類似 .table01 (樣式名前加點,樣式名可以隨意定義):這個必須在頁面中用 class="table01" 這樣的語法引用才能起作用。
7、css選擇器有哪些?各種選擇器優先順序大小順序
CSS選擇器如下:
1. 標簽名選擇器 div { color:Red;} /即頁面中的各個標簽名的css樣式
2.類選擇器 .divClass {color:Red;} /即定義的每個標簽的class 中的css樣式
3.ID選擇器 #myDiv {color:Red;} /即頁面中的標簽的id
4.後代選擇器(類選擇器的後代選擇器) .divClass span { color:Red;} /即多個選擇器以逗號的格式分隔 命名找到准確的標簽
5.群組選擇器 div,span,img {color:Red} /即具有相同樣式的標簽分組顯示
選擇器的優先順序
1.最高優先順序是 (直接在標簽中的設置樣式,假設級別為1000)<div style="color:Red;"></div>
2.次優先順序是(ID選擇器 ,假設級別為100) #myDiv{color:Red;}
3.其次優先順序是(類選擇器,假設級別為10) .divClass{color:Red;}
4.最後優先順序是 (標簽選擇器,假設級別是 1) div{color:Red;}
5.那麼後代選擇器的優先順序就可以計算了啊
比如 .divClass span { color:Red;} 優先順序別就是:10+1=11
8、網頁設計中關於新建CSS的選擇器類型問題
僅對該文檔--指的是css代碼直接出現在網頁的內部。
新建樣式表文件--指的是在網頁外部建立一個css文件,網頁引用這個文件。
你用的應該是dreamweaver 8.0以下版,類、標簽和高級其實在面板上都有一個簡短的說明。
高級-----舉一個例子,你可以製作導航欄文字,滑鼠移動到文字,文字變色或變換背景。
標簽-----也就是讓你自己定製html元素,比如h1的字體,你可以隨意設置大小、顏色等等。
類----你可以把網頁里相同的元素定義為一個類,應用這個樣式這些元素就會統一了。
9、CSS 選擇器有哪些,在網頁設計中如何選擇使用
<div id="demo">
<div class="inner">
<p><a href="#">鏈接</a></p>
<p><input type="checkbox" name="" id="" /></p>
</div>
</div>
class 選擇器 .inner{ width:100px;}
id 選擇器 #demo{ width:100px;}
標簽 選擇器 p{ width:100px;}
後代選擇器 p a{ color: #f60;}
偽類選擇器 a:hover{ color: #f00;}
偽元素選擇器 a:after{ clear: both;}
屬性選擇器 input[type=checkbox]{ margin-left: 10px;}
css3選擇器
由於ie的問題,比較常用的是前4種選擇器。
10、css選擇器有哪些?
1、類型選擇器
CSS中的一種選擇器是元素類型的名稱。使用這種選擇器(稱為類型選擇器),可以向這種元素類型的每個實例上應用聲明。例如,以下簡單規則的選擇器是H1,因此規則作用於文檔中所有的H1元素。
2、簡單屬性選擇器
CLASS屬性
CLASS屬性允許向一組在CLASS屬性上具有相同值的元素應用聲明。BODY內的所有元素都有CLASS屬性。從本質上講,可以使用CLASS屬性來分類元素,在樣式表中創建規則來引用CLASS屬性的值,然後瀏覽器自動將這些屬性應用到該組元素。
類選擇器以標志符(句點)開頭,用於指示後面是哪種類型的選擇器。對於類選擇器,之所以選擇句點是因為在很多編程語言中它與術語"類"相關聯。翻譯成英語,標志符表示"帶有類名的元素"。
ID屬性
ID屬性的操作類似於CLASS屬性,但有一點重要的不同之處:ID屬性的值在整篇文檔中必須是唯一的。這使得ID屬性可用於設置單個元素的樣式規則。包含ID屬性的選擇器稱為ID選擇器。
需要注意的是,ID選擇器的標志符是散列符號(#)。標志符用來提醒瀏覽器接下來出現的是ID值。
STYLE屬性
盡管在選擇器中可以使用CLASS和ID屬性值,STYLE屬性實際上可以替代整個選擇器機制。不是只具有一個能夠在選擇器中引用的值(這正是ID和CLASS具有的值),STYLE屬性的值實際上是一個或多個CSS聲明。
通常情況下,使用CSS,設計者將把所有的樣式規則置於一個樣式表中,該樣式表位於文檔頂部的STYLE元素內(或在外部進行鏈接)。但是,使用STYLE屬性能夠繞過樣式表將聲明直接放置到文檔的開始標記中。
3、組合選擇器類型
可以將類型選擇器、ID選擇器和類選擇器組合成不同的選擇器類型來構成更復雜的選擇器。通過組合選擇器,可以更加精確地處理希望賦予某種表示的元素。例如,要組合類型選擇器和類選擇器,一個元素必須滿足兩個要求:它必須是正確的類型和正確的類以便使樣式規則可以作用於它。
外部信息:偽類和偽元素
在CSS1中,樣式通常是基於在HTML源代碼中出現的標記和屬性。對於很多設計情景而言這種做法完全可行,但是它無法實現設計者希望獲得的一些常見的設計效果。
設計偽類和偽元素可以實現其中的一些效果。這兩種機制擴充了CSS的表現能力。在CSS1中,使用偽類可以根據一些情況改變文檔中鏈接的樣式,如根據鏈接是否被訪問,何時被訪問以及用戶和文檔的交互方式來應用改變。藉助於偽元素,可以更改元素的第一個字母和第一行的樣式,或者添加源文檔中沒有出現過的元素。
偽類和偽元素都不存在於HTML;也就是說,它們在HTML代碼中是不可見的。這兩種機制都得到了精心設計以便能夠在CSS以後的版本中做進一步地擴充;也就是說實現更多的效果。