[47章全]前端必学 40个精选案例实战一课吃透HTML5+CSS3+JS-摩杜云开发者社区

【2023最新】前端必学 40个精选案例实战一课吃透HTML5+CSS3+JS教程下载

CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂

1-1、基本概念

层叠样式表(Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力

1-2、发展历程

CSS1.0：网页基本样式

CSS2.0：DIV（块）+ CSS，提出HTML与CSS结构分离的思想，网页变得简单，利于SEO

CSS2.1：浮动，定位

CSS3.0：圆角，阴影，动画…浏览器兼容性

CSS全称为层叠样式表，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

CSS代码语法

css 样式由选择器和声明组成，而声明又由属性和值组成

选择器{属性:值}

例如：p{color:red;}

选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段<p>的文字将变成蓝色，而其他的元素不会受到影响。

声明：在{ }中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔。

CSS代码插入

从CSS 样式代码插入的形式来看可以分为内联式、嵌入式和外部式三种。

内联式

就是把css代码直接写在现有的HTML标签中，如下面代码：

<p style="color:red">这里文字是红色。</p>

嵌入式

就是把css样式代码写在<style>...</style>标签之间。

外部式

外部式css样式就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内使用<link>标签将css样式文件链接到HTML文件内，如下面代码：