CSS即层叠样式表，它也是一种语言，有它专用的语法结构，不过不要怕，它的语法结构几乎不涉及流程控制，所以非常简单。
由于html原生的标签长的非常难看，所以用CSS这个东西将它变的好看，html中的CSS就是图像处理中的PS，仅此而已。
当然，任何一种语言如果想学精都需要一个长期积累的过程，本教程主要是带着大家入门。
因为深入的讲解每一个属性或所有知识点这毫无意义，因为讲了不用谁都会忘掉。
更深入的知识往往是在大家实践的过程中遇到后查询手册或上网查询，只要用的多了自然就熟练了，相反的，如果不用再怎么记都会忘掉。
CSS主要包括三大类知识
1、选择器语法 --用来从页面中选取一个或多个元素。
2、CSS样式属性 --对选中的元素添加样式。CSS的样式属性非常多，不过不要担心，常用的也就那么几个。
3、页面布局 --对页面元素的定位与排版。
编写CSS代码的过程如同使用PS处理一张图片，图片是由很多图层组成的（在CSS中，标签就相当于图层），我们首选要选中一个图层（即选择器），然后利用PS内部的功能对这个图层进行修改（即CSS属性），然后合理的摆放这些图层，让整张图看起来美观一些（即定位）。
CSS代码的编写如同javascript一样，可以写到三个位置。
1、标签的属性上添加style属性，称为行内样式。
- <div class="div" style="width: 200px;">
2、页面中任意位置的style标签对中，称为内联样式。
- <style>
- .div{
- height: 200px;
- }
- </style>
3、独立的css文件中，然后使用<link rel="stylesheet" href="style.css">将其引入到页面中，称为外联样式。
css文件中直接写css代码，不需要使用style标签包裹，如下：
下面我们就来实际操作一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS语言介绍 CSS是什么 有什么用 怎么学</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="div" style="width: 200px;">
div
</div>
</body>
<style>
.div{
height: 200px;
}
</style>
</html>
以上代码中，我们分别使用行内方式、页内方式和引入方式三种方法给div标签添加了CSS样式，三种样式的效果是叠加的，最终实现效果如下：
因为，我们在行内设置了width: 200px;表示宽为200像素，内联样式中设置了height: 200px;，表示高位200像素，在外联样式中设置background-color: aquamarine;，即背景颜色为aquamarine，最终效果即三者的叠加效果。
在以下的课程中为了演示方便，我们会用内联方法编写CSS代码，即：在html页面中加一个style标签对，里面写css代码，在实际工作中大多会将CSS代码写到CSS文件中，特此说明。 |
窥视卡
雷达卡
发表于 2023-1-31 14:30:08
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-16 00:52:36
