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