CSS3_笔记_grabient复制的css样式-CSDN博客

本文链接：https://blog.csdn.net/mxyjajajavavava/article/details/114545119

#CSS

如何学习

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

1.1 什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS : 表现(美化网页)

字体, 颜色, 边距, 高度, 宽度, 背景图片, 网页浮动

1.2 CSS发展史

CSS1.0

CSS2.0 DIV(块) + CSS, HTML与CSS结构分离的思想,网页变得简单, SEO

CSS2.1 浮动, 定位

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

在这里插入图片描述

1.3 快速入门

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

    <!--规范  <style>可以编写css的代码 , 每一个声明最好使用分号; 结尾
    语法 : 选择器{
        声明1;
        声明2;
        声明3;
    }
    -->
<!--    <style>
        h1{
            color: aqua;
        }
    </style>-->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<h1>我是标题</h1>

</body>
</html>

建议使用这种格式:

在这里插入图片描述

CSS的优势 :

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

1.4 CSS的3种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入方式</title>

    <style>
        /*内部样式*/
        h1{
            color: green;
        }
    </style>
     <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

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

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

</body>
</html>

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

链接式 :

html

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

导入式 :

css 2.1特有的 @improt

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

2. 选择器

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

2.1 基本选择器

标签选择器 : 选择一类标签标签名{}

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

    <style>
        /*标签选择器 , 会选择到页面上所有的这个标签的元素*/
        h1{
            color: #d02e2e;
        }
    </style>
</head>
<body>
<h1>学java</h1>
<h1>学java</h1>
<p>听mxyjajajavavava</p>
</body>
</html>

类选择器 : 选择所有class 属性一致的标签, 可以跨标签 .class名{}

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

    <style>
        /*类选择器的格式  .class的名称{}
         好处 , 可以多个标签归类,可以跨标签使用, 是同一个 class,可以复用
         */
        .mxy{
            color: #d02e2e;
        }
        .java{
            background: cyan;
        }
    </style>
</head>
<body>
<h1 class="mxy">标题1</h1>
<h1 class="java">标题2</h1>
<h1 class="mxy">标题3</h1>

<p class="mxy">哇哦</p>
</body>
</html>

id 选择器 : 全局唯一 ! #id名{}

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

    <style>
        /*id选择器 : id必须保证全局唯一
        #id名称{}
        优先级 : 不遵循就近原则 , 固定的
        ID选择器 > class选择器 > 标签选择器

        */

        #mxy{
            color: cyan;
        }
        .st1{
            color: red;
        }
        h1{
            color: green;
        }
    </style>
</head>
<body>

<h1 id="mxy">标题1</h1>
<h1 class="st1">标题2</h1>
<h1 class="st1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>

优先级 : id > class > 标签

2.2 层次选择器

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

    <style>
      /*  p{
            background: green;
        }*/


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

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

      /*楼下弟弟选择器 , 只有一个 , 相邻(向下)*/
      /*.active + p{
          background: blue;
      }*/

      /*通用弟弟选择器 , 当前选中元素的向下的所有弟弟元素*/
      .active~p{
          background: bisque;
      }

    </style>
</head>
<body>

<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>

<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>

<p class="active">p7</p>
<p>p8</p>
</body>
</html>

后代选择器 : 在某个元素的后面祖爷爷爷爷爸爸你

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

子选择器 , 一代 , 儿子

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

相邻兄弟选择器同辈向下

/*楼下弟弟选择器 , 只有一个 , 相邻(向下)*/
      .active + p{
          background: blue;
      }

通用选择器

 /*通用弟弟选择器 , 当前选中元素的向下的所有弟弟元素*/
      .active~p{
          background: bisque;
      }

2.3结构伪类选择器

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

    <!--避免使用class , id 选择器-->
    <style>
        /*ul 的第一个子元素*/
        ul li:first-child {
            color: bisque;
        }

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

        /* 选中 p1 : 定位到父元素, 选择当前的第一个元素
        选择当前P元素的父级元素, 选中父级元素的第一个 , 并且是当前元素才生效!
        */

        p:nth-child(2) {
            background: blue;
        }

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

        /*!*伪类选择器*!
        a:hover{
            color: tomato;
        }*/

    </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 属性选择器

<!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: cyan; /*颜色*/
            text-decoration: none; /*下划线*/
            margin-right: 5px; /*外边距-右侧*/
            line-height: 50px; /*行高*/
        }

        /*属性名 , 属性名 = 属性值(正则)*/
        /*
        =  绝对相同
        ~= 包含
        *= 通配
        ^= 以这个开头
        $= 以这个结尾
        */

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

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

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

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

        /*选中以pdf结尾的元素*/
        a[href $= pdf] {
            background: black;
        }
    </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">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="abcd.doc" class="links item last">10</a>

</p>

</body>
</html>

在这里插入图片描述

= 绝对等于
*= / ~= 通配 , 包含
^= 以这个开头
$= 以这个结尾

3.美化网页元素

3.1 为什么要美化网页

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

span标签: 重点要突出的文字 , 使用span标签套起来

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

    <style>
        .item {
            font-size: 50px;
        }
    </style>

</head>
<body>

欢迎学习<span class="item">Java</span>

</body>
</html>

3.2 字体样式

    <!--
    font-family  字体
    font-size    字体大小
    font-weight  字体粗细
    color        颜色
    -->
    <style>
        body{
            font-family: 隶书;
            color: darkblue;
        }

        h1{
            font-size: 50px;
        }

        .p1{
            font-weight: bold;
        }
    </style>

3.3 文本样式

颜色 color
文本对齐的方式 text-align = center
首行缩进 text-indent : 2em
行高 line-height
装饰 text-decoration
文本与图片水平对齐 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: 文本首行缩进
    line-height: 行高 和 块的高度一致,就可以上下居中
    -->
    <style>
        h1{
            color: #a123a1;
            background: rgb(0,255,255);
            text-align: center;/*文本居中*/

        }
        .p1{
            background: rgba(0,255,255,0.3);
            text-indent: 2em;
        }

        .p2{
            background: #a123a1;
            height: 300px;
            line-height: 300px;
        }
        .l1{
            text-decoration: underline;/*下划线*/
        }
        .l2{
            text-decoration: line-through;/*中划线*/
        }
        .l3{
            text-decoration: overline;/*上划线*/
        }

        img,span{
            vertical-align: middle;
        }
    </style>

</head>
<body>

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



<h1>生死疲劳 （莫言的代表作之一）</h1>

<p class="p1">
    《生死疲劳》是莫言的代表作之一。小说中叙述了1950年到2000年中国农村这50年的历史发展过程。
    围绕着土地这个沉重的话题，阐释了农民与土地的种种关系，并透过生死轮回的艺术图像，
    展示了新中国成立以来中国农民的生活和他们顽强、乐观、坚韧的精神。
</p>

<p class="p2">
    小说《生死疲劳》获得第二届红楼梦奖和第一届美国纽曼华语文学奖。 [1]
    小说《生死疲劳》获得第二届红楼梦奖和第一届美国纽曼华语文学奖。 [1]
    小说《生死疲劳》获得第二届红楼梦奖和第一届美国纽曼华语文学奖。 [1]
    小说《生死疲劳》获得第二届红楼梦奖和第一届美国纽曼华语文学奖。 [1]
    小说《生死疲劳》获得第二届红楼梦奖和第一届美国纽曼华语文学奖。 [1]
</p>

<p>
    <img src="img/莫言.jpg" alt="">
    <span>aaaaa</span>
</p>
</body>
</html>

3.4 阴影

        /*text-shadow : 阴影颜色 , 水平偏移, 垂直偏移 , 阴影半径*/

#price{
            text-shadow: cyan 10px 10px 1px;
        }

在这里插入图片描述

3.5 超链接伪类

正常情况下只需要记住 a , a: hover{}

/*默认的颜色*/
        a{
            text-decoration: none;
            color: black;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: orange;
            font-size: 100px;
        }
        /*鼠标按住时的状态*/
        a:active{
            color: cyan;
            font-size: 50px;
        }

3.6列表

/*
ul li

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

3.7 背景

背景颜色
背景图片

<style>
        div {
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("img/img.png");
            /*默认是全部平铺的  repeat*/
        }

        .div1 {
            background-repeat: repeat-x; /*水平平铺*/
        }

        .div2 {
            background-repeat: repeat-y; /*垂直平铺*/
        }

        .div3 {
            background-repeat: no-repeat; /*不平铺,只显示一个图片*/
        }
    </style>

渐变色

在grabient网站复制渐变色代码

https://www.grabient.com/

.div2 {
            background-repeat: repeat-y; /*垂直平铺*/
            background-color: #00DBDE;
            background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
        }

4.盒子模型及边框使用

在这里插入图片描述

margin: 外边距

padding: 内边距

border: 边框

4.2 边框

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

4.3 内外边距

4.4圆角边框

<style>
div{
     width: 100px;
     height: 100px;
	border: 10px solid red;
     border-radius: 100px;
}
</style>

4.5阴影

5.浮动

块级元素:独占一行

h1~h6    p   div 列表....

行内元素: 不独占一行

span    a   img   strong  ...

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

5.2 display

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

<!--
    block 块元素
    inline 行内元素
    inline-block 即是行内元素又是块元素,在一行!
    none  使展示消失
    -->
<style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }

        span {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block; /*使行内元素变为既是行内元素又是块元素*/
        }

    </style>

5.3 float

左右浮动 float

div{
            margin: 0px;
            padding: 5px;
        }
        #father{
            border: 1px #000 solid;
        }
        .layer01{
            border: 1px #F00 dashed;
            display: inline-block;
            float: right;
        }
        .layer02{
            border: 1px red 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 : right ; 右侧不允许有浮动元素

clear : left ; 左侧不允许有浮动元素

clear: both ; 两侧不允许有浮动元素

clear : none;

解决方法

增加父级元素的高度~
增加一个空的div标签,清除浮动
overflow

在父级元素中增加一个overflow: hidden
1. 父类添加一个伪类 : after
```
#father:after{
     content:'';
     display: block;
     clear: both;
}
```
  小结:
  1. 浮动元素后面增加控div
    
    简单, 代码中尽量避免空div
    1. 设置父元素的高度
      简单,元素假设有了固定的高度,就会被限制
    2. overflow
      
      简单, 下拉的一些场景尽量避免使用
    3. 父类添加一个伪类 : after (推荐使用)
      
      写法稍微复杂一点, 但是没有副作用,推荐使用!
      
      5.5 对比
      - display
        
        方向不可控制
      - float
        
        浮动起来的话会脱离标准文档流, 所以要解决父级边框塌陷的问题~

6. 定位P19

6.1 相对定位

<!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 #666 solid;
            padding: 0px;
        }
        #first{
            border: 1px #05f7e2 dashed;
            background-color: #00DBDE;
            position: relative; /*相对定位: 上下左右*/
            top: -20px;
            left: -20px;
        }
        #second{
            border: 1px #d41717 dashed;
            background-color: #d41799;
        }
        #third{
            border: 1px #1313e8 dashed;
            background-color: #131399;
            position: relative; /*相对定位: 上下左右*/
            bottom: -10px;
            right: -10px;
        }
    </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: -10px;

6.1.1 相对定位方块练习

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

    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: pink;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background: #7777f8;
        }
        .a2,.a4{
         position: relative;
            left: 200px;
            bottom: 100px;
        }
       /* .a4{
            position: relative;
            left: 200px;
            top: -100px;
        }*/
        .a5{
            position: relative;
            left: 100px;
            bottom: 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定位, 上下左右

top , bottom , left , right

没有父级元素定位的前提下, 相对于浏览器定位
假设父级元素存在定位 , 我们通常会相对于父级元素进行偏移
相对于父级或浏览器的位置, 进行指定的偏移 , 绝对定位的话, 他在标准文档流中, 原来的位置不会被保留

<!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 #666 solid;
            padding: 0px;
            position: relative;
        }

        #first {
            border: 1px #05f7e2 dashed;
            background-color: #00DBDE;
        }

        #second {
            border: 1px #d41717 dashed;
            background-color: #d41799;
            position: absolute;
            right: 40px;
            top: -15px;
        }

        #third {
            border: 1px #1313e8 dashed;
            background-color: #131399;
        }
    </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>
</head>

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

<body>

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

</body>
</html>

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="img/img.png" alt=""></li>
        <li class="tipText">mxy真的帅</li>
        <li class="tipBg"></li>
        <li>2021年3月8日16:52:14</li>
        <li>地点:R星荒坂塔</li>
    </ul>
</div>

</body>
</html>

opacity: 0.5; 透明度调整 : 0-1

#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{
    position: absolute;
    width: 380px;
    height: 25px;
    top: 74px;
}
.tipBg{
    background: black;
    opacity: 0.5;/*透明度调整  : 0-1*/
    filter: Alpha(opacity=50);
}
.tipText{
    color: cyan;
    z-index: 1;/*显示的图层层级:从0开始可以无限叠加层数,层数高的覆盖层数低的*/
}