CSS布局基礎語法和CSS經常用到的知識點整理

2021-06-07 17:40:41 字數 2037 閱讀 6461

css基礎語法

css 規則由兩個主要的部分構成:選擇器,以及一條或多條宣告。

每條宣告由乙個屬性和乙個值組成。

每個屬性有乙個值。屬性和值被冒號分開。

例如:下面這行**的作用是將 h1 元素內的文字顏色定義為紅色,同時將字型大小設定為 14 畫素。

在這個例子中,h1 是選擇器,color 和 font-size 是屬性,red 和 14px 是值。

h1 //看見後面有分號,如果是乙個屬性或者這個屬性在尾部可以不加分號,除了這兩種情況必須加 不然頁面是很錯亂的

********************===

css布局頁面居中問題

可以先設定

body

有的瀏覽器即使設定這個也不會居中的那麼就要加上這句dtd申明**

***************====

body和div背景設定問題

①、background-color//背景顏色屬性

②、background-image:url('背景路徑');//背景屬性

body p

③、如果需要在頁面上對背景影象進行平鋪,可以使用 background-repeat 屬性。

背景定位

可以利用 background-position 屬性改變影象在背景中的位置。

下面的例子在 body 元素中將乙個背景影象居中放置垂直平鋪:

body

body是標籤名,background-color,background-image,background-repeat是屬性,blue是屬性值等

當然這些屬性可以用一句話綜合寫起來 看下面屬性綜合寫法

***************==

多個標籤組合

h1,h2,h3 //是逗號分開的 一般用在有的標籤樣式一樣就可以寫在一起這樣就減少**的使用,能重複呼叫

把標題的字型顏色都變為紅色

***************==

屬性綜合寫法

div // 這是字型相關屬性的綜合寫法

div的字型風格(font-style)屬性值是italic,字型變數(font-variant)屬性值是normal,字型濃淡(font-weight)屬性值是bold,字型大小(font-size)屬性值是11pt,字型名稱(font-family)屬性值是arial

p//這是邊距屬性綜合寫法 大小 樣式(solid為實線 dashed為虛線 dotted為點線。。。還有自己總結)你看到沒我這一句css**結尾沒分號;是可以的上面已經講過了

***************=

標籤巢狀

div h1

div裡面的字型顏色為藍色。

div是 h1的父親 h1是div的兒子 我在寫css樣式都是用這樣的為什麼呢?

原因是你想想就知道了 世界有很多人難道都是你父親嗎 你用標籤巢狀,即使這個父親的兒子名字一樣但是這個兒子還是這個父親的不會是另個人的,所以當你巢狀了就不怕 在其他地方重複用這個標籤名或類名(id選擇器是唯一的不能重複)

***************

定義id

#main

hello

//那麼直接呼叫#mian

這裡是用#+id名是方式,也可以用標籤名加+#+id名,如div#main,一般不這麼用。

***************=

定義class

.red

hello

同id的寫法差不多,把「#」改為「.」 ,如果乙個標籤同時定義了id跟class,id具有優先順序。

*表示該標籤下的所有元素樣式

body *

用得比較少

***************=

好了沒時間就總結這麼多 最好要記住

樣式優先順序

(1) 標籤中的style > id > class 

(2) 標籤中的style > 頁面中的style > 匯入的樣式@import

(3) 用link,如,更寫在頁面上同等級的。

如果同樣的樣式定義了2次,後面出現的具有優先順序。

本篇文章**於 最好的php學習網-愛微網|

CSS基礎語法和CSS經常用到的知識點總結

css基礎語法 css 規則由兩個主要的部分構成 選擇器,以及一條或多條宣告。每條宣告由乙個屬性和乙個值組成。每個屬性有乙個值。屬性和值被冒號分開。例如 下面這行 的作用是將 h1 元素內的文字顏色定義為紅色,同時將字型大小設定為 14 畫素。在這個例子中,h1 是選擇器,color 和 font ...

CSS語法基礎CSS語法基礎1 基本語法

css語法基礎css語法基礎1.基本語法 css的定義是由三個部分構成 選擇符 selector 屬性 properties 和屬性的取值 value 基本格式如下 selector 選擇符 選擇符是可以是多種形式,一般是你要定義樣式的html標記,例如body p table 你可以通過此方法定義...

CSS基礎布局

一 瀏覽器如何解析css 三種引用樣式表 1 嵌入式 2 style標籤 3 外部css檔案 二 盒模型 html中每乙個塊元素基本上都可以看成乙個盒子,這個盒子的寬和高,外加內邊距 邊框粗細和外邊距這些東西,決定了元素的尺寸。如果定義了乙個寬50畫素的盒模型,padding 2px,border ...