您現在的位置是:電腦技術吧?>? 編程技術 ??>??網頁設計css教程,網頁制作css??>??正文詳情

網頁設計css教程,網頁制作css

魏靈珊2019-11-15 18:20:46 人圍觀
簡介htmlcss網頁設計實例一。使用CSS縮寫可以幫助減小CSS文件的大小,使其更易于閱讀。CSS縮寫的主要規則請參見“CSS基本語法”2。明確定義單元,除非0的值忘記定義單元的大小是CShtml css

一.使用css縮寫  使用縮寫可以幫助減少你CSS文件的大小,更加容易閱讀。

css縮寫的主要規則請參看css基本語法。

  二.明確定義單位,除非值為0  忘記定義尺寸的單位是CSS新手普遍的錯誤。

在HTML中你可以只寫;100,但是在CSS中,你必須給一個準確的單位,比如: width:100em。

只有兩個例外情況可以不定義單位:行高和0值。

除此以外,其他值都必須緊跟單位,注意,不要在數值和單位之間加空格。

  三.區分大小寫  當在XHTML中使用CSS,CSS里定義的元素名稱是區分大小寫的。

為了避免這種錯誤,我建議所有的定義名稱都采用小寫。

  class和id的值在HTML和XHTML中也是區分大小寫的,如果你一定要大小寫混合寫,請仔細確認你在CSS的定義和XHTML里的標簽是一致的。

  四.取消class和id前的元素限定  當你寫給一個元素定義class或者id,你可以省略前面的元素限定,因為ID在一個頁面里是唯一的,?las s可以在頁面中多次使用。

你限定某個元素毫無意義。

例如:  div#content { /* declarations */ }fieldset.details { /* declarations */ }  可以寫成  #content { /* declarations */ }.details { /* declarations */ }  這樣可以節省一些字節。

  五.默認值  通常padding的默認值為0,background-color的默認值是transparent。

但是在不同的瀏覽器默認值可能不同。

如果怕有沖突,可以在樣式表一開始就先定義所有元素的margin和padding值都為0,象這樣:  * {margin:0;padding:0;}  六.不需要重復定義可繼承的值  CSS中,子元素自動繼承父元素的屬性值,象顏色、字體等,已經在父元素中定義過的,在子元素中可以直接繼承,不需要重復定義。

但是要注意,瀏覽器可能用一些默認值覆蓋你的定義。

  七.最近優先原則  如果對同一個元素的定義有多種,以最接近(最小一級)的定義為最優先,例如有這么一段代碼  Update: Loremipsum dolor set  在CSS文件中,你已經定義了元素p,又定義了一個classupdate  p {margin:1em 0;font-size:1em;color:#333;}.update {font-weight:bold;color:#600;}  這兩個定義中,class=update將被使用,因為class比p更近。

你可以查閱W3C的 Calculating a selectors specificity 了解更多。

  八.多重class定義  一個標簽可以同時定義多個class。

例如:我們先定義兩個樣式,第一個樣式背景為#666;第二個樣式有10 px的邊框。

  .one{;background:#666;}.two{border:10px solid #F00;}  在頁面代碼中,我們可以這樣調用  <div class=one two></div>  這樣最終的顯示效果是這個div既有#666的背景,也有10px的邊框。

是的,這樣做是可以的,你可以嘗試一下。

  九.使用子選擇器(descendant selectors)  CSS初學者不知道使用子選擇器是影響他們效率的原因之一。

子選擇器可以幫助你節約大量的class定義。

我們來看下面這段代碼:  <div id=subnav><ul><li class=subnavitem> <a href=# class=subnavitem>Item 1</a></li>><li class=subnavitemselected> <a href=# class=subnavitemselected> Item 1</a> </li><li class=subnavitem> <a href=# class=subnavitem> Item 1</a> </li></ul></div>  這段代碼的CSS定義是:  div#subnav ul { /* Some styling */ }div#subnav ul li.subnavitem { /* Some styling */ }div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }div#subnav ul li.subnavitemselected { /* Some styling */ }div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }  你可以用下面的方法替代上面的代碼  <ul id=subnav><li> <a href=#> Item 1</a> </li><li class=sel> <a href=#> Item 1</a> </li><li> <a href=#> Item 1</a> </li></ul>  樣式定義是:  #subnav { /* Some styling */ }#subnav li { /* Some styling */ }#subnav a { /* Some styling */ }#subnav .sel { /* Some styling */ }#subnav .sel a { /* Some styling */ }  用子選擇器可以使你的代碼和CSS更加簡潔、更加容易閱讀。

版權聲明:本文由 魏靈珊 整理編輯。

原標題:網頁制作css代碼大全,網頁制作html與css

轉載注明出處:http://www.dn9ww09s.icu/program/12577.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 運營商設置必要更新嗎,蘋果怎么關掉運營商更新提示

    運營商設置必要更新嗎,蘋果怎么關掉運營商更新提示 相關圖片蘋果xr運營商設置更新有時你的iPhone會跳出關于更新運營商設置的提示。其實,這很簡單。這相當于運營商在網絡中有一個版本更新。一般來說,它可以更新新的功能或優化信號和網絡速...

  • mobile,tmobile

    mobile,tmobile 相關圖片怎么開發app軟件在PC發展的初期,傳統的C/S模式大多演變為B/S模式,SAAS和云計算的概念和應用應運而生。從客戶端到瀏覽器的演進最大的優點是客戶端不需要更新,這減少了大量更app軟...

  • 無法連接app store,蘋果appstop無法連接

    無法連接app store,蘋果appstop無法連接 相關圖片app無法連接IPhone應用程序是從App store下載和安裝的,但當IPhone用戶無法連接App store時,他們將迎頭趕上。為什么iPhone不能連接到app sapp store...

  • 垂直居中一個浮動元素,怎么使浮動的元素垂直居中

    垂直居中一個浮動元素,怎么使浮動的元素垂直居中 相關圖片浮動居中場景:在固定高度div中,有一個浮動元素,需要垂直居中。原始代碼如下:代碼如下:!Doctypehtmlhtmlheadtitle/titletyletype=div怎么垂直居中...

  • 如何創建apple id賬號,如何創建apple id

    如何創建apple id賬號,如何創建apple id 相關圖片蘋果id此時無法創建您的賬戶如果蘋果用戶想在蘋果設備上享受這些服務,他們首先必須有一個蘋果ID,包括iPhone。iPhone到達時需要激活,還需要使用用戶的apple ID。如何創建應用怎么重...

  • 開啟upnp,upnp開啟還是禁用

    開啟upnp,upnp開啟還是禁用 相關圖片upnp怎么使用UPnP是什么意思?UPnP(universal plug and play,通用即插即用)是全球范圍內各種智能設備、無線設備、個人計算機等實現對等網絡連接(Pupnp使用...

  • css怎么做按鈕,css按鈕

    css怎么做按鈕,css按鈕 相關圖片css按鈕切換今天,我們將為所有網友帶來另一個CSS實現的鼠標通過按鈕的特殊效果。在按鈕的開頭,邊框是一個斷開的按鈕。當鼠標通過該按鈕時,動畫將變為閉合邊界。呈現如下:讓...

  • 三星可折疊手機,三星可折疊手機圖片

    三星可折疊手機,三星可折疊手機圖片 相關圖片三星的可折疊屏隨著全屏幕的出現,三星開始將手機進化的方向轉向折疊式屏幕。最近,三星的可折疊手機再次爆出新信息。三星的可折疊手機采用7.3英寸屏幕,可以像之前所說的左右...

  • 框架模板,網站框架模板

    框架模板,網站框架模板 相關圖片PPT模板網頁設計通常需要事先考慮很多因素,而用戶給你的時間非常有限。如何提高效率其實是一個比較煩人的問題。一種可行的方法是使用準備好的框架和模板。HTML5框架、模板和前端...

  • 3dtouch功能是什么,iphone3d touch是什么

    3dtouch功能是什么,iphone3d touch是什么 相關圖片3d touch有什么用3D touch是首次在iPhone 6S上推出的一種三維觸摸技術,屏幕可以感知不同壓力感應力的觸摸,會彈出一個半透明的菜單,菜單中包含了應用程序下的一些快捷操3d touch...

熱評文章

  • 199電信卡收不到驗證碼,199號段有些軟件不認

    199電信卡收不到驗證碼,199號段有些軟件不認 相關圖片199號碼無法注冊一些手機用戶在網上選擇號碼時發現199段,這與之前很多用戶選擇的號碼段不同。199段有自己的首選號碼,所以他們首先要進入pit,我們需要知道199段是中國電信最199號...

  • 渲染性能,優化渲染為性能

    渲染性能,優化渲染為性能 相關圖片渲染cpu推薦編寫CSS的習慣決定了頁面呈現的速度,這在大腦受損的ie中更為明顯。養成良好的習慣,甚至形成一個標準,會使你的頁面加載速度更快,用戶體驗更高。這里有一些方法來提...

  • icloud云備份有什么用,icloud 云備份

    icloud云備份有什么用,icloud 云備份 相關圖片icloud云備份是默認打開的嗎Icloud云備份可以幫助我們備份應用數據、通話記錄、IMessage信息、短信、彩信、照片和視頻等,是一項非常實用的功能,我們在恢復出廠設置或更換機器時經常...

  • project激活碼,project2010激活碼

    project激活碼,project2010激活碼 相關圖片project激活教程一些用戶不熟悉Project2010。Project 2010是微軟公司開發并銷售的一款項目管理軟件,全稱為microsoftproject2010。作為微軟的project2010如何激活...

  • 自定義屬性,自定義屬性在哪

    自定義屬性,自定義屬性在哪 相關圖片css自定義屬性當然,高級瀏覽器可以通過腳本定義和訪問數據。在項目實踐中非常有用。例如,代碼如下:div id=user data uid=12345 data uname=hhtml5自定義屬性...

  • 收到查找iphone已禁用啥意思,蘋果id不能用了怎么辦

    收到查找iphone已禁用啥意思,蘋果id不能用了怎么辦 相關圖片蘋果id被別人登錄怎么辦iPhone上的許多操作都離不開蘋果ID,但有些人被盜,有些人操作不當,導致蘋果ID被禁用。在這種情況下我們該怎么辦?如果由于安全原因而鎖定了Apple ID,蘋果...

  • 心形圖案,qq分組圖案玫瑰心形

    心形圖案,qq分組圖案玫瑰心形 相關圖片qq桃心圖案渲染:提示:將代碼復制到HTML文件并保存。直接打開看效果。實現代碼:代碼如下:!Doctypehtmlhtmlheadmeta charset=gbktitlqq愛心圖案...

  • 電腦過熱關機,電腦總是過熱關機

    電腦過熱關機,電腦總是過熱關機 相關圖片筆記本頻繁過熱關機谷歌的親兒子系列Google pixel 3于2018年10月9日發布。谷歌Pixel3的售后服務經常出現一些漏洞。近日,谷歌Pixel3被曝光存在問題。一些用電腦過熱關機要等多久...

  • animation屬性,animation的屬性及其意思

    animation屬性,animation的屬性及其意思 相關圖片animation元素一、動畫語法1,@key frames插入關鍵幀(1)form to form:CSS code復制內容到剪貼板@keyframes demo{from{proanimation教程...

  • 獨立顯卡怎么接顯示器,獨立顯卡接顯示器沒顯示

    獨立顯卡怎么接顯示器,獨立顯卡接顯示器沒顯示 相關圖片獨立顯卡接口我們使用的大多數普通計算機都是集成顯卡。當用戶開始顯示或擁有具有獨特顯示的主機以獲得更好的體驗時,則不需要將顯示器連接到集成顯卡端口。那么顯示器是如何...

關注微信

变脸官网查询