CSS學習心得

2021-10-21 16:36:40 字數 2032 閱讀 7648

三、網頁結果呈現

一條css樣式規則由兩個主要的部分構成：選擇器，以{}包裹的一條或多條宣告:

這條規則表明，頁面中所有的一級標題都顯示為藍色，字型大小為12像數。

說明：

1、選擇器是您需要改變樣式的物件（上圖的規則就一級標題生效）。

2、每條宣告由乙個屬性和乙個值組成。（無論是一條或多條宣告，都需要用{}包裹，且宣告用;分割）

3、屬性（property）是您希望設定的樣式屬性（style attribute）。每個屬性有乙個值。屬性和值被冒號分開。

乙個頁面上的元素眾多，選擇器就用於在頁面中找到/選擇需要應用這個樣式的物件。

除我們前示的元素選擇器外，還有id和class選擇器。其中class選擇器使用非常普遍。

#sky
注意：id選擇器前有 # 號。 這條規則表明，找到頁面上id為sky的那個元素讓它呈現藍色。因為在html中，元素的id值必須唯一。 所以，id 選擇器適用範圍只有乙個元素。

.center


.large


.red
注意：class選擇器前有 . 號。 以上**定義了三條規則，分別應用於頁面上對應的元素，如只要頁面上某元素的class為red，那麼就讓它呈現紅色。元素的class值可以多個，也可以重複。

新建如下內容的乙個 html檔案（字尾為.html)：

<


!doctype html>


"utf-8"


>


<


!-- 注意下面這個語句，將匯入外部的 mycss.css 樣式表檔案 -->


"stylesheet" type=


"text/css" href=


"mycss.css"


>


頁面標題


"haha"


>還是有點醜：)
在同一目錄新建乙個樣式表檔案mycss.css（注意字尾名為css）如下：

body 


h1 .haha
引入外部樣式表是我們使用樣式的主流方式，因為眾多的樣式規則單獨放在乙個檔案中，與 html 內容分開，結構清晰。同時其它頁面也可使用，達到復用的目的。

除外部樣式表之外還有內部樣式表和內聯樣式，一般而言，只有頁面的樣式規則較少時可採用。內聯樣式是最不靈活的一種方式，完全將內容和樣式合在一起，實際應用中非常少見。

樣式的優先順序，從高到低分別是：內聯樣式、內部樣式表或外部樣式表、瀏覽器預設樣式。可總結為哪個樣式定義離元素的距離近，哪個就生效。

盒子模型指的是乙個 html 元素可以看作乙個盒子。從內到外，這個盒子是由內容 content, 內邊距 padding, 邊框 border, 外邊距 margin構成的。

當元素內容超過其指定的區域時，我們通過溢位overflow屬性來處理這些溢位的部分。

溢位屬性有一下幾個值：

在乙個區域或容器內，我們可以設定float屬性讓某元素水平方向上向左或右進行移動，其周圍的元素也會重新排列。我們常用這種樣式來使影象和文字進行合理布局。

前面我們學習了 css有三種選擇器：元素、id 和 class 。但我們也可以進行組合，以得到簡潔精確的選擇。下面我們介紹兩種組合選擇器。

css學習心得總結

一 在html中引用css的兩種方式 1 一般放在head中 2 二 css樣式 1 bodydiv應用於分別body和div標籤，順序有次作用 後者會覆蓋前者應用區域中屬於自己的作用區域 巢狀 2 charater.dialog,directions定義class,後者表示兩個類名不同，類體一致 ...

CSS新手學習心得

在剛學css的時候，總會遇到這樣或那樣的問題，所以我盡可能把它們都總結下來，也算是給自己乙個提醒，當然有人能讀到我的部落格能夠有所收穫自然是更妙。總結如下 1.在寫網頁版心的時候，一定要注意 div多使用百分比的方法來寫，這樣網頁的適應程度高，可以自適應很多電子裝置 2.在用css布局時要用大盒子把...

學習心得 python學習心得

自從來了深圳工作以後，尤其是屢屢面試碰壁以後。發現其實自己的知識面很窄，做筆試題的時候絞盡腦汁還是漏洞百出，並不是不會做，而是出現一大堆不該有的失誤。每次被問道，對資料庫了解嗎？說一大堆看起來很高階的東西 好啊，那我們寫幾個sql語句吧。馬上完蛋了，沒了手冊關鍵字都記不起。了解哪幾種指令碼語言，sh...