常用CSS样式设置

文字

我们以div标签举例，来设置常见的文字样式

1. <div>今天天气真晴朗！</div>

1. div {
2. /* 文字大小为14像素 */
3. font-size: 14px;
5. /* 文字颜色是黄色的 */
6. color: yellow;
8. /* 段落首行缩进两个字的宽度 */
9. text-indent: 2em;
10. text-indent: 1cm;
11. text-indent:-9999px; 隐藏文字
13. /* 设置对齐方式，center:居中对齐; left:左对齐; right:右对齐*/
14. text-align: center;
16. /* 设置字体为sans-serif */
17. font-family: sans-serif;
19. /* 文字斜体显示，normal:文本正常显示; italic:文本斜体显示; oblique:文本倾斜显示 */
20. font-style:italic;
22. /* 文字加粗显示, bold:加粗; normal:正常大小； 数字值（100-900）；100对应最细的；900对应最粗的；400 等同于 normal，而 700 等同于 bold，*/
23. font-weight: bold;
24. font-weight: 100;
25. }
27. /*规定字符间距*/
28. letter-spacing: 30px;
29. letter-spacing: -0.5em;
31. /*规定行高间距；在大多数浏览器中默认行高大约是 110% 到 120%；*/
32. line-height: 90%
33. line-height: 200%

背景

1. div {
2. /* 设置背景色为灰色 */
3. background-color: gray;
5. /* 设置背景图片 */
6. background-image: url("logo.gif");
8. /* 设置背景图片尺寸 ；第一个值设置宽度，第二个值设置高度；如果只设置一个值，则第二个值会被设置为 "auto"；cover：完全覆盖背景区域；contain：宽度和高度完全适应内容区域 */
9. background-size: 80px 60px;
10. background-size: 50% 50%;
11. background-size: cover;
12. background-size: contain;
14. /* 背景图片不重复:no-repeat; 水平重复:repeat-x; 垂直重复:repeat-y; */
15. background-repeat:no-repeat;
17. /* 背景图片位置 top:上; left:左; right:右; bottom:底部; center:中间; */
18. /* 也可以设置百分比例如 66% 33% ，第一个数是水平方向，第二个数是垂直方向*/
19. /* 也可以设置像素 例如 0px 22px ，第一个数是水平方向，第二个数是垂直方向*/
20. background-position:top right;
21. background-position:66% 33%;
22. background-position:0px 22px;
25. /* 如果文档较长，那么当文档向下滚动时，背景图像会固定在文档中不滚动*/
26. background-attachment:fixed;
27. }

宽度和高度

1. div {
2. /* 设置宽度为200像素 */
3. width: 200px;
4. width: 100%;
6. /* 设置高度为100像素 */
7. height:100px;
8. height:100%;
9. }

边框

1. div {
2. /* 设置div的边框为1px的线条*/
3. border:1px solid;
5. /* 分别设置div四个边的边框 */
6. border-top: 1px solid #08c;
7. border-left: 1px dashed red;
8. border-right: 1px solid;
9. border-bottom: 1px solid red;
10. }