前端基础之CSS

发表于 更新于 分类于 本文字数： 18k 阅读时长 ≈ 16 分钟

CSS基础

层贴样式表:就是给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
# 注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/

通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...


# css的语法结构
选择器 {
  属性1:值1;
  属性2:值2;
  属性3:值3;
  属性4:值4;
}

# css的三种引入方式
	1.style标签内部直接书写(为了教学演示方便我们用第一种)
  	<style>
        h1  {
            color: burlywood;
        }
    </style>
  2.link标签引入外部css文件(最正规的方式 解耦合)
    <link rel="stylesheet" href="mycss.css">
	3.行内式(一般不用)
  	<h1 style="color: green">老板好 要上课吗?</h1>
"""
css的学习流程
	1.先学如何查找标签
		css查找标签的方式你一定要学会
		因为后面所有的框架封装的查找语句都是基于css来的
		css选择器很简单很好学不要有压力!!!
	
	2.之后再学如何添加样式
"""

CSS选择器

基本选择器

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
# id选择器

# 类选择器

# 元素/标签选择器

# 通用选择器
<style>
        /*id选择器*/
        /*#d1 {  !*找到id是d1的标签 将文本颜色变成绿黄色*!*/
        /*    color: greenyellow;*/
        /*}*/
        /*类选择器*/
        /*.c1 {  !*找到class值里面包含c1的标签*!*/
        /*    color: red;*/
        /*}*/
        /*元素(标签)选择器*/
        /*span {  !*找到所有的span标签*!*/
        /*    color: red;*/
        /*}*/
        /*通用选择器*/
        /** {  !*将html页面上所有的标签全部找到*!*/
        /*    color: green;*/
        /*}*/
</style>

组合选择器

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
"""
在前端 我们将标签的嵌套用亲戚关系来表述层级
	<div>div
        <p>div p</p>
        <p>div p
            <span>div p span</span>
        </p>
        <span>span</span>
        <span>span</span>
  </div>
  div里面的p span都是div的后代
  p是div的儿子
  p里面的span是p的儿子 是div的孙子
  div是p的父亲
  ...
"""

# 后代选择器
# 儿子选择器
# 毗邻选择器
# 弟弟选择器

				/*后代选择器*/
        /*div span {*/
        /*    color: red;*/
        /*}*/

        /*儿子选择器*/
        /*div>span {*/
        /*    color: red;*/
        /*}*/

        /*毗邻选择器*/
        /*div+span {  !*同级别紧挨着的下面的第一个*!*/
        /*    color: aqua;*/
        /*}*/

        /*弟弟选择器*/
        div~span {  /*同级别下面所有的span*/
            color: red;
        }

属性选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的

/*[username] {  !*将所有含有属性名是username的标签背景色改为红色*!*/
        /*    background-color: red;*/
        /*}*/

        /*[username='jason'] {  !*找到所有属性名是username并且属性值是jason的标签*!*/
        /*    background-color: orange;*/
        /*}*/

        /*input[username='jason'] {  !*找到所有属性名是username并且属性值是jason的input标签*!*/
        /*    background-color: wheat;*/
        /*}*/

作业

1
2
3
4
5
6
必做题
1.form表单所有知识点自己敲一遍
2.用html搭建一个注册页面
3.自己演示操作css各种选择器
选做题
1.用web框架体验一下form表单提交数据，完成前后端数据交互

分组与嵌套

1
2
3
4
5
6
div,p,span {  /*逗号表示并列关系*/
            color: yellow;
        }
#d1,.c1,span  {
            color: orange;
        }

伪类选择器

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            background-color: black;
        }
        a:link {  /*访问之前的状态*/
            color: red;
        }
        a:hover {  /*需要记住*/
            color: aqua;  /*鼠标悬浮态*/
        }
        a:active {
            color: black;  /*鼠标点击不松开的状态  激活态*/
        }
        a:visited {
            color: darkgray;  /*访问之后的状态*/
        }
        p {
            color: darkgray;
            font-size: 48px;
        }
        p:hover {
            color: white;
        }
        
        input:focus {  /*input框获取焦点(鼠标点了input框)*/
            background-color: red;
        }
    </style>
</head>
<body>
<a href="https://www.jd.com/">小轩在不在?</a>
<p>点我有你好看哦</p>
<input type="text">
</body>
</html>

伪元素选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
p:first-letter {
            font-size: 48px;
            color: orange;
        }
p:before {  /*在文本开头 同css添加内容*/
            content: '你说的对';
            color: blue;
        }
p:after {
            content: '雨露均沾';
            color: orange;
        }
ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)

选择器优先级

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
"""
行内 > id选择器  > 类选择器 > 标签选择器
"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        /*
            1.选择器相同 书写顺序不同
                就近原则:谁离标签更近就听谁的
            2.选择器不同 ...
                行内 > id选择器  > 类选择器 > 标签选择器
                精确度越高越有效
        */
        #d1 {
            color: aqua;
        }
        /*.c1 {*/
        /*    color: orange;*/
        /*}*/
        /*p {*/
        /*    color: red;*/
        /*}*/
    </style>
<!--    <link rel="stylesheet" href="mycss1.css">-->
</head>
<body>
    <p id="d1" class="c1" style="color: blue">贤妻果然很识趣，有前途~</p>
</body>
</html>

CSS属性相关

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
        p {
            background-color: red;
            height: 200px;
            width: 400px;
        }
        span {
            background-color: green;
            height: 200px;
            width: 400px;
            /*行内标签无法设置长宽 就算你写了 也不会生效*/
        }
</style>

字体属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
p {
            /*font-family: "Arial Black","微软雅黑","...";  !*第一个不生效就用后面的 写多个备用*!*/

            /*font-size: 24px;  !*字体大小*!*/

            /*font-weight: inherit;  !*bolder lighter 100~900 inherit继承父元素的粗细值*!*/

            /*color: red;  !*直接写颜色英文*!*/
            /*color: #ee762e;  !*颜色编号*!*/
            /*color: rgb(128,23,45);  !*三基色 数字  范围0-255*!*/
            /*color: rgba(23, 128, 91, 0.9);  !*第四个参数是颜色的透明度 范围是0-1*!*/

            /*当你想要一些颜色的时候 可以利用现成的工具
                1 pycharm提供的取色器
                2 qq或者微信截图功能
  							也可以多软件结合使用 
            */
        }

文字属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
p {
            /*text-align: center;  !*居中*!*/
            /*text-align: right;*/
            /*text-align: left;*/
            /*text-align: justify;  !*两端对齐*!*/

            /*text-decoration: underline;*/
            /*text-decoration: overline;*/
            /*text-decoration: line-through;*/
            /*text-decoration: none;*/
            /*在html中 有很多标签渲染出来的样式效果是一样的*/
            font-size: 16px;
            text-indent: 32px;   /*缩进32px*/
        }
        a {
            text-decoration: none;  /*主要用于给a标签去掉自带的下划线  需要掌握*/
        }

背景图片

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #d1 {
            height: 500px;
            background-color: red;
        }
        #d2 {
            height: 500px;
            background-color: green;
        }
        #d3 {
            height: 500px;
            background-image: url("222.png");
            background-attachment: fixed;
        }
        #d4 {
            height: 500px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

        p {
            background-color: red;

            border-width: 5px;
            border-style: solid;
            border-color: green;

        }
        div {
            /*border-left-width: 5px;*/
            /*border-left-color: red;*/
            /*border-left-style: dotted;*/

            /*border-right-width: 10px;*/
            /*border-right-color: greenyellow;*/
            /*border-right-style: solid;*/

            /*border-top-width: 15px;*/
            /*border-top-color: deeppink;*/
            /*border-top-style: dashed;*/

            /*border-bottom-width: 10px;*/
            /*border-bottom-color: tomato;*/
            /*border-bottom-style: solid;*/
            border: 3px solid red;  /*三者位置可以随意写*/

        }
        #d1 {
            background-color: greenyellow;
            height: 400px;
            width: 400px;
            border-radius: 50%;  /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/
        }
    </style>
</head>
<body>
    <p>穷人  被diss到了  哭泣.png</p>
<div>妈拉个巴子,妈拉个巴子,妈拉个巴子,妈拉个巴子</div>
<div id="d1"></div>
</body>
</html>

display属性

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /*#d1 {*/
        /*    !*display: none;  !*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*!*!*/
        /*    display: inline;  !*将标签设置为行内标签的特点*!*/
        /*}*/
        /*#d2 {*/
        /*    display: inline;*/
        /*}*/
        /*#d1 {*/
        /*    display: block;  !*将标签设置成块儿级标签的特点*!*/
        /*}*/
        /*#d2 {*/
        /*    display: block;*/
        /*}*/
        /*#d1 {*/
        /*    display: inline-block;*/
        /*}*/
        /*#d2 {*/
        /*    display: inline-block;  !*标签即可以在一行显示又可以设置长宽*!*/
        /*}*/
    </style>
</head>
<body>
<div style="display: none">div1</div>
<div>div2</div>
<div style="visibility: hidden">单纯的隐藏 位置还在</div>  
<div>div4</div>
<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->
<!--<span id="d1" style="height: 100px;width: 100px;background-color: red">span</span>-->
<!--<span id="d2" style="height: 100px;width: 100px;background-color: greenyellow">span</span>-->

<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</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
"""
盒子模型
	就以快递盒为例
		快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
		盒子的厚度(标签的边框 border)
		盒子里面的物体到盒子的距离(内容到边框的距离  padding内边距)
		物体的大小(内容 content)
	
	
	如果你想要调整标签与标签之间的距离 你就可以调整margin
	
	浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除
	
"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;  /*上下左右全是0
            /*margin: 10px 20px;  !* 第一个上下 第二个左右*!*/
            /*margin: 10px 20px 30px;  !*第一个上  第二个左右  第三个下*!*/
            /*margin: 10px 20px 30px 40px;  !*上 右 下 左*!*/
        }
        /*p {*/
        /*    margin-left: 0;*/
        /*    margin-top: 0;*/
        /*    margin-right: 0;*/
        /*    margin-bottom: 0;*/
        /*}*/

        #d1 {
            margin-bottom: 50px;
        }


        #d2 {
            margin-top: 20px;  /*不叠加 只取大的*/
        }

        #dd {
            margin: 0 auto;  /*只能做到标签的水平居中*/
        }
        p {
            border: 3px solid red;
            /*padding-left: 10px;*/
            /*padding-top: 20px;*/
            /*padding-right: 20px;*/
            /*padding-bottom: 50px;*/

            /*padding: 10px;*/
            /*padding: 10px 20px;*/
            /*padding: 10px 20px 30px;*/
            /*padding: 10px 20px 30px 40px;*/  /*规律和margin一模一样*/
        }
    </style>
</head>
<body>
<!--    <p style="border: 1px solid red;" id="d1">ppp</p>-->
<!--    <p style="border: 1px solid orange;" id="d2">ppp</p>-->
<!--<div style="border: 3px solid red;height: 400px;width: 400px">-->
<!--    <div id='dd' style="border: 1px solid orange;height: 50px;width: 50px;background-color: blue;"></div>-->
<!--</div>-->

<p>ppp</p>

</body>
</html>

浮动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
"""浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大"""
只要是设计到页面的布局一般都是用浮动来提前规划好
<style>
        body {
            margin: 0;
        }
        #d1 {
            height: 200px;
            width: 200px;
            background-color: red;
            float: left;  /*浮动  浮到空中往左飘*/
        }
        #d2 {
            height: 200px;
            width: 200px;
            background-color: greenyellow;
            float: right;   /*浮动 浮到空中往右飘*/
        }
</style>

作业

1
2
3
4
5
今日作业
必做题
1.从头到位敲一遍今天的css选择器及样式代码
选做题
1.尝试着搭建小米导航条(练习浮动 不要求搭的多好看)

清除浮动带来的影响

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"""
浮动的元素会造成父标签的塌陷

解决塌陷推导步骤
	1.自己写一个标签强行撑起一个高度
	2.clear属性
			clear:left\right\both
	3.统一解决方式	提前定义好后续直接使用
  	.clearfix:after {
  		content:'';
  		display:block;
  		clear:both;
 	 }
 	 谁塌陷了就给谁加上clearfix类属性
"""

溢出属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"""标签内部的内容超出了标签自身的范围会造成内容的溢出"""
overflow:hidden/scroll/auto/visible

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

# 圆形头像制作
overflow:hidden
  
img {
    max-width:100%;
  }

定位

relative、absolute、fixed

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
"""
静态 bootstrap&jquery
	默认所有的标签都是静态的 无法改变位置	

相对定位 relative
	相对于标签自身原来的位置
	(如果你讲标签的position由static变成relative，那么标签就会由没有定位过的标签变成已经定位过的标签 性质就改变了)

绝对定位 absolute
	eg:小米购物车
	相对于已经定位过的父标签(如果没有则以body作为参照)

固定定位  fixed
	eg:回到顶部、右侧小广告...
	相对于浏览器窗口定位

left
top
right
bottom
"""

# 脱离文档流
	1.浮动
  2.绝对定位
  3.固定定位
# 不脱离文档流
	1.相对定位

z-index

1
2
3
4
5
6
7
8
# 其实是用来调节指向我们人的z轴的距离   模态框
"""
eg:百度登陆页面 三层结构
	1.底部正常文本内容
	2.黑色的布
	3.白色的登陆页面
"""
z-index:999

透明度

1
opacity  # 颜色和字体均可改变

简易版本的博客园首页

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
"""
先用div划定区域
再用HTML先占位
最后调节样式
	1.在给标签起id或者class属性的时候 也应该做到见名知意

css单独开设文件书写
	1.上来先用注释表明用途 以及作用区域
		/*这是一个博客园首页的样式文件*/
		
		/*通用样式*/
    body {
    	margin:0;
    }
    a {
    	text-decoration:none
    }
    ul {
    	list-style-type:none
    	padding-left:0
    }
		
		/*左侧样式*/
		
		/*右侧样式*/
"""

博客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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="blog.css">
</head>
<body>
<div class="blog-left">
    <div class="blog-avatar">
        <img src="1.jpg" alt="">
    </div>
    <div class="blog-title">
        <p>tsuki的博客</p>
    </div>
    <div class="blog-info">
        <p>该人太懒，这里什么也没有</p>
    </div>
    <div class="blog-link">
        <ul>
            <li><a href="">关于我</a></li>
            <li><a href="">github</a></li>
            <li><a href="">微博</a></li>
        </ul>
    </div>
    <div class="blog-tag">
        <ul>
            <li><a href="">#Python</a></li>
            <li><a href="">#Java</a></li>
            <li><a href="">#Golang</a></li>
        </ul>
    </div>
</div>
<div class="blog-right">
    <div class="article">
        <div class="article-title">
            <span class="title">论开车的重要性</span>
            <span class="date">2020/5/14</span>
        </div>
        <div class="article-body">
            <p>我爱开宝马</p>
        </div>
        <hr>
        <div class="article-bottom">
            <span>#Python&nbsp;&nbsp;</span>
            <span>#Javascript</span>
        </div>
    </div>
    <div class="article">
        <div class="article-title">
            <span class="title">论开车的重要性</span>
            <span class="date">2020/5/14</span>
        </div>
        <div class="article-body">
            <p>我爱开宝马</p>
        </div>
        <hr>
        <div class="article-bottom">
            <span>#Python&nbsp;&nbsp;</span>
            <span>#Javascript</span>
        </div>
    </div>
    <div class="article">
        <div class="article-title">
            <span class="title">论开车的重要性</span>
            <span class="date">2020/5/14</span>
        </div>
        <div class="article-body">
            <p>我爱开宝马</p>
        </div>
        <hr>
        <div class="article-bottom">
            <span>#Python&nbsp;&nbsp;</span>
            <span>#Javascript</span>
        </div>
    </div>
    <div class="article">
        <div class="article-title">
            <span class="title">论开车的重要性</span>
            <span class="date">2020/5/14</span>
        </div>
        <div class="article-body">
            <p>我爱开宝马</p>
        </div>
        <hr>
        <div class="article-bottom">
            <span>#Python&nbsp;&nbsp;</span>
            <span>#Javascript</span>
        </div>
    </div>
    <div class="article">
        <div class="article-title">
            <span class="title">论开车的重要性</span>
            <span class="date">2020/5/14</span>
        </div>
        <div class="article-body">
            <p>我爱开宝马</p>
        </div>
        <hr>
        <div class="article-bottom">
            <span>#Python&nbsp;&nbsp;</span>
            <span>#Javascript</span>
        </div>
    </div>
    <div class="article">
        <div class="article-title">
            <span class="title">论开车的重要性</span>
            <span class="date">2020/5/14</span>
        </div>
        <div class="article-body">
            <p>我爱开宝马</p>
        </div>
        <hr>
        <div class="article-bottom">
            <span>#Python&nbsp;&nbsp;</span>
            <span>#Javascript</span>
        </div>
    </div>

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

博客css代码

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
77
78
79
80
81
body{
    margin: 0;
    background: #eeeeee;
}
a {
    text-decoration: none;
}
ul {
    list-style-type: none;
    padding-left: 0;
}

.blog-left{
    float: left;
    width: 20%;
    height: 100%;
    position: fixed;
    background-color: #4e4e4e;
}
.blog-avatar{
    height: 200px;
    width: 200px;
    border-radius: 50%;
    border: 5px white solid;
    margin: 20px auto;
    overflow: hidden;
}
.blog-avatar img{
    max-width: 100%;
}

.blog-right{
    float: right;
    width: 80%;
    height: 1000px;
}
.blog-title,.blog-info{
    color: darkgray;
    font-size: 18px;
    text-align: center;
}
.blog-link,.blog-tag{
    font-size: 24px;
}
.blog-link a,.blog-tag a {
    color: darkgray;
}
.blog-link a:hover,.blog-tag a:hover {
    color: white;
}
.blog-link ul,.blog-tag ul{
    text-align: center;
    margin-top: 100px;
}
.article{
    background-color: white;
    margin: 20px 40px 10px 10px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
.title{
    font-size: 36px;
}
.date{
    float: right;
    margin:20px;
    font-weight: bolder;
}
.article-title{
    border-left: 8px solid red;
    text-indent: 1em;
}
.article-body{
    font-size: 18px;
    text-indent: 30px;
    /*border-bottom: 1px solid black;*/

}
.article-bottom{
    padding-left: 30px;
    padding-bottom: 10px;
}