526互联

走进CSS—II

发布时间 2023-09-08 20:18:13作者: 博客zhu虎康

点击跳转继续学习：

目录

@
目录

在这里插入图片描述

一、走进CSS

1、CSS的简单介绍

网页 = HTML结构 + CSS表现 + JavaScript交互，做一些动作
CSS中尽量避免使用逗号，尽可能使用空格

1、什么是CSS

1.1、什么是CSS

Cascading Style Sheet层叠级联样式表
CSS：表现（美化网页）
字体、颜色、边距、高度、宽度、北京图片、网页定位、网页浮动……
在这里插入图片描述

1.2、发展史

CSS1.0，实现字体加粗之类的相关变化
CSS2.0，实现DIV（块）+ CSS + Html与CSS结构分离的思想，网页变得简单，SEO
CSS2.1，浮动、定位
CSS3.0，圆角，阴影，动画……
在这里插入图片描述

2、CSS快速入门

在这里插入图片描述

<style></style>

选择器{
	声明1; 
	声明2;
	声明3;
}

在这里插入图片描述
在<head></head>中，用<link rel="stylesheet" href="css/style.css">引入css文件
在这里插入图片描述

3、CSS的优势：

  • 内容和表现分离
  • 网页结构表现统一，可以实现复用
  • 样式十分的丰富
  • 建议使用独立于html的css文件
  • 利用SEO ，容易被搜索引擎收录！

4、CSS的3种导入方式

外部样式（外链式）

2、CSS选择器（重点+难点）

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

2.1、基本选择器

1、标签选择器
2、类选择器 clsss
3、id 选择器

2.2、层次选择器

2.3、结构伪类选择器

2.4、属性选择器【常用】

3、美化网页元素（文字、阴影、超链接、列表、渐变）

3.1、为什么要美化网页

3.2、字体样式

3.3 文本样式

3.4 阴影

3.5 CSS伪类

3.6 列表

3.7 背景

3.8 背景渐变

4、盒子模型

4.1 什么是盒子模型

4.2 边框

4.3 内外边距

4.4 圆角边框

4.5 阴影

5、浮动

5.1、标准文档流

块级元素：独占一行

h1——h6   p   div   列表

行内元素：不独占一行

span   a   img   strong……

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

5.2、display

display:block;：块元素
display:inline;：行内元素
display:inline-block：是块元素，但是可以内联在一行
display:none;：不设置

   <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;

        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid green;
            display: inline-block;
        }
    </style>

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

5.3、浮动

float:left;：向左浮动
float:right;：向右浮动

5.4、父级边框塌陷的问题

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

  1. 增加父级元素的高度
    简单，元素假设有类固定的高度，就会被限制
#father{
	border:1px #000 solid;
	height:800px;
}
  1. 增加一个空的div标签，清除浮动
    简单，但是代码还总尽量避免空div
<div class="clear"></div>

.clear{
	clear:both;
	margin:0;
	padding:0;
}
  1. overflow溢出
    在父级元素中增加
    简单，下拉的一些场景避免使用
    overflow:scoll：超出后实现滑动
    overflow:hidden：当内容过多，溢流的内容被隐藏。超出的部分隐藏
    overflow:auto:当内容过多的时候溢流的内容被隐藏，然后出现滚动条，让我们滚动查看所有的内
    overflow:visible: 当内容过多，溢流的内容被显示在盒子的外边。
    在这里插入图片描述
#content{
	width:200px;
	height:150px;
	overflow:scoll;	
}
<div id="content"></div>
  1. 在父类中添加
    建议使用。原理是在不更该原有代码之上使其丧失一些功能

在这里插入图片描述

5.5、对比

  • display 方向不可以控制
  • float 浮动起来的话会脱离标准文档流

6、定位

6.1、相对定位

在这里插入图片描述
相对应为：position: relative;
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中！原来的位置仍然会保留

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    相对定位，是相对与自己原来的位置进行偏移-->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid red;
            padding: 0;

        }
        #first{
            border: 1px dashed yellow;
            background: yellow;
            position: relative;/*相对定位 上下左右*/
            top: -20px;/*顶部移动-20px*/
            left: 20px;
        }
        #second{
            border: 1px solid green;
            background: green;
            
            
        }
        #third{
            border: 1px dashed blue;
            background: blue;
            position: relative;
            right: 20px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

练习：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border: 2px solid deepskyblue;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: pink;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background: chartreuse;
        }
        .a1{

        }
        .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、绝对定位position: absolute

定位：基于xxx定位

  1. 没有父级元素定位的前提下，相对于浏览器定位
  2. 假设父级元素存在定位position: relative;，我们通常会相对于父级元素进行偏移
  3. 在父级元素范围内移动，相对于父级或浏览器的位置，进行指定的偏移，绝对定位后，它不在标准文档流中，原来的位置不会保存

6.3、固定定位position: 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: red;
            position: absolute;
            right: 0px;
            bottom: 0px;
        }
        div:nth-of-type(2){/*fixed固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0px;
            bottom: 0px;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
</body>
</html>

6.4、图层z-index

CSS3在这里插入图片描述
opacity: 0.5;：背景透明度
filter:Alpha(opacity=50);：效果同上，但仅仅早些版本可以使用
z-index: 0;：设置层叠，0-999

设置文字跟背景

<div id="content">
    <ul>
        <li><img src="images/webwx.jpg" alt=""></li>
        <li class="tipTap">在线学习平台，学习需要多次练习</li>
        <li class="tipBg"></li>
        <li>姓名：外星人的</li>
        <li>地点：火星上哟</li>
    </ul>
</div>

设置层叠关系

#content{
    width: 450px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    /*标准尺寸
    font-size: 12px;
    line-height: 25px;*/
    font-size: 12px;
    line-height: 25px;
    border: 1px solid #000000;
}
ul,li{
    padding: 0px;
    margin: 0px;
    /*手动去圆点*/
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipTap, .tipBg{
    position: absolute;
    width: 450px;
    top: 360px;
    height: 25px;
}
.tipBg{
    background-color: black;
    opacity: 0.5;/*背景透明度*/
}
.tipTap{
    color: aliceblue;
    
}

7、动画及视野拓展

transform

点击走进 JavaScript学习：https://blog.csdn.net/qq_53810245/article/details/119341910