黑马程序员技术交流社区

标题: 【西安校区】HTML—CSS的文本属性，字体属性，背景属性 [打印本页]

作者: 逆风TO 时间: 2019-4-23 11:08
标题: 【西安校区】HTML—CSS的文本属性，字体属性，背景属性
本帖最后由逆风TO 于 2019-7-19 08:59 编辑

1.CSS文本
文本颜色：color:
行高：line-height
文本修饰：text-decoration

属性值:
underline:下划线
overline:上划线
line-through:中划线
none:设置无

字符间距：letter-spacing
单词间距：word-spcing

<html>
      <head>
            <meta charset="UTF-8">
            <title>CSS文本属性</title>
            <style>
                     body{
                     /*文本大小*/
                              font-size: 30px;
                     /*文本颜色*/
                              color:#00f;
                     /*line-height:行高 */
                              line-height:50px;
                     /*文本修饰：text-decoration
                              值：underline：下划线
                                       overline：上划线
                                       line-through：中划线
                     */
                              text-decoration:none;
                     /*letter-spacing：字符间距*/
                              letter-spacing: 10px;
                     /*word-spacing：10px*/
                              word-spacing: 10px;
                     }
            </style>
      </head>
      <body>
            hello world！哈哈哈哈哈哈哈哈哈~
      </body>
</html>

2.CSS字体
字体系列：font-family（一定是当前存在的字体类型）font-size：
字体尺寸：font-size
字体样式：font-style

normal：默认的（正体）
italic：斜体

字体的粗细程度： font-weight

bold：适当加粗

font的简写属性：将当前的属性设置到一个声明。
可以按顺序设置如下属性：

font-style
font-variant
font-weight
font-size /line-height
font-family

font：normal bold 30px “宋体”;

<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title>CSS字体</title>
            <style>
                     body{
                              /*字体系列：一定是当前存在的字体类型 */
                              font-family: "微软雅黑";
                              /*font-size：字体尺寸*/
                              font-size:30px;
                              /*font-style：字体样式
                              normal:默认的（正体）
                              italic：斜体
                              */
                              font-style: italic;
                              /*字体的粗细程度：
                              * font-weight：
                                                      bold：适当加粗
                                       */
                              font-weight: bold;

                              /*font的简写属性：将当前的属性设置到一个声明。*/
                              font:normal bold 30px "宋体";

                     }
            </style>
      </head>
      <body>
            但愿人长久，千里共婵娟。
      </body>
</html>

3.CSS背景属性
background-color: 背景颜色
background-image：背景图片(默认图片:X轴和Y轴都在重复)
background-repeat：设置图片是否重复以及如何重复
样式值:

repeat:默认的： x轴和y轴都在重复
no-repeat:不重复，图片的位置（默认：左上角 left top）
repeat-x：x轴重复
repeat-y：y轴重复
设置图片的起始位置：background-position: left top;
---------------------

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2