CSS编程基础学习

1. CSS 简介

1.1. CSS概念及作用

HTML即超文本标记语言（HyperText Markup Language），是网页制作的基础，通过HTML，开发者可以定义网页的标题、段落、链接、图像、列表、表格、表单等元素。引入CSS 可以针对 HTML 里的各种元素进行样式的设置，让网页变得更加美观、易读、好用。可以理解为HTML 是整个web网页的骨架，CSS 就是网页的装饰，两者配合起来能做出好看又实用的网页。

CSS 即层叠样式表（Cascading Style Sheets），它是一种用于描述 HTML 或 XML（包括如 SVG、XHTML 之类的 XML 分支语言）文档外观和格式的样式表语言。CSS 能够将网页内容（HTML 代码）与展示样式分离，使得网页的设计和维护更加灵活和高效。软件开发人员可以使用CSS给网页设置不同的样式，如使用 CSS来调整网页上文字的字体、字号、颜色等属性，同时还可以设置调整网页上的图片、按钮、表格等元素的大小、颜色、位置等等。效果样例图如下：

1.2. CSS基础知识

1.2.1. 基本语法

CSS 规则由选择器和声明块组成，声明块包含一个或多个声明，每个声明由属性和值组成，用冒号分隔，多个声明之间用分号分隔。基本语法样例图如下：

例如，将所有段落的文本颜色设置为红色：

p {
  color: red;
}

1.2.2. 引入方式

CSS的引入方式有三种，分别是：行内样式、内部样式、外部样式

1）行内样式表

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式。例如：

2）内部样式表

内部样式表（内嵌样式表）是写到html页面内部，是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中。例如：

<style>
       div {
              color: red;
              font-size: 12px;
           }
</style>
<style>

3）外部样式表

实际开发都是外部样式表，适合于样式比较多的情况，核心是样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用。

引入外部样式表分为两步：

新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中；
在 HTML 页面中，使用<link> 标签引入这个文件或者import导入的方式；

例如：

链接的方式： <link rel="stylesheet" href="css文件路径">
导入的方式：<style>
            @import url("css文件路径")
</style>

1.2.3. 选择器

CSS中的选择器有很多，我们介绍使用的是以下几种选择器：标签选择器、类选择器、id选择器、层次选择器、伪类选择器以及属性选择器id配合类选择器的方式。

1)标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，选择页面中某一类标签指定统一的 CSS 样式。

标签名{
 属性1: 属性值1;
 属性2: 属性值2;
 属性3: 属性值3;
 ...
}

2)类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

语法结构需要用class属性来调用class类的意思，在CSS中，类选择器以一个点'.'号来显示
<div class='red'> 变红色 </div>
 <style>
      .red {
          color: red;
      }
</style>

同时，类选择器还可以进行多类名使用，使用方法是：

(1) 在标签class 属性中写多个类名

(2) 多个类名中间必须用空格分开

(3) 这个标签就可以分别具有这些类名的样式

3)id选择器

id 选择器是唯一的，不得重复。id 选择器和类选择器最大的不同在于使用次数上。CSS 中 id 选择器以"#" 来定义。

例如语法如下：
<div id="infoChart"></div>
#inforChart {
 color:red;
}

优先级：id > class > 标签

4)层次选择器

针对HTML页面多层标签使用层次选择器可以实现该层级的唯一性，使用样例如下图：

5)伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child ，样例如下图：

6)id+class选择器

使用多个相同标签的时候，使用这种当时可以设置不同的样式。代码样例结构图如下图所示：

1.3. 美化网页

日常项目开发过程中，针对项目中的网页进行美化常用的方式有五种，分别是：字体、超链接伪类、阴影、背景和渐变的方式。

1.3.1. 字体

CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体），字体常用的有：

font-family：字体系列；常见的字体：微软雅黑
font-size：字体大小；用px（像素）作为单位
font-weight：字体粗细；normal（400）不加粗，bold（700）加粗，100-900调整粗细
font-style：字体样式；normal默认，italic斜体

使用样例如下：

/*
字体
字体大小
字体的粗细
字体颜色
文本对齐方式
首行缩进
行高
下划线
文本图片水平对齐
*/
.title h2 {
font-size: 20rem;
font-family: YouSheBiaoTiHei;
font-weight:500;
color: #ffffff;
text-align:center;
text-indent:2rem;
line-height:20rem;
text-decoration:underline;
vertical-align: middle;
}

字库下载网站：

1.icomoon 字库 http://icomoon.io

2.阿里 iconfont字库 iconfont-阿里巴巴矢量图标库

引入：把下载包里面的 fonts 文件夹放入页面根目录下，然后在 CSS 样式中全局声明字体，这样就可以把这些字体文件通过CSS引入到我们页面中。

1.3.2. 超链接伪类

超链接的伪类就是超链接，我们在写一个a标签的时候可以设定几种的操作形式，如是该标签未点击之前鼠标是悬浮，还有就是鼠标点中但没有释放前，最后就是鼠标点击过后的链接，可以按照需要进行设置，具体设置如下图所示：

1.3.3. 阴影

在 CSS中，我们可以使用 text-shadow 属性将阴影应用于文本。编写语法如下：

text-shadow: h-shadow v-shadow blur color;

例如：

1.3.4. 背景

通过CSS 背景属性，可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。背景设置样例代码如下图：

1.3.5. 渐变

在 CSS 中可以使用渐变来创建平滑的颜色过渡效果，主要有线性渐变（linear-gradient）和径向渐变（radial-gradient）两种类型。线性渐变是指颜色沿着一条直线进行过渡，径向渐变是指颜色从一个中心点向外辐射过渡。

除了普通的线性渐变和径向渐变，CSS 还提供了重复渐变的功能，分别是 repeating-linear-gradient 和 repeating-radial-gradient。

#线性渐变基本语法：
<angle>：指定渐变的方向角度，默认值为 180deg（从上到下）。
to <side-or-corner>：指定渐变的起始方向，例如to right（从左到右）、to bottom right（从左上角到右下角）等。
<color-stop>：定义渐变的颜色和位置，由颜色值和可选的位置百分比组成。
linear-gradient([<angle> | to <side-or-corner>,]? <color-stop>[, <color-stop>]+);
#径向渐变基本语法：
<shape>：指定渐变的形状，可以是 circle（圆形）或 ellipse（椭圆形），默认值为 ellipse。
<size>：指定渐变的大小，可以是 closest-side、farthest-side、closest-corner、farthest-corner 等关键字。
at <position>：指定渐变的中心点位置，默认值为 center。
<color-stop>：定义渐变的颜色和位置，与线性渐变类似。
radial-gradient([<shape> || <size>]? [at <position>,]? <color-stop>[, <color-stop>]+);

1.4. 盒子模型

网页布局过程：

1. 先准备好相关的网页元素，网页元素基本上都是盒子 Box ；

2. 利用 CSS 设备好盒子样式，然后摆放到相应位置；

3. 往盒子中装内容；

网页布局的核心本质：就是利用 CSS 摆盒子。所谓盒子模型就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框（border）、外边距（margin）、内边距（padding）、和实际内容（content）。

1.4.1. 边框 border

border可以设置元素的边框。边框由三部分组成：边框宽度(粗细)、边框样式、边框颜色。

基础语法：
#border-width:定义边框粗细，单位是px
#border-style:边框的样式
#border-color：边框的颜色
border : border-width || border-style || border-color
例如：
#边框简写：border: 1px solid red; 没有顺序
#边框分开写法：border-top: 1px solid red; /* 只设定上边框， 其余同理 */
#单独写: border-width: 5px;
        border-style: solid;
        border-color: pink;

边框会额外增加盒子的实际大小。因此我们有两种解决方式：

测量盒子大小的时候，不量边框；
如果测量的时候包含了边框,则需要 width/height 减去边框宽度；

1.4.2. 边距

padding 属性用于设置内边距，即边框与内容之间的距离。margin 属性用于设置外边距，即控制盒子和盒子之间的距离。margin 简写方式代表的意义跟 padding 完全一致。网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

1.4.3. 盒子阴影

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。

语法：
box-shadow: h-shadow v-shadow blur spread color inset;
例如：
 box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);

注意：

默认的是外阴影(outset)，但是不可以写这个单词,否则造成阴影无效。
盒子阴影不占用空间，不会影响其他盒子排列。

1.5. 浮动

CSS 提供了三种传统布局方式（简单说,就是盒子如何进行排列顺序）：普通流（标准流）、浮动、定位。

标准流：就是标签按照规定好默认方式排列，标准流是最基本的布局方式。

浮动：可以让多个块级元素一行内排列显示。float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

为了约束浮动元素位置，我们网页布局一般采取的策略是：先用标准流的父元素排列上下位置,，之后内部子元素采取浮动排列左右位置。符合网页布局第一准则。

1.5.1. display

display属性用于设置一个元素应如何显示

1、block：块元素

2、 inline：行内元素

3、inline-block：是块元素，但是可以内联，在一行

4、none：消失

#display: none ；隐藏对象
#display：block ；除了转换为块级元素之外，同时还有显示元素的意思
#display 隐藏元素后，不再占有原来的位置。

1.5.2. float

语法：
选择器 { float: 属性值; }
浮动特性：
#浮动元素会脱离标准流(脱标)。
#浮动的元素会一行内显示并且元素顶部对齐。
#浮动的元素会具有行内块元素的特性

1.5.3. overflow

可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。

1.6. 定位

定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

1.6.1. 相对定位

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。相对于原来的位置，进行指定的偏移，设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

css语法：
选择器 { position: relative; }
相对定位的特点：
1. 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。

1.6.2. 绝对定位

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的，而不是相对于视口定位，如fixed，然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

语法：
选择器 { position: absolute; }
绝对定位的特点：
1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。
2. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3. 绝对定位不再占有原先的位置。（脱标）
所以绝对定位是脱离标准流的。

1.6.3. 固定定位

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

语法：
选择器 { position: fixed; }
固定定位的特点：（务必记住）
1. 以浏览器的可视窗口为参照点移动元素。跟父元素没有任何关系，不随滚动条滚动。
2. 固定定位不在占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

1.6.4. z-index定位

定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。如果两个定位的元素重叠而未z-index指定，则位于 HTML 代码中最后的元素将显示在顶部。默认是0，最高无限~999，在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)。

语法：
选择器 { z-index: 1; }
1.数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上
2. 如果属性值相同，则按照书写顺序，后来居上
3. 数字后面不能加单位
4. 只有定位的盒子才有 z-index 属性

1.7. 学习资源

在线教程：

MDN Web Docs：提供了全面而详细的 CSS 文档和教程，是学习 CSS 的权威资源。网址：https://developer.mozilla.org/zh-CN/docs/Web/CSS

W3Schools：提供了丰富的 CSS 教程和实例，适合初学者快速入门。网址：https://www.w3schools.com/css/