CSS3學習 初步應用

2021-08-20 19:31:20 字數 1379 閱讀 3873

css是由選擇器(selector)與樣式規則(rule)組成(和jquery相似)。而選擇器是指css樣式要應用的目標。當不同的選擇器寫在一起的時候,中間用逗號(,)隔開即可;當有多個樣式規則時,中間用分號(;)隔開。下面進行演示:

首先在對應的css檔案中對要修飾的物件進行定義

.text_style1
然後在html檔案中引用該css檔案,並標記上對應元素
....

應用css

以下對css樣式表的選擇器進行總結:

1、標記名稱:直接利用html裡面的標記名稱作為選擇器,html檔案中所有相同的標記都應用相同的樣式。

p
2、

全域性選擇器:使用『*』符號

*
3、

class選擇器:在html中應用時,新增class="對應css"即可。如果僅希望在某一種標記上應用class選擇器的樣式,則在class選擇器之前加上標記名稱eg.

標記名稱.class屬性名。則該樣式只會在對應標記上顯示。

.class屬性名
要修飾的內容
4、id選擇器:在html中應用時,需要在對應標記中新增id屬性。id的值應該具有唯一性,可以利用js來動態控制對應html元件。

#font_style
要修飾的內容
5、

屬性選擇器:這個選擇器屬於高階選擇器,用來篩選標記中的屬性。

a[target]
篩選屬性的方式

篩選方式

含義[attribute="value"]

屬性等於value

[attribute~="value"]

屬性包含完整value

[attribute|="value"]

屬性等於value或以value-開頭

[attribute^="value"]

屬性開頭有value

[attribute$="value"]

屬性最後有value

[attribute*="value"]

屬性中出現value

舉例如下所示,下面元件都包含了class屬性

div標記

font標記

a標記p標記

當使用「~=」屬性選擇器進行篩選時,只會用到、標記
[class~="test"]
6、反向選擇

:not(p)
整個網頁的字型都會應用為紅色,只有標記不應用。

css3設定元素動畫初步

結構 transition animation transform 今天接觸了一點css3中的transition和transform 在這裡寫一下自己的一些記憶點,不知對不對,如果有認知不同之處,請大方的指出,謝謝 css3中提供了一些可以讓元素進行動態的改變,產生一種flash動畫的效果,例如 ...

css3 常見應用 2018 5 19

2 背景 設定為背景 可以對body設定背景圖 background url i bg flower.gif background size 63px 100px 多個背景圖 background image url bg flower.gif url bg flower 2.gif 可以指定到指定...

CSS3 線性漸變應用

css3 gradient 分為 linear gradient 線性漸變 和 radial gradient 徑向漸變 而我們今天主要是通過乙個小例子來針對線性漸變來剖析其具體的用法。今天的例子就是用css3 的線性漸變製作乙個大致的針孔注射器。首先來看一下最終效果,例子比較簡單,主要應用到的就是...