初探HTML之CSS篇(屬性)

CSS(層疊樣式表)

CSS是一種用來表現HTML或XML等檔案樣式的電腦語言。 CSS不僅可以靜態修飾網頁，還可以配合各種腳本語言動態地格式化網頁哥元素。

CSS能夠對網頁中元素位置的排版進行像素精確控制，幾乎支援所有的字體字號樣式，擁有對網頁物件和模型樣式編輯的能力。

CSS 尺寸屬性(Dimension)

height 設定元素高度
width 設定元素寬度
max-height .輸出min-width 設定元素的最小寬度

CSS 背景屬性(Background)

background 在一個聲明中設定所有的背景屬性

background-color 

background-position 設定背景圖片的位置

top 上方

right 右方

left  左方

center 

repeat-y 縱向重複

no-repeat 不重複

background-attachment 背景圖片是否隨著頁面的捲動而捲動

CSS邊框屬性(Border和Outidline

border    設定所有的邊框屬性   

border-bottom    設定下邊框   

border-bot  

border-botton-width    設定下邊框的寬度   

border-color    設定四條邊框的顏色   

border-left    設定左邊框   

border-left-color  設定左邊框   

border-left-color  設定左邊框框樣式   

border-left -width    設定左邊框的寬度   

border-right-    設定右邊框   

border-right-color    設定右邊框的顏色  p.com   設定右邊框的寬度   

border-style    設定四條邊框的樣式   

solid    樣式為實線   

double   雙實線(Livep)(p 6/7下表現為實線)

dashed    虛線(在IE6/7下表現為實線)    

border-top    設定上邊框   

border-top-color  設定上邊框   

   

border -top-width    設定上邊框的寬度   

border-width    設定四條邊框的寬度   

outline     設定輪廓的樣式   

outline-width設定輪廓的寬度   

border-bottom-left-radius    定義邊框左下角的形狀   

border-bottom-right-radius     

border-top-right-radius    定義邊框右上角的形狀   

border-radius    簡寫屬性，設定所有四個border-*-radius屬性   

border-image border-image-outset    規定邊框影像區域超出邊框的量   

border-image-repeat    影像是否應平舖(repeated)、鋪滿(rounded)或拉伸(stretched)的向內偏移   

border-image-width    規定圖片邊框的寬度   

border-image-source    規定用作邊框的圖片 

CSS字體屬性(Font)

屬性

描述

font    設定所有的字體屬性   

font-family    設定文字的字體系列   

font-size  設定文字值   

font-stretch    收縮或拉伸目前的字體系列   

font-style    設定文字的字體樣式   

font-variant    設定文字中英文的開啟方式   

er居中 left 左對齊 right 右對齊

letter-spacing 設定文字間距

text-decoration設定文字修飾線

none 主要用於移除a 標籤的下劃線🜎線

underline刪除線

注意：如果一個子元素放置另一個元素(父元素)內，給父元素設定 text-decoration 會發現子元素的text-decoration無法清除乾淨

解決方案：

1、使用絕對定位 position : ansolute

2、設定浮動 float

text-transform 設定大小寫轉換

uppercase 所有單字全部大寫

lowercase 正常

italic 斜體字

oblique 傾斜的文字

font-variant設定文中英文的開啟方式

nomal 傾斜的文字

屬性(Text)

屬性

描述

color    設定文字的顏色   

dir p.

line-height    設定行高   

text -align    規定文字的水平對齊方式   

vertical-align    規定文字的垂直對齊方式   

text-decoration       控製文本的大小寫   

unicode-bidi    設定文字方向   

white-space    規定如何處理元素中的空白   

屬性

描述

border    設定邊框   

border-color    設定邊框顏色   

cellspacing  

background-color    設定表格的背景顏色   

background-url    設置表格的背景圖片   

colspan    橫向合併單元格   

rowspan    縱向合併單元格   

合併 3、確定需要合併幾個單元格 4、處理多餘的單元格

CSS列表屬性(List)

的清單屬性   

list-style-image    將影像設定為清單項目標記   

list-style-position    設定清單項目標記的放置位置  中，一般在psdding內   

list-style-type    設定清單項目標記的類型   

複合寫法

list-style    1、類型margin:0px;

list-style:none;

CSS 外邊距屬性（Margin）

margin- top    設定元素的上外邊距   

margin-bottom    設定元素的下外邊界

CSS 內邊距屬性（Padding）

屬性

描述

padding    在一個聲明中設定所有內邊距屬性   

padding-top    設定元素的上內邊距   

padding-right    設定元素的右內邊距   

padding-bottom  

CSS 定位屬性（Positioning）

屬性

描述

position    

right    設置定位元素右外邊距邊界與其包含塊右邊界之間的偏移   

left    設定定位元素左外邊距邊界與其包含塊左邊界之間的偏移   

top    設置定位元素上外邊距邊界與其包含塊上方塊上塊上塊上塊邊界之間的偏移   

overflow    規定當內容溢出元素框時發生的事情   

cursor    規定要顯示的光標的類型   

float  規定要顯示的遊標的類型   

float  規定要顯示的遊標的類型      

vertical-align    設定元素的垂直對齊方式   

visibility    規定元素是否可見   

z-index    設定元素的堆疊順序

屬性

描述

：active    在啟動的元素中加入樣式   

：focus    向擁有鍵盤輸入焦點的元素添加樣式   

：hover link  的連結新增樣式   

：visited    為已被存取的連結新增樣式   

：lang    為具有指定lang屬性的元素新增樣式   

）

屬性

描述

：first-letter    在文字的第一個字母中加入特殊樣式   

：first-line    after    在元素之後加入內容   

結論

簡單不先於複雜，而是在複雜之後

更多初探HTML之CSS篇(屬性)相關文章請關注PHP中文網！ 🎜