走进CSS3

    • 1.css简介
    • 2.导入css
    • 3.css选择器
      • 3.1基本选择器
      • 3.2层次选择器
      • 3.3结构伪类选择器
      • 3.4属性选择器
    • 4.美化网页
      • 4.1 span标签
      • 4.2 字体&文本样式
      • 4.3 超链接伪类&阴影
      • 4.4列表
      • 4.5背景图片
      • 4.6渐变
      • 4.7盒子模型与边距
      • 4.8圆角边框
      • 4.9 居中和阴影
      • 4.10浮动
      • 4.11父级边框塌陷问题
      • 4.12定位   position
      • 4.13 z-index & opacity
      • 4.14 动画

学习视频来自B站，感谢狂神的分享：B站视频地址
CSS3菜鸟教程地址：CSS3
模板之家：http://www.cssmoban/
源码之家：https://www.mycodes/
飞冰：https://ice.work/
LayUI官网：layui
X-admin：官网地址

1.css简介

网页三要素：html(结构) + css(表现) + javascript(交互)

CSS：Cascading Style Sheets (层叠样式表)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

版本区别
css1.0只能美化基本属性，比如字体
css2.0DIV（块）+css，提出HTML与CSS代码分离，利于SEO
css2.1增加新特性：浮动、定位
css3.0增加等新特：阴性、圆角、动画

Css优势：

  • 内容与表现分离；样式丰富
  • 网页结构表现统一，可以实现复用
  • 利于SEO，容易被搜索引擎收录

2.导入css

如果CSS样式重复，优先级为：就近原则。还可以用@important提升优先级

3.css选择器

3.1基本选择器

选择器分为三大类：
1.标签选择器；2.类选择器；3.id选择器

选择器作用语法
标签选择器选择一类标签标签名{}
如：p{ }
类选择器选择所有class属性一致的标签.类名{}
如.nameClass{}
id选择器全局唯一#id名{}
如：#userId{}

优先级为：id选择器 > 类选择器 > 标签选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*优先级顺序：
            id选择器 > 类选择器 > 标签选择器*/

        /*标签选择器：会选择本页面上的所有的这个标签元素*/
        h1{ color:red; }
        p{ font-size: 66px}

        /*类选择器： .class的名称{}
            可将多个标签归类，标签中class属性值相同即可。可以复用
        */
        .class1{background-color: blue}

        /*id选择器：#id名称{} */
        #id1{ font-family: Algerian}

    </style>
</head>
<body>
<h1 class="class1" id="id1">标签h1 -- 1</h1>
<h1 class="class1">标签h1 -- 2</h1>
<p class="class1">这是p标签</p>
</body>

3.2层次选择器

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

        /*后代选择器：某个元素后面的所有级别该元素*/
        body p{
            background: red;
        }

        /*子选择器：某标签元素内的，第一代该元素*/
        body > p{
            background: #3cbda6;
        }

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

        /*通用兄弟选择器：当前选中元素，向下所有兄弟元素*/
        .active ~ p{
            background: blueviolet;
        }
    </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>p7</p>
<p>p8</p>
</body>

3.3结构伪类选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--避免使用，class，id选择器-->
    <style>
        /* ul 下的第一个子元素，且该元素必须为 li */
        ul li:first-child{
            background: #a13d30;
        }
        /*ul的最后一个子元素，且该元素必须为 li */
        ul li:last-child{
            background: red;
        }

        /*选中p1：定位到父元素，选择当前的第一个子元素
        选择当前p元素的父级元素，选中父级元素的第一个子元素为p的
        （同一层级第一个，且标签为 p 的元素）
        */
        p:nth-child(1){
            background: blue;
        }

        /* 选中当前元素的同一级别，第二个p元素
        （按类型开始计数，第二个p）*/
        p:nth-of-type(2){
            background: yellow;
        }
        /* 鼠标悬停效果 */
        a:hover{
            background: black;
        }
    </style>
</head>
<body>
<!--<h1>h1</h1>-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <p>dddd</p>
    <li>li3</li>
</ul>

<a href="">链接标签</a>
</body>

3.4属性选择器

<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]{/*所有带id的a标签*/
            background: yellow;
        }
        /*id=first的元素*/
        a[id=first]{
            background: blue;
        }
        /*class中有links的元素*/
        a[class*=links]{
            background: yellow;
        }

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

    </style>
</head>
<body>
<p class="demo">
    <a href="http://baidu" 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>

4.美化网页

4.1 span标签

<!-- <span> 标签无实际作用，可以用来给特定元素、字体设置样式-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size: 50px;
            color:red
        }
    </style>
</head>
<body>
欢迎学习<span id="title1">Java</span>
</body>

4.2 字体&文本样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        font-family：字体
        font-size：字体大小
        font-weight：字体的粗细
        color：字体颜色
        text-decoration：underline、line-through、overline、none


        水平对齐~ 参照物， a，b
        img,span{
            vertical-align: middle;
        }
        */
        /*
        颜色：
            单词：#FFFFFF
            RGB：0~F ,rgb(0,255,255)
            RGBA：A（透明度）：0~1,rgba(0,255,255,0.9)
        text-indent：段落首行缩进
        line-height: 300px;
            行高 和 块的高度一致，就可以上下居中
        */
        body{
            font-family:"Arial Black" ,楷体;
            color: #a13d30;
        }
        h1{ font-size: 50px; }
        .p1{ font-weight: lighter; }
    </style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1"> 你好，这个世界 </p>
<p> 太阳每天都从东方升起！</p>

<p>
    <img src="images/a.png" alt="">
    <span>abcdefghijklmnabcdefghijklmn</span>
</p>
</body>

4.3 超链接伪类&阴影

/* 未访问的链接,就是默认颜色，不写也行 */
a:link {color: #FF0000}
/* 已访问的链接,点击之后的状态*/
a:visited {color: #00FF00}
/* 鼠标移动到链接上,鼠标悬浮的状态（经常用）*/
a:hover {color: #FF00FF}
/* 选定的链接,鼠标按住未释放的状态*/
a:active {color: #0000FF}
/* text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{ text-shadow: #008800 20px -10px 2px; }

4.4列表

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #nav{
            width: 300px;
            background: darkgrey;
        }
        .title{
            font-size: 18px;
            font-weight: bold;
            text-indent: 1em;
            line-height: 35px;
            background: red;
        }
        /*ul li
        list-style:
            none：去掉圆点
            circle：空心圆
            decimal：数字
            spuare：正方形
        */
        ul{
            background: darkgrey;
        }
        ul li{
            height: 30px;
            list-style: none;
            text-indent: 1em;
        }
        a{
            text-decoration: none;
            font-size: 14px;
            color: black;
        }
        a:hover{
            color: orange;
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音响</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<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>&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>&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>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
    </ul>
</div>
</body>

4.5背景图片

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

4.6渐变

https://www.grabient/

body{
background-color: #D9AFD9;
background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);
}

4.7盒子模型与边距

margin：外边距
padding：内边距
border：边框
盒子的整体大小：margin + border + padding + 内容宽度

<style>
	/*body总有一个默认的外边框margin：0,常见的*/
	/*body{
	    margin: 0;
	    padding: 0;
	    text-decoration: none;
	}*/
	/*border:粗细，样式，颜色*/
	#box{
	    width: 300px;
	    border: 1px solid red;
	}
	h2{
	    font-size: 16px;
	    background-color: cornflowerblue ;
	    line-height: 30px;
	    margin: 0px;
	}
	form{background: #008800;}
	div:nth-of-type(1) input{border: 3px solid black;}
	div:nth-of-type(2) input{border: 3px dashed yellow;}
	div:nth-of-type(3) input{border: 2px dashed green;}
</style>
<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="password">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>

4.8圆角边框

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*圆角边框：border-radius
        四个参数：左上  右上  右下  左下（顺时针）
        对应圆形边框的 -- 半径
        边框阴影：box-shadow
        */
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            /* 宽度+边框（100+10*2）/2 = 60  */
            border-radius: 60px;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>
</head>
<body>
    <div></div>
</body>

4.9 居中和阴影

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	/* 居中: margin：0 auto
         要求：块元素，块元素有固定宽度*/
        img{
            border-radius: 50px;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>
</head>
<body>
<div>
    <div style="width: 500px;display: block;text-align: center ">
        <div>
            <img src="img/1.jpg" alt="">
        </div>
    </div>
</div>

4.10浮动

display属性：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        display属性值：
            block   块元素
            inline  行内元素
            inline-block  是块元素，但是可以内联，在一行
            none  隐藏
         float属性值：
            right   右浮动
            left    左浮动
         clear属性值：
            right   右侧不允许有浮动元素
            left    左侧不允许有浮动元素
            both    两侧不允许有浮动元素
        */
        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>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>

QQ会员导航栏

<head>
    <meta charset="UTF-8">
    <title>QQ会员</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        a{
            text-decoration: none;
        }
        .nav-header{
            height: 90px;
            width: 100%;
            background: rgba(0,0,0,.6);
        }
        .head-contain{
            width: 1180px;
            height: 90px;
            margin: 0 auto;
            text-align: center;
        }
        .top-logo,.top-nav,.top-nav li,.top-right{
            height: 90px;
            display: inline-block;
            vertical-align: top;
        }
        .top-nav{
            margin: 0 48px;
        }
        .top-nav li{
            line-height: 90px;
            width: 90px;
        }
        .top-nav li a{
            display: block;
            text-align: center;
            font-size: 16px;
            color: #fff;
        }
        .top-nav li a:hover{
            color: blue;
        }

        .top-right a{
            display: inline-block;
            font-size: 16px;
            text-align: center;
            margin-top: 25px;
            border-radius: 35px;
        }
        .top-right a:first-of-type{
            width: 93px;
            height: 38px;
            line-height: 38px;
            color: #fad65c;
            border: 1px #fad65c solid;
        }
        .top-right a:first-of-type:hover{
            color: #986b0d;
            background: #fad65c;
        }
        .top-right a:last-of-type{
            width: 140px;
            height: 40px;
            font-weight: 700;
            line-height: 40px;
            background: #fad65c;
            color: #986b0d;
        }
        .top-right a:last-of-type:hover{
            background: #fddc6c;
        }
    </style>
</head>
<body>
<div class="wrap">
    <!--头部-->
    <header class="nav-header">
        <div class="head-contain">
            <a href="" class="top-logo"><img src="QQ.png" width="145" height="90" /></a>
            <nav class="top-nav">
                <ul>
                    <li><a href="">功能特权</a> </li>
                    <li><a href="">游戏特权</a> </li>
                    <li><a href="">生活特权</a> </li>
                    <li><a href="">会员特权</a> </li>
                    <li><a href="">成长体系</a> </li>
                    <li><a href="">年费专区</a> </li>
                    <li><a href="">超级会员</a> </li>
                </ul>
            </nav>
            <div class="top-right">
                <a href="">登录</a>
                <a href="">开通超级会员</a>
            </div>
        </div>
    </header>
</div>
</body>

4.11父级边框塌陷问题

父级边框塌陷，是指浮动超出了边框外围

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="father">
    <div class="layer01"><img src="images/1.png" alt=""></div>
    <div class="layer02"><img src="images/2.png" alt=""></div>
    <div class="layer03"><img src="images/3.png" alt=""></div>
    <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动，知道它的外边缘碰到包含或另一个浮动盒子为止
    </div>
    <div class="clear"></div>
</div>
</body>
</html>

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

方法1：增加父级元素高度

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

方法2：增加一个空的div（class=“clear”）标签，清除浮动


/*
clear：right；右侧不允许有浮动元素
clear：left； 左侧不允许有浮动元素
clear：both； 两侧不允许有浮动元素
clear：none；
 */
.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

方法3：overflow

/*在父级元素中增加一个属性： overflow: hidden;*/
div{
    margin: 10px;
    padding: 5px;
    overflow: hidden;
}

方法4：父类添加一个伪类：after

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

小结：

  1. 浮动元后面增加空div : 简单，代码中尽量避免空div
  2. 设置父元素的高度 : 简单，元素假设有了固定的高度，就会被限制
  3. overflow : 简单，下拉的一些场景避免使用
  4. 父类添加一个伪类：after : 写法复杂，但没有副作用，推荐使用！

display与float对比 ：
display：方向不可以控制
float：浮动起来会脱离标准文档流，所以要解决父级边框塌陷的问题

4.12定位   position

分类描述
相对定位position: relative； 相对于自己原来的位置进行偏移~
相对于原来的位置，进行指定的偏移，相对定位的话，他仍然在标准文档流中，原来的位置会被保留。
绝对定位position: absolute;
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3、在父级元素范围内
固定定位position: fixed;
相对于展示页面定位，页面滚动条无关（“返回顶部”按钮）
偏移量top: -20px;   向上偏移20px
left: 20px;   向右偏移20
bottom: -20px;   向下偏移20px
right: 20px;   向左偏移20px
相对定位
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 相对定位：
    position :relative; 相对于自己原来的位置进行偏移~
    -->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
        }
        #first{
            background-color: #3cbda6;
            border: 1px solid #b27530;
            position: relative;/*相对定位 上下左右*/
            top: -20px;/*向上偏移20px*/
            left: 20px;/*向右偏移20*/
        }
        #second{
            background-color: #0000FF;
            border: 1px solid #255066;
        }
        #third{
            background-color: #008800;
            border: 1px solid #1c6615;
            position: relative;/*相对定位 上下左右*/
            bottom: -20px;/*向下偏移20px*/
            right: 20px;/*向左偏移20px*/
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

绝对定位

<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: #3cbda6;
            border: 1px solid #b27530;
        }
        #second{
            background-color: #0000FF;
            border: 1px solid #255066;
            /*父级有相对定位，则自己元素相对于父级进行绝对定位
            如果父级元素无定位属性，则相对浏览器定位*/
            position: absolute;
            left: 100px;
            top: 20px;
        }
        #third{
            background-color: #008800;
            border: 1px solid #1c6615;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>

固定定位

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 10000px;
        }
        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>
</head>
<body>
<div>div1</div>
<div>div2</div>

练习题：实现如下效果：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background-color: #5c8b58;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background: #8d23a1;
        }
        .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>

4.13 z-index & opacity

z-index属性：默认为0（最小）， 最高无限：999

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content{
            width: 600px;
            padding: 0px;
            margin: 0px;
            overflow: hidden;
            font-size: 12px;
            line-height: 25px;
            border: 1px #000 solid;

        }
        /*去除padding、margin、原点*/
        ul,li{
            padding: 0px;
            margin: 0px;
            list-style-type: none;
        }
        /*父级元素相对定位*/
        #content ul{
            position: relative;
        }
        .tipText,.tipBg{
            position: absolute;
            width: 333px;
            height: 25px;
            top: 320px;
        }
        .tipText{
            color: white;
            /*z-index: 0;*/
        }
        .tipBg{
            background: black;
            opacity: 0.5;   /*背景透明度，浏览器通用*/
        }
    </style>
</head>
<body>
<div id="content">
    <ul>
        <li><img src="css.jpg" alt=""></li>
        <li class="tipText">css学习:z-index</li>
        <li class="tipBg"></li>
        <li>时间：2022-04-18</li>
        <li></li>
    </ul>
</div>
</body>

4.14 动画

css3 动画网址：https://www.runoob/css3/css3-animations.html
canvas动画模板：http://www.bootstrapmb/chajian/canvas
canvas动画模板：https://wwwblogs/html5tricks/p/9204735.html
卡巴斯基检测网站：https://cybermap.kaspersky/

更多推荐

了解CSS3