在我们写的html页面中，所有的内容只能通过添加标记来改变他们的表现。这种方式及其的不适合我们操作，因此将一个网页的内容和表现分开，所以说CSS就是用来装饰页面的。
一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明。
选择器是您需要改变样式的对象（上图的规则就一级标题生效）。
每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
对于页面中需要进行装饰的对象，我们需要选择器来进行选择。
我们放在css中的样式，我们可以将它放在htmel的head里面
<!--简单的例子-->
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="https://cdn-img.easyicon.net/favicon.ico">
<title>hollo</title>
<link rel="stylesheet" type="text/css" href="1.css">
<style>
body {
background-color: rgb(123, 83, 175);
text-align: center;
}
h1 {
color: rgb(204, 134, 134);
}
.haha {
margin-top: 100px;
color: rgb(152, 168, 145);
font-size: 50px;
}
</style>
</head>
<body >
<h1>上上下下</h1>
<hr>
<p class="haha">恒星</p>
</body>
</html>
同一目录新建一个样式表文件，后缀名为css如下：
在html中我们可以用
<link rel="stylesheet" type="text/css" href="1.css">
href中填放的是我们.css文件的路径。
在css文件中添加以下代码
body {
background-color: rgb(190, 103, 103);
text-align: center;
}
h1 {
color: rgb(85, 209, 209);
}
.haha {
margin-top: 100px;
color: rgb(152, 168, 145);
font-size: 50px;
}
通常我们可以用class来对一个样式进行反复的调用。
定义的时候在名字前面加.
.asc
应用的时候如下
<p class="haha">恒星</p>
相比较而言我们通常采用的是外部样式，这样有利于我们的逻辑梳理。不同的级联之间的优先级是：内联样式>内部样式表或外部样式表>浏览器缺省样式哪个样式定义离元素的距离近，哪个就生效
颜色：
我们可以通过background-color: rgb(156, 93, 93);来设定背景颜色，color: rgb(152, 168, 145); 来设定字体的颜色。在vs中我们不必去查找颜色对应的16进制代码，可以直接通过颜色框进行选择。
尺寸：
我们可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
在css中添加以下代码；
.example-1 {
width: 100%;
height: 50%;
background-color: rgb(91, 93, 199);
text-align: center;
}
.example-2 {
height: 30%;
width: 40%;
background-color: rgb(73, 138, 60);
text-align: right;
}
html中添加：
<p class="example-1 nr">金牛座</p>
<p class="example-2 nr" >巨蟹座</p>
对齐
对于元素中的文本，我们可以简单的设置text-align属性为left, center, right即可
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的
html中添加：
<div class="box1">我是内容一，外面红色的是我的边框。注意边框的内外都有25px的距离。</div>
<div class="box2">我是内容二，外面蓝色的是我的边框。注意与上面元素的外边距，发生了叠加，不是50px而是25px。</div>
css中添加；
.box1 {
height: 200px;
width: 200px;
background-color:#615200;
color: aliceblue;
border: 10px solid red;
padding: 25px;
margin: 25px;
}
.box2 {
height: 300px;
width: 300px;
background-color:#004d61;
color: aliceblue;
border: 10px solid blue;
padding: 25px;
margin: 25px;
}
在浏览器中F12可查看元素布局
无论边框、内边距还是外边距，它们都有上下左右四个方向。
可以通过—left，—right，—top，—bottom来设定不同方位的边框。
position属性用于对元素进行定位。该属性有以下一些值：
static 静态
relative 相对
fixed 固定
absolute 绝对
设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。
relative:元素相对于他的静态（正常）位置进行偏移
<div class="example-relative">魔蝎座</div>
.example-relative {
position: relative;
left: 30px;
top: 100px;
background-color: rgb(173, 241, 241);
}
fixed：将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）
<div class="broad"></div>
<div class="example-fixed">fixed</div>
.example-fixed {
position: fixed;
bottom: 40px;
right: 10px;
padding: 6px 24px;
border-radius: 4px;
color: #fff;
background-color: #9d0f0f;
cursor: pointer;
box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.broad {
height: 5000px;
width: 5000px;
padding: 20px;
background-color: rgb(204, 33, 76);
}
absolute：将使元素相对于其最近设置了定位属性(非static)的父元素进行偏移
<div class="example-relative">这是父元素，有 relative 定位属性
<div class="example-absolute">
这是子元素，有 absolute 定位属性
</div>
</div>
<!-- CSS -->
.example-relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid rgb(87, 33, 173);
}
.example-absolute {
position: absolute;
top: 80px;
right: 5px;
width: 200px;
height: 100px;
border: 3px solid rgb(218, 73, 16);
}
当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分
——visible 默认值，溢出部分不被裁剪，在区域外面显示——hidden 裁剪溢出部分且不可见
——scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
——auto 裁剪溢出部分，视情况提供滚动条
<!-- HTML -->
<div class="example-overflow-scroll-y">You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
</div>
<!-- CSS -->
.example-overflow-scroll-y {
width: 200px;
height: 100px;
background-color: #eee;
overflow-y: scroll;
}
在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。
<html>
<head>
<style>
.example-float-right {
float: right;
}
</style>
</head>
<body>
<img src="https://img2.baidu.com/it/u=1366723203,4192303293&fm=26&fmt=auto&gp=0.jpg" class="example-float-right" alt="">
<p>《假面骑士Build》（原文：仮面ライダービルド/Kamen Rider Build）是“平成假面骑士”系列的第19部作品，于2017年播出。是该系列史上初次以“物理科学”作为设计原型之一。
本作标题以及主角骑士的名字“Build”，正是“创造、形成”的意义，这也符合主角的身份——青年天才物理学家，同时是拥有平成骑士史上最高IQ的主角。主角的变身道具是科研人员常用的“实验试剂瓶”，战斗就如同在科学实验一般。而且从主角口头禅“那么，开始实验吧”与“胜利的法则已然决定！”，可见物理实验与法则是本作中的一大线索。另一方面，导演也宣称本作世界观的规模是史上最大——涉及了整个日本列岛。</p>
</body>
</html>
我们可以用opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高
<html>
<head>
<style>
img {
width: 25%;
border-radius: 10px;
float: left;
margin: 10px;
}
.opacity-2 {
opacity: 0.2;
}
.opacity-5 {
opacity: 0.5;
}
.opacity-10 {
opacity: 1;
}
</style>
</head>
<body>
<img class="opacity-2" src="https://img0.baidu.com/it/u=3075075274,1645889481&fm=26&fmt=auto&gp=0.jpg">
<img class="opacity-5" src="https://img0.baidu.com/it/u=3075075274,1645889481&fm=26&fmt=auto&gp=0.jpg">
<img class="opacity-10" src="https://img0.baidu.com/it/u=3075075274,1645889481&fm=26&fmt=auto&gp=0.jpg">
</body>
</html>
通过对css学习，一个网站的基本内容呈现在html中，对网站的修饰基本上都是存在于css里，这样有利于我们对网站进行后期的维护和管理。一个好的网站，离不开工程师对他的装饰。