css 入門
阿新 • • 發佈：2018-11-19
\ html 中引入 css 檔案
<link rel="stylesheet" type="text/css" href="style.css">
\ css選擇器
標籤 p
類 .item
id #blue
後代 div p
子代 div > p
偽類 a:link{ } a:visited{ } a:hover { } a:active { }
\ 拾遺程式碼
<style> .he { color:rgba(182,22,206,0.2)} .hb{ font-size: larger; } </style>
\ css屬性設定
字型屬性 font
font: italic small-caps bold 12px arial,sans-serif;
這是一個複合屬性，設定的的順序如下
| font-style | 字型樣式：normal \ italic \ oblique inherit |
|---|---|
| font-variant | 字型異體： normal \ small-caps \ inherit |
| font-weight | 字型粗細： normal(400) \ bold(700) \ bolder \ lighter \ 100-900 |
| font-size / line-height | 字型大小/行高 |
| font-family | 字型： Microsoft YaHei ,‘宋體’,‘微軟雅黑’ 多個字型間用 , 隔開 |
可以不全設定，但是字型大小和字型必設
背景屬性
background: #f2f2f2 url(image/bg.gif) no-repeat 20px 20px;
| 屬性 | 值 |
|---|---|
| background-position | background-position 兩個值一般 水平 垂直; (可用 % 或者其他單位 ) 也可以用單詞 top center等，如果只一個值，第二個值為center ps:需要把 background-attachment 屬性設定為 “fixed”，才能保證background-position 屬性在 Firefox 和 Opera 中正常工作 |
| background-color | red \ #e92322; \ rgb \ transparent (透明) |
| bakground-origin | border-box(背景影象相對於邊框盒來定位) \ padding-box \ content-box |
| background-clip | border-box (背景被裁剪到邊框盒) \ padding-box \ content-box |
| background-attachment | scroll (預設值。背景影象會隨著頁面其餘部分的滾動而移動) \ fixed \ inherit |
css 相關屬性
| 屬性 | 值 |
|---|---|
| text-align:// 文字對齊方向 | left; |
| font-size: // 文字大小 | 20px; |
| line-height: // 行高 | 200%; |
| text-indent: // 文字縮排 | 40px; |
| letter-spacing: // 增加或減少字元間的空白 | -3px; normal; |
| word-spacing: | 10px; |
| direction: // 設定文字方向 | rtl; 預設 ltr 從左到右 |
| text-transform: // 控制文字的大小寫 |
lowercase; // 小寫字母 uppercase; // 大寫字母 none; // 預設 capitalize; // 文字中每個單詞以大寫字母開頭 |