📌  相关文章
📜  线性渐变和 url css (1)

📅  最后修改于: 2023-12-03 14:56:50.344000             🧑  作者: Mango

线性渐变和 url css

线性渐变

线性渐变是 CSS3 中的一种背景图像类型，它可以创建水平、垂直或对角线方向的渐变效果。线性渐变可以由多个颜色值组成，每个颜色值对应渐变的一个关键帧，中间的颜色会按照比例逐渐变化。

语法
linear-gradient(direction, color-stop1, color-stop2, ...);
  • direction：渐变方向，可以是角度值（如deg、rad等）、关键字（如to top、to right等）或直接指定两个坐标值。
  • color-stop：颜色关键帧，可以指定颜色值和渐变位置。
示例
/* 从上往下 */
background: linear-gradient(to bottom, #f00, #00f);

/* 从左上往右下 */
background: linear-gradient(45deg, #f00, #00f);

/* 多种颜色渐变 */
background: linear-gradient(#f00, #ff0 25%, #0f0 50%, #0ff 75%, #00f);
预览

URL CSS

URL CSS 是由 W3C 推出的一种创建 Web 页面时重复利用样式表的方法。它类似于组件化开发中的复用组件，可以将样式表分离成一些独立的部分，每个部分打包成一个 CSS 文件，然后通过 URL 链接到 Web 页面中。Web 页面只需引用需要的 CSS 文件，就能以最小的代价获得所需的样式。这种方法可以减少代码冗余、提高代码复用率，同时也可以提高开发效率。

语法
<link rel="stylesheet" type="text/css" href="URL">
  • rel：指定关系，这里为 stylesheet。
  • type：指定文件类型，这里为 text/css。
  • href：指定文件链接，可以是相对路径或绝对路径。
示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>URL CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>
预览
  • index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>URL CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>
  • style.css
h1 {
    color: red;
}

参考资料