Day28,29,30 CSS-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37207539/article/details/108923028

HTML+CSS+JavaScript

结构+表现+交互

一、什么是CSS

如何学习

css是什么
css怎么用（快速入门）
CSS选择器（重点+难点）
美化网页（文字，阴影，超链接，列表，渐变…）
盒子模型
浮动
定位
网页动画（特效）

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

基本入门

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范，style可以写css代码，每一个声明，使用分号结尾。
    语法：
        选择器{
        声明1；
        声明2；
        声明3；
        }
    -->
    <style>
        h1{
           color: #9932cc;
        }
    </style>
</head>
<body>
<h1>我是标题</h1>
</body>

建议使用这种规范

在这里插入图片描述

CSS的优势：

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

1.4、CSS的4种导入方式

<!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;xxx">我是标题</h1>

</body>
</html>

拓展：外部样式的两种写法

链接式：

html

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

导入式：

@import 是css2.1特有的

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

二、选择器

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

2.1、基本选择器

标签选择器：选择一类标签标签{}
类选择器 class：选择所有class属性一致的标签，可以跨标签 .类名{}
id 选择器：全局唯一！ #id名{}

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

    <style>
        /*id选择器:id必须保证全局唯一
        #id名称{}
        不遵循就近原则，固定的
        id选择器>class选择器>标签选择器
        */
        #jyw1 {
            color: green;
        }
        .style1{
            color: darkorchid;
        }
        h1{
            color: aqua;
        }
    </style>
</head>
<body>

<h1 id="jyw1" class="style1">标题1</h1>
<h1 class="style1" >标题2</h1>
<h1 class="style1">标题3</h1>
<h1 id="jyw4">标题4</h1>
<h1 id="jyw5">标题5</h1>
</body>
</html>

2.2、层次选择器

后代选择器：在某个元素的后面。祖爷爷爷爷爸爸你，全包括。

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

子选择器，一代，只管一代人。

/*子选择器*/
body>p{
   background: green;
}

相邻兄弟选择器同辈

/*相邻兄弟选择器,目标class下面的1个！*/
.active +p{
    background: green;
}

通用选择器

/*通用兄弟选择器:当前选中元素和向下所有兄弟元素！*/
.active ~ p{
    background: green;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         /*标签选择器*/
         p{
            background: green;
        }
        /*后代选择器。例子：body下所有p标签*/
        body p {
            background: green;
        }
        /*子选择器，只管一代人,第一代p。*/
        body>p{
           background: green;
        }
        /*相邻兄弟选择器：当前选中元素下面的1个，不包括当前选中！*/
        .active + p{
            background: green;
        }
        /*通用兄弟选择器:当前选中元素和向下所有兄弟元素！*/
        .active ~ p{
            background: green;
        }
    </style>
</head>
<body>

<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p></p>
    </li>
    <li>
        <p></p>
    </li>
    <li>
        <p></p>
    </li>
</ul>
</body>
</html>

2.3、结构伪类选择器

伪类：带冒号的，是伪类。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--避免使用类和id选择器-->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child {
            background: green;
        }

        /*ul的最后一个子元素*/
        ul li:last-child {
            background: red;
        }

        /*选中p1,定位到父元素，选择当前第x个元素*/
        /*nth-child:选中当前元素的父级元素，选择父级元素下的第x个元素，
        并且是当前元素才生效(需要满足“第x个”和“p”两个条件)*/
        p:nth-child(1) {
            background: darkorchid;
        }

        /*nth-of-type:选择父级元素下的第x个p元素*/
        p:nth-of-type(2) {
            background: gold;
        }

    </style>

</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>l1</li>
    <li>l2</li>
    <li>l3</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: 10px;
            background: blue;
            text-align: center;
            color: gainsboro;
            text-decoration: none; /*去除下滑线*/
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /*存在id属性的元素 a[]{}*/
        /*属性名，属性名=属性值（正则）
        =:绝对等于
        *=：包含
        ^=:以什么开头
        $=:以什么结尾
        */
        a[id] {
            background: yellow;
        }

        /*id=first的元素*/
        a[id=first] {
            background: aliceblue;/*淡青色*/
        }

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

        /*选中href中以http开头的元素*/
        a[href^=http] {
            background: deeppink;/*粉红色*/
        }

        a[href$=pdf] {
            background: yellowgreen;/*黄绿色*/
        }
    </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">6</a>
    <a href="/a.pdf">7</a>
    <a href="/abc.pdf">8</a>
    <a href="abc.doc">9</a>
    <a href="abcd.doc" class="links item last">10</a>

</p>

</body>
</html>

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

三、美化网页元素

3.1、美化网页元素

1、有效的传递页面信息。

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

3、凸显页面的主题

4、提高用户的体验

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #jyw {
            font-size: 50px;
        }
    </style>
</head>
<body>
欢迎学习<span id="jyw">java</span>
</body>

3.2、字体样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*font-family:字体
        font-size:字体大小
        font-weight:字体粗细
        color:字体颜色
        */
        body {
            font-family: 微软雅黑;
        }

        h1 {
            /*px是像素，em是缩进*/
            font-size: 50px;
        }

        .p1 {
            /*bold是加组，bolder是最粗上限（900），lighter是变细*/
            font-weight: bolder;
            color: yellowgreen;
        }

        .p1 + p {
            font: bolder oblique 100px "楷体";
        }
    </style>
</head>
<body>
<h1>故事介绍</h1>

<p>
    11111
</p>
<p class="p1">
    222222
</p>
<p>
    33333333333333
</p>
</body>

3.3、文本样式

颜色 color rgb rgba
文本对齐方式 text-align: center;
首行缩进 text-indent: 2em;
行高 line-height: 200px;
装饰 text-decoration: underline;
文本图片水平对齐:vertical-align

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*颜色：
        1.单词表示：red
        2.RGB表示： O~F #ff97b1
        3.RBGA：rgba(0,255,255,1),最后一位是透明度
        text-align：排版，居中等。
        text-indent:首行缩进。
        height: 标签的高度
        line-height:行高。这一行的高度，内容的高度。和height一致时候，可以实现上下居中。
        text-decoration: underline:下划线;line-through:中划线;overline:上划线；none：去除下划线。
        水平对齐~ 参照物，a，b
        */
        h1 {
            color: rgba(0, 255, 255, 1);
            text-align: center;
        }

        .p1 {
            text-indent: 2em;
        }

        .p1 + p {
            background: yellowgreen;
            /*height: 300px;*/
            line-height: 200px;
        }

        .l1 {
            text-decoration: underline;
        }

        .l2 {
            text-decoration: line-through;
        }

        .l3 {
            text-decoration: overline;
        }
        /*水平对齐~ 参照物，a，b;span参照图片对齐*/
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<h1>故事介绍</h1>
<p> 11111</p>
<p class="p1">222222</p>
<p>33333333333333</p>
<p class="l1">123321</p>
<p class="l2">123321</p>
<p class="l3">123321</p>

<p>
    <img src="images/timg.jpg" alt="2222222avasf">
    <span>ssdasdfasd</span>
</p>
</body>

3.4、阴影

/*text-shadow参数：阴影颜色 水平偏移 垂直偏移 阴影半径 */
#price{
    text-shadow: crimson 10px -10px 2px;
}

3.5 、超链接伪类

/*鼠标悬停状态*/
a:hover {
    color: orange;
    font-size: 50px;
}

/*鼠标按住未释放的状态，被选择的链接*/
a:active {
    color: green;
}

/*未访问的链接*/
a:link {
    color: deeppink;
}

/*已访问的链接*/
a:visited {
    color: blue;
}

3.6、列表

/*ul li
list-style:
    none :去掉原点
    circle:空心圆
    decimal:数字
    square:正方形
*/
ul {
    background: darkgray;
}

ul li {
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/r.png");
    background-repeat: no-repeat;
    background-position: 100px, 0px;
}

.title {
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /*background参数：颜色，图片，图片位置，平铺方式*/
    background: red url("../images/d.png") 170px 0px no-repeat;
}

3.7、背景

背景颜色

背景图片

<style>
    div{
        width: 1000px;
        height: 700px;
        border: 1px solid red;
        background-image: url("images/timg.jpg");
        /*默认是全部平铺的*/
    }
    .div1{
        /*行平铺*/
        background-repeat: repeat-x;
    }
    .div2{
        /*列平铺*/
        background-repeat: repeat-y;
    }
    .div3{
        /*不平铺*/
        background-repeat: no-repeat;
    }
</style>

3.8、渐变

/*径向渐变，圆形渐变*/
body{
      background-color: #4158D0;
      background-image: linear-gradient(124deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    }

四、盒子模型

4.1、什么是盒子

在这里插入图片描述

margin:外边距

padding：内边距

border：边框

4.2、边框

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

<style>
    /*body有默认的外边距*/
    h1,a,ul,li,body{
        margin: 0px;
        padding: 0px;
    }
    /*border:粗细，样式，颜色*/
    #box{
       width: 300px;
        border:1px solid red;
    }
    h2{
        font-size: 16px;
        background-color: #4158D0;
        line-height:30px;
        margin: 0;
        color: white;
    }
    form{
        background: chartreuse;
    }
    div:nth-of-type(1) input{
        border: 3px solid black;
    }
    div:nth-of-type(2) input{
        border: 3px dashed #e8178a;
    }
    div:nth-of-type(3) input{
        border: 2px dashed #e81717;
    }
</style>

4.3、内外边距

margin: 0 auto 居中。居中时要求：块元素，块元素有固定的宽度
     四个参数时候表示顺序：上右下左；
     三个参数表示：上、左右、下；
     两个参数时候表示：上下和左右；
     1个参数表示：上下左右所有。
顺时针旋转

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

        /*border:粗细，样式，颜色
        外边距的妙用margin: 0 auto 居中.
             四个参数时候表示上右下左；
             三个参数表示：上、左右、下；
             两个参数时候表示上下和左右；
             1个参数表示上下左右。
             */
        #box {
            width: 300px;
            border: 1px solid red;
            margin: 0 auto ;
        }

        h2 {
            font-size: 16px;
            background-color: #4158D0;
            line-height: 30px;
            margin: 0;
            color: white;
        }

        form {
            background: chartreuse;
        }

        div:nth-of-type(1) input {
            border: 3px solid black;
            padding: 10px;
        }

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

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

        input {
            border: 1px solid black;
        }
    </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>
    /*
    border-radius:左上  右上 右下 左下，顺时针。
    圆圈：圆角=半径
    */
    div {
        width: 100px;
        height: 100px;
        background-color: #e81717;
        border-radius: 50px 50px 50px 50px;
    }
</style>

4.5、盒子阴影

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        img {
            width: 500px;
            height: 500px;
            box-shadow: 20px 20px 100px yellow;
            margin: 0 auto;
        }
    </style>

</head>

<body>

<div style="width: 800px;text-align: center">
        <img src="images/timg.jpg" alt="">
</div>

</body>

五、浮动

5.1、标准文档流

在这里插入图片描述

块级元素：独占一行

h1~h6 p div 列表

行内元素：不独占一行

span a img strong

行内元素可以被包含在块级元素中

5.2、display

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

/*
block 块元素
inline 行类元素
inline-block 是块元素,但是可以内联，在一行！
none 隐藏
*/
div{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    display: block;
}

5.3、浮动float

左右浮动 fioat

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

    <style>
        /*
        block 块元素
        inline 行类元素
        inline-block 是块元素,但是可以内联，在一行！
        none 隐藏
        */
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
            float: right;
            clear: both;/*清除了前面div设置的float*/
        }
        .layer01{
            float: right;
        }
        .layer02{
            float: right;
        }
        .layer03{
            float: right;
        }
        .layer04{
            float: right;
        }
    </style>
</head>
<body>
<div class="layer01">
    div块元素1
</div>
<div class="layer02">
    div块元素2
</div>
<div class="layer03">
    div块元素3
</div>
<span>span行内元素</span>
<div class="layer04">
    div块元素4
</div>
</body>
</html>

5.4、父类边框塌陷的问题

clear

/*
clear:right;右侧不允许有浮动元素。
clear:left;左侧不允许有浮动元素。
clear:both;两侧不允许有浮动元素。
clear:none;
*/

解决方案：

增加父级元素的高度~

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

增加一个空的div标签，用于清除浮动

  <div class="clear"></div>
.clear {
    clear: both;
    margin: 0px;
    padding: 0px;
}

overfiow

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

#father {
    border: 1px red solid;
    overflow: hidden;
}

父类添加一个伪类:after

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

小结：

浮动元素后面增加空div

简单，但是代码中尽量避免空div
设置父元素的高度

简单，元素有了固定的高度，就会被限制。
overflow

简单，下拉的一些场景避免使用。
父类添加一个伪类：after（推荐使用）

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

5.5 display和overfloat 对比

display

方向不可以控制

float

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

六、定位

6.1、相对定位

<!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 #27bf78;
            padding: 0;
        }
        #first{
            background-color: gainsboro;
            border: 1px dashed #1678e0;
            position: relative;/*相对定位：上下左右*/
            top: -20px;
            left: 20px;
        }
        #second{
            background-color: wheat;
            border: 1px dashed #dc6e1a;
            position: relative;
            bottom: -10px;
            right: 20px;
        }
        #third{
            background-color: #efe1e1;
            border: 1px dashed #d90d5f;
        }
    </style>
</head>
<body>

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

在这里插入图片描述

相对定位： position: relative;

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

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

6.2、绝对定位

定位：基于xxx定位，上下左右。

没有父类元素定位的前提下，相对于浏览器定位。
假设父级元素存在定位，我们通常会相对于父级元素进行偏移。
父级元素存在定位时，在父级元素范围内移动。

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

<!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 #27bf78;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: gainsboro;
            border: 1px dashed #1678e0;
        }
        #second{
            background-color: wheat;
            border: 1px dashed #dc6e1a;
            position: absolute;/*绝对定位*/
            left: 100px;
        }
        #third{
            background-color: #efe1e1;
            border: 1px dashed #d90d5f;
        }
    </style>
</head>
<body>

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

在这里插入图片描述

6.3、固定定位 fixed

位置固定，移动滚动条时，固定定位的元素位置仍然不变。

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            height:1000px ;
            border: 1px solid red;
        }
        /*绝对定位：此案例相对于浏览器*/
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: #e81717;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        /*fixed固定定位.坐标原点固定，始终相对于浏览器窗口定位。 */
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>

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

</body>

6.4、z-index

在这里插入图片描述

图层

z-index:默认是0，最高无限

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

</head>
<body>

<div id="content">
    <ul>
        <li><img src="images/bg.png" alt=""></li>
        <li class="tiptext">学习微服务，找狂神</li>
        <li class="tipBg"></li>
        <li>时间：2099-01-01</li>
        <li>地点：月球一号基地</li>
    </ul>
</div>
</body>
</html>

#content {
    width: 240px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000 solid;
}

ul, li {
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
/*父相子绝*/
.tiptext,.tipBg{
    width: 240px;
    height: 25px;
    position: absolute;
    top:137px ;
}
.tiptext{
    color: white;
    z-index: 999;
}
.tipBg{
    background: black;
    opacity: 0.5;/*背景透明度*/
    /*filter: alpha(opacity=50);*/
}