CSS第二课
简单的css语句
| 用处 | 语法 | 注意 |
|---|---|---|
| 设置字体大小 | font-size | 添加的内容和买衣服大小一样，xl大于l，大于s，也可以使用数值设置字体大小，选择需要的单位 |
| 字体是否加粗 | font-weight | 添加内容为bold加粗，bolder（比加粗稍微粗一点）lighter（比加粗细一点）或者加粗数值，为有几个选项可供选择 |
| 字体是否倾斜 | font-style | 如果是添加italic |
| 设置字符字体 | font-family | 需要用什么字体就添加什么字体就行了，如果字体为多个单词拼写，需要单引号括起来，可以直接写中文字体名字，可以添加多个，按照就近原则 |
| 小型大写字母 | font-variant | 把小写的字母转换成大写字母，但是个头不变，如果存在小写字母。后面加入small-caps就可以 |
| 设置文本缩进 | text-indent | 添加缩进字符，一般设置首行缩进两个字符2em |
| 设置文本对齐 | text-align | center居中对齐\left左对齐\right右对齐\justy两端对齐 |
| 设置行间距 | text-align | 可以添加数值，最好是用em形式的，em和word里面的倍数一样，比如1.5em就是1.5倍行间距 |
| 修饰文本 | text-decoration | 可以给文本增加线条，overline上划线，underline下划线，line-through删除线。还可以设置样式和颜色，去掉超链接的下划线需要加none |
| 大小写转换 | text-transform | capitalize首字母大写，lowercase字母小写，uppercase字母大写 |
| 修改颜色 | color | 后面可以直接添加颜色的英文名称，还可以使用RGB形式，或者16进制的形式 |
| 字符间距 | letter-spacing | 添加数值即可 |
| 英文单词间距 | word-spacing | 添加数值即可，只对英文单词才有用 |
| 设置文字方向 | direction | ltr默认。文本方向从左到右，rtl文本方向从右到左。 |
| 添加背景，对body进行添加 | background-color | 添加需要添加的颜色即可 |
| 添加背景图片 | background-image:url（图片地址） | 图片地址中加入自己的图片地址即可 |
| 背景图片平铺 | background-repeat | repeat水平和垂直都平铺， repeat-x水平方向平铺，repeat-y垂直方向平铺，no-repeat不平铺 |
| 背景图片位置 | background-position | center居中平铺\left左平铺\right右平铺\right top右上角\right bottom右下角\left top左上角\left bottom左下角，也可以使用数值的方式，相对方式50% 50%代表位于宽百分之50的与长百分之50的地方，60px 30px代表宽60px与长30px的地方 |
| 设置背景图片大小 | background-size | 100% 100%代表水平100%垂直100%，contain代表不失真的情况下占比最大，cover也是最大，只不过不管失真不失真 |
| 背景图片静止 | background-attachment: fixed; | 这样的话，就不会随着齿轮滑动而动，会固定 |
实例代码应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body{
background-color:#cccccc;
}
h1{
color: white;
font-weight:lighter;
background-color: red;
}
.c0{
color: white;
font-family:楷体;
font-style:italic;
direction:rtl;
}
.c1{
color: red;
font-size:24px;
font-weight: 500;
font-family: 宋体;
font-weight:bold;
}
</style>
</head>
<body>
<h1>日 志</h1>
<hr />
<p class="c0">分类：心情点滴</p>
<p class="c1">女性的美丽</p> 摘要：魅力女性是美丽的.她使世界变得温馨,使世界永远保持青春和活力,使世界永远充满迷人和浪漫。魅力是什么?字典上的解释是，能吸引人的力量.常听有人这么评价某个女人：她不漂亮，可她很有魅力.魅力是一种深层次的美，比一切外在的美都更富有生命力，让人一见难以忘怀....... 查看全文
<br />
<br />
<p class="c2">2007.3.8 13:27 作者：诗香雅韵 引用:6 | <a style="text-decoration:none" href="http://www.baidu.com">收藏</a> | 评论：56 </p>
<p class="c0">分类：情感驿站</p>
<p class="c1">情感解析：写给三十左右男人的一些密语</p> 摘要：一、不放弃理想，不放弃梦想。有梦的生活，才会有颜色；二、有一套顶级的西服，或者一只经典的手表，或者有一个奢华的打火机，或者。总之，有一个可以传给自己孩子的并值得讲述历史的东西；三、重新甄选自己的朋友。留一两个知己，用一生去维护;四、三十岁。知道很多的细节。包括穿西服的时候... 查看全文
<br />
<br />
<p class="c2">2011.11.9 00:17 作者：诗香雅韵 引用:0 | <a style="text-decoration:none" href="http://www.baidu.com">收藏</a> | 评论：1</p>
<p class="c0">分类：精品赏析</p>
<p class="c1">美丽如画!世界海洋摄影佳作揭晓(组图) </p> 摘要：据国外媒体报道，近日世界优秀海洋摄影照片揭晓，从中我们可以欣赏到美丽的海洋景色、认识许多奇特的海洋生物，此外摄影师精湛的摄影技术也令人赞叹。以下就是2010年海洋摄影优秀作品。摄影师评价：“在晚上，小巴哈马海岸的斑点海豚会潜入深海寻找乌贼... 查看全文
<p class="c2"> 2011.10.28 23:53 作者：诗香雅韵 引用:1 | <a style="text-decoration:none" href="http://www.baidu.com">收藏</a> | 评论：1 </p>
</body>
</html>
效果图
如若有和我一样的初学者，不懂的可以在评论区评论出来，我们一起解决！