常用CSS样式

名称：color

作用：该属性用于设置文本的颜色，可以使用各种颜色值来指定颜色，如预定义颜色名称、十六进制颜色值、RGB 颜色值、HSL 颜色值等。它可以应用于所有文本元素，包括段落、标题、链接等。通常情况下，该属性的值应与背景色形成对比，以确保文本易于阅读。例如，浅色文本应该在深色背景上使用，深色文本应该在浅色背景上使用。

示例：

这是一个文字red颜色示例

代码：

<div style="color: red;">这是一个文字red颜色示例</div>

名称：font-size

作用：该属性用于设置文本字体的大小。可以使用像素、百分比、em 等单位来指定字体大小。如果没有指定单位，则默认为像素。该属性可以应用于任何元素，但通常应用于文本元素，如段落、标题、按钮等。通常情况下，字体大小应根据设计要求来确定，以确保网站或应用程序具有良好的可读性和可用性。

示例：

我是一个正常字体

我是一个36px的字体

代码：

<div >我是一个正常字体</div>
<br>
<div style="font-size: 36px;">我是一个36px的字体</div>

名称：text-align

作用：该属性用于设置文本内容在容器内的水平对齐方式。可以将其应用于块级元素和表格元素，其属性值包括：

• left：文本内容向左对齐。
• center：文本内容居中对齐。
• right：文本内容向右对齐。
• justify：文本内容两端对齐，且每行的最后一个单词会自动调整间距以填充整行。

该属性通常应用于文本元素，如段落、标题、列表等，以及一些包含文本内容的容器元素，如 div 元素。使用该属性可以控制文本内容的排版效果，提高可读性和美观度。例如，可以将标题居中对齐，以吸引用户的注意力；也可以将段落左对齐或右对齐，以改善阅读体验。

示例：

这是一个文字left示例

这是一个文字center示例

这是一个文字right示例

这是一个文字justify示例

代码：

<div style="text-align: left;">这是一个文字left示例</div>
<div style="text-align: center;">这是一个文字center示例</div>
<div style="text-align: right;">这是一个文字right示例</div>
<div style="text-align: justify;">这是一个文字justify示例</div>

名称：text-shadow

作用：该属性用于为文本内容添加阴影效果，可以创建三维视觉效果，使文本内容更加生动和醒目。该属性的属性值由三个长度和一个可选的颜色值组成，分别表示阴影的水平偏移量、垂直偏移量、模糊半径和阴影颜色。例如：

text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);

这将创建一个水平和垂直偏移量均为 2 像素、模糊半径为 2 像素、颜色为半透明黑色的阴影效果。该属性可以应用于任何文本元素，如段落、标题、链接等，以及其他元素，如按钮、图标等。使用该属性可以改善文本内容的可读性和可视性，提高用户体验和网站的视觉效果。

示例：

这是一个字体阴影示例

代码：

<div style="text-shadow: 5px 5px 5px #ff0000;">这是一个字体阴影示例</div>

名称：font-weight

作用：该属性用于设置文本字体的粗细程度，可以将其应用于任何元素。属性值包括数字和关键字，数字表示字体的粗细程度，取值范围为 100 到 900，关键字包括：

• normal：字体正常。
• bold：字体加粗。
• bolder：比当前字体更粗的字体。
• lighter：比当前字体更细的字体。

该属性通常应用于文本元素，如段落、标题、按钮等，以及其他元素，如图标、装饰符号等。使用该属性可以改变文本字体的外观，增强其视觉效果和可读性。例如，可以将标题加粗以突出其重要性，或者将正文文本变得更细以节省空间和提高排版效果。

示例：

我是normal字体

我是bold字体

我是bolder字体

我是lighter字体

代码：

<div style="font-weight: norma;">我是normal字体</div>
<div style="font-weight: bold;">我是bold字体</div>
<div style="font-weight: bolder;">我是bolder字体</div>
<div style="font-weight: lighter;">我是lighter字体</div>

名称：font-style

作用：该属性用于设置文本字体的风格，可以将其应用于任何元素。属性值包括：

• normal：字体样式正常。
• italic：字体倾斜，模拟手写字体。
• oblique：字体倾斜，与 italic 类似，但是不同字体的效果可能有所不同。

该属性通常应用于文本元素，如段落、标题、链接等，以及其他元素，如图标、装饰符号等。使用该属性可以改变文本字体的外观，增强其视觉效果和可读性。例如，可以将标题倾斜以突出其与其他文本内容的不同，或者将正文文本变成 italic 或 oblique 的风格以凸显其艺术感和独特性。

示例：

我是normal

我是italic

我是oblique

代码：

<div style="font-style: normal;">我是normal</div>
<div style="font-style: italic;">我是italic</div>
<div style="font-style: oblique;">我是oblique</div>

名称：line-height

作用：该属性用于设置文本行高，即行与行之间的垂直间距。该属性可以用百分比、长度值、无单位数值或者数值和长度值的组合进行设置。如果设置的是百分比，则相对于当前文本字体的大小计算行高。如果设置的是长度值，则直接使用该值作为行高。如果设置的是无单位数值，则该值将乘以当前文本字体的大小作为行高。如果设置的是数值和长度值的组合，则将数值和长度值相乘并相加得到最终的行高值。例如：

line-height: 1.5;line-height: 150%;line-height: 24px;line-height: 1.5em;

该属性通常应用于文本元素，如段落、标题、链接等，以及其他元素，如按钮、表单控件等。使用该属性可以改变文本行高，增强其可读性和排版效果。例如，可以将段落行高设置为 1.5，以提高可读性和视觉效果，或者将按钮行高设置为较大的值，以使其更加显眼和易于点击。

示例：

代码：

名称：text-decoration

作用：该属性用于设置文本的装饰效果，例如下划线、删除线、上划线等，也可以用于去除a标签的下划线，属性值包括：

• none：无装饰效果。
• underline：添加下划线。
• overline：添加上划线。
• line-through：添加删除线。
• underline overline：同时添加下划线和上划线。
• underline line-through：同时添加下划线和删除线。
• overline line-through：同时添加上划线和删除线。
• underline overline line-through：同时添加下划线、上划线和删除线。

该属性通常应用于文本元素，如段落、标题、链接等，以及其他元素，如按钮、表单控件等。使用该属性可以改变文本的装饰效果，增强其视觉效果和可读性。例如，可以将链接下划线去掉以使其更加美观，或者将标题添加上划线以凸显其重要性。

示例：

我是none效果

我是underline效果

我是overline效果

我是line-through效果

我是underline overline效果

我是underline line-through效果

我是overline line-through效果

我是underline overline line-through效果

代码：

<div style="text-decoration: none;">我是none效果</div><br>
<div style="text-decoration: underline;">我是underline效果</div><br>
<div style="text-decoration: overline;">我是overline效果</div><br>
<div style="text-decoration: line-through;">我是line-through效果</div><br>
<div style="text-decoration: underline overline;">我是underline overline效果</div><br>
<div style="text-decoration: underline line-through;">我是underline line-through效果</div><br>
<div style="text-decoration: overline line-through;">我是overline line-through效果</div><br>
<div style="text-decoration: underline overline line-through;">我是underline overline line-through效果</div>

名称：user-select

作用：该属性用于控制用户是否可以选择（或高亮）文本内容，以及如何选择（或高亮）文本内容。其属性值包括：

• none：用户无法选择（或高亮）文本内容。
• text：用户可以选择（或高亮）文本内容，但不能修改它。
• all：用户可以选择（或高亮）并修改文本内容。
• auto：用户可以选择（或高亮）文本内容，且具体行为取决于浏览器的默认行为。

该属性可以应用于任何元素，但通常应用于文本元素，如段落、标题、文本框等。使用该属性可以改善用户体验，提高网站的可用性。例如，可以将其设置为 none，以防止用户复制或粘贴重要的文本信息。

示例：

我是none是不可选中的哈哈

代码：

<div style="user-select: none;">我是none是不可选中的哈哈</div>

名称：opacity

作用：该属性用于设置元素的不透明度，可以改变元素的可见程度。opacity属性的取值范围为0到1之间，0表示完全透明，1表示完全不透明。该属性不会影响元素的尺寸或布局，只影响元素的可见程度。

例如，可以将一个元素的不透明度设置为0.5，使其半透明，这样既可以使元素更加美观，也可以增加其可读性。opacity属性通常与RGBA颜色值一起使用，用于控制元素的透明度，实现视觉效果。可以在按钮、链接、图片、文字等元素上使用opacity属性。

需要注意的是，opacity属性会影响元素的所有子元素，如果希望子元素不受opacity属性影响，可以将opacity属性设置为子元素的透明度的倒数，例如：如果一个元素的opacity属性设置为0.5，则其子元素的opacity属性应该设置为2。

示例：

代码：

<img class="box-img" style="width: 100px;height: 100px;"src="http://qn.uurr.cn/img/2023/10/08/83b694252f015.jpg" >
<img class="box-img" style="opacity:0.5; width: 100px;height: 100px;"src="http://qn.uurr.cn/img/2023/10/08/83b694252f015.jpg" >

名称：@keyframes

作用：@keyframes是一个CSS规则，用于定义一个动画序列，即元素的不同状态，并且在动画中控制元素的状态变化。@keyframes规则需要结合animation属性使用，animation属性指定动画名称和执行时间，而@keyframes规则则指定动画序列，即元素在不同时间点的状态。

@keyframes规则由@keyframes关键字、动画名称和一系列关键帧组成。关键帧由百分比或关键字（如from和to）和元素的样式组成，表示元素在动画的某个时间点的状态。例如：

cssCopy code@keyframes my-animation {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

上面的示例定义了一个名为my-animation的动画，由三个关键帧组成，分别表示元素在动画开始、中间和结束时的不同状态。在动画开始时，元素的不透明度为0（即完全透明），在动画中间时，元素的不透明度为0.5，最终在动画结束时，元素的不透明度为1（即完全不透明）。

需要注意的是，@keyframes规则中的样式属性是相对于元素本身的，而不是相对于文档的。因此，在使用@keyframes规则时，需要注意元素的尺寸和位置，以及其它与元素状态相关的样式属性。

示例：

代码：

名称：animation

作用：该属性用于创建动画效果，可以通过设置一系列关键帧，来控制元素从一个状态过渡到另一个状态的过程，实现动态效果。animation属性需要与@keyframes规则配合使用，@keyframes规则用于指定动画的关键帧，即元素的不同状态，并且在动画中控制元素的状态变化。

animation属性包括多个子属性，其中比较重要的属性如下：

• animation-name：指定动画的名称，需要与@keyframes规则中定义的名称相同。
• animation-duration：指定动画的持续时间，可以使用秒或毫秒作为单位。
• animation-delay：指定动画的延迟时间，在元素被显示之后多少秒或毫秒开始执行动画效果。
• animation-iteration-count：指定动画的循环次数，可以使用数字或关键字infinite。
• animation-direction：指定动画的播放方向，可以是normal（正向播放）或reverse（反向播放）。
• animation-timing-function：指定动画的时间函数，控制动画过程中的速度变化。
• animation-fill-mode：指定动画播放前后的状态，可以是none（元素初始状态）、forwards（动画结束后保持最后一帧状态）或backwards（动画开始前先显示第一帧状态）。

animation属性可以应用于所有元素，如div、p、ul等。通过使用animation属性，可以实现各种动画效果，如旋转、淡入淡出、移动等，从而使页面更加生动有趣。

示例：

代码：

<!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>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .app {
            background-color: antiquewhite;
            width: 300px;
            height: 300px;
            margin: 200px auto;
            position: relative;
        }

        .box1 {
            width: 150px;
            height: 75px;
            background-color: aliceblue;
            border-radius: 100px 100px 0px 0px;
            /* 调用box1move动画 */
            animation: box1move linear 1s infinite;
            transform-origin: center bottom;
        }

        .box2 {
            width: 150px;
            height: 75px;
            background-color: aliceblue;
            border-radius: 0px 0px 100px 100px;
            /* 调用box2move动画 时间1秒 */
            animation: box2move linear 1s infinite;
            transform-origin: center top;
        }

        .box3 {
            background-color: rgb(255, 255, 255);
            border-radius: 50%;
            width: 30px;
            height: 30px;
            left: 220px;
            top: 60px;
            /* 绝对定位 */
            position: absolute;
            animation: box3move linear 1s infinite;
        }

        .box4 {
            background-color: rgb(255, 255, 255);
            border-radius: 50%;
            width: 30px;
            height: 30px;
            left: 220px;
            top: 60px;
            /* 绝对定位 */
            position: absolute;
            animation: box3move linear 1s infinite 0.5s;
        }

        @keyframes box1move {
            0% {
                transform: rotate(0deg);
            }

            50% {
                transform: rotate(-30deg);
            }

            100% {
                transform: rotate(0deg);
            }
        }

        @keyframes box2move {
            0% {
                transform: rotate(0deg);
            }

            50% {
                transform: rotate(30deg);
            }

            100% {
                transform: rotate(0deg);
            }
        }

        @keyframes box3move {
            0% {
                left: 230px;
                opacity: 100%;
            }

            50% {
                left: 175px;
                opacity: 50%;
            }

            100% {
                left: 86px;
                opacity: 10%;
            }
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
</body>

</html>

名称：transition

作用：transition是CSS中的一个属性，用于控制元素在状态改变时的过渡效果，即元素在由一种状态转换为另一种状态时的平滑过渡。通过transition属性，可以指定元素状态的变化以及变化的过渡效果。

transition属性的语法如下：

transition: [property] [duration] [timing-function] [delay];

其中，各个参数的含义如下：

• property：表示过渡的CSS属性名称，可以是一个或多个，用逗号分隔。当元素的这些属性发生变化时，会触发过渡效果。
• duration：表示过渡的持续时间，可以是一个具体的时间值（如1s、500ms），也可以是多个时间值，用逗号分隔。多个时间值表示多个属性的持续时间，如果时间值个数少于属性个数，则最后一个时间值会被复制到其它属性上。
• timing-function：表示过渡的时间函数，用于指定元素在过渡过程中的变化速度，可以是预设的函数名称（如ease、linear、ease-in-out等），也可以是自定义的贝塞尔曲线函数。
• delay：表示过渡的延迟时间，即从元素状态变化开始到过渡效果开始的时间间隔，可以是一个具体的时间值或多个时间值，用逗号分隔。

例如，下面的CSS代码定义了一个元素在鼠标悬停时背景颜色的渐变过渡效果：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 1s linear;
}
.box:hover {
  background-color: blue;
}

上面的代码中，当鼠标悬停在.box元素上时，背景颜色会在1秒内从红色渐变到蓝色。在这个过程中，变化速度是线性的，没有延迟。如果想要添加延迟或自定义时间函数，可以修改transition属性的参数值。

示例：

代码：

.box11 {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 1s linear;
}
.box11:hover {
  background-color: blue;
}
<div class="box11"></div>

名称：transform

作用：transform是CSS3中的一个属性，用于对元素进行变换（transformations），包括旋转（rotate）、缩放（scale）、平移（translate）、倾斜（skew）等。通过transform属性，可以实现对元素的各种形态变换效果，从而增强页面的动态性和可交互性。

transform属性的语法如下：

vbnetCopy codetransform: [transform-function] [transform-function] ...;

其中，transform-function表示具体的变换函数，可以是一个或多个，用空格分隔。常用的变换函数包括：

• rotate(angle)：将元素按照指定的角度旋转，正值表示顺时针方向旋转，负值表示逆时针方向旋转。
• scale(x, y)：将元素在水平方向和垂直方向分别按照指定的比例进行缩放。
• translate(x, y)：将元素在水平方向和垂直方向分别按照指定的距离进行平移。
• skew(x-angle, y-angle)：将元素在水平方向和垂直方向分别按照指定的角度进行倾斜。

例如，下面的CSS代码定义了一个元素在鼠标悬停时进行旋转和缩放的变换效果：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 1s linear;
}
.box:hover {
  transform: rotate(180deg) scale(1.5);
}

上面的代码中，当鼠标悬停在.box元素上时，元素会先按照180度的角度进行旋转，再按照1.5倍的比例进行缩放。在这个过程中，使用了transition属性实现了平滑过渡效果。

示例：

代码：

<style>
.box2 {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 1s linear;
}
.box2:hover {
  transform: rotate(180deg) scale(1.5);
}

</style>
<div class="box2"></div>