css用法详解整理2，含综合示例，可运行_css标签讲解及示例-优快云博客

本文链接：https://blog.youkuaiyun.com/QiaoLiu___lq/article/details/123165387

css

文章目录

1.元素显示模式

常见块元素：<h1>\<p>\div>\<ul>\<ol>\<li>
其独占一行， 高度，宽度，外边距，内边距都可以控制，宽度默认是容器（父级宽度）的100%，是一个容器及盒子，里面可以放行内或者块级元素；
注意， <p>里面只放文字，不能放<div>    <h!>同理

行内元素：<a>\<strong>\<b>\<em>\<i>\<del>\<s>\<ins>\<u>\<span>
相邻元素在一行上，一行显示多个，高宽直接设置是无效的，默认宽度就是它本身内容的宽度，行内元素只能容纳文本或者其他行内元素；
注意，链接里面不能再放链接，特殊情况<a>里面可以放块级元素，但是<a>转换一下块级模式最安全；

行内块元素：<img/>\<input/>\<td>
他们同时具有块元素和行内元素的特点。
和相邻内元素在一起时在一行， 但是他们之间会有空白缝隙，一行可以显示多个，默认宽度就是它本身内容的宽度，高度，行高，外边距及内边距都可以控制。

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>
    <style>
        a {
            width: 150px;
            height: 50px;
            background-color: hotpink;
            /* 把行内元素a转化为块级元素 */
            display: block;
        }


        div {
            width: 300px;
            height: 100px;
            background: rgb(196, 112, 189);
            /* 把div块元素a转化为行内元素 */
            display: inline;
        }


        span {
            width: 100px;
            height: 300px;
            background: rgb(105, 187, 162);
            /* 把行内元素转化为行内块元素 */
            display: inline-block;
        }
    </style>


</head>


<body>
    <a href="#"> popo~</a>
    <div>我是popo！</div>
    <span>popo~~~</span>
    <span>popo~~~</span>
</body>


</html>

3.单行文字垂直居中的代码

让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中；

div {
            width: 300px;
            height: 40px;
            background: rgb(196, 112, 189);
            /* 把div块元素a转化为行内元素 */
            display: inline;
            line-height: 40px;
        }

4.背景图片

<!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>
    <style>
        div {
            width: 300px;
            height: 300px;
            /* 不要拉下url（） */
            background-image: url(banner.png);
        }
    </style>
</head>


<body>
    <div></div>
</body>


</html>

背景平铺：如果，背景图片小于盒子大小，那么图片会再次平铺（默认平铺）背景颜色会压住背景图片

background-repeat: repeat;      平铺
            background-repeat: no-repeat;    不平铺
            background-repeat: repeat-x;    x轴平铺
            background-repeat: repeat-y;    y轴平铺

1.背景图片的位置：

            background-position: x y;

2.x，y表示x坐标和y坐标，可以使用方位名词或者精确单位

            background-position: center top;      水平居中

3.left top center right（位置顺序无关）

或者精准表达（原点在左上角）

            background-position: 20px ;（y可以省略，x不能）

4.还可以混合单位

            background-position: 20px center;

5.背景固定还是滚动

            background-attachment: fixed;   固定
            background-attachment: scroll;   滚动

6.背景颜色半透明

            background: rgba(0, 0, 0, 0.3);

7.背景图片以及不要平铺

            background: url(bg1.jpg) no-repeat;

8.样例

<!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>
    <style>
        .nav a {
            display: inline-block;
            width: 120px;
            height: 58px;
            line-height: 58px;
            background-color: rgb(202, 146, 146);
            text-align: center;
            color: #fff;
            text-decoration: none;
        }


        .nav .bg1 {
            background: url(bg1.jpg) no-repeat;
        }


        .nav .bg1:hover {
            background-image: url(bg11.JPG);


        }
    </style>
</head>


<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
    </div>
</body>


</html>

5.css三大特性

层叠性、继承性、优先级

层叠性：样式冲突，遵循就近原则，哪个离样式近，就执行哪个样式。
继承性：子标签会继承父标签中的某些样式，如文本颜色和字号。

6.行高的继承实例

<!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>
    <style>
        body {
            color: pink;
            font: 12px/1.5 "Microsoft yaHei";
        }


        div {
            font-size: 14px;
            /* 子元素继承了父元素body的行高1.5，这个1.5就是当前元素文字的大小font-size的1.5倍 */
            /* 所以，当前div的行高就是14*1.5=21像素 */
        }


        p {
            font-size: 16px;
            /* 1.5*16=24 当前的行高 */
        }


        /* li没有手动指定文字大小，则会继承父亲的文字大小 */
        /* body的文字大小是12px所以，li的文字大小12px */
        /* 当前li的行高就是12*1.5=18px */
        </style>
</head>


<body>
    <div>粉色的回忆，粉色的popo小可爱</div>
    <p>粉色的回忆，粉色的popo小可爱</p>
    <ul>
        <li>我没有指点文字大小</li>
    </ul>
</body>


</html>

7.优先级

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

如果选择器相同就会执行层叠性；（就近原则）

选择器不同，则会根据选择器权重执行

<!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>
    <style>
        div {
            color: pink !important;
        }


        .test {
            color: red;
        }


        #demo {
            color: seagreen;
        }
    </style>
</head>


<body>
    <div class="test" id="demo" style="color: snow;">popo笑起来真好看</div>
</body>


</html>

注意：继承的权重是0，即，如果该元素没有被直接选中，不管父元素权重多高，子元素得到的权重都是0；

a链接浏览器默认指定了一个样式，蓝色的，有下滑线；

8.权重叠加

如果选择的是复合选择器。则会有权重叠加，需要计算权重。

<!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>
    <style>
        li {
            color: #6e0b0b;
        }
/* 权重虽然会叠加，但是不会有进位的问题！ */
        /* li的权重是0001 */
        ul li {
            color: teal;
        }


        /* ul li 的权重是0001+0001=0002 */
        .nav li {
            color: yellow;
        }
        /* .nav li 权重：0010+0001=0011 */
    </style>
</head>


<body>
    <ul class="nav">
        <li>popo</li>
        <li>popo宝</li>
        <li>popo酱</li>
    </ul>
</body>


</html>