分类 css 下的文章

2024-08-07

CSS的更新速度很快，每年都会有新的规范发布，其中一些新特性可能并不为常用，但了解这些新特性有助于你在开发过程中选择最合适的解决方案。以下是一些在CSS中比较常见的新特性：

CSS Variables: 使用自定义属性可以在CSS中创建可以在整个文档中重复使用的变量。




:root {
  --main-bg-color: coral;
}
 
body {
  background-color: var(--main-bg-color);
}

CSS Calc(): 使用calc()可以在值中执行基本数学运算。




.box {
  width: calc(100% - 20px);
}

CSS Shapes: 利用shape属性，可以定义矩形或图片形状的CSS样式。




.box {
  shape-outside: circle();
}

CSS Mix-Blend-Mode: 混合不同图层的时候，可以使用混合模式。




.layer1 {
  mix-blend-mode: multiply;
}

CSS Custom Properties and Values Formats: 自定义属性和值格式允许创建自定义的CSS属性和值类型。




@property --main-text-color {
  syntax: '#rrggbb';
  inherits: true;
  initial-value: #ff00ff;
}
 
.my-element {
  background-color: var(--main-text-color);
}

CSS Regions: 使用CSS Regions可以控制文本的流动和布局。




article {
  flow-from: region-1;
  flow-into: region-2;
}
 
#region-1 {
  region-fragment: region-after;
}

CSS Filters: 提供各种图像效果，如模糊，对比度调整等。




img {
  filter: blur(5px);
}

CSS Images: 使用CSS Image Values，可以在CSS中直接使用图像。




.icon {
  background-image: image('icon.png');
}

CSS Overflow: 使用新的overflow属性，可以创建自定义的滚动条。




.scrollable {
  overflow-y: overlay;
}

CSS Writing-Mode: 改变文本的书写方向。




.vertical-text {
  writing-mode: vertical-rl;
}

CSS Initial Letter: 初始字母特性允许你设置文本的第一个字母的样式。




p:first-letter {
  font-size: 200%;
}

CSS Initial Value: 初始值特性允许你为属性设置初始值。




.my-element {
  padding: initial(padding);
}

CSS Containment: 控制元素内的渲染，性能优化。




section {
  contain: style layout;
}

CSS Painting: 使用CSS Custom Paint API，可以在Canvas上绘制自定义图形。




ctx.fillStyle = {
  paint: 'myPaint'
};
 
ctx.fillRect(0, 0, 100, 100);

CSS Type Layout: 使用新的CSS Layout API可以控制文本布局。




.text {
  layout-flow: horizontal;
}

CSS Logical Properties: 使用逻辑属性可以创建对称的布局，无论方向如何改变都可

- 阅读更多 -

CSS transition(过渡效果)详解

System

2024-08-07

所有,css

CSS transition 属性用于设置一个属性的过渡效果。它可以让属性的变化在一定的时间内平滑地进行。

基本语法：




transition: property duration timing-function delay;

property：定义应用过渡效果的 CSS 属性名称。
duration：定义过渡效果花费的时间长度。
timing-function：定义过渡效果的速度曲线，默认为 "ease"。
delay：定义过渡效果何时开始，默认是 0，即立即开始。

示例代码：




div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 1s ease-in-out;
}
 
div:hover {
  width: 200px;
}

在上述例子中，当鼠标悬停在 div 上时，它的宽度会在 1 秒内从 100px 平滑过渡到 200px，速度曲线为 "ease-in-out"。

- 阅读更多 -

CSS样式（第二天导读）

System

2024-08-07

所有,css

CSS样式对于网页的呈现非常重要，它决定了网页元素的外观。以下是一些CSS样式的例子，它们可以应用于第二天导读的不同部分：

标题样式：




.second-day-title {
  color: #333333;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

段落样式：




.second-day-paragraph {
  color: #666666;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 15px;
}

列表样式：




.second-day-list {
  color: #666666;
  font-size: 16px;
  list-style-type: disc;
  margin-left: 20px;
  margin-bottom: 15px;
}

链接样式：




.second-day-link {
  color: #1E90FF;
  text-decoration: none;
}
 
.second-day-link:hover {
  text-decoration: underline;
}

图片样式：




.second-day-image {
  display: block;
  margin: 0 auto;
  width: 50%;
}

将这些样式添加到HTML文件中，并将相应的类添加到标题、段落、列表、链接和图片元素上，即可实现基本的样式设置。

HTML示例：




<div class="second-day-container">
  <h2 class="second-day-title">第二天</h2>
  <p class="second-day-paragraph">在第二天，我们将介绍...</p>
  <ul class="second-day-list">
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
  </ul>
  <a href="https://example.com" class="second-day-link">查看详情</a>
  <img src="image.jpg" alt="描述" class="second-day-image">
</div>

在实际应用中，你可能需要更复杂的样式，包括响应式设计、媒体查询等，以确保在不同设备和屏幕尺寸上都能良好显示。

- 阅读更多 -

CSS拖曳盒子案例

System

2024-08-07

所有,css

以下是一个简单的HTML和CSS代码示例，演示了如何使用CSS创建一个可以被拖动的盒子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖曳盒子</title>
<style>
  .draggable-box {
    width: 100px;
    height: 100px;
    background-color: #f0f0f0;
    position: absolute;
    cursor: move;
  }
</style>
</head>
<body>
 
<div class="draggable-box" id="draggable"></div>
 
<script>
  const draggableBox = document.getElementById('draggable');
 
  draggableBox.addEventListener('mousedown', function(event) {
    let shiftX = event.clientX - draggableBox.getBoundingClientRect().left;
    let shiftY = event.clientY - draggableBox.getBoundingClientRect().top;
 
    document.addEventListener('mousemove', move);
 
    function move(event) {
      draggableBox.style.left = event.clientX - shiftX + 'px';
      draggableBox.style.top = event.clientY - shiftY + 'px';
    }
 
    document.addEventListener('mouseup', function() {
      document.removeEventListener('mousemove', move);
    });
  });
</script>
 
</body>
</html>

这段代码中，我们创建了一个可拖动的盒子，通过监听鼠标的mousedown事件来开始拖动操作，计算鼠标点击点与盒子左上角的距离，并在document上注册mousemove事件来更新盒子的位置。鼠标松开时，移除mousemove事件监听。这个示例提供了一个基本的拖曳功能，并且可以在现代浏览器中运行。

- 阅读更多 -

【前端随记】纯css自定义checkbox复选框样式

System

2024-08-07

所有,css




/* 隐藏原生的checkbox */
.custom-checkbox input[type="checkbox"] {
  display: none;
}
 
/* 创建一个自定义的复选框 */
.custom-checkbox label:before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 8px;
  border: 1px solid #000;
  /* 可以添加更多样式，比如圆角等 */
}
 
/* 当checkbox被选中时改变复选框的样式 */
.custom-checkbox input[type="checkbox"]:checked + label:after {
  content: "✔";
  display: inline-block;
  color: #fff;
  position: absolute;
  left: 2px;
  top: 2px;
  width: 13px;
  height: 13px;
  background-color: #000;
  /* 可以添加更多样式，比如加边框等 */
}

这个CSS样式定义了一个基本的自定义复选框，当复选框被选中时，会在其中显示一个勾选标记。这个例子展示了如何隐藏原生的checkbox，并通过label和伪元素(:before和:after)来创建自定义的样式。

- 阅读更多 -

初步体验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>

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

body：设置了整个页面的背景颜色为浅蓝色。
h1：设置了标题的颜色和左边距。
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的强大功能和简洁的语法使得它成为开发者在构建样式表时的有力工具，可以显著提高开发效率和代码质量。

- 阅读更多 -