4.CSS-基础3

731 views

笔记目录

图片

9. CSS的元素显示模式

元素显示模式分为：块元素；行内元素

9.1 块元素 <h1>~<h6>, <p>, <div>, <ul>, <ol>, <li>

常见的块元素为：<h1>~<h6>, <p>, <div>, <ul>, <ol>, <li>等

其中<div>是最经典的块元素。

块元素的特点：

  • 自己独占一行
  • 高度，宽度，外边距，及内边距，都可以控制
  • 宽度默认，为父级宽度的100%
  • 是一个容器及盒子，里面可以放行内或块级元素。（<h1>~<h6>, <p>不能再放块级元素）

9.2 行内元素（内联元素）<a>, <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <span>

常见的行内元素有<a>, <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <span>等

其中<span>是最经典的行内元素。

行内元素的特点：

  • 一行可以显示 多个行内元素
  • 高，宽，设置是无效的
  • 默认宽度，就是它本身内容的宽度
  • 行内元素只能容纳文本或其他行内元素。

注意：

  • 链接<a>里面不能再放链接<a>
  • 链接<a>里面可以放块级元素，但是给<a>转换一下模式最安全。

9.3 行内块元素 <img>, <input>, <td>

对于，标签同时具有行内元素和块元素的特点。<img>, <input>, <td>

行内块元素的特点：

  • 一行可以放多个元素（行内元素的特点）
  • 默认的宽度，就是他本身的宽度，如图片。（行内元素的特点）
  • 高度，宽度，外边距，内边距，都可以控制。（块级元素的特点）

9.4 小结

图片

9.5 元素显示模式的转换 display:inline-block

实现 块级元素 、行内元素 、行内块元素 的相互转化

  • 转换为块级元素：display:block
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
        <style>
            a {
                width: 300px;
                height: 300px;
                background-color: pink;
                display: block; /* 行内元素<a>转换为块后，此时的 width和 height才能起作用 */
            }
        </style>
    </head>

    <body>
        <a href="#">链接</a>
    </body>

    </html>
  • 转换为行内元素：display:inline
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
        <style>
            div{
                width: 300px;
                height: 300px;
                display: inline;  /* 块元素<div>转换为行内元素后，上面的 width和 height不起作用 */
            }
        </style>
    </head>

    <body>
        <div>我是一个块级元素</div>
    </body>

    </html>
  • 转换为行内块元素：display:inline-block
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
        <style>
            span{
                width: 300px;
                height: 300px;
                background-color: aquamarine;
                display: inline-block;   /* 行内元素<span>转换为行内块元素后，上面的 width和 height起作用 */
            }
        </style>
    </head>

    <body>
        <span>我是一个行内元素</span>
    </body>

    </html>

10. CSS背景

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

一般用于：页面超大背景图片，页面里的小logo

10.1 背景颜色 background-color

背景颜色的属性为：background-color:pink;，pink可以改为16进制的颜色值，rgb颜色，

背景颜色默认background-color:transparent;，表示透明的

背景颜色半透明：

<style>
  div {
        width: 500px;
        height: 500px;
        background: rgba(0, 255, 255, 0.7);
     }
</style>

使用background: rgba(0, 255, 255, 0.7);前面3个值是正常的rgb值，最后一个参数是alpha为显色度，取值范围在0~1之间

10.2 背景图片 background-image:url(images/logo.png);

添加背景图片 比 插入图片 更好控制图片位置

语法：

background-image:none|url(images/logo.png);
#  输入bgi后tab

例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <style>
        div{
            display: inline-block;
            width: 300px;
            height: 300px;
            background-image: url(images/logo.png);
        }
    </style>
</head>

<body>
    <div>我是一个块级元素</div>
</body>

</html>

10.3 背景平铺 background-repeat:no-repeat;

平铺：background-repeat属性

background-repeat: repeat | no-repeat | repeat-x | repeat-y

  • 铺满：（默认）
background-repeat:repeat
  • 不进行平铺
background-repeat:no-repeat
  • 沿着x轴方向平铺
background-repeat:repeat-x
  • 沿着y轴方向平铺
background-repeat:repeat-y

同时设置背景颜色和背景图片效果：重叠在一起，背景颜色在最底层

10.4 背景图片位置 background-position: x y ;

background-position：控制图片在块元素背景中的位置

语法：background-position: x y ;

x 坐标和 y坐标：可以使用方位名词或者精确单位确定图片位置

图片

10.4.1 方位名词定位 background-position: left top;

方位名词包括：

  • 控制上下的：top center bottom
  • 控制左右的：left center right

例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <style>
        div{
            display: inline-block;
            width: 600px;
            height: 400px;
            background-image: url(images/logo.png);   /* 插入背景图片 */
            background-color: blue;        /* 背景为蓝色 */
            background-repeat: no-repeat;    /* 图片不平铺 */
            background-position: left top;   /* 图片位于背景的左上方 */
        }
    </style>
</head>

<body>
    <div>我是一个块级元素</div>
</body>

</html>

注意：

  • 方位名词来控制位置时，与输入的顺序无关，可以先输左右再输上下，也可以先输上下再输左右。
  • 当只是输入一个值时，另外一个默认为center

10.4.2 精确单位定位 background-position: 20px 50px;

background-position: 20px 50px;

第一个值：图片沿x轴从左到右20px位置；第二个值：图片沿y轴从上到下50px位置

background-position: 20px;

如果只是输入一个值，那么y轴默认为center

10.4.3 混合单位定位 background-position: 20px center;

方位名词 和 精确单位 混合使用

background-position: 20px center;

注意：前面20px一定是x轴，后面center一定是y轴

10.5 背景图像固定 background-attachment：fixed;

background-attachment：scroll | fixed;
  • scroll：表示背景会随着页面一起滚动（默认）
  • fixed：表示背景会固定在页面上

10.6 背景复合写法 background: #fff fixed 20px 50px no-repeat url(logo.png);

可以将上面的内容用一行来写完：

<style>
    body {
        /* background-image: url(images/logo.png);
        background-color: blue;
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: fixed; */
        background: #fff fixed 20px 50px no-repeat url(images/logo.png);
    }
</style>

定义背景属性可以用一行代码写完，属性值空格隔开，没有顺序要求

10.7 小结

图片

11.CSS的三大特性

CSS有三个非常重要的三个特性：层叠性、继承性、优先级。

11.1 层叠性

给同一个标签设置不同样式时，此时后面的样式就会覆盖(层叠)前面冲突的样式

11.2 继承性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <style>
        div {
            color: pink;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>
        <p>龙生龙凤生凤</p>  /* 子承父业，<p>会继承<div>的样式 */
    </div>
</body>
</html>

注意：是继承部分属性，主要是继承与文字相关的属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <style>
        body {
            font: 15px/1.5 "微软雅黑";
        }
        div {
            font-size: 14px;
        }
        p {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div>粉红色的回忆</div>
    <p>粉红色的回忆</p>
    <ul>
        <li>我没有指定文字大小</li>
    </ul>
</body>
</html>

注意此时父级元素的属性是：font: 15px/1.5 "微软雅黑";

div的行高为14px*1.5，继承body行高

p的行高为16px*1.5，继承body行高

li的字号大小为15px，行高为15px*1.5，继承body字号和行高

11.3 优先级 style > id > class > div > body/*

当同一个元素指定多个选择器,就会有优先级的产生

●选择器相同,则执行层叠性

●选择器不同 ,则根据选择器权重执行

图片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <style>
        div{
            color: pink!important;  /* 此时pink为最优先级！*/
        }
        .lei{
             color: aqua;
        }
        #idxuanze{
            color: aquamarine;
        }
    </style>
</head>

<body>
    <div class="lei" id="idxuanze" style="color:blue;">你笑起来真好看</div>
</body>

</html>

权重：style > id > class > div > body/*

如果某一行加上，那么他就是最高的优先级!important

注意：继承的权重是0

权重的叠加：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <style>
        li {       /* 权重为 0，0，0，1 */
            color: antiquewhite;
        }

        ul li {   /* 权重为 0，0，0，1 + 0，0，0，1 = 0，0，0，2 */
            color: aqua;
        }

        .nav {    /* 权重为 0，0，1，0 */
            color: aquamarine;
        }

        .nav li {  /* 权重为 0，0，1，0 + 0，0，0，1 = 0，0，1，1  权重最大 */
            color: bisque;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>大猪蹄子</li>
    </ul>
</body>

</html>

注意：权重累加没有进位，当计算为0,0,0,10 时，不会进位为0,0,1,0