分类前端技术下的文章

HTML引入css文件（四种方法）

2024-08-21

在HTML中引入CSS文件有四种常用方法：

使用<link>标签直接引入外部CSS文件：




<head>
  <link rel="stylesheet" type="text/css" href="path/to/your/cssfile.css">
</head>

使用@import规则在<style>标签内引入外部CSS文件：




<head>
  <style>
    @import url(path/to/your/cssfile.css);
  </style>
</head>

在<style>标签内直接书写CSS代码：




<head>
  <style>
    body {
      background-color: #f3f3f3;
    }
    /* 其他CSS样式 */
  </style>
</head>

在<link>标签的media属性中指定CSS媒体类型：




<head>
  <link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>

以上四种方法各有优缺点，通常推荐使用第一种方法，因为它简单直接，并且有利于浏览器的缓存机制。第二种方法虽然也能引入CSS，但是会使HTML和CSS的分离度降低，不推荐使用。

CSS使用clip-path实现元素动画

2024-08-21




/* 定义一个圆形剪裁路径 */
.clip-path-circle {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  /* 应用动画 */
  animation: rotate 4s linear infinite;
}
 
/* 定义一个正方形剪裁路径 */
.clip-path-square {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  /* 应用动画 */
  animation: rotate 4s linear infinite;
}
 
/* 定义关键帧动画 */
@keyframes rotate {
  from {
    clip-path: circle(100px at 50px 50px);
  }
  to {
    clip-path: circle(0px at 50px 50px);
  }
}
 
/* 定义关键帧动画 */
@keyframes rotate {
  from {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  }
  to {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}

这个代码实例展示了如何使用CSS的clip-path属性来创建元素的动画效果。.clip-path-circle类使用了一个自定义的动画rotate，通过改变剪裁圆的半径来实现动画效果。.clip-path-square类使用了一个类似的动画，通过改变剪裁正方形的位置和大小来实现动画效果。这个例子简洁明了地展示了如何使用clip-path属性来创建有趣的动画，并且可以被开发者用作学习和实践的参考。

通过css实现文字上、下排列，并且还要水平、居中对齐。

2024-08-21

您可以使用CSS的writing-mode属性和text-align属性来实现文字的上下排列，并且要求文字水平居中对齐。以下是实现这种效果的CSS代码示例：




.vertical-text {
  writing-mode: vertical-rl; /* 文字垂直排列，右向左 */
  text-align: center; /* 文字水平居中对齐 */
}

接下来，您需要将这个类应用到HTML元素上。例如：




<div class="vertical-text">
  这是垂直排列的文字
</div>

这段代码会使得<div>内的文字垂直排列，并且水平居中。您可以根据实际需求调整writing-mode的值，例如vertical-lr表示文字垂直排列，左向右。

vite中对css及css模块化的处理

2024-08-21

在Vite中，CSS 模块化处理是通过构建工具自动处理的。以下是如何在 Vite 项目中包含和处理 CSS 的简要指南和示例代码：

在 vite.config.js 配置文件中，你可以通过 css 选项来配置 CSS 预处理器（如 Sass 或 Less）和全局样式文件。




// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "src/styles/variables.scss";`
      }
    }
  }
});

在组件中导入 CSS 模块：




<template>
  <div class="example">Hello, Vite!</div>
</template>
 
<script>
import exampleStyle from './style.module.scss';
 
export default {
  setup() {
    return {
      exampleStyle
    };
  }
};
</script>
 
<style module src="./style.module.scss"></style>

使用 CSS 模块导出的类名：




// style.module.scss
.example {
  color: red;
}

在上述示例中，Vite 将处理 ./style.module.scss 文件，并自动生成一个模块对象 exampleStyle，你可以在 Vue 组件的 <script> 标签中导入并使用这个对象。通过这种方式，CSS 类名和动态生成的哈希字符串可以保证不会在不同的模块之间冲突。

CSS中:root伪类的说明和使用

2024-08-21

:root 伪类在CSS中表示文档的根元素。在HTML中，这通常是<html>元素，但在XML或其他XML类似语言中，这可能指的是文档的其他部分。:root伪类可以用来选择文档的根元素，并对其应用样式。

使用:root伪类，你可以在CSS中定义全局变量，这些变量可以在整个文档中使用。

例如，你可以在:root中定义全局字体大小和颜色，然后在其他选择器中使用这些变量：




:root {
  --global-font-size: 16px;
  --global-text-color: #333;
}
 
body {
  font-size: var(--global-font-size);
  color: var(--global-text-color);
}
 
h1 {
  font-size: calc(var(--global-font-size) * 1.5);
}

在这个例子中，我们定义了两个全局变量：--global-font-size和--global-text-color。然后在body和h1选择器中使用这些变量来设置字体大小和文本颜色。

记住，使用CSS变量（也称为CSS自定义属性）时，浏览器支持是必要的，但在现代浏览器中，:root伪类及其变量支持是广泛的。

uni-app 系统状态栏高度CSS变量--status-bar-height

2024-08-21

在uni-app中，可以使用CSS变量--status-bar-height来设置系统状态栏的高度。这个变量是由uni-app框架提供，你可以在CSS中直接使用它来确保你的内容正确地与状态栏边界对齐。

以下是一个简单的例子，展示如何在uni-app的页面的CSS中使用这个变量：




/* 在页面的CSS中使用系统状态栏的高度 */
.page {
  padding-top: var(--status-bar-height);
  /* 这里可以添加其他样式，确保内容不会被状态栏遮挡 */
}

在上面的代码中，.page 类设置了顶部的padding-top为系统状态栏的高度。这样，你的页面内容就可以从状态栏下方开始布局，确保不会被状态栏遮挡。

请注意，这个变量只在uni-app框架支持的平台上有效，比如微信小程序、H5等。在不同的平台上，状态栏的高度可能会有所不同，如果需要适配不同设备，可能需要额外的处理。

一文讲透如何使用CSS美化HTML界面

2024-08-21




/* 设置页面的背景颜色和字体样式 */
body {
    background-color: #f8f8f8;
    font-family: 'Open Sans', sans-serif;
}
 
/* 设置标题的样式 */
h1 {
    color: #333;
    text-align: center;
    padding: 20px;
}
 
/* 设置表格的样式 */
table {
    width: 100%;
    border-collapse: collapse;
}
 
/* 设置表头的样式 */
table th {
    background-color: #444;
    color: white;
    padding: 10px;
    border: 1px solid #ddd;
}
 
/* 设置表格单元格的样式 */
table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}
 
/* 设置奇数行和偶数行的背景色以便区分 */
table tr:nth-child(odd) {
    background-color: #f2f2f2;
}
 
table tr:nth-child(even) {
    background-color: #ffffff;
}
 
/* 设置链接的样式 */
a {
    color: #333;
    text-decoration: none;
}
 
/* 当鼠标悬停在链接上时改变颜色 */
a:hover {
    color: #007bff;
}

这段CSS代码为HTML页面中的元素提供了基本的视觉样式，包括设置背景颜色、字体、标题样式、表格样式、链接样式等。同时，它还演示了如何使用CSS选择器来为表格、链接以及奇偶行应用样式。这有助于开发者理解如何通过CSS来增强HTML页面的用户界面。

【css技巧】文本超出两行显示省略号

2024-08-21

为了在CSS中实现文本超出两行显示省略号的效果，可以使用-webkit-line-clamp属性结合display: -webkit-box和-webkit-box-orient: vertical。以下是实现该效果的CSS代码示例：




.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

在HTML中使用该类：




<div class="ellipsis-multiline">
  这里是一段很长的文本，如果超出两行将会显示为省略号。这样可以保持布局的整洁，同时用户可以看到完整内容的一部分。
</div>

注意：-webkit-line-clamp属性是非标准属性，主要用于WebKit引擎的浏览器，如Chrome、Safari等。其他浏览器可能不支持此属性，因此请确保在使用时考虑兼容性。

CSS 画一条0.5px的线的方法（ 4种）

2024-08-21

CSS 画一条0.5px的线可以使用多种方法，以下是4种不同的方法：

使用transform: scaleY(0.5)




.line-05 {
  height: 1px;
  background-color: black;
  transform: scaleY(0.5);
}

使用box-shadow




.line-05 {
  width: 100%;
  height: 1px;
  box-shadow: 0 0.5px 0 0 black;
}

使用border-image




.line-05 {
  width: 100%;
  height: 1px;
  border-top: 1px solid black;
  border-image: linear-gradient(to right, transparent, black) 1 round;
}

使用linear-gradient背景




.line-05 {
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, transparent, black, transparent);
  background-size: 100% 0.5px;
}

以上每种方法都可以实现0.5px的线，但是需要注意的是，这些方法在不同的浏览器中的兼容性可能会有所不同，因此在实际应用时可能需要进行一些兼容性处理。