CSS基本(初嚐)

2021-09-01 22:45:06 字數 2047 閱讀 8913

1.什麼是css

css(cascading style sheets)「層疊樣式表單」。

作用:修飾html的標籤。

如果把html比作乙個房子,html裡面的標籤看做是房子裡面的家具,那麼css就是裝修風格表,椅子是什麼顏色,桌子要多大尺寸等全都有css來決定。

2.css的使用

方式一:直接將css語句寫在jsp檔案中

jsp:

方式二:將css語句寫在.css檔案裡,然後jsp直接引用

css檔案:

input.common
jsp:

3.css語法

css的定義是由三個部分構成:選擇符(selector),屬性(properties)和屬性的取值(value)。

基本格式如下:

selector

(選擇符 )

選擇符是可以是多種形式,一般是你要定義樣式的

html

標記,例如body、p、table……。

一、選擇符

(1)選擇符組

你可以把相同屬性和值的選擇符組合起來書寫,用逗號將選擇符分開

例如:h1, h2, h3, h4, h5, h6 (這個組裡包括所有的標題元素,每個標題元素的文字都為綠色)

(2)類選擇符

定義類選擇符時,在自定類的名稱前面加乙個點號

a.假如你想要兩個不同的段落,乙個段落向右對齊,乙個段落居中,你可以先定義兩個類:

p.right

p.center

然後用不在不同的段落裡,只要在html標記裡加入你定義的class引數:

這個段落向右對齊的

這個段落是居中排列的

b.類選擇符還有一種用法,在選擇符中省略html標記名,這樣可以把幾個不同的元素定義成相同的樣式:

.center (定義.center的類選擇符為文字居中排列)

這樣的類可以被應用到任何元素上

下面我們使h1元素(標題1)和p元素(段落)都歸為「center」類,這使兩個元素的樣式都跟隨「.center」這個類選擇符:

這個段落也是居中排列的

注意:這種省略html標記的類選擇符是我們經後最常用的css方法,使用這種方法,我們可以很方便的在任意元素上套用預先定義好的類樣式。

(3)id選擇符

在html頁面中id引數指定了某個單一元素,id選擇符是用來對這個單一元素定義單獨的樣式。

id選擇符的應用和類選擇符類似,只要把class換成id即可

定義id選擇符要在id名稱前加上乙個「#」號。和類選擇符相同,定義id選擇符的屬性也有兩種方法。

(4)包含選擇符

可以單獨對某種元素包含關係定義的樣式表,元素1裡包含元素2,這種方式只對在元素1裡的元素2定義,對單獨的元素1或元素2無定義

例如:

table a 

在**內的鏈結改變了樣式,文字大小為12象素,而**外的鏈結的文字仍為預設大小。

(5)樣式表的層疊性

層疊性就是繼承性,樣式表的繼承規則是外部的元素樣式會保留下來繼承給這個元素所包含的其他元素。事實上,所有在元素中巢狀的元素都會繼承外層元素指定的屬性值,有時會把很多層巢狀的樣式疊加在一起,除非另外更改。例如在div標記中巢狀p標記:

div

…… 這個段落的文字為紅色9號字

(p元素裡的內容會繼承div定義的屬性)

另外,當樣式表繼承遇到衝突時,總是以最後定義的樣式為準。(就近原則)

二、屬性和值

(1)屬性和值要用冒號隔開

例如:body

(2)如果屬性的值是多個單詞組成,必須在值上加引號

例如:p (定義段落字型為sans serif)

(3)如果需要對乙個選擇符指定多個屬性時,我們使用分號將所有的屬性和值分開

p (段落居中排列;並且段落中的文字為紅色)

三、 注釋

注釋是不顯示的。css注釋以"/*" 開頭,以"*/" 結尾,如下:

/* 定義段落樣式表 */ p

linux指令碼初嚐滋味 編寫與執行

在完成shell之前真的是不會。抱著嘗試的心態 我開始整理思路 首先 cd 到我要的目錄下 然後執行需要的檔案 這樣總沒錯吧 就算你指令碼再高階,思路總該是這樣才是吧 說幹就幹 vi start.sh 建立乙個檔案,並且進入檔案準備幹點啥 進入之後。a一下 bin bash 據說這頭不加都不行,我就...

基本初等函式

函式庫 線性函式,就是一種直線的關係,可以理解成直來直去的一種關係 比如y kx b,y x,y x b.這樣一種函式都是線性函式 下面我們來討論乙個問題 我們都知道蟋蟀,它在同一種溫度下,鳴聲的頻率都是相同的。那麼根據這樣一種屬性,我們就可以計算出當在某個溫度下面,蟋蟀叫聲的頻率 hz 是一樣的,...

css樣式文字 初總結

1.規定文字塊中首行文字的縮排。text indent 可能的值 length 一般可以為所有塊級元素應用,如果想把乙個行內元素的第一行 縮排 可以用左內邊距或外邊距創造這種效果。2.元素中的文字的水平對齊方式。text align 可能的值 left,預設值 center right justif...