CSS简单介绍
CSS是层叠样式表（Cascading Style Sheets）的缩写。是专门用来美化网页的的计算机语言，如果HTML算作是盖房子的话，CSS算作是装修，一个好的网页离不开精心美化。
HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
它包含了如：整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。
内容HTML和表现CSS的分离在代码的撰写与维护过程中，内容如果和修饰分离，便于维护。
CSS语法使用
语法
CSS由两部分组成：选择器，以{}包裹的一条或多条声明。
选择器：需要改变样式的对象。类别有元素选择器，id选择器和class选择器。
每条声明由一个属性和一个值组成，需用{}包裹且声明需要用；分开。
属性：希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。
id 选择器：
id选择器前有#号。
#hhh{
color: red;/*颜色设置为红色*/
}
元素选择器：
p{
color:red;/*颜色设置为红色*/
text-align:center; /* 文本居中 */
}
class选择器：
/* 注意：class选择器前有 . 号。 */
.center{
text-align: center;//居中
}
.large{
font-size: 30px;//字号
}
.red{
color: red;//颜色
}
CSS的使用
三种形式：外部样式表，内部样式表，内联样式
三种样式的优先级如下：
内联样式；内部样式表或外部样式表；浏览器缺省样式
我们主要学习的外部样式表
外部样式表：
这种方式将样式表规则全部放在一个文件里，使得结构更为清楚，同时也是现在的主流设计方式。
新建一个html文件输入以下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
<link rel="stylesheet" type="text/css" href="1.css">
<title>web2</title>
</head>
<body>
<h1>鸭子们的专属起飞基地</h1>
<hr>
<p class="hh">2021/3/14</p>
</body>
</html>
再新建一个.css文件来提供样式，如下：
body {
background-color: rgb(158, 22, 192);
text-align: center;
}
h1 {
color: rgba(32, 241, 4, 0.788);
}
.hh {
margin-top: 10px;
color: rgb(255, 255, 255);
font-size: 10px;
}
效果如下：
内部样式表的方法实现：在head元素中引入了style标签,效果一致。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
<link rel="stylesheet" type="text/css" href="1.css">
<title>web2</title>
<style>
body {
background-color: rgb(158, 22, 192);
text-align: center;
}
h1 {
color: rgba(32, 241, 4, 0.788);
}
.hh {
margin-top: 10px;
color: rgb(255, 255, 255);
font-size: 10px;
}
</style>
</head>
<body>
<h1>鸭子们的专属起飞基地</h1>
<hr>
<p class="hh">2021/3/14</p>
</body>
</html>
效果和前面那个一样：
内联样式：
直接把样式规则直接写到要应用的元素中，类似于属性。
<h3 style="color:red;">zzzzzzzzzz</h3>
1、颜色
用颜色RGB16进制值进行页面颜色的设置；
<!-- 颜色名称 -->
<h3 style="background-color:Tomato;">无敌是多么寂寞</h3>
<!-- 颜色值，3个字节分别代表RGB（Red，Green，Blue）的0～255的值 -->
<h3 style="background-color:#00ff40;">Hello zz</h3>
<!-- 文本颜色 -->
<h3 style="color:rgb(47, 0, 255);">Hello 张张</h3>
2、尺寸
可以用 height 和 width 设定元素内容占据的尺寸，常用单位有像素（px）和百分比（%）。
width: 100%;
height: 200px;
3、对齐
对齐方式有左对齐，居中对齐，右对齐，text-align属性为left, center, right；如下：
text-align: left;
盒子模型
一个 HTML 元素可以看作一个盒子,由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。
Content 内容
Padding 内边距，内容和边框之间的区域
Border 边框，默认不显示
Margin 外边距，边框以外与其它元素的区域
html:
<div class="box1">哎呀我去</div>
<div class="box2">你怎么这么好看</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;
}
边框与边距
html：
<p class="example-1">I have black borders on all sides.</p>
<p class="example-2">I have a blue bottom border.</p>
<p class="example-3">I have rounded grey borders.</p>
<p class="example-4">I have a purple left border.</p>
css：
.example-1 {
border: 1px dotted black; /* 上下左右都相同 */
}
.example-2 {
border-bottom: 1px solid blue; /* 只设置底部边框 */
}
.example-3 {
border: 1px solid grey;
border-radius: 15px; /* 边框圆角 */
}
.example-4 {
border-left: 5px solid purple;
}
边距
html
padding: 20px; /* 上下左右都相同 */
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */
css
.example-1 {
padding: 20px; /* 上下左右都相同 */
}
.example-2 {
padding-bottom: 100px;
}
.example-3 {
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
}
.example-4 {
padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */
}
定位
由属性position实现，共有static 静态、relative 相对、fixed 固定、absolute 绝对共4个值。
静态、相对和固定根据字面意思理解就可以了，绝对是根据其父元素的位置来定位。
html
<body>
<div class="zhu">我是注释1</div>
<div class="zhu">我是注释2</div>
<div class="zhu">我是注释3</div>
<div class="top">返回</div>
</body>
css
.zhu
{
height: 500px;
width: 300px;
background-color: rgba(206, 206, 206,0.5);
border-left: 5px solid rgba(80,80,80,1);
}
.top
{
position: fixed;
bottom: 40px;
right: 10px;
background-color:#204969;
color: #dadada;
padding: 25px;
text-align: center;
}
溢出
当元素的内容超过指定的区域时，可以使用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="2.jpg" class="example-float-right" alt="">
<p>重庆交通大学双福校区的银杏路，各种环保图案悄然出现在道路两旁的公共设施上，吸引了大量过路师生的眼球。</p>
</body>
</html>
实现效果如下：
不透明度
用opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高。
代码如下
<html>
<head>
<style>
img {
width: 25%;
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="hua.jpg">
<img class="opacity-5" src="hua.jpg">
<img class="opacity-10" src="hua.jpg">
</body>
</html>
组合选择器
前面我们学习了 CSS有三种选择器：元素、id 和 class 。但我们也可以进行组合，以得到简洁精确的选择。
下面我们介绍两种组合选择器
后代选择器
以空格作为分隔，比如.haha p 代表在div元素内有.haha这种类的所有元素。
代码举例：
<html>
<head>
<style>
.haha p {
background-color: yellow;
}
</style>
</head>
<body>
<div class="haha">
<p>Paragraph 1 in the div .haha.</p>
<p>Paragraph 2 in the div .haha>.</p>
<span>
<p>Paragraph 3 in the div .haha.</p>
</span>
</div>
<p>Paragraph 4. Not in a div .haha.</p>
<p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>
子选择器
也称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接<p>元素。
代码举例
<html>
<head>
<style>
.haha > p {
background-color: yellow;
}
</style>
</head>
<body>
<div class="haha">
<p>Paragraph 1 in the div .haha.</p>
<p>Paragraph 2 in the div .haha.</p>
<span>
<p>Paragraph 3 in the div .haha - it is descendant but not immediate child.</p>
</span> <!-- not Child but Descendant -->
</div>
<p>Paragraph 4. Not in a div .haha.</p>
<p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>
段落3在.haha类中，但它的直接父元素是span，不是.haha的直接后代，所以不能选择
伪类和伪元素
伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。
语法：
/* 选择器后使用 : 号，再跟上某个伪类/伪元素 */
selector:pseudo-class/pseudo-element {
property:value;
}
总结
通过对CSS的学习，可以很灵活的对网页进行美化。同时我们也需要有一定的设计基础，这次对CSS的功能使用进行了认识和实操，希望在今后的学习中能熟练掌握以上内容。