跟着杨中科学习asp.net之html
第一節(jié)課
HTML基礎(chǔ)加強班
l 什么是瀏覽器?
1. 瀏覽器就是接受瀏覽者的操作(打開一個網(wǎng)址、點擊一個鏈接、點擊一個按鈕),然后幫瀏覽者去web服務(wù)器請求網(wǎng)頁的內(nèi)容(html格式返回),然后展現(xiàn)成人眼能夠看得懂的可視化的頁面的軟件。
l IE=瀏覽器?這個說法是錯誤的。IE是瀏覽器的一種,還有FireFox、Opera、Charome等,注意遨游(Maxthon)、世界之窗、搜狗瀏覽器、360瀏覽器等并不是一種獨立于IE的瀏覽器,其內(nèi)核還是IE的內(nèi)核,只不過是換了一個外殼而已,所以用遨游的不能嘲笑用IE的,否則就露怯了,試著用WeBrowse空間自己開發(fā)一個瀏覽器。
l WebBrowser控件
雙擊按鈕:
方法如下:
webBrowser1.Navigate(textBox1.Text);
htm文件代碼如下:
<html>
<head>
</head>
<body>
<font color="red">hello</font>
<a href="http://www.itcast.cn">itcast</a>
</body>
</html>
運行結(jié)果:
l 所謂的Trident引擎就是WebBrosder空間,現(xiàn)在很多非IE核心的瀏覽器用的是Webkit引擎,比如遨游3或搜狗的雙核、Chrome、Safari。搞瀏覽器開發(fā)挺簡單的。
l HTML就是描述網(wǎng)頁長什么樣子、有什么內(nèi)容的一個文本。在查看網(wǎng)頁的描述內(nèi)容的方式:使用IE瀏覽器的話,在網(wǎng)頁上點擊右鍵,選擇“查看源文件”
l 瀏覽器兼容性問題:描述文件是一個統(tǒng)一的,但是就像口語翻譯一樣,不同翻譯翻譯出來的東西也是有差異的,所以同一個網(wǎng)頁在IE上和Firefox上看起來就可能長得不一樣,最明顯的就是以前qq空間上的頁面在Firefox上線時就有問題,甚至有的網(wǎng)頁在IE6、IE7、IE8上的也不一樣。因此web開發(fā)過程中的一個重要也是最頭疼的問題就是瀏覽器的兼容,測試Firefox(簡稱FF)、Chrome等瀏覽器安裝各自的軟件就可以,測試不同版本的IE可以用IETester。
l 只要能跑IE和firefox就ok了。
小知識:
瀏覽器兼容性測試:Acid。測試標準:對給定幾個網(wǎng)頁來測試,谷歌的Firefox100分,IE的98分。
瀏覽器開發(fā)引擎Webkit、Trident、Gecko。
QQ、暴風(fēng)、千千靜聽等彈出的新聞中心是網(wǎng)頁,是嵌在瀏覽器框架中的。用visual studio 就可以開發(fā)。
靜態(tài)頁面、動態(tài)頁面
l 網(wǎng)站頁面分為靜態(tài)頁面和動態(tài)頁面兩種
n 靜態(tài)頁面:有一個html頁面文件保存在服務(wù)器上,瀏覽器要這個頁面的時候服務(wù)器就把這個頁面文件發(fā)給瀏覽器;
n 東莞臺頁面:服務(wù)器上沒有臉攔著要看的頁面,而是服務(wù)器動態(tài)生成的html頁面發(fā)給瀏覽器,動態(tài)語言的服務(wù)端也易用C#,vb.net、 php、java、c等編寫。
l 編寫普通的html頁面和任何后臺語言無關(guān)的,可以使用dreamweaver、expression web等工具寫,這些工具是給頁面美工用的,開發(fā)人員用visual studio寫html就夠了,不要把精力放到怎么把頁面好看上,正規(guī)公司都有專門的頁面美工,不正規(guī)的公司都是偷別人的美工頁面,無論是偷別人的頁面,還是使用美工公司開發(fā)出來的頁面,對于開發(fā)人員要做的“填模板”工作都是一樣的。
第二課
課前說明:
l 內(nèi)容:html、css
l 目標:掌握手寫html實現(xiàn)一般難度的web頁面的能力(如網(wǎng)站注冊表單),為asp.net學(xué)習(xí)打基礎(chǔ)。堅持手寫html,可視化設(shè)計知識一種自學(xué)的手段。
l 參考書:張孝祥《javascript網(wǎng)頁開發(fā)——體驗式學(xué)習(xí)教程》
第一個網(wǎng)頁
主流編程人員所用的為visual studio 2008,可以去官網(wǎng)下載。有點大,3.7個G。
l 新建web項目(新建→asp.netweb應(yīng)用程序),新建html頁面(添加→新建項→web→html頁)
l 查看頁面方式
n 切換到“設(shè)計”視圖,可以在這里查看初步的預(yù)覽效果,不是很準,可以再“設(shè)計”試圖工具箱中拖放空間可視化的設(shè)計,設(shè)計復(fù)雜頁面的時候很少直接可視化設(shè)計
n 右鍵,選擇“在瀏覽器中查看”。無法進行調(diào)試。
n 將要查看的頁面設(shè)為起始頁(在文件上點擊右鍵“設(shè)為起始頁”),然后點擊“啟動調(diào)試”,即可調(diào)試。
l 學(xué)沒有js、c#代碼的時候用“在瀏覽器中查看”。修改頁面不用關(guān)閉瀏覽器再打開,刷新就可以。
第三課
Html頁結(jié)構(gòu)說明
l 所有內(nèi)容都在<html></html>標簽之內(nèi):<head></head>內(nèi)存放的是頭部信息,是對頁面的描述,不會直接顯示在頁面中,<head>內(nèi)的<title>中設(shè)置的是頁面的標題,<title>只能放在<head>中;<body>是頁面的主題,大部分顯示內(nèi)容都定義在這里。
l 所有頁面都應(yīng)該至少含有這些部分,由于瀏覽器容錯性強,所以即使不包含也能正常顯示,但是最好還是寫全了。
顏色體系
l Body標簽中的bgcolor屬性可以設(shè)定網(wǎng)頁的背景顏色,<body bgcolor=“#006699”>
l #006699就是html中表示顏色的方式,每兩個是一組,三組就分別表示R、G、B的值,是16進制表示。關(guān)于RGB見備注
l 可以使用vs內(nèi)置的顏色選擇對話框生成RGB值,也可以用取色器(比如DEBUG內(nèi)置的取色器;打開IE,打開debugbar工具欄,點擊吸管圖標);html海域定義了一些顏色:red、black、white等,比如bgcolor=“black”。
l 配色不是一個專業(yè)開發(fā)人員考慮的,是美工的事情,所以對于顏色的取值不用太操心,知道有這么一回事就行了。
Html和xml的聯(lián)系、區(qū)別
?
l Xhtml
l 屬性值:html中屬性值即可以用單引號括起來,也可以用雙引號括起來、甚至不用引號都可以(不推薦),單雙要配對。
l 注釋:html使用和xml一樣的<!—注釋內(nèi)容-->來做注釋。
l 特殊字符:html中<、>是有特殊含義的、空格不會被顯示的(輸入一個帶空格的字符串試試),所以需要特殊符號,相當(dāng)于c#中的“\n”轉(zhuǎn)義符。<;(小于號);>;(大于號); ;(空格);實用工具,免除記憶。
l 格式標簽<p></p>創(chuàng)建段落;<br/>回車,也可以寫成<br>,在html中有一些標簽可以不關(guān)閉,<br>就是一個,這是和xml不同的地方,但是為了遵循xhtml規(guī)范,推薦像xml一樣嚴格關(guān)閉。<br/><img=s.gif/>
l Html不把“ ”當(dāng)成空格,因為html中經(jīng)常有縮進,如果把縮進的空格在瀏覽器中以空格形式展現(xiàn)的話,排版會很麻煩。“ ”表示空格。
l <pre>不是萬能的。功能有限。
文字格式
l <br>只是回車(即換行),<p>是分段,<p>前后會有比較大的空白,而<br>則沒有。
如圖
l <center>網(wǎng)絡(luò)創(chuàng)新小組</center>居中顯示
如圖
l h標簽,html定義了<h1></h1>到<h6></h6>六個h標簽,分別表示不同大小的字體。
l <b>網(wǎng)絡(luò)創(chuàng)新小組</b>粗體
l <font></font>字體標簽,<font color=“red”>紅色</font> <font size=“30” color=“red”>紅色</font>
url、超鏈接
l url:表示資源在網(wǎng)絡(luò)中的地址,比如
http://127.0.0.1/a.html、ftp://192.168.88.128/b.zip。還有uri的概念,比url大,有的可以使用uri之中說法,可以暫時看成和url一樣大就行。
l 超鏈接:<a href="http://www.hao123.com">好123</a>
點擊,直接進入“好123”網(wǎng)站
l <a>中還可以嵌套圖片,這樣就是點擊圖片打開連接<a href=www.hebiace.edu.cn ><img src=”http://www.hebiace.edu.cn/images/newindex1104_03.gif” /></a>
超鏈接深入
l 相對url:相對url表示相對于當(dāng)前文檔的資源,“/”表示網(wǎng)站根目錄,“../”表示父目錄,“../../”表示父目錄的父目錄,”../”或者不寫任何斜線表示相對于當(dāng)前路徑的目錄。站內(nèi)引用最好用相對url,這樣域名改變了,目錄改變了都不受影響。
<a href=”a.htm”><img src=”a.jpg”></a>
<img src=”../images/csharp1.jpg”/>
<img src=”./images/csharp2.jpg” />
l 將<a>的target屬性設(shè)定為“_blank”就可以在新的窗口中打開超鏈接。國內(nèi)的網(wǎng)站都默認是在新窗口中打開。
l 超鏈接:<a href=”http://www.baidu.com”>baidu</a>
l 用<a>的target屬性為<a>起名字:<a name=”last”>這就是最后</a>
這樣可以通過<a href=”#last”>跳到平臺</a>來跳轉(zhuǎn)到超鏈接的部分。
l 案例:去評論、回到正文。多敲幾個回車
圖片
l <img src=”a.jpg”/>注意圖片是連接的,不是插入的,所以如果src指向的文件不存在了,就看不了了。Alt屬性為圖片無法顯示使得顯示文本,鼠標方式也會有懸浮提示“點擊查看大圖”;border屬性指定邊框,border=“0”不顯示邊框;width、height屬性指定圖片的顯示大小,如果不指定則是原始大小。
l 最好指定width、height,哪怕是原始尺寸大小,因為如果不指定大小,圖片不占位置,圖片下載后才調(diào)整大小,會造成頁面很亂。如果知道那個了width、height哪怕圖片沒有加載完成,也會先把位置占上。
<a href="../images/00.jpg"><img src="../images/00.jpg" width="50" height="50"/></a>
l 如果網(wǎng)頁上要顯示小圖(比如縮略圖),不要僅僅是把大圖設(shè)定一下width、height來縮小,因為仍然會下載大圖,使得加載速度很慢。
列表、表格
列表:<ul><li>灌水區(qū)</li><li>版務(wù)區(qū)</li><li>原創(chuàng)貼圖</li></ul>
l (unordered list)
l
l 還有有序列表<ol></ol>,很少用。Ordered list
l 表格:<table></table>為表格,在內(nèi)部用過<tr>創(chuàng)建行,<tr>內(nèi)部通過<td>創(chuàng)建單元格??梢灾vtable的border屬性設(shè)為0來隱藏表格線
n <tr>屬性:align,水平對齊,可選值left、right、center;valign,垂直對齊,可選值top、middle、bottom。
n <td>也有align和valign。<tr align=”right”><td>tom</td><td align=”left”>20</td><td>男</td>:子標簽?zāi)J則繼承父標簽的屬性,如果自己單組設(shè)定了屬性,則會覆蓋父標簽的屬性。
n 還可以使rowspan、colspan來進行單元格的合并,vs可視化的功能來做就行。
n 表頭的td可以用th代替,這樣就會表示粗體、居中顯示。
n 建議將表頭用<><thead>代替<tr>
表單
l 網(wǎng)站表單于填單
l <form>標簽為表單標簽。如果要把數(shù)據(jù)提交到服務(wù)器,則需要將<input>、<textarea>、<select>等表單元素放到form中。
l <input>是主要的表單元素,type的可選值:submit(提交按鈕)、button(普通按鈕)、checkbox(復(fù)選框)file(文件選擇框)、hidden(隱藏字段)、img(圖片按鈕)、password(密碼框)、radio(單選按鈕)、reset(重置按鈕)、text(文本框)
input表單詳解
submit:點擊submit按鈕表單就會被提交給服務(wù)器,中文IE下默認按鈕文本為“提交查詢”,可以設(shè)置value屬性修改按鈕的顯示文本
text:size屬性為寬度,value為值,maxlength為可以輸入的最大長度,readonly只讀。<input type="text" readonly/>(只寫屬性名,不寫屬性值)或者<input type="text" readonly="readonly" />(推薦)
checkbox:checked屬性表示是否被選中,<input type="checkbox" checked />或者<input type="checkbox" checked="checked" />(推薦)checked、readonly等這種一個可選值的屬性都可以省略屬性值。
radio:相同name屬性的為一只有組,不同radio設(shè)定不同的value值,這樣通過取指定name的值就可以知道誰被選中了,不用單獨的判斷。
<input type="text"/>
<input type="checkbox"/>
<input type="button" value="注冊"/>
<input type="submit" value="注冊一下下"/>
<input type="checkbox" checked="checked"/>
</br>
<input type="radio" name="gender" />男
<br>
<input type="radio" name="gender"/>女
</br
<br>
<input type="radio" name="gender"/>保密
</br>
<input type="radio" name="habit" />籃球
<br>
<input type="radio" name="habit"/>足球
</br
<br>
<input type="radio" name="habit"/>排球
</br>
file:使用file,則form的enctype必須設(shè)置為multipart/form-data、method屬性為POST(*)
image:使用src屬性指定圖片的地址,用來實現(xiàn)美化的“登錄按鈕”。用圖片實現(xiàn)的submit按鈕,同時提交了用戶點擊圖片的坐標。
<select>標簽
用來創(chuàng)建類似于WinForm中的ComboBox或者ListBox
如果size屬性大于1就是ListBox(size的值為顯示出來的列表數(shù)量),否則就是ComboBox。<select multiple>或者<select multiple="multiple">(推薦)multiple有且只有一個值,那么就是可以多選的ListBox。
<select >
<option>北京</option>
<option>上海</option>
<option>南京</option>
</select>
<select size="2">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
Size控制同時顯示多少個值
select中的項是<option>,<option>北京</option>還可以設(shè)定項的值<option value="1">北京</option>。
將一個option設(shè)置為選中:<option selected>333</option>或者<option selected="selected">333</option>(推薦)就可以將這個項設(shè)定為選擇項
如何實現(xiàn)“不選擇”,添加一個<option value="-1">--不選擇--<option>,然后編程判斷select選中的值如果是-1就認為是不選擇。
select分組選項,可以使用optgroup對數(shù)據(jù)進行分組,分組本身不會被選擇,無論對于下拉列表還是列表框都適用。見備注。
<form>
<select name="城市" size=9>
<optgroup label="直轄市">
<option>北京</option>
<option>上海</option>
<option>天津</option>
</optgroup>
<optgroup label="廣東">
<option>深圳</option>
<option>佛山</option>
<option>廣州</option>
</optgroup>
<optgroup label="經(jīng)濟特區(qū)">
<option>廈門</option>
<option>珠海</option>
<option>海南</option>
</optgroup>
</select>
</form>
其他標簽
l <textarea>多行文本(也是表單元素):<textarea>文本</textarea>,cols=“50”、rows=“15”屬性表示行數(shù)和列數(shù)。
l <textarea cols="10" rows="10">
l <label>:在<input type=“text”>前可以寫普通的文本來修飾,但是單擊修飾文本的時候input并不會得到焦點,而用label則可以,for屬性指定要修飾的控件的id,<label for=“txt1” >asdfad</label>;”txt1”為被修飾的控件設(shè)置一個唯一的id。(label的accesskey=“r”屬性指定快捷鍵,FF不支持)
l
l 姓名:<input type="text"/>
l 婚否:<input type="checkbox"/>
l </br>
l <label for="name">姓名:</label><input id="name" type="text"/>
l <label for="ma">婚否:</label><input id="ma" type="checkbox"/>
用label主要是點擊“姓名”、“婚否”,鼠標就會在該方框里面。
l <label for="ma">婚否</label> <input id="ma" type="checkbox" />
l fieldset:GroupBox效果,將控件劃分一個區(qū)域,看起來更規(guī)整
<fieldset style=“設(shè)置樣式”>
<legend>常用</legend>
<input type="text" />
</fieldset>
<fieldset>
<legend>常?ê用??</legend>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</fieldset>
l submit(提交)、reset(恢復(fù)為默認值)
l *滾動文字 <marquee>
l *播放聲音(dw中添加媒體→插件)、顯示flash,見備注。
練習(xí)
練習(xí)1:實現(xiàn)登錄界面,有用戶名、密碼、驗證碼(使用普通圖片代替)、“記住密碼”復(fù)選框、登錄按鈕、重置按鈕。使用Table進行布局。使用label來寫修飾文本。
<table border="1">
<tr><td><label for="username">用戶名:</label></td><td><input id="username" type="text" /></td ></tr>
<tr><td><label for="password">密碼:</label></td><td><input id="password" type="text"/></td ></tr>
<tr><td><label for="remember">記住密碼:</label></td><td><input id="remember" type="checkbox"/></tr>
</table>
練習(xí)2:實現(xiàn)注冊頁面,分為兩個頁面,第一個頁面是協(xié)議顯示頁面,點擊“我同意”超鏈接進入第二個注冊頁面,填寫內(nèi)容:用戶名、密碼、重復(fù)密碼、省份(下拉列表)、性別(男、女、保密三個Radio)、職業(yè)(學(xué)生、公司職員、其他三個Radio)、愛好(登山、籃球、足球、讀書、游泳五個CheckBox)。使用label來寫修飾文本。將愛好幾個CheckBox放到一個fieldset(GroupBox)中
樣式表、CSS
CSS(層疊樣式表,Cascading Style Sheets)是用來美化頁面用的,可以對頁面元素進行更精細的設(shè)置,樣式主要描述元素的字體顏色、背景顏色、邊框等。CSS是描述元素的皮膚。
使用CSS的好處:
外觀美化 布局、定位
樣式表能實現(xiàn)內(nèi)容與樣式的分離,方便團隊開發(fā)
方便統(tǒng)一定義格式,修改也方便.
HTML標簽的外觀樣式比較單一
頁面色彩不生動
樣式修改不方便
樣式表的作用:為網(wǎng)頁設(shè)置外觀,相當(dāng)于華麗的衣服。
例如:背景顏色:
<input type="text" value="123" style="background-color:red"/>
邊框顏色:
<input type="text" value="123" style="border-color:red"/>
使用CSS的三種方式
CSS主要有元素內(nèi)聯(lián)、頁面嵌入和外部引用三種使用方式。CSS是描述元素的皮膚!
元素內(nèi)聯(lián)(行內(nèi)樣式表),直接將樣式寫入元素的style屬性中,<input type="text" readonly="readonly" style="background-color: #FF00FF" />,適用于樣式?jīng)]有可復(fù)用性的場合。
頁面嵌入(內(nèi)嵌樣式表):在head中加入
<style type="text/css">
input{border-color:Yellow;color:Red;}
</style>
表示頁面中所有input都是采用指定的樣式。適合于樣式復(fù)用,減小頁面體積
外部引用(外部樣式表),將css內(nèi)容寫入css后綴的文件
textarea{background:yellow}
然后在頁面中引用,在head中加入
<link type="text/css" rel=“stylesheet" href="s1.css" />
適合于多個頁面共享css。
一列全部顯示顏色:
層(DIV)
文本顏色:
語法:
<style>
p{}
</style>
<p></p>
把CSS申明在一個文件里面
Div層(塊級元素)、Span(行內(nèi)元素)
div:<div></div>將內(nèi)容放到層中,就以將這些內(nèi)容當(dāng)成一個整體進行處理,比如整體隱藏、整體移動等。div非常強大和常用。類似于WinForm的Panel。
span:div是將內(nèi)容放到一個矩形的區(qū)塊中,會影響布局(兩端會換行),而span只是把一段內(nèi)容定義成一個整體進行操作,但不影響布局、顯示(兩端沒有換行)。演示:一行文字用span與div截取部分文字的區(qū)別。
Div在網(wǎng)頁布局中使用非常多。
Span一般用來圈住一小段文字,設(shè)置不同的樣式。為什么不用<font>標簽,因為用<span>可以通過CSS來設(shè)樣式。
html這些標簽去哪里查?Msdn目錄→ web開發(fā) → HTML and CSS → HTML and DHTML Reference → Objects
常見CSS樣式
Css樣式的屬性的鍵值對之間用“:”(冒號)隔開,而不同的屬性之間用”;”(分號)隔開。
css計量單位:css中表示寬度、距離時有多種計量單位:px(像素)、30%(百分比)、em(相對單位)等。width:20px。
background-color:Red;背景顏色;
color:文本顏色
border-style:solid;邊框風(fēng)格,實線(默認是沒有),還有dotted(點)等值;
border-color:邊框顏色;
border-width:邊框?qū)挾?默認是0)。
例子:style="border-color:Red;border-width:1px;border-style:dotted;"
display:元素是否顯示,可選值none(不顯示)、block (顯示為塊級元素,此元素前后會帶有換行符。)、inline(顯示為內(nèi)聯(lián)元素,元素前后沒有換行符 ,為div增加display:inline;樣式后與span顯示效果一致。注意:【
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 】)等。
cursor,style cursor:鼠標在元素上時顯示的光標圖標,可選值:cursor(默認光標)、pointer(超鏈接上的手)、text(輸入Bean)、wait(忙沙漏)、help(幫助)等。還可以通過cursor:url(dinosau2.ani)使用ani、cur格式的自定義光標圖片。
LI不顯示圓點:LIST-STYLE-TYPE: none;一般設(shè)在li或者ul上
設(shè)置光標(格式必須是ani或者cur)
margin(與表格的cellspacing屬性類似)、padding(與表格的cellpadding類似。)
margin:值1; //上右下左都是 值1。
margin:值1 值2; //上下為值1,左右為值2.
margin:值1 值2 值3; //上為值1 左右為值2 下為值3;
margin:值1 值2 值3 值4; //每個值分別是:上 右 下 左;(順時針方向)
例如:
風(fēng)格是inline
樣式選擇器
對于非元素內(nèi)聯(lián)的樣式需要定義樣式選擇器,通俗的說就是這個樣式適合于哪些元素,三種:標簽選擇器、class選擇器和id選擇器。
標簽選擇器 input{border-color:Yellow;color:Red;},對于指定的標簽采用統(tǒng)一的樣式
class選擇器,以定義一個命名的樣式,然后在用到它的時候設(shè)定元素的class屬性為樣式的名稱,還可以同時設(shè)定多個class,名稱之間加空格
樣式名稱開頭加“.”
.warning{background:Yellow;}
.highlight{font-size:xx-large;cursor:help;}
<table><tr><td class="highlight">aaa</td><td class="warning">bb</td><td class="highlight warning">ccc</td></tr></table>
同一個標簽可以應(yīng)用多個類選擇器(空格隔開)。如果樣式表中
style="background-color:Green"的權(quán)優(yōu)先于
<style>
.warning{background:Yellow;}
.highlight{font-size:xx-large;cursor:help;}
</style>
的class, 所以背景變?yōu)榫G色,原先class設(shè)置為黃色。
標簽+class選擇器
class選擇器也可以針對不同的標簽,實現(xiàn)同樣的樣式名對于不同的標簽有不同的樣式,只要在樣式名前加標簽名即可。
input.accountno{text-align:right;color:Red;}
label.accountno{font-style:italic;}
<input class="accountno" type="text" value="11111111111" />
<label class="accountno">333333333333333333</label>
執(zhí)行:
id選擇器
為指定id的元素設(shè)定樣式,id前加#
#username
{
font-size:10px;
}
<input id="usersname" type="text" value="aaaaaaaaaaaa" />
style、class可以同時組合使用
<input id="username" class="accountno" style="font-size:40px;color:red" type="text" value="aaaaaaaaaaaa“ />
更多選擇器(*)
包含選擇器:
P strong{ background-color:Yellow}
表示P標簽內(nèi)的strong標簽內(nèi)的內(nèi)容使用的樣式
<strong>fadsfasdfads</strong>
<p><strong>adfasfd</strong></p>
組合選擇器,同時為多個標簽設(shè)定一個樣式
H1,H2,input{background-color:Green}
<h1>nihao</h1>
<input type="text" value="test" />
(*)其他CSS選擇器:div > p(子選擇器)、div + p(相鄰選擇器)、…。IE7以下不支持。在jQuery中還會學(xué)習(xí)。
偽選擇器
偽選擇器:為標簽的不同狀態(tài)設(shè)定不同的樣式:
A:visited:超鏈接點擊過的樣式;A:active:選中超鏈接時的樣式;A:link:超鏈接未被訪問時的狀態(tài);A:hover:鼠標移到超鏈接時的狀態(tài)。
A:visited {TEXT-DECORATION: none}
A:active {TEXT-DECORATION: none}
A:link {TEXT-DECORATION: none}
A:hover {TEXT-DECORATION: underline}
說明:TEXT-DECORATION: none表示超鏈接不顯示下劃線。
不是所有的元素都支持偽選擇器。(不同瀏覽器支持情況不一樣,IE7以下不支持input:hover等標簽。),目前大多數(shù)只在A標簽時使用。
注意瀏覽器緩存問題。
思考:頁面上 部分超鏈接默認是紅色、部分超鏈接默認是白色。怎么實現(xiàn)?(.myAnchor:link)
轉(zhuǎn)載于:https://www.cnblogs.com/seclusively/p/3789394.html
總結(jié)
以上是生活随笔為你收集整理的跟着杨中科学习asp.net之html的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Python 内置模块之 logging
- 下一篇: Python 第三方模块之 numpy.