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 建立文字陰影...