1 35 CSS入門學習

2021-09-28 20:51:41 字數 2283 閱讀 8309

智慧型表單樣式擴充套件 max-width: 表示最大寬度 text-align: 字型居中

某些屬性樣式直接寫到form裡面不行需要寫在style=「」裡面

css入門

css簡介css指的是cascading style sheets,即層疊樣式表,是一種設計網頁樣式及布局的技術。所謂「層疊」,實際上指的是將顯示樣式與顯示內容分離。 在web標準中,表現是賦予頁面內容顯示的樣式,包括版式、顏色和大小等等。也就是說,頁面中顯示的內容放在結構裡,而修飾、美化放在表現裡,做到結構(內容)與表現分開,這樣,當頁面使用不同的表現時,呈現的樣式是不一樣的,就像人穿了不同的衣服,表現就是結構的外衣,w3c推薦使用css來完成表現。 css語法css語法• css語法由三部分構成:選擇器、屬性和值。selector p

• 選擇器(selector)是指給頁面的哪個或哪些元素定義樣式,通常是希望定義樣式的元素標籤。

• 屬性(property)是定義的具體樣式(如顏色、字型等),每個屬性都有乙個值,屬性和值用冒號隔開,並用大括號括起來。

• 屬性和值組成樣式宣告(declaration),可以定義多個宣告,多個宣告之間用分號隔開。

• 當有多個宣告時,建議在每行只描述乙個宣告,這樣可以增強樣式的可讀性,如:p p

• css對大小寫不敏感,是否包含空格不會影響css在瀏覽器的效果。

css常用選擇器

1.元素選擇器

• 元素選擇器就是元素自身,定義時直接使用元素標籤名稱。如定義段落樣式,可以選擇p元素的名稱,即把p作為選擇器。

例如:• p,h1,form ,table,html, table例:

如在下面**中,希望列表中的strong元素變為斜體字,而不是預設的粗體字。

粗體字<>

斜體字<><>正常字型<>

• 可以定義如下派生選擇器,這樣只有li元素中的strong元素樣式為斜體字。listrong

5. id選擇器(精確定位)

• id選擇器使用元素的id屬性值為元素指定樣式,id選擇器必須在元素的id屬性值前加「#」。

如:#red#green

• 在下面的html**中,id屬性為red的p元素顯示為紅色,而id屬性為green的p元素顯示為綠色

這個段落是紅色。

這個段落是綠色。

• id選擇器常用於建立包含選擇器。

例如:#sidebarp

6.類選擇器• 類名的第乙個字元不能使用數字!它無法在mozilla或firefox中起作用。• 和id選擇器一樣,類選擇器也常常被用作派生選擇器。

例如:.one td類名為one的元素內部的**單元格都會以灰色背景顯示橙色文字

7.子元素選擇器 子元素選擇器只能選擇作為某元素的子元素宣告樣式,子選擇器使用「>」號。

• 如希望選擇只作為h1元素的子元素strong,可以這樣寫:h1>strong• 這個規則會把下面**中第乙個h1下面的strong元素變為紅色,但是第二個strong不受影響。

8.小總結:1.元素選擇器 html{}

2.統配符 選擇器 *

3.分組選擇器 h1,h2{}

4.包含選擇器 li strong {}

5. id選擇器 #id_name{}

6.類選擇器 .class{}

7.子元素選擇器 h1 > strong{}

注意: 4,和7 的區別 : 子元素選擇器 只對 子元素起作用 而 包含選擇器 對包含在裡面的子元素 和 子孫元素都起作用 css樣式的3種使用方式1內嵌方式 v 內嵌方式指的是將css規則混合在html標籤中使用的方式。css規則作為html標籤的style屬性值。例如:這是使用樣式的超級鏈結v 內嵌樣式只對其所在的標籤起作用,其它的同類標籤不受影響。 eg:

2.內部樣式表 內部樣式表指的是在html文件的標記內嵌入樣式表,格式如下: eg:

3.使用標記鏈結外部樣式表 v 外部樣式表是使用乙個單獨的檔案儲存樣式規則,擴充套件名為「.css」,需要使用樣式表的html檔案鏈結樣式表檔案。

v 鏈結樣式表使用標籤,此標籤作為的子標籤使用,指明當前html頁面和鏈結的樣式表之間的關係,其格式為:其中:v href是外部樣式表的路徑,一般使用相對路徑;v rel指的是被鏈結的檔案的型別,stylesheet表示被鏈結的是css檔案;v type指的是被鏈結的檔案的內容型別.

CSS入門學習

一 css 隨著全球資訊網的出現,對html要求越來越多,迫於壓力,html出現,等標籤,幾年後暴露出嚴重的問題。1.由於html既寫結構性又寫樣式,導致頁面缺乏結構性,既降低了網頁的可訪問性。2.頁面維護越來越困難。與html相比,css支援更豐富的文件外觀,可以為任何元素的文字和背景設定顏色,允...

css學習初級入門

先體驗下css的魅力,哈哈 乙個簡單的html 頁面層容器 頁面頭部 側邊欄主體內容 頁面底部 基本資訊 body a link,a visited a hover 頁面層容器 container 利用padding 20px 20px 0 0來固定選單位置 menu 新增了float right使...

css學習手冊 CSS布局入門

css布局與傳統 table 布局最大的區別在於 原來的定位都是採用 通過 的間距或者用無色透明的gif來控制文布局版塊的間距 而現在則採用層 div 來定位,通過層的margin,padding,border等屬性來控制版塊的間距。1.定義div 分析乙個典型的定義div例子 sample 說明如...