整理于CSS筆記:
關于CSS作用:一是快速維護頁面元素的樣式屬性;二是彌補HTML元素的屬性不足;CSS又被稱作層疊樣式表。
關于CSS的元素屬性:
一:首先是長度單位:
1、寬度、高度用px(像素),也可以用%(百分比)。建議使用固定值;
2、顏色單位:A.顏色的直譯英文名稱,如:red(紅)、green(綠)、blue(藍);十六進制表示法:#ff0000;簡寫十六進制:#f00;RGB表示法:rgb(255,0,0);百分比RGB:rgb(100%,0%,0%)
二:
1、寬度和高度:
大部分元素都會用到這兩個屬性-------> width(設置寬度)、height(設置高度)
2、邊框:
border屬性,設置邊框的寬度、線性、顏色
表格(table)和盒子(div)因為看不到它的大小,我們一般都會用border設置顯示出邊框線;在border中還可以給上下左右單獨設置邊框線;border-top:寬度 線型 顏色;border-bottom:寬度 線型 顏色;border-right:寬度 線型 顏色;border-left:寬度 線型 顏色;線性我們有三種:none(無)|solid(實線)|dotted(點劃線)。
3、內邊距padding
就是設置表格或者盒子內的邊距,可以設置單獨上下左右和邊框相同;
4、外邊距margin
設置外部的邊距,可單獨設置上下左右。
5、控制元素的顯示方式屬性
可以控制元素不顯示,或者以什么方式顯示出來。如果不顯示在此元素style中加入即可:dispaly:none(不顯示)|inline(內聯對象)|block(塊級對象);
6、背景樣式
可以設置背景圖片,背景顏色,圖片的平鋪方式,背景圖片的位置;設置背景樣式(哪個部分不需要可以忽略不用寫):background:背景顏色 背景圖片 平鋪方式 水平位置 垂直位置;背景圖片----> url(圖片地址) 一定要寫 url 然后括號中寫上圖片地址;平鋪方式:no-repeat(不平鋪)|repeat-x(x軸平鋪)|repeat-y(y軸平鋪);水平位置(left|center|right);垂直位置(top|center|bottom)。
7、浮動樣式
使表格或者盒子中的內容全部靠左或者全部靠右,一把導航頁面都需要用到:float:left|right;
8、文本樣式
line-height設置行高
text-indent;設置首行縮進;首行縮進一般用于把按鈕上的文本向后隱藏
text-align:left|center|right;設置水平對齊方式
cursor:pointer;設置瀏覽器中鼠標形狀
font-weight:normal|bold;設置文本加粗效果
text-decoration:none|underline;設置文本下劃線樣式;一般用于把超鏈接的下劃線取消
9、列表樣式
list-style:樣式 url(圖片地址) 位置(inside|outside);我們一般只設置一項,就是樣式,其余可以忽略不寫。list-style:none;把列表前面的實心圓或空心圓取消;用于ul,ol。
10、定位屬性
定位屬性:position:fixed(固定的)|absolute(絕對)|relative(相對);我們先說固定(fixed):固定定位根據屏幕所定位,但是會遮住下面的文本。所以我們通常很少用。(PS:一般廣告多的網站會用);相對定位(relative):相對定位是子盒子根據父盒子定位,父盒子移動,子盒子移動;絕對定位(absolute):絕對定位根據屏幕左上角定位。一般我們用絕對定位都是用在相對定位的子盒子中;