1. 首页
  2. 分类
  3. css
初步体验CSS
System
2024-08-07
所有,css

CSS (Cascading Style Sheets) 是用于描述网页样式的语言。以下是一个简单的HTML和CSS代码示例，它展示了如何将CSS应用于HTML元素：




<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}
p {
  color: red;
  margin-left: 20px;
}
</style>
</head>
<body>
 
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
 
</body>
</html>

在这个例子中，我们定义了三个样式规则：

  1. body：设置了整个页面的背景颜色为浅蓝色。
  2. h1：设置了标题的颜色和左边距。
  3. p：设置了段落的颜色和左边距。

这个简单的示例展示了如何将CSS直接嵌入HTML文件中。在实际的网页开发中，CSS可以放在外部文件中，然后通过<link>标签引入HTML文件中。

- 阅读更多 -
css 多行文本溢出隐藏，并且在最后面有查看更多的按钮
System
2024-08-07
所有,css

要实现多行文本溢出隐藏并在最后显示查看更多的按钮，可以使用CSS的-webkit-line-clamp属性结合display: -webkit-box和-webkit-box-orient: vertical来实现。以下是实现这种效果的CSS和HTML代码示例：

CSS:




.text-overflow {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 定义文本的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 4.5em; /* 3行x行高 = 12em */
  line-height: 1.5em;
  position: relative;
}
 
.view-more {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 20px;
  background-color: #f9f9f9;
  border-top: 1px dotted #d1d1d1;
  cursor: pointer;
}

HTML:




<div class="text-overflow">
  这里是一段很长的文本内容，如果超过了三行，那么超出的文本将会被隐藏，并且在最后显示一个查看更多的按钮。
  <!-- 文本内容 -->
</div>
<div class="view-more">查看更多</div>
 
<script>
  document.querySelector('.view-more').addEventListener('click', function() {
    this.remove();
  });
</script>

在这个例子中，.text-overflow类定义了文本溢出隐藏的行为，-webkit-line-clamp设置为3，表示文本会被截断在三行，并显示省略号。.view-more类定义了查看更多按钮的样式，它会在文本的最后一行显示，并且当用户点击它时，按钮会消失，显示出全部的文本内容。

- 阅读更多 -
css设置样式总结、节点、节点之间关系、创建元素的方式、BOM
System
2024-08-07
所有,css

CSS设置样式总结:




/* 选择器 { 属性名: 属性值; } */
h1 { color: blue; font-size: 24px; }
p { font-family: Arial, sans-serif; }

节点操作总结:

  • 获取元素节点: document.getElementById('id')
  • 创建元素节点: document.createElement('tagName')
  • 添加节点: parentNode.appendChild(childNode)
  • 删除节点: parentNode.removeChild(childNode)
  • 替换节点: parentNode.replaceChild(newNode, oldNode)
  • 插入节点: referenceNode.insertBefore(newNode, referenceNode)

节点之间关系总结:

  • 父节点: node.parentNode
  • 子节点: parentNode.childNodes
  • 兄弟节点: node.nextSibling / node.previousSibling

创建元素的其他方式:

  • 使用HTML模板:



<template id="my-template">
  <p>这是一个段落。</p>
</template>
<script>
  const template = document.getElementById('my-template');
  const content = template.content;
  document.body.appendChild(content.cloneNode(true));
</script>
  • 使用文档片段:



const frag = document.createDocumentFragment();
const p = document.createElement('p');
p.textContent = '这是一个段落。';
frag.appendChild(p);
document.body.appendChild(frag);

BOM操作总结:

  • 窗口位置: window.moveTo(x, y)
  • 窗口大小: window.resizeTo(width, height)
  • 定时器: setTimeout(function, delay) 或 setInterval(function, interval)
  • 导航: location.href = 'url'
  • 刷新: location.reload()
  • 屏幕分辨率: window.screen.width 和 window.screen.height

注意: 实际开发中，CSS可以通过外部样式表、<style>标签或者内联样式进行引入。BOM操作主要针对浏览器窗口和窗口之间的交互，并非简明概括内容的重点。

- 阅读更多 -
纯css实现文字一个一个出现（文字擦除）的效果
System
2024-08-07
所有,css

要使用纯CSS实现文字一个一个消失(擦除)的效果，可以使用@keyframes动画结合white-space: nowrap;和overflow: hidden;属性来实现。以下是一个简单的示例：

HTML:




<div class="text-erase">
  这是一个文字一个一个消失的效果
</div>

CSS:




.text-erase {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  animation: erase 3s linear infinite;
}
 
@keyframes erase {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}

这段代码会使得.text-erase中的文本逐渐消失。你可以调整animation属性中的时长(3s)和其他参数来改变动画的表现。

- 阅读更多 -
Stylus详解与引入：打造优雅的CSS开发体验
System
2024-08-07
所有,css

Stylus是一个CSS的预处理器，它为CSS引入了变量，混合（Mixins），函数，嵌套规则等功能，可以使CSS更加简洁和结构化。

以下是一个简单的Stylus代码示例，它展示了如何定义变量、混合（mixins）和嵌套规则，以及如何导入其他Stylus文件：




// 定义变量
$font-stack = Helvetica, sans-serif
$primary-color = #333
 
// 混合（mixin）
border-radius() = border-radius: 5px
 
// 使用变量和混合
body
  font: 100% ($font-stack)
  color: $primary-color
  button
    border-radius()
 
// 导入其他Stylus文件
@import "mixins.styl"

在这个例子中，我们定义了一个变量$font-stack来存储字体栈，一个变量$primary-color来存储主题颜色，定义了一个名为border-radius的混合（mixin），用于设置元素的边框圆角。然后我们应用这些变量和混合到body元素及其子元素button上。最后，我们使用@import语句导入了另一个名为mixins.styl的Stylus文件。

Stylus的强大功能和简洁的语法使得它成为开发者在构建样式表时的有力工具，可以显著提高开发效率和代码质量。

- 阅读更多 -
Python私教长文讲解Tailwindcss Flex 和 Grid 布局相关的样式
System
2024-08-07
所有,css

由于篇幅原因，这里只提供Tailwind CSS中Flex和Grid布局相关样式的核心函数和类的示例。




# Tailwind CSS Flex布局样式示例
def tailwind_flex_styles():
    return {
        "flex": "flex",  # 启用flex布局
        "flex-row": "flex-row",  # 子元素沿水平方向排列
        "flex-col": "flex-col",  # 子元素沿垂直方向排列
        "flex-wrap": "flex-wrap",  # 子元素超出容器时自动换行
        "flex-nowrap": "flex-nowrap",  # 子元素超出容器时不自动换行
        "flex-1": "flex-1",  # 子元素占据等分空间
        "justify-start": "justify-start",  # 子元素向左对齐
        "justify-end": "justify-end",  # 子元素向右对齐
        "justify-center": "justify-center",  # 子元素居中对齐
        "justify-between": "justify-between",  # 两端对齐，子元素之间的间隔相等
        "items-start": "items-start",  # 子元素顶部对齐
        "items-end": "items-end",  # 子元素底部对齐
        "items-center": "items-center",  # 子元素垂直居中对齐
        "content-start": "content-start",  # 子元素内容顶部对齐
        "content-end": "content-end",  # 子元素内容底部对齐
        "content-center": "content-center",  # 子元素内容垂直居中对齐
        "self-start": "self-start",  # 元素自身顶部对齐
        "self-end": "self-end",  # 元素自身底部对齐
        "self-center": "self-center",  # 元素自身垂直居中对齐
        "self-stretch": "self-stretch",  # 元素自身伸展填满空间
        "flex-grow": "flex-grow-0",  # 子元素不自动增长
        "flex-grow-0": "flex-grow-0",  # 子元素不自动增长
        "flex-grow-1": "flex-grow-1",  # 子元素自动增长
    }
 
# Tailwind CSS Grid布局样式示例
def tailwind_grid_styles():
    return {
        "grid": "grid",  # 启用grid布局
        "grid-cols-1": "grid-cols-1",  # 列数为1
        "grid-cols-2": "grid-cols-2",  # 列数为2
        "grid-cols-3": "grid-cols-3",  # 列数为3
        "grid-cols-4": "grid-cols-4",  # 列数为4
        "grid-rows-1": "grid-rows-1",  # 行数为1
        "grid-rows-2": "grid-rows-2",  # 行数为2
        "grid-rows-3": "grid-rows-3",  # 行数为3
        "grid-rows-4": "grid-rows-4",  # 行数为4
        "gap-1": "gap-1",  # 格子间隔为1
        "gap-2": "gap-2",  # 格子间隔为2
        "gap-4": "gap-4",  # 格子间隔为4
        "gap-8": "gap-8",  # 格子间隔为8
        "auto-cols-min": "auto-cols-min",  # 列宽自适应
        "auto-rows-min": "auto-rows-min",  # 行高自适应
    }

这段

- 阅读更多 -
CSS之2D转换
System
2024-08-07
所有,css

CSS的2D转换包括移动（translate）、旋转（rotate）、缩放（scale）和倾斜（skew）等功能。以下是每个转换的简单示例：

  1. 移动（translate）:



.element-translate {
  transform: translate(50px, 100px); /* 水平方向移动50px，垂直方向移动100px */
}
  1. 旋转（rotate）:



.element-rotate {
  transform: rotate(45deg); /* 顺时针旋转45度 */
}
  1. 缩放（scale）:



.element-scale {
  transform: scale(1.5, 0.5); /* 水平方向放大1.5倍，垂直方向缩小0.5倍 */
}
  1. 倾斜（skew）:



.element-skew {
  transform: skew(30deg, 20deg); /* 水平方向倾斜30度，垂直方向倾斜20度 */
}

可以通过组合使用这些2D转换，创建出复杂的效果。例如，旋转并缩放一个元素：




.element-rotate-and-scale {
  transform: rotate(45deg) scale(1.5, 0.5); /* 先旋转然后缩放 */
}

记得在使用转换时，可能需要添加浏览器前缀，以确保兼容性，如 -webkit-transform 用于Chrome、Safari和新版本的Opera。

- 阅读更多 -
如何只使用CSS提升页面渲染速度
System
2024-08-07
所有,css

提高页面渲染速度的关键是减少CSS文件的大小和数量，同时尽可能减少页面重排（reflow）和重绘（repaint）。以下是一些提高CSS性能的建议：

  1. 精简CSS：移除不必要的空格、注释、换行等。
  2. 使用CSS压缩工具：如CSSNano、CSS Minifier，它们可以移除文件中的注释、多余的空格、合并相同的CSS规则等。
  3. 优化CSS选择器：避免使用通用选择器（*），尽可能使用具体的类和ID选择器。
  4. 避免嵌套过深的CSS选择器：每增加一层嵌套，选择器的计算成本会增加。
  5. 避免使用CSS表达式：这些表达式会在每次页面重排时执行，影响性能。
  6. 避免使用CSS伪类和伪元素：虽然它们提供了强大的功能，但使用不当会降低性能。
  7. 避免使用@import：@import 指令会导致页面加载时发起额外的HTTP请求，应该直接将CSS文件引入HTML文件中。
  8. 避免使用过多的CSS文件：合并你的CSS文件，如果可能的话。
  9. 使用CSS内容分发网络（CDN）：通过将CSS文件存储在离用户更近的服务器上，可以减少加载时间。
  10. 使用视口元标签优化移动页面的渲染：



<meta name="viewport" content="width=device-width, initial-scale=1">
  1. 使用CSS自定义属性（也称为CSS变量）：可以方便地管理和维护大型项目中的颜色和尺寸等变量。

示例代码：




/* 精简CSS */
body>.sidebar{color:black;background:#fff;}
 
/* 使用CSS压缩工具处理后 */
body>.sidebar{color:#000;background:#fff;}
 
/* 优化CSS选择器 */
.container p { color: red; }
/* 改为 */
.container-paragraph { color: red; }
 
/* 避免嵌套 */
ul.nav > li { font-weight: bold; }
/* 改为 */
.nav-item { font-weight: bold; }
 
/* 避免使用CSS表达式 */
p { font-size: expression(document.body.clientWidth > 1000 ? "2em" : "1em"); }
/* 改为 */
p { font-size: 1em; }
 
/* 避免使用@import */
@import url('https://example.com/css/normalize.css');
/* 改为直接引入 */
<link rel="stylesheet" href="https://example.com/css/normalize.css">
 
/* 合并CSS文件 */
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
/* 合并为一个文件 */
<link rel="stylesheet" href="combined.css">
 
/* 使用CDN */
<link rel="stylesheet" href="//cdn.example.com/styles.css">
 
/* 使用视口元标签 */
<meta name="viewport" content="width=device-width, initial-scale=1">
 
/* 使用CSS变量 */
:root {
  --main-bg-color: #fff;
  --main-text-color: #333;
}
body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
}

以上示例展示了如何优化CSS代码，以提高页面渲染速度。

- 阅读更多 -
使用Tailwind CSS实现响应式面板
System
2024-08-07
所有,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 Responsive Accordion Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <div class="container mx-auto">
        <div class="accordion">
            <div class="card">
                <div class="card-header">
                    <button class="btn w-full text-left" aria-expanded="false">
                        Card Header 1
                    </button>
                </div>
                <div class="card-body">
                    <p>Card content 1...</p>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <button class="btn w-full text-left" aria-expanded="false">
                        Card Header 2
                    </button>
                </div>
                <div class="card-body">
                    <p>Card content 2...</p>
                </div>
            </div>
            <!-- More cards... -->
        </div>
    </div>
</body>
</html>

这个例子展示了如何使用Tailwind CSS创建一个基本的响应式面板。在这个简化版的代码中，我们定义了一个包含多个卡片（card）的面板，每个卡片都有一个可折叠的标题区域和内容区域。通过Tailwind CSS的实用程序类，我们可以很容易地设置样式并使其在不同的屏幕尺寸下响应。

- 阅读更多 -
【CSS】CSS实现元素逐渐消失（实现元素透明逐渐消失/模糊）
System
2024-08-07
所有,css

要实现一个元素逐渐消失（透明度渐变）的效果，可以使用CSS的animation属性和@keyframes规则。以下是一个简单的例子，演示了如何使一个元素的透明度逐渐降到0，从而实现淡出效果。




/* 定义关键帧动画 */
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
 
/* 应用动画到目标元素 */
.element {
  animation: fadeOut 2s ease-in forwards;
}

HTML部分：




<div class="element">我将渐渐消失</div>

在这个例子中，.element是需要淡出的元素。动画名称是fadeOut，它从opacity: 1（完全不透明）变化到opacity: 0（完全透明）。动画持续时间是2秒，ease-in指定动画的速度曲线，forwards意味着动画完成后，元素会保持最后的状态，即完全透明。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号