分类 css 下的文章

2024-08-13

在CSS中，设置换行的方法主要有以下几种：

white-space 属性：控制元素内的空白字符的处理方式。
- normal：默认值。空白会被浏览器忽略。
- nowrap：文本不会换行，直到遇到 <br> 标签为止。
- pre：空白符会被保留。
- pre-wrap：空白符会被保留，文本会在容器的末尾自动换行。
- pre-line：空白符会被合并，文本会在容器的末尾自动换行。
word-wrap / overflow-wrap 属性：允许长单词或URL地址被打断换行。
- normal：只在允许的断字点换行（如空格）。
- break-word：在长单词或URL地址内部进行换行。
word-break 属性：指定如何在单词内换行。
- normal：使用默认的换行规则。
- break-all：允许在单词内换行。
- keep-all：CJK（中文/日文/韩文）文字中不允许换行。

实例代码：




/* 设置文本不换行 */
p.no-wrap {
  white-space: nowrap;
}
 
/* 允许在长单词内换行 */
p.break-word {
  word-wrap: break-word;
}
 
/* 合并空白符并自动换行 */
p.wrap-line {
  white-space: pre-line;
}

在HTML中使用：




<p class="no-wrap">这段文本不会换行，即使超出容器宽度。</p>
<p class="break-word">这是一个非常非常长的单词wordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordword

- 阅读更多 -

如何使用CSS创建易于打印的页面

System

2024-08-13

所有,css

为了创建易于打印的网页，可以使用以下CSS技巧：

移除不需要的元素：




@media print {
  body {
    display: none;
  }
  .print-section {
    display: block !important; /* 重写显示为打印所需的部分 */
  }
}

调整布局和颜色：




@media print {
  body * {
    visibility: hidden; /* 隐藏所有不需要打印的元素 */
  }
  .print-section, .print-section * {
    visibility: visible !important; /* 重写可见性以打印所需的部分 */
  }
  .no-print {
    display: none !important; /* 隐藏不需要打印的部分 */
  }
}

移除超链接和颜色：




@media print {
  a, a:visited {
    text-decoration: none;
    color: black; /* 打印时，超链接显示为正常文本颜色 */
  }
}

调整页面布局和边距：




@media print {
  body {
    margin: 0;
    padding: 0;
  }
}

调整字体大小和颜色：




@media print {
  body {
    color: black;
    background: white;
    font-size: 10pt; /* 调整字体大小以便在打印时更易阅读 */
  }
}

使用这些CSS规则，可以确保网页在打印时更加整洁、专业，从而提高用户的打印体验。

- 阅读更多 -

CSS打印设置页眉页脚

System

2024-08-13

所有,css

在CSS中，可以使用@page规则和:first、:left、:right伪类来设置打印文档的页眉和页脚。以下是一个简单的例子：




@media print {
  @page {
    margin: 100pt;
  }
 
  @page :first {
    @top-left {
      content: "页眉 - 左侧";
    }
    @top-right {
      content: "页眉 - 右侧";
    }
  }
 
  @page :left {
    @bottom-left {
      content: "页脚 - 左侧";
    }
  }
 
  @page :right {
    @bottom-right {
      content: "页脚 - 右侧";
    }
  }
}

在这个例子中，:first用于定义第一页的页眉内容，:left用于定义所有左侧页的页脚内容，:right用于定义所有右侧页的页脚内容。@top-left和@top-right用于在页面的顶部左侧和右侧添加页眉内容，@bottom-left和@bottom-right用于在页面底部左侧和右侧添加页脚内容。

请注意，@page规则中的margin属性是为了给页眉和页脚留出空间，避免内容被遮挡。

在HTML文档中使用时，确保你的页面内容在不同的页面上分布正确，以便:first、:left和:right可以按预期工作。

- 阅读更多 -

html+css基础教程入门篇之CSS 浮动行框和清理

System

2024-08-13

所有,css

在HTML和CSS中，浮动（float）是一种常用的布局方式，可以让行框沿着其父元素的左侧或右侧排列。然而，当父元素的高度不足以包含所有浮动的子元素时，会出现“高度塌陷”的问题。为了解决这个问题，我们需要清理浮动。

以下是一个简单的HTML和CSS示例，演示了浮动行框和清理的基本用法：




<!DOCTYPE html>
<html>
<head>
<style>
.container {
  border: 2px solid #000;
  padding: 10px;
}
 
.float-left {
  float: left;
  margin: 5px;
  padding: 10px;
  border: 1px solid #000;
}
 
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>
 
<div class="container clearfix">
  <div class="float-left">浮动左侧</div>
  <div class="float-left">浮动左侧</div>
  <!-- 更多浮动的子元素 -->
</div>
 
</body>
</html>

在这个例子中，.container 是一个带有边框的父容器，.float-left 是浮动左侧的子元素。为了清理浮动，我们添加了一个 clearfix 类，它使用 ::after 伪元素创建一个块级元素，并应用 clear: both 属性来清理所有浮动。这确保了父元素 .container 能够包含所有浮动的子元素，从而避免了高度塌陷的问题。

- 阅读更多 -

CSS文本溢出显示省略号

System

2024-08-13

所有,css

在CSS中，可以使用text-overflow属性来实现文本溢出显示省略号。通常与white-space和overflow属性一起使用。

以下是实现文本溢出显示省略号的CSS样式：




.ellipsis {
  white-space: nowrap;      /* 确保文本在一行内显示 */
  overflow: hidden;         /* 隐藏溢出的内容 */
  text-overflow: ellipsis;  /* 使用省略号表示文本溢出 */
}

然后在HTML中，将这个类应用到需要显示省略号的元素上：




<div class="ellipsis">这是一段很长的文本，需要在溢出时显示省略号...</div>

这样就会在文本超出容器宽度时，文本末尾显示省略号。

- 阅读更多 -

CSS+Canvas绘制最美星空(一闪一闪亮晶晶效果+流星划过)

System

2024-08-13

所有,css




<!DOCTYPE html>
<html>
<head>
    <title>最美星空</title>
    <style>
        canvas {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <canvas id="space"></canvas>
    <script>
        const canvas = document.getElementById('space');
        const ctx = canvas.getContext('2d');
        const WIDTH = canvas.width = window.innerWidth;
        const HEIGHT = canvas.height = window.innerHeight;
        const halfWidth = WIDTH / 2;
        const halfHeight = HEIGHT / 2;
        const stars = [];
        const starCount = 2000;
 
        function random(min, max) {
            if (arguments.length < 2) {
                max = min;
                min = 0;
            }
            return min + (max - min) * Math.random();
        }
 
        function randomColor() {
            return 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) + ')';
        }
 
        function Star(x, y) {
            this.x = x;
            this.y = y;
            this.radius = random(0.5, 2);
            this.speed = random(1, 2);
            this.angle = random(0, 360);
            this.color = randomColor();
        }
 
        Star.prototype.update = function() {
            this.angle += this.speed;
        };
 
        Star.prototype.draw = function() {
            ctx.save();
            ctx.beginPath();
            ctx.translate(this.x, this.y);
            ctx.rotate(this.angle * Math.PI / 180);
            ctx.fillStyle = this.color;
            ctx.arc(0, 0, this.radius, 0, 2 * Math.PI);
            ctx.fill();
            ctx.restore();
        };
 
        function createStars() {
            for (let i = 0; i < starCount; i++) {
                stars.push(new Star(random(WIDTH), random(HEIGHT)));
            }
        }
 
        function animate() {
            ctx.globalCompositeOperation = 'source-over';
            ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
            ctx.fillRect(0, 0, WIDTH, HEIGHT);
            ctx.globalCompositeOperation = 'lighter';
 
            stars.forEach((star) => {
                star.update();
                star.draw();
            });
 
            window.requestAnimationFrame(animate);
        }

- 阅读更多 -

如何使用 CSS object-fit 进行图片的缩放和裁剪

System

2024-08-13

所有,css

object-fit 属性用于指定可替换元素（例如 <img> 或 <video>）的内容应该如何适应容器的高度和宽度。

以下是 object-fit 的几个常用值：

fill：默认值。图片会被拉伸或压缩以填满容器。
contain：图片会保持其原始比例进行缩放，确保图片全部显示在容器内。
cover：图片会保持其原始比例进行缩放，确保容器被完全覆盖。
none：图片会以其原始大小显示，可能会超出容器的边界。
scale-down：类似于 none 或 contain，取决于两者之间哪一个会导致较小的图片。

CSS 示例代码：




/* 使图片填充整个容器，可能会变形 */
.img-fill {
  width: 100px;
  height: 100px;
  object-fit: fill;
}
 
/* 使图片缩放以保持容器内显示完整，不裁剪 */
.img-contain {
  width: 100px;
  height: 100px;
  object-fit: contain;
}
 
/* 使图片缩放以覆盖整个容器，可能会裁剪 */
.img-cover {
  width: 100px;
  height: 100px;
  object-fit: cover;
}
 
/* 使图片按其原始大小显示，不进行缩放 */
.img-none {
  width: 100px;
  height: 100px;
  object-fit: none;
}
 
/* 使图片缩放到不大于容器尺寸，取决于图片原始比例 */
.img-scale-down {
  width: 100px;
  height: 100px;
  object-fit: scale-down;
}

HTML 示例代码：




<img src="image.jpg" class="img-fill" alt="Fill">
<img src="image.jpg" class="img-contain" alt="Contain">
<img src="image.jpg" class="img-cover" alt="Cover">
<img src="image.jpg" class="img-none" alt="None">
<img src="image.jpg" class="img-scale-down" alt="Scale-down">

在这个例子中，所有的 <img> 标签都会被设置为 100px 宽和 100px 高，但是它们会根据 object-fit 的不同值应用不同的裁剪和缩放方法。

- 阅读更多 -

CSS上下悬浮特效

System

2024-08-13

所有,css

CSS实现元素的上下悬浮特效可以使用@keyframes规则来创建动画，并使用animation属性应用到相应的元素上。以下是一个简单的例子，展示了如何使用CSS创建一个简单的上下悬浮特效：




@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
 
.float-element {
  animation: floatUpDown 5s infinite;
}

在这个例子中，.float-element 是要应用悬浮特效的元素的类。@keyframes 规则定义了一个名为 floatUpDown 的动画，该动画在50%的时间点将元素向上移动10像素，然后在0%和100%的时间点元素回到原始位置。动画的持续时间是5秒，并且设置为无限次数循环（infinite）。

将这个类应用到HTML元素上：




<div class="float-element">我将上下悬浮</div>

这段代码会使得这个div元素不停地上下摆动。可以通过调整@keyframes中的百分比和translateY的值来改变悬浮的强度和频率。

- 阅读更多 -

Tailwind CSS快速入门

System

2024-08-13

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS 快速入门</title>
    <!-- 引入Tailwind CSS -->
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-4xl text-blue-700 font-semibold">欢迎来到Tailwind CSS的世界</h1>
    <p class="text-gray-500">这是一个使用Tailwind CSS的简单示例。</p>
    <!-- 添加Tailwind CSS的CDN -->
    <script src="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.js"></script>
</body>
</html>

这段代码展示了如何在HTML文件中引入Tailwind CSS并使用其样式类来增强HTML元素的展示效果。text-4xl 和 text-blue-700 类分别设置了字体大小和颜色，而 text-gray-500 类设置了字体颜色。这些样式类都是Tailwind CSS预定义的实用工具类，可以快速应用于HTML元素。

System

2024-08-13

所有,css

要实现不改变HTML结构的前提下，为输入框添加自定义的星号标识并在输入框聚焦时修改父元素的样式，可以使用CSS属性选择器和相邻兄弟选择器。以下是实现这一功能的CSS代码示例：




/* 当输入框的前一个兄弟元素是带有特定类的星号时，并且当前输入框处于聚焦状态时，修改其父元素的样式 */
.input-container > input:focus + .required-marker:before,
.input-container > input:valid + .required-marker:before {
  /* 这里添加你希望在聚焦时应用的样式 */
  color: red; /* 仅作为样式示例 */
}
 
/* 星号标记的样式 */
.required-marker:before {
  content: "*";
  color: grey; /* 默认颜色 */
  margin-left: 4px; /* 示例间隔 */
}

HTML结构示例：




<div class="input-container">
  <input type="text" required>
  <span class="required-marker"></span> <!-- 星号标识 -->
</div>

在这个例子中，.input-container 是父元素，其内包含一个输入框和一个带有 .required-marker 类的span元素，用于显示星号。当输入框聚焦或者输入内容合法时，通过CSS伪元素 ::before 添加的星号会改变颜色，表示其所属的输入框为必填项。这个例子不改变HTML结构，并且可以通过CSS实现视觉效果，不需要额外的JavaScript代码。

- 阅读更多 -