css學習筆記之一

2021-06-27 17:11:06 字數 2002 閱讀 4556

css全稱為「層疊樣式表 (cascading style sheets)」,它主要是用於定義html內容在瀏覽器內的顯示樣式,如文字大小、顏色、字型加粗等。

如下列**:

p
使用css樣式的乙個好處是通過定義某個樣式,可以讓不同網頁位置的文字有著統一的字型、字型大小或者顏色等

css 樣式由選擇符宣告組成,而宣告又由屬性組成,如下圖所示:

選擇符:又稱選擇器,指明網頁中要應用樣式規則的元素,如本例中是網頁中所有的段(p)的文字將變成藍色,而其他的元素(如ol)不會受到影響。

宣告:在英文大括號「{}」中的的就是宣告,屬性和值之間用英文冒號「:」分隔。當有多條宣告時,中間可以英文分號「;」分隔,如下所示:

p
注意:

1、最後一條宣告可以沒有分號,但是為了以後修改方便,一般也加上分號。

2、為了使用樣式更加容易閱讀,可以將每條**寫在乙個新行內,如下所示:

p
就像在html的注釋一樣,在css中也有注釋語句:用/*注釋語句*/來標明(html中使用)。就像下面**:

css樣式可以寫在哪些地方呢?從css 樣式**插入的形式來看基本可以分為以下3種:內聯式、嵌入式和外部式三種。這一小節先來講解內聯式。

內聯式css樣式表就是把css**直接寫在現有的html標籤中,如下面**:

這裡文字是紅色。

並且css樣式**要寫在style=""雙引號中,如果有多條css樣式**設定可以寫在一起,中間用分號隔開。如下**:

這裡文字是紅色。

嵌入式css樣式,就是可以把css樣式**寫在標籤之間。如下面**實現把三個標籤中的文字設定為紅色:

嵌入式css樣式必須寫在之間,並且一般情況下嵌入式css樣式寫在之間。

外部式css樣式(也可稱為外聯式)就是把css**寫乙個單獨的外部檔案中,這個css樣式檔案以「.css」為副檔名,在內(不是在**的前面(實際開發中也是這麼寫的)。感興趣的小夥伴可以試一下,把它們調換順序,再看他們的優先順序是否變化。

其實總結來說,就是--就近原則(離被設定元素越近優先級別越高)

但注意上面所總結的優先順序是有乙個前提:內聯式、嵌入式、外部式樣式表中css樣式是在的相同權值的情況下。

每一條css樣式宣告(定義)由兩部分組成,形式如下:

選擇器
在{}之前的部分就是「選擇器」,「選擇器」指明了{}中的「樣式」的作用物件,也就是「樣式」作用於網頁中的哪些元素。比如右側**編輯器中第7行**中的「body」就是選擇器。

標籤選擇器其實就是html**中的標籤。如右側**編輯器中的、、

注意:這個樣式使用在英文單詞時,是設定字母與字母之間的間距。

單詞間距設定

如果我想設定英文單詞之間的間距呢?可以使用word-spacing來實現。如下**:

h1

...

想為塊狀元素中的文字、設定居中樣式嗎?可以使用text-align樣式**,如下**可實現文字居中顯示。(那麼什麼是塊狀元素呢?在後面的11-1、11-2小節中會講到。)

h1
同樣可以設定居左:

h1
還可以設定居右:

h1

CSS入門學習之一 CSS介紹

一直以來都想系統的學習css,但一直都沒找到一些系統的學習資料,今天突然在網上搜到了乙個學習css的 個人感覺知識點比較全.e文好的可以上去看看,本人也藉此機會邊翻譯邊學習css.什麼是css?css的英文全稱為cascading style sheets,中文譯為級聯樣式表,是一種用於簡化web頁...

CSS學習之一 CSS樣式的引入

html中,我們通常使用link元素引入外部樣式表,link有以下幾個屬性 1 rel,代表 關係 relation 在這裡,關係 即rel值 為 styleshewww.cppcns.comet 2 type,總是設定為 text css 描述了使用link載入的資料型別 3 href,值為樣式表...

Shell學習筆記之一

1.先看乙個常用的命令 這個命令組合了幾個不同的shell命令,shell命令是有這種特性在裡面的。就是統一性,簡單性。可以通過管道命令組合多個shell命令。如上面的命令,分別是 顯示當前執行的程序,sort是對程序進行排序,uniq是去除重複的情況,grep v sh 是去掉,不展示sh這個程序...