【CSS3入门指北】基础篇

在这里插入图片描述

1.什么是CSS

Cascading Style Sheet 层叠级联样式表
CSS：表现（美化网页）
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…
在这里插入图片描述

2.CSS发展史

CSS1.0
CSS2.0 DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS3.0 圆角，阴影，动画…浏览器兼容性~

CSS的优势:
1、内容和表现分离
2、网页结构变现统一，可以实现复用
3、样式十分的丰富
4、建议使用独立于HTML的CSS文件
5、利用SEO，容易被搜索引擎收录！

3.快速入门

style
在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>


    <style>
        h1{
        color:red
        }
    style>
head>
<body>

<h1>我是标题h1>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在这里插入图片描述
index.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>








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

head>
<body>

<h1>我是标题h1>

body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

style.css

h1{  
 color:red 
 }

1
2
3
4

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>

  <link rel="stylesheet" href="css/style.css">
  
  <style>
    h1{
      color:green;
    }
  style>
head>
<body>




<h1 style-="color:green">我是标题h1>



body>
html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

拓展:外部样式两种写法
链接式：


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

导入式
是CSS2.1


  <style>
    @import url("css/style.css");
  style>
1
2
3
4

4.选择器

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

4.1基本选择器

1、标签选择器：选择一类标签标签{}

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我是标题title>
  <style>
/*标签选择器，会选择到页面上所有的这个标签的元素 */
    h1{
      color:red;
      background: #b3d4fc;
      border-radius: 33px;
    }
  style>
head>
<body>

  <h1>晴天h1>
  <h1>雨天h1>
<p>都不如有你的那天p>


body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2、类选择器 Class ：选择所有class 属性一致的标签，跨标签， .类名{}

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我是标题title>

  <style>
    /*类选择器的格式  .class的名称{}
    好处，可以多个标签归类，是同一个class，可以复用*/
    .guan01{
      color:red;
      background: #b3d4fc;
      border-radius: 33px;
    }
    .guan02{
      color: blue;
      background: #b3d4fc;
      border-radius: 33px;
    }
  style>
head>
<body>

<h1 class="guan01">晴天h1>
<h1 class="guan02">雨天h1>
<p class="guan01">都不如有你的那天p>



body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

3、ID 选择器:全局唯一！ #id名{}

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我是标题title>

  <style>
    /*类选择器的格式  .class的名称{}
    好处，可以多个标签归类，是同一个class，可以复用*/
    #guan01{
      color:red;
      background: #b3d4fc;
      border-radius: 33px;
    }
    .guan02{
      color: blue;
      background: #b3d4fc;
      border-radius: 33px;
    }
  style>
head>
<body>

<h1 id="guan01">晴天h1>
<h1 class="guan02">雨天h1>
<p class="guan02">都不如有你的那天p>



body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

优先级:id >class>标签

4.2 层次选择器

1、后代选择器:在某个元素后面祖爷爷爷爷爸爸我

  /*后代选择器*/
   body p{
     color: blue;
     background: #b3d4fc;
     border-radius: 33px;
   }
1
2
3
4
5
6

在这里插入图片描述
2、子选择器：一代，儿子

body>p{
     color: blue;
     background: #b3d4fc;
     border-radius: 33px;
   }
1
2
3
4
5

在这里插入图片描述

3、相邻兄弟选择器

.guan01 + p{
     color: blue;
     background: #b3d4fc;
     border-radius: 33px;
   }
1
2
3
4
5

在这里插入图片描述

4、通用选择器

 .guan01~p{
     color: blue;
     background: #b3d4fc;
     border-radius: 33px;
   }
1
2
3
4
5

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <style>
   /* p{
      background: aqua;
    }*/

   /*后代选择器*/
 /*  body p{
     color: blue;
     background: #b3d4fc;
     border-radius: 33px;
   }

*/
   /*子选择器*/
  /* body>p{
     color: blue;
     background: #b3d4fc;
     border-radius: 33px;
   }

   */
   /*相邻兄弟选择器:只选择一个，相邻（向下）*/
   /*.guan01 + p{
     color: blue;
     background: #b3d4fc;
     border-radius: 33px;
   }
   */
   /* 通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
   .guan01~p{
     color: blue;
     background: #b3d4fc;
     border-radius: 33px;
   }



  style>
head>
<body>

    <p>p1p>
    <p class="guan01">p2p>
    <p>p3p>
    <ul>
      <li>
        <p>p4p>
      li>
      <li>
        <p>p5p>
      li>
      <li>
        <p>p6p>
      li>


    ul>

<p >p7 p>
<p>p8p>
<p>p9p>

body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

4.2 层次选择器

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>

  <style>
    /*ul的第一个子元素*/
    ul li:first-child{

      background: red;
      border-radius: 33px;
    }
    ul li:last-child{
      
      background: yellow;
      border-radius: 33px;
    }
    /*
    选中p1:定位到父元素，选择当前的第一个元素
    选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！顺序
    */
    p:nth-child(1){

      background: green;
      border-radius: 33px;
    }
    /*选中父元素下的p元素的第二个类型*/
    p:nth-of-type(2){

      background: blue;
      border-radius: 33px;
    }


  style>
head>
<body>

<p>p1p>
<p>p2p>
<p>p3p>
<ul>
  <li>li1li>
  <li>li2li>



ul>

<p >p7 p>
<p>p8p>
<p>p9p>

body>
html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

4.3 属性选择器

 a[id]{
    background:yellow;
    }
1
2
3

在这里插入图片描述

a[id=first]{
        background: lawngreen;
    }
1
2
3

在这里插入图片描述

a[class*="links"] {
      background: deepskyblue;
    }
1
2
3

在这里插入图片描述

a[href^="http"] {
      background: deepskyblue;
    }
1
2
3

在这里插入图片描述

a[href$="doc"] {
      background: deepskyblue;
    }
1
2
3

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我是...title>
  <style>
    .demo a{
      float: left;
      display: block;
      height: 66px;
      width: 66px;
      border-radius: 9px;
      background: aqua;
      text-align: center;
      color: red;
      text-decoration: none;
      font: bold 20px/50px Arial;
    }
    /*属性名， 属性名=属性值（正则）
     = 绝对等于
     *= 包含这个元素
     ^= 以这个开头
     $= 以这个结尾
*/
   /* 存在id属性的元素 a[]{}*/
   /* a[id]{
    background:yellow;
    }


    */


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

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

    /*选中href中以http开头的元素*/
    /*a[href^="http"] {
      background: deepskyblue;
    }

     */


    /*选中href中以jpg、npg、doc结尾的元素*/
    a[href$="doc"] {
      background: deepskyblue;
    }
  style>
head>
<body>

<p class="demo">
  <a href="https://www.baidu.com" class="links item first" id="first">1a>
  <a href="https://www.baidu.com" class="links item first" id="active" target="_blank" title="test">2a>
  <a href="resource/image/test.html" class="links item ">3a>
  <a href="resource/image/test.png" class="links item ">4a>
  <a href="resource/image/test.jpg" class="links item ">5a>
  <a href="abc">6a>
  <a href="/a.pdf">7a>
  <a href="/abc.pdf">8a>
  <a href="abc.doc">9a>
  <a href="abcd.doc" class="links item last">10a>

p>

body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

在这里插入图片描述

5.美化网页元素

5.1为什么要美化网页

1、有效的传递页面信息
2、美化网页，页面漂亮，才能吸引用户
3、凸显页面的主题
4、提高用户的体验
span标签：重点要突出的字，使用span套起来

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <style>
    #test01{
      font-size: 50px;
    }
  style>
head>
<body>

welcome to my <span id="test01">world！span>
body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在这里插入图片描述

5.2 字体样式

<style>
    /*font-family:字体
      font-size: 字体大小
      font-weight:字体粗细
      color:  字体颜色
    */
    body{
      font-family: 楷体;
    }
    h1{
      font-size: 66px;
    }
    .test01{
      font-weight: bold;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>斗破苍穹title>
  <style>
    /*font-family:字体
      font-size: 字体大小
      font-weight:字体粗细
      color:  字体颜色
    */
    body{
      font-family: 楷体;
    }
    h1{
      font-size: 66px;
    }
    .test01{
      font-weight: bold;
    }

  style>
head>
<body>
<h1>故事介绍h1>
<p class="test01">《斗破苍穹》是一本连载于起点中文网的古装玄幻小说，作者是起点白金作家天蚕土豆（李虎），已完结。这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气。
  心潮澎湃，无限幻想，迎风挥击千层浪，少年不败热血！p>
<p>等级制度：斗之气，斗者，斗师，大斗师，斗灵，斗王，斗皇，斗宗，斗尊，斗尊巅峰，半圣，斗圣，斗帝。p>
<p>远古八族：萧族、古族、魂族、药族、雷族、炎族、石族、灵族。p>
<p>灵魂境界：凡境→灵境→天境→帝境，每境又分初期→中期→后期→巅峰→大圆满。p>
<p>灵境者可炼制8品丹药，天境者可炼制9品丹药，帝境者可炼制帝品丹药p>
  <p>丹药品级分为十品：一品→二品→三品→四品→五品→六品→七品→八品→九品→帝品p>
<p>斗技等级制度:天阶斗技，地阶斗技，玄阶斗技，黄阶斗技（注：顺序有所不同p>）

body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

5.3 文本样式

1、颜色 color、rgb、rgba
2、文本对齐的方式 text-align = center

 h1{
          color:rgba(0,255,255,0.9);
          text-align: center;
        }
1
2
3
4

在这里插入图片描述
3、首行缩进 text-indent: 2em

.test01{
          text-indent: 2em;
        }
1
2
3

在这里插入图片描述

4、行高 line-height：单行文字上下居中！ line-height = height

 .test02{
          background: aqua;
          height: 66px;
          line-height: 66px;
        }
1
2
3
4
5

在这里插入图片描述

5、装饰 text-decoration：

/*下划线*/
        .p1{
          text-decoration: underline;
        }
        /*中划线*/
        .p2{
          text-decoration: line-through;
        }
        /*上划线*/
        .p3{
          text-decoration: overline;
        }
1
2
3
4
5
6
7
8
9
10
11
12

在这里插入图片描述

6、文本图片水平对齐： vertial-align：middle

/*水平对齐 ~ 参照物 ， a ，b*/
        img,span{
          vertical-align: middle;
        }
1
2
3
4

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>斗破苍穹title>

  <style>
        h1{
          color:rgba(0,255,255,0.9);
          text-align: center;
        }
        .test01{
          text-indent: 2em;
        }
        .test02{
          background: aqua;
          height: 66px;
          line-height: 66px;
        }
        /*下划线*/
        .p1{
          text-decoration: underline;
        }
        /*中划线*/
        .p2{
          text-decoration: line-through;
        }
        /*上划线*/
        .p3{
          text-decoration: overline;
        }
        /*水平对齐 ~ 参照物 ， a ，b*/
        img,span{
          vertical-align: middle;
        }
  style>
head>
<body>

<p class="p1">1111111111111p>
<p class="p2">2222222222222p>
<p class="p3">3333333333333p>
<p>
  <img src="/resource/image/guan02.jpg" alt="美杜莎女神" >
  <span>11111111111111111span>
p>




<h1>故事介绍h1>
<p class="test01">《斗破苍穹》是一本连载于起点中文网的古装玄幻小说，作者是起点白金作家天蚕土豆（李虎），已完结。这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气。
  心潮澎湃，无限幻想，迎风挥击千层浪，少年不败热血！p>
<p>等级制度：斗之气，斗者，斗师，大斗师，斗灵，斗王，斗皇，斗宗，斗尊，斗尊巅峰，半圣，斗圣，斗帝。p>
<p class="test02">远古八族：萧族、古族、魂族、药族、雷族、炎族、石族、灵族。p>
<p class="test02">灵魂境界：凡境→灵境→天境→帝境，每境又分初期→中期→后期→巅峰→大圆满。p>
<p class="test02">灵境者可炼制8品丹药，天境者可炼制9品丹药，帝境者可炼制帝品丹药p>
<p class="test02">丹药品级分为十品：一品→二品→三品→四品→五品→六品→七品→八品→九品→帝品p>
<p class="test02">斗技等级制度:天阶斗技，地阶斗技，玄阶斗技，黄阶斗技（注：顺序有所不同p>）
body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

5.4 阴影

/*text-shadow:阴影颜色,水平偏移，垂直偏移，阴影半径*/
    #price{
      text-shadow: lawngreen 9px -1px 1px;
    }
1
2
3
4

在这里插入图片描述

5.5 超链接伪类

/*默认的颜色*/
    a{
      text-decoration: none;
      color: black;
    }
    /*鼠标悬浮的状态(重点记住)*/
    a:hover{
      color: red;
    }
    /*鼠标按住未释放的状态*/
    a:active{
      color: green;
      font-size: 33px;
    }
    /**/
    a:visited{
      color: aquamarine;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这里插入图片描述


"en">

  "UTF-8">
  <span class="token property">码出高效</span><span class="token punctuation">:</span>Java开发手册
  



"#">
  "images/guan03.jpg" alt="">


  "#">码出高效:Java开发手册


  "">作者:孤尽

"price">
      ￥69




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

5.6 练习

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>testtitle>
  <link rel="stylesheet" href="/lensson02/5.列表样式练习/style.css"/>
head>
<body>
<div id="nav">
<h1 class="title">全部商品分类h1>
      <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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

#nav{
  width: 250px;
}
.title{
      font-size: 18px;  /*字体*/
      font-weight: bold;  /*粗体*/
      text-indent: 2em;   /*缩进*/
      line-height: 28px;   /*行高*/
      background: red;
}

/*ul li
  list-style: none 去掉原点
  circle 空心圆
  decimal   数字
  square    正方形
*/
ul{
  background: #cccccc;
}
ul li{
  height: 30px;
  list-style: none;
  text-indent: 2em;   /*缩进*/
}
a{
  text-decoration: none;
  color: black;
  font-size: 15px;
}
a:hover{
  color: red;
  text-decoration: underline;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

5.7 背景

 background-image: url("images/guan02.jpg");/*默认是全部平铺*/
1

在这里插入图片描述

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

在这里插入图片描述

.div2{
          background-repeat: repeat-y;/*垂直平铺*/
        }
        .div3{
          background-repeat: no-repeat;/*不平铺*/
        }
1
2
3
4
5
6

在这里插入图片描述

5.8 渐变

渐变颜色网站：https://www.grabient.com/

推荐原因：可以直接使用生成好的渐变色的css代码
在这里插入图片描述

6.盒子模型

6.1 什么是盒子模型？

在这里插入图片描述 margin : 外边距
padding : 内边距
border : 边框

6.2 边框

1、边框的粗细
2、边框的样式
3、边框的颜色
在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>盒子模型title>
  <style>
/*
body总有一个默认的外边距margin: 0,常见操作
 */
   /* h1,ul,li,a,body{
      margin: 0;
    }

    */
    /*border: 粗细，样式，颜色*/
    #box{
      width: 300px;
      border: 1px solid #97D9E1;
    }
    h2{
      font-size: 16px;
      background: #97D9E1;
      line-height: 15px;
      
    }
    form{
      background: #97D9E1;

    }
    div:nth-of-type(1) input{
      border: 3px solid limegreen; /*solid 实线*/
    }
    div:nth-of-type(2) input{
      border: 3px dashed red; /*solid 虚线*/
    }
    div:nth-of-type(3) input{
      border: 2px dashed blue; /*solid 虚线*/
    }
  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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

6.3 内外边距

在这里插入图片描述

盒子的计算方式:这个元素有多大？
在这里插入图片描述
margin + border + padding + 内容宽度

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>外边距title>
  <style>
    /*
    body总有一个默认的外边距margin: 0,常见操作
     */
    /* h1,ul,li,a,body{
       margin: 0;
     }

     */
    /*border: 粗细，样式，颜色*/
    /*外边距的妙用: 居中元素*/
    #box{
      width: 300px;
      border: 1px solid white;
      background: aqua;
     margin: 0 auto; /*上下 左右 */
    }
    /*
    顺时针旋转
    margin:0
    margin:0 1px
    margin:0 1px 2px 3px
    */
    h2{
      font-size: 16px;

      background: aqua;

      line-height: 15px;
      color: red;

      margin:0 1px 2px 3px;
    }
    form{
      background: aqua;

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

  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>




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

6.4 圆角边框

在这里插入代码片
1

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>圆形title>
  <style>
    /*
          左上  右上 右下 左下 ,顺时针方向
           圆圈: 圆角 = 半径！
     */
    /*半圆
    div{
      width: 66px;
      height: 33px;
      margin: 33px;
      background: red;
      border-radius: 33px 33px 0px 0px;
    }
     */
    div{
      width: 33px;
      height: 66px;
      margin: 33px;
      background: red;
      border-radius: 33px  0px 0px 33px;
    }
    img{
      border-radius: 480px;
    }

  style>
head>
<body>
<div>div>
<img src="images/guan01.jpg" alt="">
body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

6.5 阴影

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>阴影title>
  <style>
    img{
      border-radius: 480px;

      box-shadow: 10px 10px 250px #97D9E1;
    }

  style>
head>
<body>
<div style="width: 1500px;display: block;text-align: center">

        <img src="images/guan01.jpg" alt="">

div>

body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

6.6 display

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>

  <style>
    div{
      width: 99px;
      height: 99px;
      border: 1px solid red;
      display: block;
    }
    span{
      width: 99px;
      height: 99px;
      border: 1px solid red;
      display:  inline;
    }
  style>
head>
<body>
<div>div块元素div>
<span>span行内元素span>
body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

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

6.7 float

1、左右浮动 float

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>

  <style>
    div{
      width: 99px;
      height: 99px;
      border: 1px solid red;
      display: block;
    }
   #father{
     border: 1px solid black;
   }
   .layer01{
     border: 1px dashed red;
     display: inline-block;
     float: right;
   }
    .layer02{
      border: 1px dashed green;
      display: inline-block;
      float: right;
    }
    .layer03{
      border: 1px dashed blue;
      display: inline-block;
      float: left;
    }
    .layer04{
      border: 1px dashed orange;
      display: inline-block;
      font-size: 16px;
      line-height: 24px;
    }
  style>
head>
<body>
<div id="father">
  <div class="layer01"><img src="images/guan01.jpg" alt="">div>
  <div class="layer02"><img src="images/guan02.jpg" alt="">div>
  <div class="layer03"><img src="images/guan03.jpg" alt="">div>
  <div class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到div>
div>


body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

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

6.8 父级边框塌陷的问题

解决方案：
1、增加父级元素的高度

#father{
     height: 1000px;
     border: 1px solid black;
     overflow: scroll;
   }
1
2
3
4
5

2、增加一个空的div标签，清除浮动

.clear{
      clear: both;
      margin: 0;
      padding: 0;
    }
  style>
head>
<body>
<div id="father">
  <div class="layer01"><img src="images/guan01.jpg" alt="">div>
  <div class="layer02"><img src="images/guan02.jpg" alt="">div>
  <div class="layer03"><img src="images/guan03.jpg" alt="">div>
  <div class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到div>
    <div class="clear">div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

/*
      overflow: hidden;隐藏
      overflow: scroll;滚动
      overflow: auto;
     */
   #father{
     border: 1px solid black;
     overflow: scroll;
   }
1
2
3
4
5
6
7
8
9

在这里插入图片描述
4、父类增加一个伪类: after

#father:after{
     content: '';
     display: block;
     clear: both;
   }
1
2
3
4
5

小结：
1、浮动元素后面增加空div
简单，代码中尽量避免空div
2、设置父元素的高度
3、overflow
简单，下拉的一些场景避免使用
4、父类添加一个伪类：after（推荐）
写法稍微复杂一点，但是没有副作用，推荐使用

7.定位

7.1 相对定位

相对定位：position：relative；
相对于原来位置，进行指定的偏移，相对定位的话，它任然在标准文档流中，原来的位置会被保留
在这里插入图片描述


"en">

  "UTF-8">
  相对定位
  


"father">
  "first">第一个盒子
  "second">第二个盒子
  "third">第三个盒子






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

方块定位练习
在这里插入图片描述




  
  方块练习
  


"box">
  "a1"  href="#">链接1
  "a2"  href="#">链接2
  "a3"  href="#">链接3
  "a4"  href="#">链接4
  "a5"  href="#">链接5





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

7.2 绝对定位

position: absolute;
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移~
3、在父级元素范围内移动
相对于父级或者浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留


"en">

  "UTF-8">
  绝对定位
  


"father">
  "first">第一个盒子
  "second">第二个盒子
  "third">第三个盒子







1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

7.3 固定定位

在这里插入图片描述

7.4 z-index

在这里插入图片描述




  
  Title
  


"content">
      
            "images/guan02.jpg" alt="">
            "idom">斗破苍穹之迦南学院篇
            "bg">
            2022年8月14日01:28:43

      





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

总结

本篇笔记是基于B站up主：遇见狂神说的笔记进行学习，感兴趣的可以去B站进行学习。网站地址：https://space.bilibili.com/95256449，以上就是今天要讲的内容，本文仅简单了解CSS3基础知识。好了今天的内容就到这里了，下一篇再见

相关阅读:
基于仿生机理的内生安全防御体系研究
 RabbitMQ-主题模式
 windows个性化设置--自定义windows系统的u盘图标
 神经网络（一）基本概念
 软考（软件设计师）中的一些总结
 CSS---border-image属性的使用心得
 vulnhub靶机ha:wordy
React 入门：实战案例 TodoList 组件列表动态初始化
 Awesome Uplift Modeling【如何学习因果推断、因果机器学习和Uplift建模？All in here】
HTML5与CSS3学习笔记【第十五章列表】
原文地址：https://blog.csdn.net/guanguan12319/article/details/126236978

【CSS3入门指北】基础篇

文章目录

1.什么是CSS

2.CSS发展史

3.快速入门

4.选择器

4.1基本选择器

4.2 层次选择器

4.2 层次选择器

4.3 属性选择器

5.美化网页元素

5.1为什么要美化网页

5.2 字体样式

5.3 文本样式

5.4 阴影

5.5 超链接伪类

5.6 练习

5.7 背景

5.8 渐变

6.盒子模型

6.1 什么是盒子模型？

6.2 边框

6.3 内外边距

6.4 圆角边框

6.5 阴影

6.6 display

6.7 float

6.8 父级边框塌陷的问题

7.定位

7.1 相对定位

7.2 绝对定位

7.3 固定定位

7.4 z-index

总结