今天是我學習web前端的第三天,也是學習css的第一天~
首先老師帶我們了解了什麼是css、使用css的目的和css語法規範。
css 是層疊樣式表 ( cascading style sheets ) 的簡稱,有時我們也會稱之為 css 樣式表或級聯樣式表。
使用css的主要目的就是為了美化我們的html頁面,使我們的頁面更加好看。
css的結構分為兩部分,分別是選擇器和樣式說明。它的語法格式如下:
其中要注意:①屬性和屬性值以「鍵值對」的形式出現;②屬性是對指定的物件設定的樣式屬性,例如字型大小、文字顏色等;③屬性和屬性值之間用英文「:」分開;④多個「鍵值對」之間用英文「;」進行區分。
接下來我們又學習了選擇器,選擇器的作用就是根據不同需求把對應的標籤選擇出來從而修改樣式。選擇器分為兩種,第一種是基礎選擇器,第二種是復合選擇器。
其中基礎選擇器又分為標籤選擇器、類選擇器、id選擇器和萬用字元選擇器四種,我們最常用的是類選擇器。
標籤選擇器是用html標籤名稱作為選擇器,作用是把把某一類標籤全部選擇出來,比如所有的標籤和所有的
標籤。它的優點是能快速為頁面中同型別的標籤統一設定樣式,缺點是不能設計差異化樣式,只能選擇全部的當前標籤。
類選擇器用 「.class」 作為選擇器,特點是可以同時選擇乙個或多個標籤,並且可以重複使用,class屬性還可以擁有多個類名,不過多個類名中間必須用空格隔開,此時使用這個class的標籤就可以分別具有這些類名的樣式。
id選擇器是用 "#id"作為選擇器,它的特點是每個html文件中只能出現一次且只能選擇乙個標籤。
萬用字元選擇器是用*表示頁面內的所有元素,統一修改樣式,我們只會在某些特殊情況時才會使用。
css的font屬性用於定義文字的字型、大小、粗細和文字樣式,其中font-family設定字型,chrome瀏覽器預設微軟雅黑;font-size設定文字大小,chrome瀏覽器預設大小為16px,;font-weight設定文字粗細,值有100、200、300、400、500、600、700、800、900等九個規格,其中400是標準粗細normal,700是加粗blod;font-style用來設定字型的傾斜,不過把字型設定為傾斜不常用,我們在開發中經常用它來把傾斜的字型變正。
font屬性還可以寫成復合形式,可以有效的節約**,不過順序是固定的,只能是font: font-style font-weight font-size/line-height font-family。需要注意的是style、weight、line-height不需要時可不寫,但是size和family必須要寫,否則這個復合形式不起作用。
文字顏色屬性是color,在實際開發中我們經常用十六進製制來選擇顏色。
文字對齊:text-align,可以設定文字水平方向上的對齊方式,left為左對齊,center為居中對齊,right為右對齊。不過這個屬性只適用於獨佔一行的標籤,例如、
等。
文字裝飾:text-decoration,可以設定文字下劃線、上劃線、刪除線等,不過我們開發中最常用的是利用它清除下劃線,比較常用的是新增下劃線,上劃線和刪除線很少用。屬性值none是預設沒有下劃線,underline是下劃線,overline是上劃線,line-through是刪除線。
文字縮排:text-indent,它的作用是將段落首行進行縮排,一般我們使用時屬性值為2em,em是當前文字乙個文字大小的距離。僅對獨佔一行的元素生效。(tip: 是1/2個中文寬度的空格,&emsp是乙個中文寬度的空格)
行間距:line-height,用於設定行間間隔,控制文字行與行之間的距離。行間距由三部分構成,分別是上間距、文字高度和下間距。
最後我們學習了css的引用方式,一共有三種,分別是行內樣式表、內部樣式表和外部樣式表。
行內樣式表就是直接在html標籤內寫樣式屬性,這種方法不能實現結構與樣式分離,且只針對乙個標籤生效,所以我們不推薦使用。
內部樣式表理論上可以放在html的任意位置,不過推薦放在
前端學習第三天
float left 設定左浮動 z index 100 重疊時顯示的順序,值越大越在上面 position fixed 固定 text align center 字型對齊方式 z index 屬性設定元素的堆疊順序 擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。所以,z index 9...
前端學習 第三天
css 指層疊樣式表 cascading style sheets 為了顯表現html 元素,使html內容與表現分離。當瀏覽器顯示文件時,它必須將文件的內容與其樣式資訊結合。它分兩個階段處理文件 1 瀏覽器將 html 和 css 轉化成 dom 文件物件模型 dom在計算機記憶體中表示文件。它把...
學習前端的第三天
一 1.的作用 顯示屬性 table,行 tr,列 td 2.中的屬性 width 寬度 height 高度 border 邊框 bordercolor 邊框顏色 cellspacing 相鄰單元格邊框間的間距 cellpadding 內容距邊框之間的間距 align center left rig...