前端-CSS

一、什么是CSS

1.1 什么是CSS

1.2 发展史

css1.0

css2.0：DIV(块标签) span(行标签) ，HTML与CSS结构分离的思想，网页变得简单

CSS2.1 浮动、定位

CSS3.0 圆角、阴影、动画... 浏览器兼容性

1.3 快速入门

html和CSS没有分离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            color: brown;
        }
    </style>
</head>
<body>
<h1>CSS学习</h1>

</body>
</html>

现在css和html为分离

二、CSS的优势

2.1 内容和表现分离

2.2 网页结构表现统一，可以实现服用

2.3 样式是否的丰富

2.4 建立使用独立于html的CSS

即最好html和css放在不同的文件，相分离

2.5 利于SEO，容易被搜索引擎收录！

三、CSS的4种导入方式

3.1 CSS的4种导入方式

3.1.1 行内样式

行内样式：在标签元素中，编写一个style属性，编写样式即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内样式</title>
</head>
<body>
<h1 style="color: yellowgreen">行内样式</h1>
</body>
</html>

3.1.2 内部样式

写在style块里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内样式和内部样式</title>

    <style>
        /*内部样式*/
        h1 {
            color: brown;
        }
    </style>
</head>
<body>
<!--行内样式-->
<h1 style="color: yellowgreen">行内样式</h1>
</body>
</html>

3.1.3 外部样式(link链接式)

外部样式需要用link引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内样式和内部样式和外部样式</title>

    <style>
        /*2.内部样式*/
        h1 {
            color: brown;
        }
    </style>
<!--    3.外部样式-->
    <link rel="stylesheet" href="../resouces/css/common.css">
</head>
<body>
<!--1.行内样式-->
<h1 style="color: yellowgreen">行内样式</h1>
</body>
</html>

3.1.4 外部样式(@导入式)

导入式：会先渲染出骨架html，再导入样式，当网页很大的时候，会看到显示一个骨架，过一会样式才会出来变的好看。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内样式和内部样式</title>

    <style>
        /*2.内部样式*/
        h1 {
            color: brown;
        }
    </style>
<!--    3.外部样式-->
  <!--  <link rel="stylesheet" href="../resouces/css/common.css">-->

<!--    4.外部链接 导入式-->
    <style>
        @import url(../resouces/css/common.css);
    </style>

</head>
<body>
<!--1.行内样式-->
<h1>外部样式导入式</h1>
<!--<h1 style="color: yellowgreen">行内样式</h1>-->
</body>
</html>

3.2 style的优先级（就近原则）

注意：是"就近原则"（并非行内样式>内部样式>外部样式）

内部样式和外部样式谁离被修饰标签近，谁生效

四、三种基本选择器（`重点`）

4.1 选择器的作用：

选择页面上的某一个或者某一类元素，html是一个dom树。

4.2 基本选择器的3个分类

4.2.1 标签选择器

我只想要第一个h1变样式，第二个h1样式不变，标签选择器范围太大做不到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        h1{ 
            color: brown;
            background: aqua;
            border-radius: 8px;
        }
        p{
            font-size:80px;
        }
    </style>
</head>
<body>
<h1>标题头1</h1>
<h1>标题头2</h1>
<p>p标签</p>
</body>
</html>

效果如下：

4.2.2 类选择器

类选择器：可以多个标签归类，相当于作用于同一个class，样式可以跨标签复用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
<!--    类选择器的格式：   .class的名称-->
    <style>
        .happyclass {
            color: blue;
        }
        .c2{
            color: brown;
        }
    </style>
</head>
<body>
<h1 class="happyclass">happyclass的样式</h1>
<h1 class="c2">其他h1</h1>
<h1>其他h1</h1>

</body>
</html>

效果如下：

4.2.3 id选择器

id必须保重全局唯一，即每个标签的id必须都不一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        /*id选择器
        #id名称
        */
        #happyid {
            color: yellowgreen;
        }
    </style>
</head>
<body>
<h1 id="happyid">id选择器样式</h1>
<h1>其他H1</h1>
</body>
</html>

效果如下：

4.3 选择器的优先级

id>.class>标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级</title>
    <style>
        h1 {
            color: red;
        }

        .happyclass {
            color: yellow;
        }

        #happyid {
            color: green;
        }
    </style>
</head>
<body>
<h1 id="happyid" class="happyclass">id和class和标签同时作用</h1>
<h1 class="happyclass">class和标签同时作用</h1>
</body>
</html>

效果如下：

五、高级选择器

5.1 层次选择器4个

进一步精准选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>
    <style>
        /*1.后代选择器*/
        /*body p{*/
        /*    color: green;*/
        /*}*/

        /*2.子选择器*/
        /*body > p {*/
        /*    color: brown;*/
        /*}*/

        /*3.兄弟选择器*/
        /*.class1 + p {*/
        /*    color: blue;*/
        /*}*/
        /*4.通用兄弟选择器*/
        .class1 ~ p {
            color: red;
        }
    </style>
</head>
<body>
<p>p0</p>
<p class="class1">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li><p>li-p3</p></li>
    <li><p>li-p4</p></li>
</ul>
</body>
</html>

5.1.1 后代选择器：

格式：在某个元素后面都作用，祖爷爷爷爷爸爸你

body p{
	backgroud: red:
}

5.1.2 子选择器

只有后面一代后受影响

body>p{
	backgroud: red:
}

效果如下：

5.1.3 相邻兄弟选择器（同辈）

弟弟选择器，只选择后面挨着的兄弟，且仅仅一个。

.class1 + p {
    color: red;
}

5.1.4 通用选择器（同辈）

当前选择元素的，向下所有弟弟，所有不是一个，和上面对比

.class1 ~ p {
    color: red;
}

5.2 结构伪类选择器

就是原来的选择器后面加：号，任何选择器都有伪类，如hover。

类：就是原来普通的类

伪类：就是在原来普通的类后加了一些条件，而这些条件用：加在后面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
        ul > li:last-child {
            color: blue;
        }

        /*当前选择元素的父标签的第N个子元素*/
        p:nth-child(2) {
            color: red;
        }
        p:nth-of-type(2){
            background: yellow;
        }

        a:hover{
            background: blue;
        }
    </style>

</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
</ul>
<a href="">请点击这里测试hover伪类</a>

</body>
</html>

注意nth-child和nth-of-type区别，在以上例子中，一个包括h1一个不包括h1。即一个分类型p，一个不分类型p。

5.3 属性选择器（`重要`）

属性选择器把class和id相结合

属性选择器格式为： [属性名] 或者[属性名=属性值]，属性值可以是正则

如a[]或者a[id=first]，

正则表达式为：

= 为绝对等于
*=为包含
^=以什么开头
$=以什么为结尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #14caea;
            text-align: center;
            font: bold 20px/50px Arial;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
        }
        a:hover{
            background: blue;
        }

        /*属性选择器*/
        /*[属性名=属性值]*/
        /*存在id属性的元素*/
        a[id]{
            background: red;
        }
        /*选择id=first的*/
        a[id=first]{
            color: green;
        }

        /*选择class=links的*/
       /* a[class*=links]{
            background-color: fuchsia;
        }*/

        /*选择href中以http开头的*/
        a[href^=http]{
            background-color: fuchsia;
        }

        /*选择href中以pdf结尾的*/
        a[href$=pdf]{
            background-color: yellow;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="http://www.baidu.com" class="links item active" target="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="/a.pdf" class="links item">6</a>
    <a href="/abc.pdf" class="links item">7</a>
    <a href="abcd.doc" class="links item last" id="last">8</a>
</p>


</body>
</html>

效果如下：

六、美化网页元素

6.1 为什么要美化网页

有效传递页面信息
美化网页，页面漂亮，才能吸引用户
凸显页面的主题
提高用户的体验

6.2 重要标签

6.2.1 span

想要凸显的字，用span给套进去，并给span标签加样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span</title>
    <style>
        #title {
            font-size: 50px;
            color: red;
        }
    </style>
</head>
<body>
努力学习，<span id="title">坚持!</span>
</body>
</html>

效果如下：

6.2.2 div

同span

6.3 字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页美化</title>
    <style>
        body {
            font-family: 华文楷体;
        }

        .p1 {
            font-weight: bold;
        }
       /* .p2 {
            font-weight:  ;
        }*/
    </style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">
    《一拳超人》是ONE原作，村田雄介作画，连载于网络漫画杂志《邻座的Young jump》上的漫画。 [1-2]  原为ONE在个人网站上连载的练笔之作， [3]  后被喜爱该作的另一漫画家村田雄介在征得ONE同意后重新绘制而成。

</p>
<p class="p2">
    电子版由哔哩哔哩漫画发布、漫番漫画同步日本连载发布。 [4]
    截至2020年4月21日，本系列作品全球销量累计突破3000万部。
</p>

</body>
</html>

效果如下：

6.4 文本样式

颜色 color rgb rgba
文本对齐的方式 text-align center
首行缩进 text-indent:2em;
行高 line-height 单行文字上下居中 line-height=height
装饰 text-decoration
文本图片水平对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页美化</title>
    <style>
        h1 {
            color: rgb(255, 0, 0);
            text-align: center;
        }

        /*透明度*/
        h2 {
            color: rgba(255, 0, 0, 0.5);

        }

        /*缩进，段落首行缩进两个字*/
        .p1 {
            text-indent: 2em;
        }

        /*
        text-align:排班居中
        行高和块的高度一致，就可以上下居中，
        比如
            height: 300px;
            line-height: 300px;
        */
        .p2 {
            background: cadetblue;
            height: 300px;
            line-height: 300px;
        }
        .header2{
            text-decoration: underline;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
<h1>故事介绍</h1>
<h2 class="header2">高兴</h2>
<p class="p1">
    《一拳超人》是ONE原作，村田雄介作画，连载于网络漫画杂志《邻座的Young jump》上的漫画。 [1-2] 原为ONE在个人网站上连载的练笔之作， [3] 后被喜爱该作的另一漫画家村田雄介在征得ONE同意后重新绘制而成。

</p>
<p class="p2">
    电子版由哔哩哔哩漫画发布、漫番漫画同步日本连载发布。 [4]
    截至2020年4月21日，本系列作品全球销量累计突破3000万部。
</p>
<a href="http://www.baidu.com">a标签去下划线</a>
</body>
</html>

效果如下：

6.5 补充：超链接伪类的一些样式

正常情况下：a:hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签练习</title>
    <style>
        a{
            text-decoration: none;
            color: black;
        }
        /*鼠标悬停的状态*/
        a:hover{
            color: orangered;
            font-size: 50px;
        }
        /*鼠标按住没有释放的颜色*/
        a:active{
            color: green;
        }
        /*a:visited{*/
        /*    color: #14caea;*/
        /*}*/
        #price{
            text-shadow: brown 10px 10px 2px;
        }

    </style>
</head>
<body>
<p>

    <img src="../resouces/image/书.jpg" alt="图片没有显示这个" title="图悬停字">
</p>
<p>

    <img src="../resouces/image/书.jpg" alt="图片没有显示这个" title="图悬停字" width="100">
</p>
<p>

    <img src="../resouces/image/书（小）.jpg" alt="图片没有显示这个" title="图悬停字" >
</p>
<p><a href="#">作者：老师</a></p>
<p id="price"><a href="">价格：￥55</a></p>

</body>
</html>

效果如下：

6.6 补充：列表的一些样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表的样式</title>
    <link rel="stylesheet" href="../resouces/css/nav.css">
</head>
<body>
<div id="nav">
    <h1>商品列表</h1>
    <ul>
        <li><a href="">足球</a>&nbsp&nbsp<a href="">篮球</a></li>
        <li><a href="">电视</a>&nbsp&nbsp<a href="">冰箱</a></li>
        <li><a href="">电灯</a>&nbsp&nbsp<a href="">空调</a></li>
        <li><a href="">画报</a>&nbsp&nbsp<a href="">画</a></li>
        <li><a href="">鼠标</a>&nbsp&nbsp<a href="">电脑</a></li>
        <li><a href="">帅哥</a>&nbsp&nbsp<a href="">美女</a></li>

    </ul>
</div>
</body>
</html>

css文件如下：

#nav{
    width: 250px;
}

h1{
    height: 60px;
    background: darkcyan;
    text-indent: 2em;
    font-weight: bold;
    line-height: 60px;
}

ul{
    background: #b2b0b0;
}

li{
    list-style: none;
    height: 35px;
}
a{
    color: black;
    text-decoration: none;
}

a:hover{
    color:darkred;
    text-decoration: underline;
}

效果如下：

6.7 补充：图像平铺及渐变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认是全部平铺的*/
        div{
            height: 200px;
            width: 1000px;
            border: 1px solid red;
            background-image: url("../resouces/image/书（小）.jpg");
        }

        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div3{
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"> </div>

</body>
</html>

效果如下：

七、盒子模型

7.1 什么是盒子模型

术语	说明
margin	外边距
padding	内边距
border	边框

7.2 示例：做登陆表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*body总有一个默认外边距8px*/
        h2,ul,li,a,body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        /*border: 粗细、样式、颜色*/
        #app{
            width: 300px;
            border: 1px solid darkred;
        }
    </style>
</head>
<body>

<div id="app">
    <h2>会员登陆</h2>
    <form action="">
        <div>
            <span>姓名:</span>
            <input type="text">
        </div>
        <div>
            <span>密码:</span>
            <input type="text">
        </div>
        <div>
            <span>提交:</span>
            <input type="submit">
        </div>
    </form>
</div>
</body>
</html>

7.3 边框

边框的粗细
边框的样式
边框的颜色

#app{
    width: 300px;
    border: 1px solid darkred;
    margin: 0 auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*一些初始化操作*/
        /*body总有一个默认外边距8px*/
        h2,ul,li,a,body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        /*border: 粗细、样式、颜色*/
        #app{
            width: 300px;
            border: 1px solid darkred;
            margin: 0 auto;
        }

        h2{
            margin: 0 1px 2px 3px;
            background: red;
        }

        form{
            background: #14caea;
        }
        /*伪类选择器*/
        div:nth-of-type(1) input{
            border: 3px solid black;
        }

        div:nth-of-type(2) input{
            border: 3px dashed black;
        }

    </style>
</head>
<body>
<!--整个应用都放到app id里面-->
<div id="app">
    <h2>会员登陆</h2>
    <form action="">
        <div>
            <span><label for="name">姓名:</label></span>
            <input id="name" type="text">
        </div>
        <div>
            <span><label for="password">密码:</label></span>
            <input id="password"  type="text">
        </div>
        <div>
            <span>提交:</span>
            <input type="submit">
        </div>
    </form>
</div>
</body>
</html>

效果如下：

7.4 内外边距

外边距的妙用：水平居中

分别为：上右下左顺时针

#app{
    width: 300px;
    border: 1px solid darkred;
    /*外边距的妙用，居中*/
    margin: 0 auto;
    padding: 0 1px 2px 3px;
}

`margin:0 auto；生效，需要一定的前提条件。`

1 两者是块元素，即 display: block;

2 父元素需要有宽度，即 width: x px；

3 在有前两者的前提下，设置 margin: 0 auto；即可实现居中。

7.5 模型计算

盒子的计算模式，你这个元素到底多大？

margin+border+padding+内容宽度

7.6 圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角边框</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 10px solid red;
            background-color: #14caea;
            border-radius: 50px;
        }

        img{
            width:100px;
            height: 100px;
            border-radius: 50px ;
        }
    </style>
</head>
<body>
<div></div>
<img src="../resouces/image/微信头像.jpg" alt="">
</body>
</html>

效果如下：

7.7 阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角边框</title>
    <style>
        /*居中的要求，外面必须是块元素，且必须有大小*/
        div {
            width: 100px;
            height: 100px;
            border: 10px solid red;
            background-color: #14caea;
            border-radius: 50px;
            box-shadow: 10px 10px 100px yellow;
            margin: 0 auto;
        }

        img{
            width:100px;
            height: 100px;
            border-radius: 50px ;
        }
    </style>
</head>
<body>
<div></div>
<div style="margin: 0 auto;width: 100px">
    <img src="../resouces/image/微信头像.jpg" alt="">
</div>

<div>
<h1>居中</h1>
</div>
</body>
</html>

效果如下：

7.8 浮动

7.8.1 display属性说明

display属性	说明
inline	- 高宽设置无效，以内容高宽为准 - 可以浮动 - 不独占一行
block	- 高宽设置有效 - 不能浮动 - 独占一行
inline-block	- 高宽设置有效 - 可以浮动 - 不独占一行，`共享一行`

块级元素：独占一行

h1~h6 p div 列表等

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

span a img strong等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        div{
            width: 180px;
            height: 100px;
            border:1px solid red;
        }
        span{
            width: 180px;
            height: 100px;
            border:1px dashed red;
        }
    </style>
</head>
<body>

<div>div元素</div>
<span>span行内元素</span>
</body>
</html>

如上图，span默认为内联行级元素，高宽属性设置都无效，且不浮动，现在我们尝试改变span默认性质，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        div{
            width: 180px;
            height: 100px;
            border:1px solid red;
        }
        span{
            width: 180px;
            height: 100px;
            border:1px dashed red;
            display: block;
        }
    </style>
</head>
<body>

<div>div元素</div>
<span>span行内元素</span>
</body>
</html>

7.8.2 浮动

左右浮动

float: left
float: right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父级元素塌陷的问题</title>
    <link rel="stylesheet" href="../resouces/css/style.css">

</head>
<body>
<div id="father">
<div class="layer1"><img id="img1" src="../resouces/image/微信头像.jpg" alt=""></div>
<div class="layer2"><img src="../resouces/image/书（小）.jpg" alt=""></div>
<div class="layer3"><img id="img2" src="../resouces/image/往返建行大厦及中心循环巴士.png" alt=""></div>
<div class="layer4"><img src="../resouces/image/熬夜中.png" alt=""></div>
</div>
</body>
</html>

css文件如下：

div {
    margin: 10px;
    padding: 10px;
}

#father{
    border: 1px #14caea solid;
}

.layer1{
    border: 1px dashed firebrick;
    display: inline-block;
}
.layer2{
    border: 1px dashed firebrick;
    display: inline-block;
}
.layer3{
    border: 1px dashed firebrick;
    display: inline-block;
}
.layer4{
    border: 1px dashed firebrick;
    display: inline-block;
}


#img1 {
    width: 100px;
    height: 100px;
}

#img2 {
    width: 150px;
    height: 150px;
}

效果如下：

7.8.3 父级边框塌陷的问题

clear介绍

clear类型	说明
clear: right	右侧不允许浮动
clear: left	左侧不允许浮动
clear: both	两侧都不允许浮动，按正常元素排列，另起一行
clear: none	可以浮动

现在开始浮动

div {
    margin: 10px;
    padding: 10px;
}
#father{
    border: 1px #14caea solid;
}
.layer1{
    border: 1px dashed firebrick;
    display: inline-block;
    float:left;
}
.layer2{
    border: 1px dashed firebrick;
    display: inline-block;
    float:left;
}
.layer3{
    border: 1px dashed firebrick;
    display: inline-block;
    float:left;
}
.layer4{
    border: 1px dashed firebrick;
    display: inline-block;
    float:left;
    clear: both;
}
#img1 {
    width: 100px;
    height: 100px;
}
#img2 {
    width: 150px;
    height: 150px;
}

1.增加父级元素高度

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

2.增加一个空的div，并清除浮动

但代码中有空的div不是很优雅，建议用第4个

div {
    margin: 10px;
    padding: 10px;
}

#father{
    border: 1px #14caea solid;
    /*height: 800px;*/
}

.layer1{
    border: 1px dashed firebrick;
    display: inline-block;
    float:left;
}
.layer2{
    border: 1px dashed firebrick;
    display: inline-block;
    float:left;
}
.layer3{
    border: 1px dashed firebrick;
    display: inline-block;
    float:left;
}
.layer4{
    border: 1px dashed firebrick;
    display: inline-block;
    float:left;
    /*clear: both;*/
}

.clear{
    clear: both;
    /*border: 1px;*/
    margin: 0;
    padding: 0;
}

#img1 {
    width: 100px;
    height: 100px;
}

#img2 {
    width: 150px;
    height: 150px;
}

3.overflow

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

div {
    margin: 10px;
    padding: 10px;
}

#father{
    border: 1px #14caea solid;
    /*height: 800px;*/
    overflow: hidden;
}

.layer1{
    border: 1px dashed firebrick;
    display: inline-block;
    float:left;
}
.layer2{
    border: 1px dashed firebrick;
    display: inline-block;
    float:left;
}
.layer3{
    border: 1px dashed firebrick;
    display: inline-block;
    float:left;
}
.layer4{
    border: 1px dashed firebrick;
    display: inline-block;
    float:left;
    /*clear: both;*/
}

.clear{
    clear: both;
    /*border: 1px;*/
    margin: 0;
    padding: 0;
}

#img1 {
    width: 100px;
    height: 100px;
}

#img2 {
    width: 150px;
    height: 150px;
}

4.在父类添加一个伪类:after （推荐）

添加一个伪类:after。在父元素后面增加一个空内容，并设为block。类似于增加一个空的div，产生了一个空的block

div {
    margin: 10px;
    padding: 10px;
}

#father{
    border: 1px #14caea solid;
    /*height: 800px;*/
    /*overflow: hidden;*/
}
#father:after{
    content: "";
    display:block;
    clear:both;
}

.layer1{
    border: 1px dashed firebrick;
    display: inline-block;
    float:left;
}
.layer2{
    border: 1px dashed firebrick;
    display: inline-block;
    float:left;
}
.layer3{
    border: 1px dashed firebrick;
    display: inline-block;
    float:left;
}
.layer4{
    border: 1px dashed firebrick;
    display: inline-block;
    float:left;
    /*clear: both;*/
}

.clear{
    clear: both;
    /*border: 1px;*/
    margin: 0;
    padding: 0;
}

#img1 {
    width: 100px;
    height: 100px;
}

#img2 {
    width: 150px;
    height: 150px;
}

7.9 定位

7.9.1 相对定位

用position: relative

相对于原来的位置，进行指定的便宜，相对定位的话，他仍然在标准文档中，原来的位置会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>

    <!--    相对定位
    相对于自己原来的位置便宜-->
    <style>
        body{
            padding: 20px;
        }

        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }

        #father {
            border: 1px solid brown;
            padding: 0px;

        }

        #first {
            background-color: #49EA0C;
            border: 1px dashed green;
            /*x相对定位*/
            position: relative;
            top:-20px;

        }

        #second {
            background-color: #49EA0C;
            border: 1px dashed green;
            bottom: -20px;
        }

        #third {
            background-color: #49EA0C;
            border: 1px dashed green;
        }
    </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>
</head>
<style>
    #father {
        border: 1px solid black;
        width: 300px;
        height: 300px;
        padding: 10px;
    }

    a {
        width: 100px;
        height: 100px;
        display: block;
        background: green;
        text-decoration: none;
        line-height: 100px;
        text-align: center;
        color:white;
        margin: 0;
        padding: 0;
    }

    a:hover {
        background: darkred;
    }

    #a2,#a4{
        position: relative;
        left:200px;
        bottom: 100px;
    }
    #a5{
        position: relative;
        left:100px;
        bottom: 300px;
    }


</style>
<body>

<div id="father">
    <a id="a1" href="">a连接1</a>
    <a id="a2" href="">a连接2</a>
    <a id="a3" href="">a连接3</a>
    <a id="a4" href="">a连接4</a>
    <a id="a5" href="">a连接5</a>
</div>

</body>
</html>

7.9.2 绝对定位

定位：基于XX定位，上下左右-

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

有父级元素定位的前提下，相对于父级元素定位

不在标准文档流中，原来的位置不会被保留

没有父级元素定位的前提下，相对于浏览器定位，且原来位置不保留。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 30px;
        }
        .father{
            border: 1px solid darkred;
        }

        .father div {
            margin: 10px;
            /*width: 900px;*/
            /*height: 100px;*/
            border: 1px dashed blue;
            background: #14caea;
            text-align: center;
            line-height: 30px;
        }

        #id2{
            background: orangered;
            position: absolute;
            right:60px;
        }

        #id3{
            background: darkslategrey;
        }

    </style>
</head>
<body>

<div class="father">
    <div id="id1">第1个盒子</div>
    <div id="id2">第2个盒子</div>
    <div id="id3">第3个盒子</div>
</div>


</body>
</html>

2.有父级元素定位的前提下，相对于父级元素定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 30px;
        }
        .father{
            border: 1px solid darkred;
            position: relative;
        }

        .father div {
            margin: 10px;
            /*width: 900px;*/
            /*height: 100px;*/
            border: 1px dashed blue;
            background: #14caea;
            text-align: center;
            line-height: 30px;

        }

        #id2{
            background: orangered;
            position: absolute;
            right:60px;
        }

        #id3{
            background: darkslategrey;
        }

    </style>
</head>
<body>

<div class="father">
    <div id="id1">第1个盒子</div>
    <div id="id2">第2个盒子</div>
    <div id="id3">第3个盒子</div>
</div>


</body>
</html>

相对定位VS绝对定位：

相对定位	绝对定位
相对于原来自己的位置，进行指定的偏移	相对于浏览器或者父级元素偏移
仍然在标准文档流中，原来的位置会被保留	不在标准文档流中，原来的位置不会被保留

7.9.3 固定定位fixed

相对你的屏幕，固定死的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1200px;
            padding: 30px;
        }


        .father{
            border: 1px solid darkred;
            position: relative;
        }


    /*绝对定位：没有父级元素情况下相对于浏览器*/
        div:nth-of-type(1){
            width:100px;
            height: 100px;
            background: red;
            position: absolute;
            right:0;
            bottom:0;
        }

        /*很多导航栏都是固定定位来的*/
        /*fixed，不动*/
        div:nth-of-type(2){
            width:50px;
            height: 50px;
            background: green;
            position: fixed;
            right:0;
            bottom:0;
        }

        a{
            text-decoration: none;
        }



    </style>
</head>
<body>
    <a name="top">顶部</a>
    <div id="id1">第1个盒子</div>
    <div id="id2"><a href="#top" >回到顶部</a></div>
    <div id="id3">第3个盒子</div>


</body>
</html>

7.10 z-index 图层

默认是0，最高无限：999

opacit透明度

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

<ui>
    <li><img src="../resouces/image/img.png" alt=""></li>
    <li class="background"></li>
    <li class="text">评论：我要学习，学无止境</li>
    <li class="mask"></li>
</ui>

</body>
</html>

ui, li {
    margin: 0;
    padding: 0;

}

/*将父级元素置为relative，子元素才能定位他*/
ui {
    position: relative;
}

li {
    list-style: none;
}

li[class=background] {
    position: absolute;
    top: 125px;
    background: black;
    width: 250px;
    height: 25px;
    z-index: 3;
    opacity: 20%;
}

li[class=text] {
    color: aliceblue;
    position: absolute;
    top: 125px;
    width: 250px;
    height: 25px;
}

img {
    width: 250px;
    height: 150px;
}

.mask {
    display:none
    background: #b2b0b0;
    width: 250px;
    height: 150px;
    position: absolute;
    top: 0px;
    z-index: 5;
}

.mask:hover {
    display: block;
    background: #14caea;
    opacity: 50%;
}

效果如下：

八、动画

8.1 学习网站

https://www.runoob.com/

8.2 实现动画的方式

CSS

JavaScript

HTML5 Canvas

posted @ 2022-04-07 09:50 高兴518 阅读(21) 评论(0) 收藏举报

刷新页面返回顶部

happycarpediem

前端-CSS

前端-CSS

一、什么是CSS

1.1 什么是CSS

1.2 发展史

1.3 快速入门

二、CSS的优势

2.1 内容和表现分离

2.2 网页结构表现统一，可以实现服用

2.3 样式是否的丰富

2.4 建立使用独立于html的CSS

2.5 利于SEO，容易被搜索引擎收录！

三、CSS的4种导入方式

3.1 CSS的4种导入方式

3.1.1 行内样式

3.1.2 内部样式

3.1.3 外部样式(link链接式)

3.1.4 外部样式(@导入式)

3.2 style的优先级（就近原则）

四、三种基本选择器 （重点）

4.1 选择器的作用：

4.2 基本选择器的3个分类

4.2.1 标签选择器

4.2.2 类选择器

4.2.3 id选择器

4.3 选择器的优先级

id>.class>标签

五、高级选择器

5.1 层次选择器4个

5.1.1 后代选择器：

5.1.2 子选择器

5.1.3 相邻兄弟选择器（同辈）

5.1.4 通用选择器（同辈）

5.2 结构伪类选择器

5.3 属性选择器（重要）

六、美化网页元素

6.1 为什么要美化网页

6.2 重要标签

6.2.1 span

6.2.2 div

6.3 字体样式

6.4 文本样式

6.5 补充：超链接伪类的一些样式

6.6 补充：列表的一些样式

6.7 补充：图像平铺及渐变色

七、盒子模型

7.1 什么是盒子模型

7.2 示例：做登陆表单

7.3 边框

7.4 内外边距

margin:0 auto；生效，需要一定的前提条件。

7.5 模型计算

7.6 圆角边框

7.7 阴影

7.8 浮动

7.8.1 display属性说明

7.8.2 浮动

7.8.3 父级边框塌陷的问题

clear介绍

1.增加父级元素高度

2.增加一个空的div，并清除浮动

3.overflow

4.在父类添加一个伪类:after （推荐）

7.9 定位

7.9.1 相对定位

用position: relative

7.9.2 绝对定位

相对定位VS绝对定位：

7.9.3 固定定位fixed

7.10 z-index 图层

opacit透明度

八、动画

8.1 学习网站

8.2 实现动画的方式

CSS

JavaScript

HTML5 Canvas

公告

四、三种基本选择器（`重点`）

5.3 属性选择器（`重要`）

`margin:0 auto；生效，需要一定的前提条件。`