CSS3语法总结

HTML+CS+JavaScript

结构 + 表现（美化） + 交互（动态）

CSS

CSS是什么
CSS怎么用
CSS选择器(这是我们的重点)
美化网页
盒子模型
浮动
定位
网页动画

1、什么是CSS

css就是用于美化前端的网站

2、发展史

CSS1.0
CSS2.0 DIV块+CSS ，HTML与CSS结构分离的思想，网页变得简单
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画…浏览器兼容
以上总结的都是重点

3、快速入门

基本的入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--规范<style>，在头部里面写CSS的代码
语法：
    选择器{
        声明1；
        声明2；
        声明3；
        注意声明最后最好要用分号结尾
    }


-->
    <style>
        h1{
        
        
            color: red;
        }
    </style>
</head>
<body>
<h1>我是标题1</h1>
</body>
</html>

建议使用关联标签的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--规范<style>，在头部里面写CSS的代码
语法：
    选择器{ 选择器的学习需要持久很长的时间
        声明1；
        声明2；
        声明3；
        注意声明最后最好要用分号结尾
    }


-->
<!--关联标签-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题1</h1>
</body>
</html>

优势：1、内容和表现分离

2、网页结构表现统一，可以实现复用

3、样式十分的丰富

4、建议使用独立于HTML的css文件

5、利用SEO，容易被搜索引擎收录！

4、CSS的3种导入方式

内部样式标

<style>
        h1{
        
        
            color: red;
        }
    </style>

外部样式标
- 链接式的导入：rel:“代表的是层叠样式表” 层叠样式表
```
<link rel="stylesheet" href="css/style.css">
```

导入式 :

<style>
    @import "css/style.css";
</style>

行内样式

<h1 style="color: orange">我是标题</h1>

注意区别：
1. 优先级遵从的是代码的就近原则
2. html和css的注释不一样
3. link标签比较常用，import不长使用，import弊端是先展示骨架再渲染CSS，link是一块弄完了再渲染出来，一般在公司中都使用link进行渲染

5、选择器

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

5.1 基本选择器（3种）（重要）

标签选择器：选择一类的标签进行样式的修改语法：标签{}

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

    <style>
        /*标签选择器，会选择到页面上所有的这个标签的元素*/
        h1{
      
      
            background-color: red;
        }
        p{
      
      
            font-size: 80px;
        }
    </style>
</head>
<body>

<h1>我是java</h1>
<h1>我是java</h1>
<p>狂神说java</p>
</body>
</html>

类选择器 class：选中所以class属性一致的标签，可以跨标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式；.class的名称{}
        好处，可以多个标签归类，是同一个class,可以复用

        */
        .java{
        
        
            color: red;


        }
        .python{
        
        
            color: orange;
        }
        .c{
        
        
            color: gold;
        }
    </style>
</head>
<body>
<h1 class="java">java</h1>
<h1 class="c">python</h1>
<h1 class="c">c</h1>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       /*
       id选择器 ：id必须保证全局唯一，id不能共用
       语法规则：#id名称{}
       id定位样式可以进行精准的定位
       选择器优先级的类别：id选择器》class选择器》标签选择器
       */
        #java{
        
        
            color: red;
        }
        .c{
        
        
            color: green;
        }
    </style>
</head>
<body>

<h1 id="java">java</h1>
<h1 class="c">python</h1>
<h1 class="c">c</h1>
</body>
</html>

优先级：id>class>标签

5.2 层次选择器

后代选择器：在某个元素的后面祖爷爷爷爷爸爸你，所有的后代都跟着渲染

<style>
        /*后代选择器*/
        body p{
      
      
            color: green;
        }
    </style>

子选择器，一代，儿子

/*子选择器*/
        body>p{
      
      
            background-color: gold;
        }

相邻兄弟选择器，同辈, 相邻的，直选下面的那一个，必须是下面的一个

/*兄弟选择器*/
        .p+p{
      
      
            background-color: green;
        }

通用兄弟选择器,对下不对上，当前选中元素的向下的所有兄弟元素

/*通用选择器*/
        .p~p{
    
    
            background-color: green;
        }

5.3 结构伪类选择器

    <style>
        /*选中ul的第一个元素*/
        ul li:first-child{
    
    
            background: green;
        }
        /*选中ul的最后一个元素*/
        ul li:last-child{
    
    
            background: gold;
        }
    </style>

5.4 属性选择器（最常用的）

id+class的组合使用

等于是 =

*= 包含

^= 开头

$=结尾

正则表达式里面的通配符

<style>
        a[class="link item first"]{
    
    
            background-color: red;
        }
 </style>

6、css的作用及字体样式

span标签，目的是为了突出文字的重点

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .sp{
        
        
            font-size: 25px;
        }

    </style>
</head>
<body>

欢迎学习<span class="sp">java</span>
</body>

字体样式：字体的大小、字体的颜色、字体的粗细、字体的类别

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .sp{
      
      
            font-size: 25px;
            font-family: Bahnschrift;
            color: red;
            font-weight: bold;
        }

    </style>
</head>
<body>

欢迎学习<span class="sp">java</span>
</body>
</html>

文本样式：

颜色 color
文本对齐的方式 text-align:center
首行缩进 text-indent
行高 line-heigh
装饰下划线 text-decoration

图片和文字居中：vertical-align: middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
          
          
            text-align: center;
        }
        .p1{
          
          
            text-indent: 2em;
        }
        .p2{
          
          
            background-color: gold;
            height: 300px;
            line-height: 300px;
            text-decoration: underline;
        }
        /*控制文字和图片的居中*/
        img,span{
          
          
            vertical-align: middle;
        }
    </style>
</head>
<body>

<h1>平静安详的湖面</h1>
<p>
    <img src="2.1.jpg">
    <span>文字</span>
</p>
<p class="p1">在参加北京冬奥会的近3000名运动员中，有这样的选手：秩序册里，他们所在的代表团可能只有一两名运动员；开幕式上，他们身边往往只有引导员和志愿者的陪伴；来到赛场，他们的成绩也可能不在前列……他们代表的，</p>
<p class="p2">可能是热带、亚热带地区人们的冰雪梦想和对这场冰雪盛会的期望。他们的出现，不仅丰富着世界冰雪运动的版图，也诠释着“更快、更高、更强——更团结”的奥林匹克格言。北京冬奥会，因为他们的到来而更加精彩。</p>
</body>
</html>

7、超链接伪类（做为导航栏可以用得到）

主要讲解的内容是鼠标悬浮和按住未释放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
        
        
            text-decoration: none;/*去掉超链接的下划线*/
            color:black;
        }
        /*伪类；鼠标悬浮的颜色,重点！！！*/
        a:hover{
        
        
            color: orange;
            font-size: 25px;
        }
        /*鼠标按住未释放的颜色*/
        a:active{
        
        
            color: green;
        }

    </style>
</head>
<body>

<a href="#">
    <img src="2.1.jpg">
</a>
<p>
    <a href="#">码出高效</a>
</p>
<p >
    <a href="#" >作者：</a>
</p>

</body>
</html>

8、无序列表：（去掉点以后，就是导航栏）

去掉无序列表的点

list-style:none

伪类的动作鼠标悬停

去掉超链接的下划线装饰 text-decoration:none

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

<div id="nav">
    <h2 class="title">全部商品分类</h2>

    <ul>
        <li>
            <a href="#">图书</a>
            <a href="#">音像</a>
            <a href="#">数字商品</a>
        </li>
        <li>
            <a href="#">家用电器</a>
            <a href="#">手机</a>
            <a href="#">数码</a>
        </li>
        <li>
            <a href="#">电脑</a>
            <a href="#">办公</a>
        </li>
        <li>
            <a href="#">家居</a>
            <a href="#">家装</a>
            <a href="#">厨具</a>
        </li>
        <li>
            <a href="#">服饰鞋帽</a>
            <a href="#">个性化妆</a>
        </li>
        <li>
            <a href="#">礼品箱包</a>
            <a href="#">钟表</a>
            <a href="#">珠宝</a>
        </li>
        <li>
            <a href="#">食品饮料</a>
            <a href="#">保健食品</a>
        </li>
        <li>
            <a href="#">彩票</a>
            <a href="#">旅行</a>
            <a href="#">充值</a>
            <a href="#">票务</a>
        </li>
    </ul>
</div>

</body>
</html>

CSS

#nav{
    
    
    width: 300px;
    background-color: cadetblue;
}
.title{
    
    
    font-size: 18px;
    font-weight: bold;
    text-indent: 2em;
    line-height: 35px;
    background-color: aqua;
}

ul li{
    
    
    height: 30px;
    list-style: none;
    /*list-style: none;是去除列表上面的圆点 */
    text-indent: 1em;
    /* 首行缩进一个字符*/

}
a{
    
    
    text-decoration: none;
    /*去掉超链接的下划线装饰*/
    font-size: 14px;
    color: black;
}
a:hover{
    
    
    /*超链接的伪类，鼠标悬停之类的*/
    color: coral;
    text-decoration: underline;

}

9、背景图像应用和渐变

背景图片的应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
        
        
            width: 1000px;
            height: 500px;
            border: 1px solid red;
            /*粗细+实体+颜色*/
            background-image: url("2.1.jpg");
            /*图像作为背景，默认为平铺*/
        }
        .div1{
        
        
            background-repeat: repeat-x;
        /* 水平方向平铺*/
        }
        .div2{
        
        
            background-repeat: repeat-y;
        /*    垂直方向平铺*/
        }
        .div3{
        
        
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>


<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

背景图片的应用：导航栏中的箭头

background-image:url()

background-repeat:no repeat

background-postion:在F12中手动的调制位置
CSS的背景的颜色渐变参考这个网站： Grabient

background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

用于美化网页的背景 一般情况下：不用这个作为背景颜色，都是用图片单做背景颜色

10、盒子模型及边框的使用

10.1 什么是盒子模型

margin ：外边距：外边距的妙用 margin：0 auto 自动的居中要求：快元素，快元素有固定的宽度

padding：内边距

border：边框

10.2 边框

1、边框的粗细

2、边框的样式

3、边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*body总有一个外边框margin为0
        开发里边常用的操作
        《码出高效》编程的基本规范里面都有
        */
        h1,ul,li,body{
      
      
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        /*border:粗细，样式，颜色*/
        #box{
      
      
            width: 300px;
            border: 1px solid red;

        }
        form{
      
      
            background: #FFCC70;
        }
        /*结构伪类选择器  重点是结构伪类选择器的使用*/ 
        form div:nth-of-type(1) input{
      
      
            border: 10px solid #cd1a1a;

        }
        form div:nth-of-type(2) input{
      
      
            border: 3px solid #cd1a1a;

        }
    </style>
</head>
<body>
<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>
</body>
</html>

10.3 内外边距和div居中

盒子的计算方式：你这个元素到底多大？margin+border+padding+内容宽度=给定的大小
巧妙的使用外边距使div正确的居中

10.4 圆角边框和盒子阴影+分享经验

border-radius:圆角边框用途：网站的头像变成圆形的，可以用这个属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
      
      
            width: 100px;
            height: 100px;
            margin-top: 20px;
            border: 2px solid red;
            border-radius: 50px;
        }
        /*在网站中看到的这圆形的头像，就是通过这个属性设置的*/
        img{
      
      
            border-radius: 50px;
        }
    </style>
</head>
<body>

<div id="box">


</div>
<img src="2.1.jpg">
</body>
</html>

盒子阴影box-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
      
      
            width: 100px;
            height: 100px;
            margin: 20px auto;
            border: 2px solid red;
            box-shadow: 10px 10px 100px red;
        }
        img{
      
      
            margin: 0 auto;
            border-radius: 50px;
            box-shadow: 10px 10px 100px red;
        }
        #box2{
      
      

            width: 100px;
            height: 100px;
            margin: 0 auto;
        }

    </style>
</head>
<body>

<div id="box">


</div>
<div id="box2">
<img src="2.1.jpg"></div>
</body>
</html>

狂神的从业经验分享

如果想模仿一个网站，可以直接选择右键网页另存为，然后根据源码进行模仿和修改
去源码之家下载登入的静态页面+源码之家直接登入页面、门户网站（改改里面的图片和文字）
改图片的时候，可以用画图工具查看源代码的图像的大小
登入页面写不出来的话就去下载；自己写的话，太难了，在小公司的开发中，一般也用这种技术
前端————天下文章一大抄
后台管理系统——去模板之家
公司中一般都会采用这个现成的框架，BStroub Layui (布局+按钮等等) （网站的后台可以选用这些组件）
最近的技术框架 vue-admin-element Element(中寻找组件) 飞冰（阿里的）让前端开发更友好
网站的前台，门户网站–模板之家（自己造的话，是美工的事情）

10.5 displa和浮动

块级元素：独占一行

h1-h6 p div 列表
行内元素：不独占一行

span a img …
行内元素可以被包含在块级元素中，反之则不可以

display （是一种实现行内排列的方式，但是很多时候使用float）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
        
        
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
        /*display:block 块元素
        inline :行内元素
        inline-block 是块元素，但是可以内联在一行
        none:是消失
        */
        span{
        
        
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
            /*float: right;*/
        }
    </style>
</head>
<body>
<div>
    div块元素
</div>
<span>span行内元素</span>
</body>
</html>

float:浮动 (实现行内的排列方式)
- 父级边框塌陷问题的解决
  - 增加父级元素的高度~
  - 增加一个空的div标签，清除浮动
  - overflow解决父级元素的塌陷问题，有相应的属性
  - 在父类中添加一个伪类：after (这是最常用的解决方案)

11、定位

6.1 相对定位

position：relavite(相对原来的位置，进行指定的偏移)，相对定位的话，仍然在标准文档流里面，原来的位置会被保留

top 上 left 左 bottom 下 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: 26px;
        }
        #father{
        
        
            border: 1px solid red;
        }
        #first{
        
        
            border: 1px dashed #7f94ff;
            background-color: #FFCC70;
            position: relative;
            top:20px;
            left: 10px;
        }
        #second{
        
        
            border: 1px dashed #7f94ff;
            background-color: #70ff77;
            position: relative;
            right: 10px;
            bottom: 10px;
        }
        #third{
        
        
            border: 1px dashed #7f9fff;
        }
    </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>
        div{
        
        

            padding: 10px;
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        li{
        
        
            list-style: none;


        }
        a{
        
        

            text-decoration: none;
            display: block;
            width: 100px;
            height: 100px;

            text-align: center;
            line-height: 100px;
            color: white;
            background-color: #C850C0;

        }
        a:hover{
        
        
            background-color: #7f9fff;

        }
        #a1 {
        
        
        }
        #a2{
        
        
            position: relative;
            left: 200px;
            top: -100px;
        }
        #a3{
        
        
            position: relative;
            left: 0px;
            top: 0px;
        }
        #a4{
        
        
            position: relative;
            left: 200px;
            top: -100px;
        }
        #a5{
        
        
            position: relative;
            left: 100px;
            top: -300px;
        }

    </style>
</head>
<body>

<div id="father">

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


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

6.2 绝对定位（相对于浏览器而言）

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

6.3 固定定位fixed（固定某个导航栏）

固定定位：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-color: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
      
      
            width: 100px;
            height: 100px;
            background-color: #f7ff00;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div1</div>
</body>
</html>

6.4 Z-index

12、动画

不要重复造轮子
直接上网搜css动画
百度搜canvas动画