css字体、背景设置

css字体、背景设置

字体设置

• font 属性，是复合型属性（font：style weight size family;）

注意，其中后两个属性必须有，style 和 weight 不是必须写入的内容，如果要简写 ！必须要有font-size和font-family即

font：size family;

1. font-style 设置字体的样式，它的值：

   italic 设置字体为斜体

   normal 字体正常

2. font-weight 设置字体是否加粗,它的值：

   normal 默认

   bold 加粗

   bolder 相对bold加粗（比较级）

   它的值也可以是具体的整百数字，范围是 100-900
         400 ->normal
         700 ->bold
         900 ->bolder
   

3. font-size 设置所修饰字体的大小 （它是可以通过 父级 传递）

   .目前浏览器默认字体是 16px

   .PC端浏览器的最小字体大小可以设置为 12px

4. font-family 设置文字字体(可多个字体)

形如：font-family: ‘A’,‘B’,‘C’······;

含义是 在客户端的设备上，匹配 A 字体，如果没有 A 字体，则继续匹配 B 字体，依次进行匹配，直到匹配成功即可显示匹配到的字体

通用字体如：

1.serif 有衬线（类似锐化）

2.sans-serif 无衬线

.txt5 {
           color: #04be02;
           font-size: 40px;
           font: normal bold 30px '楷体','微软雅黑';
       }

背景设置

• background 属性，是复合型属性（backgroung:color image repeat position attachment）设置标签元素的背景

其中，可以单独写 backgorund:color; 和
background:image;

1. background-color 设置标签元素的背景色,它的的值是：

a. 英文单词

b. 16进制表示颜色

c. rgb( ) 表示颜色

2. background-image 设置背景图片，格式如下

background-image：url(背景图片的地址)

3. background-repeat 背景图的平铺方式，它的值：

   repeat 默认，x轴y轴都平铺

   repeat-x 沿x轴方向平铺

   repeat-y 沿y轴方向平铺

   no-repeat不平铺

4. background-position 设置背景图定位(在笛卡尔坐标中),格式如下

background-position ：x轴方向的值 y轴方向的值；

值可以是：

1.具体的数值
2.方位名词组合
     left right top bottom center

5. background-attachment 设置背景图的 固定定位,它的值：

scroll :默认值，背景图跟着页面一起滚动

fixed固定 : 根据浏览器可视区域，固定在具体的位置
（他的定位参考点是 !!!浏览器可视区域）

.wp {
            width: 400px;
            height: 400px;
            border: 1px #f00 solid;


            /* background: #ccc; */
            /* 设置背景色 */
            background-color: #40be02;
            /* 设置背景图 */
            background-image: url('./images/b.jpg');
            /* 设置背景图的 平铺方式 */
            background-repeat: no-repeat;
            /* 设置背景图的 定位方式   笛卡尔坐标系，左上角为原点位置，水平 垂直 */
            background-position: left bottom;


            /*设置背景图的 固定定位*/
            /* background-attachment: fixed; */

        }