CSS3和CSS的区别

简介

Cascading Style Sheets（层叠样式表），简称CSS，是一种用于描述网页上的元素如何展示的语言。通过CSS，可以改变网页的文字、布局、颜色和其他方面的样式。CSS3是CSS的升级版，引入了许多新的特性和功能。

基本语法

CSS和CSS3的语法基本相同，都由选择器和属性值组成。选择器用于选择要设置样式的元素，属性值则定义了元素的样式。

CSS的基本语法如下：

选择器 {
    属性1: 值1;
    属性2: 值2;
    ...
}

CSS3也使用相同的语法，只是在属性值部分引入了新的特性。

主要区别

新增的选择器

CSS3引入了许多新的选择器，使得选择元素的方式更加灵活。

常用的CSS3选择器包括：

属性选择器（Attribute Selectors）：根据元素的属性选择元素。
伪类选择器（Pseudo-classes）：根据元素的特殊状态选择元素。
伪元素选择器（Pseudo-elements）：选取元素的特定部分。

示例代码：

/* 属性选择器 */
a[href^="https"] { 
    color: blue; 
}

/* 伪类选择器 */
a:hover {
    color: red;
}

/* 伪元素选择器 */
p::first-line {
    font-weight: bold;
}

背景和边框

CSS3引入了更多用于设置背景和边框样式的属性。

常用的CSS3背景和边框属性包括：

background-size：设置背景图片的大小。
border-radius：设置边框的圆角。
box-shadow：添加元素的阴影效果。

示例代码：

/* 设置背景图片的大小 */
div {
    background-image: url("example.jpg");
    background-size: cover;
}

/* 设置边框的圆角 */
button {
    border-radius: 5px;
}

/* 添加元素的阴影效果 */
p {
    box-shadow: 2px 2px 5px grey;
}

文字效果与布局

CSS3引入了一些新的属性，用于实现更丰富的文字效果和布局。

常用的CSS3文字效果和布局属性包括：

text-shadow：设置文本的阴影效果。
word-wrap：控制长单词或URL的换行方式。
flexbox：实现弹性盒模型布局。

示例代码：

/* 设置文本的阴影效果 */
h1 {
    text-shadow: 2px 2px 2px grey;
}

/* 控制长单词或URL的换行方式 */
p {
    word-wrap: break-word;
}

/* 弹性盒模型布局 */
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

动画与过渡

CSS3引入了新的动画和过渡属性，使得网页更加生动和交互。

常用的CSS3动画和过渡属性包括：

animation：创建动画效果。
transition：实现元素状态之间的平滑过渡。

示例代码：

/* 创建动画效果 */
@keyframes example {
    0% {background-color: red;}
    50% {background-color: yellow;}
    100% {background-color: blue;}
}

div {
    animation: example 5s infinite;
}

/* 实现元素状态之间的平滑过渡 */
button {
    transition: background-color 1s;
}

button:hover {
    background-color: blue;
}