CSS背景、文本属性

一、背景属性

1.背景颜色

　　background-color: red;

2.背景图片相关

1）设置背景图片:background-image : url("路径");

　　设置背景图片，指定图片路径，如果路径中出现中文或空格，需要加引号

2）设置背景图片的重复方式

　　默认背景图片从元素的左上角显示，如果图片尺寸与元素尺寸不匹配时，会出现以下情况：

　　1. 如果元素尺寸大于图片尺寸，会自动重复平铺，直至铺满整个元素

　　2. 如果元素尺寸小于图片尺寸，图片默认从元素左上角开始显示，超出部分不可见

取值 ：

repeat  默认值，沿水平和垂直方向重复平铺

repeat-x 沿X轴重复平铺

repeat-y 沿Y轴重复平铺

no-repeat 不重复平铺

　　background-repeat:repeat/repeat-x/repeat-y/no-repeat

3）设置背景图片的显示位置:默认显示在元素左上角　　background-position:x y;

取值方式：

　　1. 像素值：设置背景图片的在元素坐标系中的起点坐标

　　2. 方位值

    • 水平 ：left/center/right
    • 垂直 ：top/center/bottom

　　注：如果只设置某一个方向的方位值，另外一个方向默认为center

　　3. 百分比：类似于方位值，根据百分比计算背景图片的显示坐标。

　　计算方式：

　　　　横坐标 = (元素宽度 - 背景图片宽度）* x%

　　　　纵坐标 = (元素高度 - 背景图片高度) * y %

　　特殊值：

　　　　0% 0%     左上角

　　　　100% 100% 右下

　　　　50% 50%   居中显示　　

　　精灵图技术 ：为了减少网络请求，可以将所有的小图标拼接在一张图片上，一次网络请求全部得到；借助于background-position进行背景图片位置的调整，实现显示不同的图标

4）设置背景图片的尺寸：background-size:width height;

取值方式 ：

1. 像素值

  • 500px 500px; 同时指定宽高
  • 500px;  指定宽度，高度自适应

2. 百分比：百分比参照元素的尺寸进行计算

  • 50% 50%; 根据元素宽高,分别计算图片的宽高
  • 50%; 根据元素宽度计算图片宽高,图片高度等比例缩放

3.背景属性简写:background:color url("") repeat position;

 注意 ：

　　1. 如果需要同时设置以上属性值，遵照相应顺序书写

　　2. background-size 单独设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div, h1 {
            width: 100px;
            height: 100px;
            margin: 200px auto;
            background-color: pink;
            background-image: url(northStar.jpg);

            /*y轴重复*/
            background-repeat: repeat-y;
            /*x轴重复*/
            background-repeat: repeat-x;
            /*不重复*/
            background-repeat: no-repeat;
            /*background-position:-100px -100px;*/
            background-position: 100% 100%;
        }

        div:hover {
            background-position: -160px -40px;
        }

        h1 {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            /*
            background-size特殊取值：
            cover：覆盖 将图片等比拉伸至足够大，完全覆盖元素，超出部分不可见(最小的边距和元素块一样大)
            contain:包含 将图片等比拉伸至刚好被元素容纳（最大的边距不超过元素块）
            */
            background-size: cover;
        }

        h2 {
            width: 500px;
            height: 500px;
            background: cyan url(照片.jpg) no-repeat center;
            font: 400 36px "宋体";
        }
    </style>
</head>
<body>
<h2>字体样式展示</h2>
<h1></h1>
<div></div>
</body>
</html>
背景属性示例

二、文本属性

1.字体相关

1）设置字体大小：font-size:20px;

2）设置字体粗细程度

取值 ：

  • normal（默认值）等价于400
  • bold   (加粗) 等价于700

3）设置斜体：font-style:italic;

4）设置字体名称：font-family:Arial,"黑体"; 

取值 :

  • 可以指定多个字体名称作为备选字体,使用逗号隔开
  • 如果字体名称为中文,或者名称中出现了空格,必须使用引号

例 :　font-family:Arial;
　　  font-family:"黑体","Microsoft YaHei",Arial;

5）字体属性简写：font : style weight size family;

注意 :
    1. 如果四个属性值都必须设置,严格按照顺序书写
    2. size family 是必填项

2.文本样式

1）文本颜色：color:red;

2）文本装饰线：text-decoration:none;

取值 :

  • underline         下划线
  • overline            上划线
  • line-through      删除线
  • none                 取消装饰线

3）文本内容的水平对齐方式：text-align:center;

取值 : 

  • left(默认值)    左对齐
  • center           居中对齐
  • right              右对齐
  • justify            两端对齐

4）行高：line-height:30px;

使用 :文本在当前行中永远垂直居中,可以借助行高调整文本在元素中的垂直显示位置

  • line-height = height 设置一行文本在元素中垂直居中
  • line-height > height 文本下移显示
  • line-height < height 文本靠上显示

特殊 :line-height可以采用无单位的数值,代表当前字体大小的倍数,以此计算行高

5）font属性简写2：font : size/line-height family;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{
 8             font-size:32px;
 9             font-weight:bold;
10             /*font-style:italic;*/
11             font-family:"宋体","黑体";
12             color:blue;
13             text-decoration:none;
14             width:200px;
15             background:orange;
16             height:200px;
17             /*居中*/
18             text-align:justify;
19             /*和文本高度一样（居中效果）*/
20             /*根据字体大小计算行高*/
21             line-height:2;
22         }
23         span{
24                                 /*行高*/
25             font:italic 700 32px/2 "黑体";
26             background:red;
27 
28         }
29     </style>
30 </head>
31 <body>
32     <h1>python</h1>
33     <p>hello python hello python hello python hello python hello python hello python</p>
34     <span>人生苦短</span>
35 </body>
36 </html>
文本属性演示

 

posted @ 2019-07-22 23:39  maplethefox  阅读(292)  评论(0)  编辑  收藏  举报