html學習筆記04 css div

2021-08-21 17:28:35 字數 3250 閱讀 6575

div+css布局

css中文翻譯為層疊樣式表,是用於控制網頁樣式並允許將樣式資訊與網頁內容分離的一種標記

性語言。

div 全稱 division 意為「區塊、分割」, div標籤是乙個無意義的容器標籤,用於將頁面劃分出不

同的區域。

通過div將複雜的頁面進行細分塊,可以將問題細分乙個乙個解決,所以通過div將頁面分塊是一

個關鍵的工作,也是決定最終效果與質量的前提.

div承載的是內容,css承載的是樣式

優點:1.div+css是web標準,順應潮流

2. 彌補html標籤的功能缺陷。

3. 加快頁面載入的速度,降低流量費用。

4. 對搜尋引擎更加友好,更有利於收錄和抓取您的頁面。

5. 使頁面的內容和表現分離,便於維護和管理,節省大量的人力和成本。

缺點:1. 使用相對複雜

相對html中的table布局來說,div+css布局相對要複雜些,需要掌握的知識更多些

2. css**設計的瀏覽器相容性問題比較突出。

各個瀏覽器對css的支援略有不同,但這些細小的不同也會使**在各個瀏覽器中有較

大的顯示差異,甚至是面目全非。

css樣式

使用css控制頁面樣式的方式:

1. 行內樣式

2. 嵌入樣式

3. 外部樣式

4. 匯入樣式

@import url(外部樣式表位置);

優先順序:

行內樣式表 > 其他的樣式表

其他的樣式表,優先順序一樣,按照匯入的順序來確定他們是否起作用

css選擇器

當我們定義一條樣式規則時候,這條樣式規則會作用於網頁當中的某些元素,而我們的規定

的這些元素的規則就叫做選擇器。

1.id選擇器

#idname

2. 類選擇器

.classname

3. 標籤選擇器

tagname

4. 交叉選擇器

tagname.classname tagname#idname

5.群組選擇器

多個選擇器用 「,」隔開

6. 後代選擇器 (包含選擇器 )

父級和子級 用空格 隔開

7. 通用選擇器

8.偽類選擇器

同乙個html元素在不同狀態下的不同樣式,只有a元素和p元素可以使用

例如:url的css使用

a:link /* 未訪問的鏈結 */

a:visited /* 已訪問的鏈結 */

a:hover /* 滑鼠移動到鏈結上*/

a:active /* 選定的鏈結 */

p標籤的css使用

p:first-letter

它可以選中段落p中的第乙個字母或中文字元。

p:first-line

用於選中元素中的首行文字。

繼承性後代元素會繼承前輩元素的一些屬性和樣式

疊加性同乙個元素,被多個樣式規則指定。

選擇器的優先順序

因為css的繼承性和疊加性,就有了css優先順序的概念。

所謂的優先順序,指的就是哪條樣式規則會最作用於指定的元素。

css注釋

任何語言都有注釋,當然css也不例外css的注釋為/*注釋內容*/

塊元素與行內元素

塊元素塊標籤即標籤元素是乙個塊,即有寬、高屬性,同時塊標籤會獨佔一行,比如說h1~h6、

p、li、div標籤等標籤都是塊標籤。

行元素行標籤正好與塊標籤意義相反,行標籤不具有寬、高特性,mrgin屬性的值,只有左右沒有

上下。也不會佔一行,所以我們可以利用行標籤對文字進行區塊指定不同的css樣式達到不

同的效果,行標籤也很多,如em、font、b及span標籤等

行內塊級元素

既有行元素的屬性即:不會獨佔一行,又有塊元素的屬性即:可以設定寬高,html中這種元素

比較少比如:

文件流html元素在標準狀況下的定位方式,會按照由上到下由左到右的順序排列行內元素在同一行內橫向排列 塊級元素佔滿整個一行,在頁面中豎向排列。

css文字屬性

1.font-family 可以把多個字型名稱作為乙個「回退」系統來儲存。如果瀏覽器不支援第乙個字型,

則會嘗試下乙個

2.font-size 屬性可設定字型的尺寸 網頁中的字型一般大小為12px 14px 16px 大一些的字型一般

採用來表示。

3.font-weight文字內容的粗細設定,normal按標準顯示,bold加粗顯示

4.font-style設定文字顯示風格,normal按標準顯示,italic傾斜顯示

5.text-decoration設定文字修飾風格,underline下劃線,overline上劃線,line-through刪除線,none去除文字修飾風格

6.font-variant字型是否為大寫,small-caps為大寫,normal為標準小寫。

7.color設定字型的顏色

中國sxuek.com

font{

font-style:italic //設定或檢索物件中的字型樣式

font-variant:normal //設定或檢索物件中的文字是否為小型的大寫字母

//前2項如果沒有特殊設定,可以不寫,用預設值即可

font-weight:bold;

font-size:12px;

line-height:20px;

font-family:"宋體";

縮寫後:

font{

font:bold 12px/20px "宋體"; //屬性依次為:字型的粗細 - 字型大小/行高 - 文字的字型

如果縮寫至少要定義 font-size 和font-family兩個屬性

文字段落

text-align

設定文字水平對齊方式,left左對齊,right右對齊,center居中對齊,justify兩端對齊

vertical-align

設定元素垂直對齊方式,super上標,sub下標,top與行中最高元素頂端對齊,middle父元素的中間位置,bottom與行中最低元素底端對齊. 常用來對齊表單元素和,在塊元素內不起作用,在行內元素中起作用。

line-height

設定元素的行高,字型行高 單行文字一般用來設定居中,多行文字用來設定行間距,常用單

位 em

text-indent

設定首行的縮排方式 text-indent:x單位 常用單位em

word-break:

自動換行 break-all

php學習筆記 04

預定義常量 php version 獲取當前使用的php版本號。file 獲取當前正在解析的檔名。如果如果這個常量在內部檔案中使用,則提取該檔名,而不是其父檔名。line 獲取當前正在解析的檔案的行數。如果中國常量在內部檔案中使用,則給出該內部檔案中的行數。e error 除非遇到解析時不可恢復的錯...

AJAX學習筆記04

ajax 學習筆記04 學習課程 學習內容 相關檔案 可伸縮的級聯選單和區域性重新整理 jquery menu.jsp jquery menu.js jquery.js jquery menu.css 實現效果 單擊主選單,切換相應主選單下的子選單的顯示狀態,預設子選單的狀態為隱藏 上面兩個ul和下...

Scala學習筆記04

try.catch.finally 處理異常的語句注意這裡的返回值,處於try字句裡面。finally裡如果顯示地加入return,則返回值處於finally字句裡。示例 def trytest catch finally 輸出 try 如果,finally字句裡寫成 return finally ...