\ 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; // 文本中每个单词以大写字母开头 |