html基礎 css樣式1

2022-09-17 11:30:17 字數 1941 閱讀 1077

h't'm'l中用到css樣式有三種方式:

1、在header中增加style標籤,在style標籤中寫

2、用link標籤引用css樣式檔案

3、在需要使用css樣式的標籤新增style屬性

一、在header中的style定義

header中定義標籤樣式,是通過選擇器來和對應的標籤關聯的

1、id選擇器

乙個html頁面中,id是不能重複的。

效果如下:

2、class選擇器

class選擇器以.定位,乙個html檔案中可以有相同的class.定義了css樣式以後,該class對應的所有標籤都適用此css

效果如下:

3、標籤選擇器

定義標籤選擇器以後,該頁面的所有標籤都適用

效果:

4、標籤層級選擇器

效果:

5、class層級選擇器

6、id層級選擇器

7、多個id用同乙個css,用逗號,隔開id

8、多個class用同乙個樣式:因為class是可以重複的,所以只需要讓標籤的class值一樣,就可以

9、屬性選擇器

假設存在多個div,他們某個屬性值不一樣,就可以用這個屬性值來定位某個div並設定他的樣式

效果:二、在標籤的屬性中增加style屬性

三、用link標籤引用css樣式檔案

先建立乙個stylesheet檔案,寫好樣式,然後引用

stylesheet檔案中樣式的編寫和header的style標籤內寫法一樣。寫好以後在head中通過link標籤引用:link標籤設定屬性rel="stylesheet",href="css檔案目錄"

當三種引用css樣式的方法都存在時,選擇順序是:從標籤的style屬性開始,然後由下向上查詢

上述中,假設1、stylesheet.css檔案中定義了.c1的css樣式(背景black),2、stylesheet1.css中也定義了.c1的樣式(背景pink),3、由於div自身有style屬性(背景blue),4、同時有class=c1屬性,class屬性也在head的style中定義了c1屬性(背景green)

這樣算下來div一共有四個地方都對他設定了css樣式,這時候遵循查詢規律,最先找到的是3、style屬性的樣式(blue),所以最終呈現的就是自身style屬性的樣式

如果前端將style屬性的樣式勾選掉,那麼緊接著就會呈現stylesheet1.css中對應c1的樣式(pink),以此類推,順序依次是(blue,pink,green,black)

CSS基礎1 CSS樣式表及樣式規則

1 css cascading style sheets 層疊樣式表。用於定義html元素的顯示形式,是w3c推出的格式化網頁內容的標準技術 2 css作為每個 設計者必須掌握的技術之一,有幾個優點 1 提高頁面瀏覽速度,比傳統文字設計方法至少節約50 以上的檔案尺寸 2 縮短改版時間,降低維護費用...

CSS基礎樣式

css指層疊樣式表,它作用是控制頁面內容的外觀。這樣就可以將網頁的內容和表現形式分離。層疊的意思是 如果選擇器的權重相同,則後面元素的樣式會覆蓋前面樣式。css樣式表由選擇器和宣告兩個部分組成,其中選擇器是通過名字來標識元素的,宣告用於定義元素的樣式。a 樣式表比較常見的有三種引入方式 1.行內樣式...

CSS基礎樣式

顏色 單位 color 設定文字顏色 text align 設定文字對齊方式 letter spacing 字間距 line height 行高 text indent 首行縮排 text decoration 文字裝飾 text transform 大小寫轉換 text shadow 建立文字陰影...