黑馬程式設計師 自學筆記 CSS基礎

2021-06-18 17:44:55 字數 3674 閱讀 8315

---------------------- asp.net+android+ios開發、.net培訓、期待與您交流! ----------------------

1、樣式表、css

1)css(層疊樣式表,cascadingstyle sheet)是用來美化頁面用的,可以對頁面元素進行更精細的設定,樣式主要描述元素的字型顏色、背景顏色、邊框等。

2)使用css的好處:

樣式表能實現內容與樣式的分離,方便團隊開發

方便統一定義格式,修改也方便.

外觀美化 布局、定位

html標籤的外觀樣式比較單一

頁面色彩不生動

樣式修改不方便

樣式表的作用:為網頁設定外觀,相當於華麗的衣服。

2、常見css樣式

1)css樣式的屬性的鍵值對之間用「:」(冒號)隔開,而不同的屬性之間用」;」(分號)隔開。

2)css計量單位:css中表示寬度、距離時有多種計量單位:px(畫素)、30%(百分比)、em(相對單位)等。width:20px。

3)background-color:red;背景顏色;

4)color:文字顏色

5)border-style:solid;邊框風格,實線(預設是沒有),還有dotted(點)等值;

6)border-color:邊框顏色;

7)border-width:邊框寬度(預設是0)。

style="border-color:red;border-width:1px;border-style:dotted;"

8)display:元素是否顯示,可選值none(不顯示)、block (顯示為塊級元素,此元素前後會帶有換行符。)、inline(顯示為內聯元素,元素前後沒有換行符 ,為div增加display:inline;樣式後與span顯示效果一致。注意:【

】)等。

9)cursor,滑鼠在元素上時顯示的游標圖示,可選值:cursor(預設游標)、pointer(超連結上的手)、text(輸入bean)、wait(忙沙漏)、help(幫助)等。還可以通過cursor:url(dinosau2.ani)使用ani、cur格式的自定義游標。

10)li不顯示圓點:list-style-type:none;一般設在li或者ul上

11)margin(與**的cellspacing屬性類似)、padding(與**的cellpadding類似。)

3、使用css的三種方式

css主要有元素內聯、頁面嵌入和外部引用三種使用方式。css是描述元素的**!

1)元素內聯(行內樣式表),直接將樣式寫入元素的style屬性中,,適用於樣式沒有可復用性的場合。

2)頁面嵌入(內嵌樣式表):在head中加入

表示頁面中所有input都是採用指定的樣式。適合於樣式復用,減小頁面體積

3)外部引用(外部樣式表),將css內容寫入css字尾的檔案

textarea

然後在頁面中引用,在head中加入

適合於多個頁面共享css。

4)推薦把盡可能多的樣式寫到單獨的css檔案中,這樣可以復用,美工人員和開發人員很好的分工。

只有頁面特有的樣式才寫到

li中的項橫排顯示是float:left;的作用,margin:010px;的作用是不讓各個項之間緊挨著。項之間的分割豎線是用乙個寬度為1,高度為18的紅色背景的li做的。

11、文件流

文件流:將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素。

position 有五個值:static、relative、absolute、fixed、inherit。

static

是預設值。就是按正常的布局流從上到下從左到右布局,平常我們做網頁時,沒有指定position,也就表示使用static。

relative

沒有脫離布局流,此時可以使用 top、right、bottom、left 屬性。

top 和 bottom 共存時,使用 top 值,忽略 bottom 值;

left 和 right 共存時,使用 left值,忽略 right 值;

relative 是相對位置,指相對於元素的 position 為 static 時的位置:

top 相對於 static 下移多少畫素(若 top 是負值,則上移)。

right 相對於 static 左移多少畫素(若 right是負值,則右移)。

bottom 相對於 static 上移多少畫素(若 bottom是負值,則下移)。

left 相對於 static 右移多少畫素(若 left是負值,則左移)。

使用 relative 之後:

原來的空間不會被其他元素擠占。

元素在最終位置時也不會擠占其他元素的空間,它浮動到其它元素的上方。

absolute

脫離布局流,此時可以使用 top、right、bottom、left,但這些屬性不再是相對於 static時的位置,而是相對於 containingblock 的,相對於其邊框內邊緣的,而不是其padding 內邊緣。

使用 absolute 之後:

原來的空間會被其他元素擠占。

元素在最終位置時也不會擠占其他元素的空間,它浮動到其它元素的上方。

fixed

它的模式與 absolute 相同,不過無論怎麼拖動滾動條,它始終固定在螢幕的指定位置。在ie6 中不支援這個屬性;在ie7 中支援這個屬性但需要指明doctype;firefox 等瀏覽器支援這個屬性。

top、right、bottom、left 屬性指相對於視口的。

inherit

繼續父元素的 position 值。

名稱解釋

視口-通過解析文件,連續**(比如螢幕就是連續**,而印表機則是基於頁的**)給使用者產生乙個視口(乙個視窗或其它在螢幕上顯示的區域)。

12、框架簡介

1)frameset  框架頁裡不能有body.

當瀏覽器不支援框架時,顯示這個body中內容

測試target屬性的其他取值:top、parent、框架名。

2)iframe(不分割當前頁面,就可以嵌入其他頁面。)

3)rows:表示把頁面按照行,分割成幾部分

cols:表示將頁面按列分割成幾部分。

frameset:是將乙個頁面分割成多個子頁面。

iframe:是在乙個頁面中(在body中)的某個 部分。嵌入乙個新頁面。

13、其他及盒子模型

1)當使用**布局的時候,不要建乙個非常複雜的**,而是使用**巢狀**,這樣雖然**會多點,但思路清晰,便於修改。

2)!important提高優先順序。(color:red!important;  color:green;最後顯示是red;)

3)z-index

4)@importurl(xx.css);

在乙個css中,新增對其他css檔案的引用。

5)/css中的注釋:/*   */

6)盒子模型。

---------------------- asp.net+android+ios開發、.net培訓、期待與您交流! ----------------------

黑馬程式設計師 自學隨堂筆記 包

包與包之間進行訪問時,被訪問的包中的類以及類中的成員需要被public修飾。不同包之間的子類,可訪問父類中被protected修飾的成員,非子類訪問不來許可權大小 是否成員能互相訪問?public protected default 預設 private 同一類中 同一包中 子類 不同包中 建立乙個...

黑馬程式設計師 c 基礎

windows phone 7手機開發 net培訓 期待與您交流!變數 變數本身被用來儲存特定型別的資料,可以根據需要隨時改變變數中所儲存的資料值。變數具有名稱,型別和值。變數代表著一塊記憶體空間,我們可以通過變數名稱向記憶體存 取資料,有變數就不需要記憶複雜的記憶體位址。資料型別 變數名 命名規範...

黑馬程式設計師 Windows Forms基礎

windows phone 7手機開發 net培訓 期待與您交流!1.文字框主要用於使用者輸入。text 屬性包括使用者輸入的值。還可以在設計時或執行時為文字屬性指定乙個值。2.分組框用作其他控制項的容器,將窗體上相似的專案組合在一起 3.核取方塊和單選按鈕允許使用者進行選擇。在一組單選按鈕中,只能...