文字段落的樣式屬性
color:設(shè)定一個標簽中的文字的顏色,顏色值可以使用英文單詞躯枢,16進制語法和rgb語法黍檩,如:color: red; color: #f0fcf8;color:rgb(123, 88, 205);
font-size: 設(shè)定文字大小,單位通常為像素(px)—— 一般的商業(yè)網(wǎng)站的文字大小通常都是12px只泼。
font-weight: 設(shè)置文字粗體(bold)或非粗體(normal)。
font-style: 設(shè)置文字斜體(italic) 或非斜體(normal)
font-family:設(shè)置文字的字體名字软驰,可以使用多個字體名涧窒,中間用逗號分開,表示的含義是:首先使用第一個字體锭亏,如果用戶電腦中沒有第一個纠吴,則使用第二個,以此類推慧瘤。舉例:font-family: 宋體呜象,仿宋,微軟雅黑碑隆,arial, “Times New roman”;
line-height:設(shè)置文字的行高,單位通常也是px蹬音,即一行文字所占據(jù)的空間高度——行高不是文字的高度上煤。
letter-spacing:設(shè)置字符(或字母)之間的間隔距離,中文其實就是“字”的間隔著淆。
word-spacing:設(shè)置單詞之間的間隔距離——通常只對西方拉丁語系的字符有效劫狠。
text-align:設(shè)定文字的水平對齊方式。其功能是相當于標簽屬性中的align屬性永部。但要注意:align作為html屬性独泞,其實只在其中的某幾個標簽中使用,但text-align是幾乎所有標簽都可以用的苔埋。
text-indent: 設(shè)定一個段落中的首行縮進距離懦砂,單位通常也是px。
text-decoration:設(shè)置文字的“修飾線”:下劃線(underline),中劃線(line-through)组橄,上劃線(overline),none(無)
vertical-align: 設(shè)定文字在一個表格盒子(單元格)的垂直對齊方式:top(頂對齊)荞膘,middle(中對齊),bottom(底對齊)
盒子模型初步
一個盒子的各個組成部分由下圖所示:
圖片.png
圖片.png
盒子是css中最重要的概念玉工。
首先先建立一個觀念: 幾乎所有標簽其實都是一個盒子——而所謂盒子羽资,無非就是一個“矩形的區(qū)域范圍而已”。其實所謂網(wǎng)頁遵班,無非是一個盒子套一個盒子屠升。
一個盒子有如下一些區(qū)域(結(jié)構(gòu))構(gòu)成:
邊框(border):一個線型的區(qū)域,可以是實線或虛線或其他形狀狭郑。
外邊距(margin):也叫“邊界”腹暖,邊框線之外的一塊空白區(qū)域,其含義是“不能放置物體”
內(nèi)邊距(padding):也叫“補白”愿阐,邊框線之內(nèi)的一塊空白區(qū)域微服,其含義也是“不能放置物體”
內(nèi)容區(qū)(沒有對應(yīng)的css屬性名):指一個盒子中可以放置“物體”的區(qū)域——也就是盒子的主要區(qū)域。其中放置的物體可以是普通的文字或其他標簽——對應(yīng)我們之前學的html中的“內(nèi)容部分”。內(nèi)容區(qū)通常只能設(shè)置其寬高屬性(width以蕴,height)糙麦。
“內(nèi)容與表現(xiàn)分離”思想
標簽具有“表形表意”之作用。其實也可以說丛肮,內(nèi)容和其表現(xiàn)混在一起赡磅。但現(xiàn)在:css技術(shù)其實可以將一個網(wǎng)頁中的各個標簽的表現(xiàn)都“提出來”放到一個專門的地方(比如style標簽中),剩余的部分(標簽和文字內(nèi)容等)被整體上稱為“結(jié)構(gòu)/內(nèi)容”宝与。這種做法就被稱為“內(nèi)容與表現(xiàn)分離思想”
盒子的兩種初始狀態(tài)(基本表現(xiàn))
類似div的盒子:一個盒子自動“占據(jù)一行”(不管其內(nèi)部內(nèi)容多少):這就是“塊盒子”(塊元素)焚廊。常用塊盒子:
p, hr, h1~h6, table, form, ul, li, ol, dl, dt, dd, blockquote, pre,
特點:可以設(shè)置固定的寬高,margin习劫,padding咆瘟,
類似span盒子:一個盒子中的內(nèi)容會跟同類的盒子并排在一行出現(xiàn),除非該行已滿诽里,則會自然到下一行——類似文字的表現(xiàn)特性袒餐。:這就是行內(nèi)盒子(行內(nèi)元素)。行內(nèi)盒子通常放“最終的數(shù)據(jù)內(nèi)容”谤狡,比如文本灸眼,圖片。其他行內(nèi)盒子:
b, strong, font, i, u, a, img, input, textarea, select,
特點:寬高不能設(shè)定墓懂,而是由其內(nèi)容“撐出”焰宣,margin和padding沒有上下方面的表現(xiàn)。
注:通常捕仔,行內(nèi)盒子是“小盒子”匕积,塊盒子是“大盒子”
布局初步(原理)
所謂布局,其實是指的將網(wǎng)頁內(nèi)容以一定的方式放到合適的位置上去逻澳。
將“當前版面”以視覺上界限明顯的方式進行劃分若干個區(qū)塊闸天,劃分只用兩種方式:
a)上下結(jié)構(gòu):此時,只要使用若干個盒子斜做,自然就是上下結(jié)構(gòu)苞氮,無需其他設(shè)置。
b)左右結(jié)構(gòu):此時使用若干個盒子瓤逼,并進行相應(yīng)的浮動笼吟,通常的模式:
i.2個盒子:一左一右
ii.3個盒子:兩左一右或兩右一左,或一邊倒霸旗。
iii.更多盒子:通常一邊倒贷帮。
浮動
浮動就像水中的氣泡,會“向上浮”诱告。更形象的比喻:大家(所有標簽)都在“地面上平鋪著”撵枢,各自占據(jù)著一定的面積,浮動元素卻“浮”到天花板上去了,并占據(jù)大家通常的“地面面積”锄禽。
浮動除了表現(xiàn)上不跟別的元素搶占地盤之外潜必,其最主要的特性(也就是破壞效果)其實是:使其父盒子失去合理高度——父盒子已經(jīng)包不住其這些浮動的內(nèi)部盒子了!這在布局中基本上是不允許的沃但!那么我們就必須使用補充的做法來實現(xiàn)合理包含——父盒子包住子盒子磁滚。讓父盒子獲得正確有效高度的方法有3個:
1、給父盒子設(shè)置一個固定的高度——通常設(shè)計時已知高度且不回改變的時候宵晚。(固定高度)
2垂攘、給父盒子的內(nèi)部最末尾加一個清除浮動的空盒子,如下:<div style=”clear:both”></div>(自動高度)
3淤刃、給父盒子設(shè)置一個css屬性:overflow:hidden;(自動高度)
最好總結(jié):布局需要左右排列晒他,左右排列需要浮動,浮動需要修正其破壞效果——讓父盒子合理包住其子盒子逸贾。