CSS入门---新手上路好帮手：）

最新推荐文章于 2024-10-02 15:35:50 发布
最新推荐文章于 2024-10-02 15:35:50 发布
阅读量91 收藏
点赞数
分类专栏： web 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shisanjin123/article/details/133048688
版权

1、什么是CSS

图片可能存在丢失问题，但不影响观看，若有疑问，烦请私信或者评论！~

如何学习

  1. CSS是什么
  2. CSS怎么用(快速入门)
  3. CSS 选择器 (重点 +难点 )
  4. 美化网页 (文字，阴影，超链接，列表渐变……. )
  5. 盒子模型
  6. 浮动
  7. 定位
  8. 网页动画(特效效果)

1.1、什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS ： 表现（美化网页）

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动……

1.2、发展史

CSS1.0

CSS2.0 DIV（块）+ CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动，定位

CSS3.0 圆角，阴影，动画… 浏览器兼容性~

1.3、快速入门

Style

基本入门：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--规范，<style> 可以编写CSS的代码，每一个声明，最好使用分号结尾
    语法：
        选择器{
            声明1;
            声明2;
            声明3;
        }
    -->
    <style>
        h1{
            color: red;
        }
    </style>

</head>
<body>

<h1>我是标题</h1>


</body>
</html>
``
CSS优势：

​	1、 内容和表现分离

​	2、 网页结构表现统一，可以实现复用

​	3、 样式十分丰富

​	4、 建议使用独立于html的css文件

​	5、 利用SEO，容易被搜索引擎收录





### 1.4、 CSS的3种导入方式

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>

    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<!--优先级：就近原则  -->


<!-- 行内样式:在标签元素中，编写一个style属性，编写样式即可 -->
<h1 style="color: red">我是标题</h1>

</body>
</html>

拓展：外部样式两种写法

  • 链接式：

HTML

<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
  • 导入式：

@import是CSS2.1特有的！

<!--导入式-->
    <style>
        @import url("css/style.css");
    </style>

1.5、三种添加方法

行内样式：
<p style="color: red;">我是谁的谁，你又是谁的谁</p>
内嵌样式：
<style>
    h1{
        color: green;
    }
</style>
注意：
  • 即使有公共CSS代码，也是每个页面都要定义的
  • 适合文件很少，CSS代码也不多的情况
  • 如果一个网站有很多页面，每个文件都会变大，后期维护难度也大
单独文件（外部样式表链接样式）：
.css:
	h1{
    	color: yellow;
	}

.html:
	<link rel="stylesheet" href="css/style.css">
  • 页面结构HTML代码与样式CSS代码的完全分离
  • 维护方便
  • 如果需要改变网站风格，只需要修改公共CSS文件
  • 可以在同一个HTML文档内部引用多个外部样式表
优先级：
  • 多重样式可以层叠，可以覆盖
  • 样式的优先级按照“就近原则”：
  • 行内样式 > 内嵌样式 > 链接样式 > 浏览器默认样式

2、选择器

作用：选择页面上的某一个或者某一类元素

2.1、基本选择器

1、 标签选择器：选择一类标签 标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*标签选择器，会选择到页面上所有的这个标签的元素*/
        h1{
            color: rgba(255, 255, 255, 0.9);
            background: #e508ec;
            border-radius: 12px;
        }
        p{
            font-size: 80px;
        }
    </style>


</head>
<body>


<h1>哈喽kitty</h1>
<h1>哈喽kitty</h1>
<p>嗨嗨害</p>

</body>
</html>

2、类 选择器 class：选择所有class属性一致的标签，跨标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*类选择器的格式； .class的名称{}
        好处：可以多个标签归类，是同一个class，可以复用
        */
        .sanjin{
            color: green;
        }
        .shisanjin{
            color: red;
        }
    </style>

</head>
<body>

<h1 class="sanjin">标题1</h1>
<h1 class="shisanjin">标题2</h1>
<h1 class="sanjin">标题3</h1>

<p class="sanjin">P标签</p>

</body>
</html>

3、id 选择器：全局唯一！ #id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* id选择器：id必须全局唯一！
           #id名称{}
           优先级：
           id选择器 > class选择器 > 标签选择器
        */
        #sanjin{
            color: #e508ec;
        }
    </style>

</head>
<body>

<h1 id="sanjin">标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>

优先级；id > class > 标签

2.2、层次选择器

1、后代选择器（嵌套）：在某个元素的后面 祖爷爷 爷爷 爸爸 你

/* 后代选择器 */
        body p{
            background: red;
        }

2、子选择器，一代，儿子

/* 子选择器 */
body>p{
    background: #3cbda6;
}

3、相邻兄弟选择器，同辈

/* 兄弟选择器：只有一个，相邻（向下） */
.active + p{
    background: #a13d30;
}

4、通用选择器

/* 通用兄弟选择器，当前选中元素的向下的所有兄弟元素 */
.active~p{
    background: #02ff00;
}

2.3、结构伪类选择器

伪类：条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

        <!--避免使用,class,id选择器-->
        <style>
           /* ul的第一个子元素 */
           ul li:first-child{
                background: #02ff00;
           }
           /* ul的最后一个子元素 */
           ul li:last-child{
               background: #ff4832;
           }

           /* 选中 p1 : 定位到父元素,选择当前的第一个子元素
            选中当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效! ..顺序
            */
           p:nth-child(1){
               background: #2799ff;
           }

           /* 选中父元素下的p元素的第二个, 类型 */
           p:nth-of-type(2){
               background: yellow;
           }

           /*a:hover{*/
           /*    background: #e508ec;*/
           /*}*/
        </style>

</head>
<body>
<!--<a href="">123123</a>-->
<!--<h1>h1</h1>-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

</body>
</html>

2.4、属性选择器（常用）

id + class结合~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 12px;
            background: #2799ff;
            text-align: center;
            color: white;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /* 属性名, 属性名 = 属性值(正则)
            = 绝对等于
            *= 包含这个元素
            ^= 以这个开头
            $= 以这个结尾
         */

        /*!* 存在id属性的元素,  a[]{}  *!*/
        /*a[id]{*/
        /*    background: yellow;*/
        /*}*/

        /* !* id=first的元素 *!*/
        /*a[id=first]{*/
        /*    background: #e508ec;*/
        /*}*/

        /*!* class中有links的元素 *!*/
        /*a[class*="links"]{*/
        /*    background: red;*/
        /*}*/

        /*!* 选中href中以http开头的元素 *!*/
        /*a[href^=http]{*/
        /*    background: yellow;*/
        /*}*/

        a[href$=jpg]{
            background: green;
        }

    </style>

</head>
<body>

<p class="demo">

    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item active">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="asdf.doc" class="links item last">10</a>

</p>

</body>
</html>

属性名, 属性名 = 属性值(正则)
    = 绝对等于
    *= 包含这个元素
    ^= 以这个开头
	$= 以这个结尾

CSS, JS, JQuery, vue都会用到

3、美化网页元素

3.1、为什么要美化网页

1、有效的传递页面信息

2、美化网页，页面漂亮，才能吸引用户

3、凸显页面的主题

4、提高用户的体验

span标签：重点要突出的字，使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #title1{
            font-size: 50px;
        }
    </style>

</head>
<body>

欢迎学习 <span id="title1">Java</span>

</body>
</html>

3.2、字体样式

 <!--
	    font-family: 字体
        color: 字体颜色
        background: 背景颜色
        font-size: 字体大小
        font-weight: 字体粗细

     -->
    <style>
        body{
            font-family:"Book Antiqua", 华文楷体;
            color: gray;
            background: lightcyan;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
   	</style>
简化 font 写法（有顺序）：
font：斜体  粗体  字号/行高  字体
font：italic bold 16px/1.5em '宋体';

3.3、文本样式

单位：
	px	像素
	em	1em——一个字符
		2em——两个字符
		自动适应用户所使用的字体
	%	百分比

1、颜色 color RGB RBGA

2、文本对齐方式 text-align = center

3、首行缩进 text-indent: 2em;

4、行高 line-height: 单行文字上下居中！line-height = height

5、下划线 text-decoration: none;

6、文本图片对齐方式 vertical-align: middle;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
     颜色:
        单词
        RGB 0~F
        RGBA A: 0~1

        text-align : 排版,居中,
        text-indent: 2em; 段落首行缩进
        行高，和块的高度一致，就可以上下居中
     -->
    <style>
        h1{
            color: rgba(0,168,168,88%);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: #0ad2d1;
            height: 300px;
            line-height:300px;
        }
        /* 下划线 */
        .l1{
            text-decoration: underline;
        }
        /* 中划线 */
        .l2{
            text-decoration: line-through;
        }
        /* 上划线 */
        .l3{
            text-decoration: overline;
        }
        /* a标签（/超链接）取消下划线 */
        a{
            text-decoration: none;
        }

        /*<!--*/
        /*水平对齐~ 参照物，  a, b*/
        /*-->*/
         img,span{
             vertical-align: middle;
         }


    </style>

</head>
<body>

<p class="l1">123123</p>
<p class="l2">123123</p>
<p class="l3">123123</p>

<a href="">123</a>

<h1>故事介绍</h1>

<p class="p1">这个世界名为元泱境界，脉（本质为振动）是构成万物的基础。每隔333年，会有一个神秘而强大的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>

<p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉
</p>

<p class="p3">When age chills the blood, when our pleasures are past. <br/>
    For years fleet away with the wings of the dove.<br/>
    The dearest remembrance will still be the last.<br/>
    Our sweetest memorial the first kiss of love.<br/>
</p>

<p>
    <img src="images/2.png" alt="二龙湖" width="500" height="350">
    <span>aka666</span>
</p>

</body>
</html>

3.4、阴影

/* text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径 */
#price{
    text-shadow: #1cafd2 2px 3px 2px;
}

3.5、超链接伪类

正常情况下，a, a:hover

/* 默认的颜色 */
a{
    text-decoration: none;
    color: #000000;
}
/* 鼠标悬浮的状态（只需要记住 :hover） */
a:hover{
    color: orange;
    font-size: 10px;
}

3.6、列表

/* ul li */
/*
list-style:
    none 去掉原点
    circle 空心圆
    decimal 数字
    square 正方形
*/
/*ul{*/
/*    background: #a0a0a0;*/                                                                                                                                                                                     
/*}*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

3.7、背景

3.8、渐变

渐变CSS网站：https://www.grabient.com/

background-color: #00DBDE;
background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);

4、盒子模型

4.1、什么是盒子模型

在这里插入图片描述

margin：外边距

padding：内边距

border：边框

4.2、边框

1、边框的粗细

2、边框的样式

3、边框的颜色

<style>

    /* body总有一个默认的外边框margin: 0. 常见操作 */
    /*h1,ul,li,a,body{*/
    /*    margin: 0;*/
    /*    padding: 0;*/
    /*    text-decoration: none;*/
    /*}*/

    /* border: 粗细，样式，颜色 */
    #box{
        width: 300px;
        border: 1px solid red;
    }

    h2{
        font-size: 15px;
        background-color: #0ad2d1;
        line-height: 30px;
        color: white;
        margin: 0px;
    }

    form{
        background: #0ad2d1;
    }
    div:nth-of-type(1) input{
        border: 3px solid black;
    }
    div:nth-of-type(2) input{
        border: 3px dashed #000af1;
    }
    div:nth-of-type(3) input{
        border: 2px dashed mediumorchid;
    }

</style>

4.3、内外边距

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 外边距的妙用：居中元素
       margin: 0 auto;
   -->
  <style>

    #box{
      width: 300px;
      border: 1px solid red;
      margin: 0 auto;
    }

    h2{
      font-size: 15px;
      background-color: #0ad2d1;
      line-height: 30px;
      color: white;
      margin-top: 0;
    }

    form{
      background: #0ad2d1;
    }
    input{
      border: 1px solid black;
    }
    div:nth-of-type(1){
      padding: 10px 2px;
    }

  </style>

</head>
<body>

<div id="box">
  <h2>会员登录</h2>
  <form action="#">
    <div>
      <span>用户名：</span>
      <input type="text">
    </div>
    <div>
      <span>密码：</span>
      <input type="text">
    </div>
    <div>
      <span>邮箱：</span>
      <input type="text">
    </div>
  </form>
</div>

</body>
</html>

盒子的计算方式：你这个元素到底多大？ ==> margin + border + padding + 内容宽度

4.4、圆角边框

4个角

<!--
左上，右上，右下，左下

圆圈：圆角 = 半径！
-->
<style>
    div{
        width: 100px;
        height: 100px;
        border: 10px solid red;
        border-radius: 50px;
    }
</style>

4.5、盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- margin: 0 auto; 居中
    要求：外面是块元素，且块元素有固定的宽度
    -->
    <style>
        img{
            border-radius: 20px;
            box-shadow:10px 10px 20px #aae9cf;
        }
    </style>

</head>
<body>

<div style="width: 500px;display: block;text-align: center">

    <img src="images/3.png" alt="">
<!--    <div style="margin: 0 auto">-->
<!--        -->
<!--    </div>-->
</div>


</body>
</html>

5、浮动

5.1、标准文档流

块级元素：独占一行

h1~h6	p	div	列表...

行内元素：不独占一行

span	a	img	 	strong...

行内元素可以被包含在 块级元素中，反之，则不可以~

5.2、display

<!-- 
block 块元素
inline 行内元素
inline-block 是块元素，但是可以内联，在一行！
none 空
-->
<style>
    div{
        width: 100px;
        height: 100px;
        border: 10px solid red;
        display: none;
    }
    span{
        width: 100px;
        height: 100px;
        border: 10px solid red;
        display: inline-block;
    }
</style>

1、这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float

5.3、float

1、左右浮动 float

div{
    margin:10px;
    padding:5px;
   
}
#father{
    border:1px #000 solid;
}
.layer01{
    border:1px #F00 dashed;
    display:inline-block;
    float: right;
}
.layer02{
    border:1px #00F dashed;
    display:inline-block;
    float: right;
}
.layer03{
    border:1px #060 dashed;
    display:inline-block;
    float: right;
}
.layer04{
    border:1px #666 dashed;
    font-size:12px;
    line-height:23px;
    display:inline-block;
    float: right;
}

5.4、父级边框塌陷的问题

clear

/* 
    clear: right;	右侧不允许有浮动元素
    clear: left;	左侧不允许有浮动元素
    clear: both;	两侧不允许有浮动元素
    clear: none;	没有
*/
解决方案：

1、增加父级元素的高度~

#father{
    border: 1px #000 solid;
    height: 800px;
}

2、增加一个 空的div标签，清除浮动

<div class="clear"><div/>

.clear{
	clear: both;
	marfin: 0;
	padding: 0;
}

3、overflow

在父级元素中增加一个	overflow: hidden;

4、父类添加一个伪类：after

#father:after{
	content: ''; 
	display: block; 
	clear: both; 
}
小结：

1、浮动元素后面增加空div

​ 简单，代码中尽量避免空div

2、设置父元素的高度

​ 简单，元素假设有了固定的高度，就会被限制

3、overflow

​ 简单，下拉的一些场景避免使用

4、父类添加一个伪类：after（推荐）

​ 写法稍微复杂一点，但是没有副作用，推荐使用！

5.5、

  • display

    方向不可以控制

  • float

    浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题

6、定位

6.1、相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 相对定位
     相对于自己原来的位置进行位移~
     -->

    <style>
        body{
            padding: 30px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
        }
        #first{
            background-color: #e508ec;
            border: 1px dashed #1cafd2;
                position: relative; /*相对定位：上下左右*/
            top: -50px;
            left: 15px;
        }
        #second{

            background-color: #02ff00;
            border: 1px dashed #321132;
        }
        #third{
            background-color: orange;
            border: 1px dashed #ff4832;
            position: relative;
            bottom: -40px;
            right: 30px;
        }
    </style>


</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

相对定位：posotion: relative;

相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留

top: -20px;
left: 20px;
bottom: -10px;
right: 20px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 1px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: #e539cc;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background: #2799ff;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>

</head>
<body>

<div id="box">
    <a class="a1" href="#">链接1</a>
    <a class="a2" href="#">链接2</a>
    <a class="a3" href="#">链接3</a>
    <a class="a4" href="#">链接4</a>
    <a class="a5" href="#">链接5</a>
</div>


</body>
</html>

6.2、绝对定位

定位：基于XXX定位，上下左右~

1、没有父级元素定位的前提下，相对于浏览器定位

2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移

3、在父级元素范围内移动

​ 相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: #e508ec;
            border: 1px dashed #1cafd2;
        }
        #second{
            background-color: #02ff00;
            border: 1px dashed #321132;
            position: absolute;
            right: 30px;
            top: -10px;
        }
        #third{
            background-color: orange;
            border: 1px dashed #ff4832;
        }


    </style>


</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>


</body>
</html>

6.3、固定定位 fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){ /* 绝对定位：相对于浏览器 */
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
div:nth-of-type(2){
    width: 50px;
    height: 50px;
    background: #2799ff;
    position: fixed;
    right: 0;
    bottom: 200px;
}
    </style>

</head>
<body>

<div>div1</div>
<div>div2</div>


</body>
</html>

6.4、z-index

图层~

z-index：默认是0，最高无限~999

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div id="content">
  <ul>
      <li><img src="images/css.png" alt=""></li>
      <li class="tipText">12345677654321</li>
      <li class="tipCSS"></li>
      <li>时间：2099-01-01</li>
      <li>地点：月球一号基地</li>
  </ul>
</div>



</body>
</html>

opacity:0.5; /* 背景透明度 */

#content{
    padding: 0;
    margin: 0;
    width: 650px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid #000000;
}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipCSS{
    position: absolute;
    width: 650px;
    height: 25px;
    top: 305px;
}
.tipText{
    color: white;
    z-index: 999;
}
.tipCSS{
    background: #000000;
    opacity: 0.5;/*背景透明度*/
}

*/
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){
width: 50px;
height: 50px;
background: #2799ff;
position: fixed;
right: 0;
bottom: 200px;
}

div1
div2
```

6.4、z-index

图层~

z-index：默认是0，最高无限~999

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div id="content">
  <ul>
      <li><img src="images/css.png" alt=""></li>
      <li class="tipText">12345677654321</li>
      <li class="tipCSS"></li>
      <li>时间：2099-01-01</li>
      <li>地点：月球一号基地</li>
  </ul>
</div>



</body>
</html>

opacity:0.5; /* 背景透明度 */

#content{
    padding: 0;
    margin: 0;
    width: 650px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid #000000;
}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipCSS{
    position: absolute;
    width: 650px;
    height: 25px;
    top: 305px;
}
.tipText{
    color: white;
    z-index: 999;
}
.tipCSS{
    background: #000000;
    opacity: 0.5;/*背景透明度*/
}
shisanjin123
关注
专栏目录
css设置滚动条宽度::-webkit-scrollbar
Eliaukoyx
05-09 9696
css设置滚动条宽度::-webkit-scrollbar
CSS：overflow-wrap文本溢出换行
会写Bug的攻城狮
11-22 4035
CSS 属性 overflow-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。备注： 与word-break相比，overflow-wrap仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生中断。备注： word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap。word-wrap 现在被当作 overflow-wrap 的“别名”。
CSS font-family 中的苹方字体
盏茶作酒的博客
10-09 6963
苹方提供了六个字重，font-family 定义如下： 苹方-简 常规体 font-family: PingFangSC-Regular, sans-serif; 苹方-简 极细体 font-family: PingFangSC-Ultralight, sans-serif; 苹方-简 细体 font-family: PingFangSC-Light, sans-serif; 苹方-简 纤细体 f...
【css】border-shadow
当白的技术小窝 ( git : https://github.com/canwhite )
09-18 5662
box-shadow: h-shadow v-shadow blur spread color inset; h-shadow :从左上角原点横线移动举例，正值向右，负值向左 v-shadow:从左上角原点纵向移动距离，正值向下，负值向上 blur :呈现模糊效果，如果不给这个阴影完全是实心的，巨丑 spread：阴影尺寸 color : 阴影显示颜色 inset ：展示为内部阴影，也可以展示为outset，直接写inset/outset就可以 talk is cheap！一个实例： 往..
css linear-gradient 设置背景颜色渐变
热门推荐
且听风吟的博客
08-12 2万+
CSS3 渐变能够让背景颜色在两个或多个颜色之间平滑过渡。
:host 和::ng-deep
珍妮的小罐君
03-05 1万+
:host 表示选择当前的组件。 ::ng-deep 可以忽略中间className的嵌套层级关系。直接找到你要修改的className。 使用： :host { background: #F5F5F5; overflow: hidden; padding: 24px; display: block; } .card-container ::ng...
每日一学—CSS3 word-wrap 属性
黛琳ghz的博客，期待你的关注。
05-07 1万+
word-wrap 属性是 CSS3 中的一个文本换行属性，用于指定在何处应该发生文本换行。 word-wrap 属性有两个可选值： normal：默认值。表示只在单词或连字符处换行。 break-word：表示允许在任意字符内换行，以避免当单词或字符串太长以至于无法适应其容器时出现的水平滚动条。
css background-attachment属性详解
BDawn的专栏
03-05 5018
css background-attachment属性详解 background-attachment属性用途 background-attachment属性用于设置背景图片定位的参照方式 background-attachment可设置的值 scroll: 背景图片相对于容器位置固定 fixed: 背景图片相对于浏览器窗口固定 local: 背景图片相对于容器内容位置固定 background-attachment demo <!DOCTYPE html> <html lang="e
css属性 text-align: justify无效的原因
qq_40156604的博客
05-28 4109
今天工作用到了这个属性，但发现不起作用，经过查询后发现是只对最后一行无效！也就是只有一行时，以及多行中的最后一行是无效的 解决方法 先给父级设置text-align: justify;，剩下的两个方法二选一 1.给文本之后再增加一个标签，使文本不再是最后一行 2.增加个伪元素 代码 效果 ...
CSS3中：nth-child和：nth-of-type的区别深入理解
lonecry的博客
02-21 9906
1、:nth-child() 选择器 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型，n 可以是数字、关键词或公式。 2、:nth-of-type(n) :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，n 可以是数字、关键词或公式。 ...
uniapp - 报错Error: PostCSS plugin autoprefixer requires PostCSS 8. Migration guide for end-users:http
高级前端工程师
07-24 2851
uniapp，vue2，vue3，报错，运行报错，启动失败，无法启动，Syntax Error: Error: PostCSS plugin autoprefixer requires PostCSS 8. Migration guide for end-users:https://github.com/postcss，vue，命令行创建，cli，更新PostCSS或降级此插件，将autoprefixer的版本更改还是报错，版本升级了还是报错，版本降了依旧有错误，PostCSS，uniApp启动报错，如何解
CSS--box-shadow
weixin_52283867的博客
05-27 5081
前言 本文主要是简单学习下box-shadow这一属性的使用方式，如有错误请大家多多指正！！ 正题 简介 box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。 参数理解 X轴偏移量（h-shadow） 这个值必需的，表示水平阴影的位置，允许负值 正值阴影在右边，负值阴影在左边，0的时候阴影中盒子后面，看不见的，如果有blur值会有模糊效果 Y轴偏移量（v-shado
CSS pointer-events: none 去掉鼠标事件
快乐de馒头
01-21 1万+
pointer-events: none顾名思义，就是鼠标事件拜拜的意思。元素应用了该 CSS 属性，链接啊，点击啊什么的都变成了 “浮云牌酱油”。pointer-events: none的作用是让元素实体 “虚化”。例如一个应用 pointer-events: none 的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候...
css text-stroke 文字描边
352328759的博客
12-22 3321
text-stroke 不是标准的 css 属性, 所以本篇读者可以视为娱乐 text-stroke 是复合属性, 包括 text-stroke-width, text-stroke-color 因为不是标准属性, 大多数情况要加上前缀 text-stroke-width 指描边的宽度, 该属性的描边风格是居住描边(内边, 外边各占一半), 且只有居中描边一种 结合 absolute 定位, 用未描边的内容, 遮盖已描边的内容, 可以实现只描外边的效果 demo <!DOCTYPE html>
CSS3 边框渐变背景色border-image: linear-gradient()
grootbaby
04-01 8527
写法 border-image: gradient top right bottom left; 第一个参数是带有浏览器内核的元素背景渐变写法，如：-webkit-linear-gradient() 第二至第五个参数写法与边框宽度（border-width）的写法是一致的 实例 /* 如下图.border-image1 */ .border-im...
CSS画出三角形的做法
mingangel的博客
10-01 255
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
CSS-Day3
m0_74039531的博客
09-29 300
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
CSS 盒子属性
m0_74012211的博客
10-02 277
CSS 盒子属性
【CSS】position
最新发布
小秀的博客
10-02 176
特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值