css 基礎撿漏(一)

2021-09-27 08:18:27 字數 1063 閱讀 7262

優先順序由高到低

權重!important

infinity

行間樣式

1000

id選擇器

100class選擇器/屬性選擇器/偽類選擇器

10標籤選擇器/偽元素選擇器

1萬用字元選擇器

0注意:權重並不是十進位制,10為 0000 0001 0000 0000的簡寫,1為0000 0000 0000 0001的簡寫,由此可見之間的差距並不是10,而是255。只要記住每級之間相差很大即可。

例子待補充

注意中間無空格,有空格為後代選擇器

padding  有背景顏色         margin     無背景顏色

初始化所有標籤  *

要善用 先定義好功能css,然後填充到html樣式,如 class="title1 title2"

原理:各邊均分空隙。

div

/*不需要的部分顏色設定為transparent即可*/

font-size: 12px; 這裡的12px指的是字型高度

font-style: italic; 設定為這個值時,效果類似於em標籤

font-weight: bold;  設定為這個值時,效果類似strong標籤

font-family: araial;  常見的網路字型

color: red; 僅供測試時寫顏色名,因為每台機器解釋的可能不一樣

rgba: red 00-ff      green 00-ff       blue 00-ff       rgba(255,255,255,1)  等一 #ffffff  + opacity: 1.    #f40即代表 #ff4400 

單位px   畫素,螢幕上最小的乙個點,12px即12個畫素

em  1em = 1 * 設定的文字高度, 平常我們說的 line-height: 1.2em  即1.2倍行高

縮排兩字元  text-indent: 2em;

text-decoration: line-through; 設定為這個值時,效果類似del標籤

underline  新增下劃線

css 基礎撿漏(二)

inline a span em strong block p div h1 h5 ul ol form inline block img input 注意 凡是帶有inline的元素,都有文字特性,因此img併排時中間會有間隙,原因是img兩個標籤之間有空格,去除這些空格則間隙消失 absolut...

css基礎認識一

一 css樣式表 1.內聯式 2.嵌入式 3.外部樣式 二 文件樹 三 選擇器 1.元素選擇器 div 2.類選擇器 class name 3.id選擇器 name 4.包含選擇器 div p 5.萬用字元選擇器 6.偽類選擇器 a link a visited a hover a active d...

CSS基礎入門一

css 層疊樣式表,級聯樣式,簡稱才是樣式表 實現了內容和表示的分離 css和html之間的關係 html是負責網頁的結構 css 是負責構建html元素的樣式 css作用 1.以統一的方式實現樣式的定義 2.提高頁面樣式的可重用性和可維護性1.內聯樣式 行內樣式 將樣式宣告在元素的style屬性中...