CSS語法小記

2022-01-16 09:01:40 字數 1730 閱讀 3356

一、css語法結構

語法:選擇符 例如:body

引數說明:

1.選擇符(selector):指明這組樣式所要針對的物件。可以是乙個xhtml標籤,例如h1,img;也可以是定義了特定的id或者class的標籤,如:#main表示用                       id="main"修飾的標籤,.footer表示用class="footer"修飾的標籤等。

2.屬性(property):選擇符的樣式屬性,如顏色、大寫、定位、浮動方式等。

3.值(value):是指屬性的值。

4.同時可以為乙個選擇符定義多個屬性,屬性之間用分號";"隔開。

5.盡量使用通用屬性,不使用存在相容性差別的屬性。

二、css長度單位

單位說明

相對長度單位

em相對於當前物件內文字的字型尺寸

px畫素(pixel)推薦使用

絕對長度單位(基本上用不到)

in英吋

cm厘公尺

mm公釐

pt點(point)

三、css顏色

顏色單位

說明十六進製制

如:color:#ffffff;

顏色名稱

如:color:red;

三原色單位

如:rgb(255,0,0);

注意:顏色一般常用的是十六進製制,三原色的原理:【紅(r)、綠(g)、藍(b)】混合而成,每個值域在0-255之間。

四、css控制字型

功能語法

設定字型大小

font-size:12px;

設定字型

font-family:arial,'宋體';

設定字色

color:#fff;

設定行高

line-height:50px;

設定字型粗細

font-weight:normal(正常) bolder(粗體)

設定字型樣式

font-style:normal[正常]、italic[斜體];

修飾文字

text-decoration:none[正常]、underline[下劃線]、overline[上劃線]、line-through[刪除線]

字元間距

letter-spacing:normal[正常]、length[長度單位]

單詞間距

word-spacing:normal[正常]、length[長度單位]

文字縮排

text-index:2em 可以為負值

水平對齊方式

text-align:left/center/right

垂直對齊方式

vertical-align:sub[下標]、super[上標]、top[同行最高元素頂部對齊]、middle[同行元素中部對齊]、bottom[同行最低元素底端對齊]

空白處理

white-space:normal[自動換行]、pre[換行和空白受保護]、nowrap[強制在同一行顯示]

大小寫控制

text-transform:none[正常大小]、capitalize[首字母轉大寫]、uppercase[轉換成大寫]、lowercase[轉換成小寫]

注意:1.字型的屬性最好使用引號引起來,而且在設定字型時可以設定多個樣式而且樣式之間用逗號隔開,前者設定英文本型,後者設定漢文本型。

2.想要文字在在垂直方向上居中:將行高設定為元素高度(行高=元素高度)(前提:文字的內容不能超過元素的寬度,也就是不能換行)。

Ruby語法小記

0 基本語法 1 輸出 2 輸入 3 基本型別 ruby是沒有型別的,賦值成什麼就是什麼型別。比如 subtotal 100.00,taxrate 0.15,sum 100,name fread 4 全域性變數 在變數前加符號 表示全域性變數。5 類 成員變數 類方法 類例項 object clas...

Markdown 語法小記

在csdn上的文章如今都習慣使用markdown來編寫比較方便美觀。這裡小結下常見的markdown語法下 方式1 h1 h2 h3 h4 h5 h6 方式2h1和h2還能用下面方式顯示,下面的橫線在文字的下方 一級標題 二級標題 2.文字強調 方式1 斜體 加粗 粗斜體 方式2 斜體 加粗 粗斜體...

js語法小記

用js處理字串還是很方便的,幾點語法記錄一下,備查 var str tmp 31 34 56 79 ac a表示字串陣列 var a str tmp.split 轉換為十六進製制數值 var tmp1 parseint a 0 16 var tmp2 parseint a 1 16 數值轉換為asc...