HTML CSS學習筆記 四

2021-07-20 15:03:49 字數 3139 閱讀 2433

認識css

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

例如:

type="text/css">

p

css**語法

css 樣式由選擇符和宣告組成,而宣告又由屬性和值組成。

選擇符:又稱選擇器,指明網頁中要應用樣式規則的元素。

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

例如:

p

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

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

css樣式基本知識

內聯式css樣式,直接寫在現有的html標籤中。(適用情況:區域性特殊化)

例如:

style="color:red">這裡文字是紅色p>

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

style="color:red;font-size:12px">這裡文字是紅色p>

嵌入式css樣式,寫在當前的檔案中(適用情況:統一標籤樣式格式)

嵌入式css樣式,就是可以把css樣式**寫在type="text/css">

style>標籤之間,一般情況下嵌入式css樣式寫在

head>之間。

例如:type="text/css">

span

style>

外部式css樣式,寫在單獨的乙個檔案中(適用情況:方便**重用和管理)

外部式css樣式(也可稱為外聯式)就是把css**寫乙個單獨的外部檔案中,這個css樣式檔案以「.css」為副檔名,在內(不是在標籤內)使用<

link

<

link href=

"base.css" rel=

"stylesheet"

type

="text/css"

/>

注意:1、css樣式檔名稱以有意義的英文本母命名,如 main.css。

2、rel=

"stylesheet"

type

="text/css" 是固定寫法不可修改。

3、<

link

>標籤位置一般寫在標籤之內。

三種方法的優先順序:就近原則(離被設定元素越近優先級別越高)。

css選擇器

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

選擇器

選擇器指明了{}中的「樣式」的作用物件

標籤選擇器

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

語法:

.類選器名稱

注意:1、英文圓點開頭

2、其中類選器名稱可以任意起名(但不要起中文噢)

使用方法:

第一步:使用合適的標籤把要修飾的內容標記起來,如下:

膽小如鼠span>

第二步:使用class="類選擇器名稱"為標籤設定乙個類,如下:

class="stress">膽小如鼠span>

第三步:設定類選器css樣式,如下:

.stress/*類前面要加入乙個英文圓點*/

id選擇器

在很多方面,id選擇器都類似於類選擇符,但也有一些重要的區別:

1、為標籤設定id=」id名稱」,而不是class=」類名稱」。

2、id選擇符的前面是井號(#)號,而不是英文圓點(.)。

類選擇器和id選擇器的區別

相同點:可以應用於任何元素

不同點:

1、id選擇器只能在文件中使用一次。與類選擇器不同,在乙個html文件中,id選擇器只能使用一次,而且僅一次。而類選擇器可以使用多次。

2、可以使用類選擇器詞列表方法為乙個元素同時設定多個樣式。我們可以為乙個元素同時設多個樣式,但只可以用類選擇器的方法實現,id選擇器是不可以的(不能使用 id 詞列表)。例如:

class="類名1 類名2">
子選擇器

子選擇器,即大於符號(>),用於選擇指定標籤元素的第一代子元素。

包含(後代)選擇器

包含選擇器,即加入空格,用於選擇指定標籤元素下的後輩元素。如:

.first span

>作用於元素的第一代後代,空格作用於元素的所有後代。
通用選擇器

通用選擇器是功能最強大的選擇器,它使用乙個(*)號指定,它的作用是匹配html中所有標籤元素。

偽選擇符

類選擇符,它允許給html不存在的標籤(標籤的某種狀態)設定樣式,比如說我們給html中乙個標籤元素的滑鼠滑過的狀態來設定字型顏色:

a:hover,現在比較常用的還是 a:hover 的組合。

分組選擇符

為html中多個標籤元素設定同乙個樣式時,可以使用分組選擇符(,)

例如:

h1,span

css的繼承、層疊和特殊性

繼承繼承是一種規則,它允許樣式不僅應用於某個特定html標籤元素,而且應用於其後代。但注意有一些css樣式是不具有繼承性的。如border:1px solid red;

特殊性:瀏覽器是根據權值來判斷使用哪種css樣式的,權值高的就使用哪種css樣式。

標籤的權值為1,類選擇符的權值為10,id選擇符的權值最高為100。層疊

層疊就是在html檔案中對於同乙個元素可以有多個css樣式存在,當有相同權重的樣式存在時,會根據這些css樣式的前後順序來決定,處於最後面的css樣式會被應用。

重要性有些特殊的情況需要為某些樣式設定具有最高權值,可以使用!important來解決,注意:!important要寫在分號的前面。

當網頁製作者不設定css樣式時:

瀏覽器預設的樣式 < 網頁製作者樣式 < 使用者自己設定的樣式,但記住!important優先順序樣式是個例外,權值高於使用者自己設定的樣式。

HTML CSS學習筆記

利用標籤中style屬性來改變每個標籤的顯示樣式 適用於單個標籤的樣式修改。不靈活 this is p tag 內嵌形式 可用於同類標籤的樣式統一修改 依然不夠靈活 表示後面的所有table中的文字預設顏色如我所設定。前提是已經存在乙個定義好的css檔案,網頁的一部分樣式需要用到,那麼可以採用這種方...

html css學習筆記

本人正經職業位android 開發,無奈現在社會壓力太大,對做人的要求越來越高,只掌握一門技術根本不好意思說自己是一名程式設計師,更無法在這個社會生存。本人只好順應時代發展的需要,不斷提高自己的綜合水平,提高對自身的要求,選擇了去學習html和css等前端的有關知識,新手入門,記錄一些學習過程中的筆...

html css學習筆記

1.html結構標準 2.css樣式標準 3.js行為標準1.ie 2.谷歌 3.火狐 4.蘋果 5.歐朋 注意 其他瀏覽器都用別人瀏覽器技術,只是更換了 doctype html 描述當前檔案的版本資訊,如果沒有詳細說明就是5.0版本 html html檔案 head 網頁的頭部 meta cha...