分类 css 下的文章

2024-08-19

CSS（层叠样式表）是一种用来描述网页和其他HTML文档样式的语言。CSS可以通过多种方式引入HTML文档中，主要有以下几种方式：

内联样式：直接在HTML元素的style属性中书写CSS代码。
内部样式表：在HTML文档的<head>部分使用<style>标签包含CSS代码。
外部样式表：创建一个单独的CSS文件，并通过HTML文档的<link>标签引入。

CSS选择器是用来选择HTML元素并应用样式的。主要有以下几种类型：

类选择器：以.开头，用于选择具有指定类的HTML元素。
ID选择器：以#开头，用于选择具有指定ID的单个HTML元素。
元素选择器：直接使用HTML标签名选择元素。
后代选择器：用于选择指定父元素下的指定子元素。
子选择器：用于选择指定父元素的直接子元素。
通配选择器：用*表示，可以选择所有元素。

下面是引入CSS的实例代码：




<!-- 内联样式 -->
<p style="color: blue;">这是一个蓝色的文本。</p>
 
<!-- 内部样式表 -->
<head>
    <style>
        p { color: red; }
    </style>
</head>
 
<!-- 外部样式表 -->
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

styles.css 文件内容：




/* 类选择器 */
.my-class {
    font-size: 16px;
}
 
/* ID选择器 */
#my-id {
    color: green;
}
 
/* 元素选择器 */
p {
    margin: 0;
}
 
/* 后代选择器 */
div p {
    font-style: italic;
}
 
/* 子选择器 */
div > p {
    font-weight: bold;
}
 
/* 通配选择器 */
* {
    padding: 5px;
}

以上代码展示了CSS的三种引入方式，并给出了几种常见的CSS选择器示例。

2024-08-19

在这个项目中，我们将继续上一节的内容，完成后台管理项目的第一个页面。

创建一个新的页面组件。在 src/views 目录下创建一个名为 Dashboard.vue 的文件，并添加以下内容：




<template>
  <div class="dashboard-container">
    <h1>欢迎来到后台管理系统</h1>
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  name: 'Dashboard',
});
</script>
 
<style scoped>
.dashboard-container {
  text-align: center;
  padding-top: 20px;
}
</style>

在路由配置文件中添加对新页面的路由配置。打开 src/router/index.ts 文件，然后添加以下内容：




import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Dashboard from '../views/Dashboard.vue';
 
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Dashboard',
    component: Dashboard,
  },
  // ...其他路由配置
];
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});
 
export default router;

在 src/main.ts 中引入 Element Plus 组件库：




import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
 
const app = createApp(App);
 
app.use(router);
app.use(ElementPlus);
 
app.mount('#app');

至此，我们已经完成了后台管理项目的第一个页面。在浏览器中访问 / 路径，你将看到一个简单的欢迎页面。在后续的教程中，我们将逐渐完善这个项目，添加更多的功能和页面。

2024-08-19

在Vue 3中，你可以使用组件名作为CSS类名，但要确保这样做不会与其他组件或全局CSS中的类名冲突。Vue 3提供了一个新的特性叫做Fragment，允许组件有多个根节点，但这些根节点不会进入DOM。

以下是一个简单的Vue 3组件示例，它使用组件名作为CSS类名：




<template>
  <div :class="$style[componentName]">
    <!-- 组件内容 -->
  </div>
</template>
 
<script setup>
import { computed, ref } from 'vue'
 
const componentName = computed(() => `${props.name}-component`)
</script>
 
<style module>
.my-component-component {
  /* CSS样式 */
}
</style>

在这个例子中，:class="$style[componentName]" 表示CSS类名是动态计算出来的，依赖于componentName的值。$style是一个特殊的导出，它代表了该组件的CSS模块。这样做可以确保类名是独一无二的，不会和其他组件的类名冲突。

请注意，这种方法要求你使用<style module>而不是<style>来定义CSS模块。这是Vue 3中实现组件级别CSS作用域的推荐做法。

CSS--超出就显示滚动条并设置滚动条的样式

2024-08-19

在CSS中，要使得元素在内容超出时显示滚动条，并设置滚动条的样式，可以使用overflow属性来控制滚动条的行为，然后通过伪元素::-webkit-scrollbar和相关属性来定制滚动条的样式，但请注意这些样式主要适用于基于WebKit的浏览器，如Chrome和Safari。

以下是一个示例，展示了如何设置一个元素，在内容超出其尺寸时显示滚动条，并自定义滚动条的样式：




/* 设置需要显示滚动条的元素 */
.scrollable-content {
  width: 300px; /* 设置元素的宽度 */
  height: 200px; /* 设置元素的高度 */
  overflow: auto; /* 开启滚动条 */
}
 
/* 自定义滚动条样式 */
.scrollable-content::-webkit-scrollbar {
  width: 10px; /* 设置滚动条宽度 */
}
 
.scrollable-content::-webkit-scrollbar-track {
  background: #f1f1f1; /* 设置滚动条轨道颜色 */
}
 
.scrollable-content::-webkit-scrollbar-thumb {
  background: #888; /* 设置滚动条滑块颜色 */
}
 
.scrollable-content::-webkit-scrollbar-thumb:hover {
  background: #555; /* 鼠标悬浮时滚动条滑块颜色 */
}

在HTML中，可以这样使用：




<div class="scrollable-content">
  这里是很长的内容，当超出容器的高度时，会显示滚动条。
  <!-- 内容 -->
</div>

请注意，为了兼容不同浏览器，可能需要添加额外的代码来定制其他浏览器的滚动条样式，比如Firefox使用的是scrollbar-color和scrollbar-width属性。

Vue3的transition标签以及animate.css使用详解

2024-08-18




<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div v-if="show" class="box"></div>
    </transition>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0;
      el.style.transition = 'opacity 0.5s';
    },
    enter(el, done) {
      setTimeout(() => {
        el.style.opacity = 1;
      }, 100);
      setTimeout(done, 500);
    },
    afterEnter(el) {
      this.animateCSS(el, 'animate__animated', 'animate__bounceIn');
    },
    animateCSS(element, animationName, animationType) {
      const node = document.createElement('div');
      node.classList.add(animationName);
      node.classList.add(animationType);
      node.classList.add('hide');
      element.appendChild(node);
 
      function handleAnimationEnd(event) {
        event.stopPropagation();
        node.classList.remove(animationType);
        node.classList.remove('hide');
        node.removeEventListener('animationend', handleAnimationEnd);
      }
      node.addEventListener('animationend', handleAnimationEnd);
    }
  }
}
</script>
 
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active for <2.1.8 */ {
  opacity: 0;
}
</style>

这个示例代码展示了如何在Vue 3中使用transition标签以及如何使用自定义的JavaScript动画函数来替代CSS动画库（如animate.css）的某些动画效果。这样做的好处是可以更灵活地控制动画的行为，并且不需要依赖外部的CSS文件。

2024-08-18

CSS 概述：

CSS 是一种用来描述网页样式并且给网页添加布局的语言。

CSS 引入方式：

内联样式：直接在 HTML 元素的 style 属性中书写 CSS。




<p style="color: red;">这是一个红色的段落。</p>

内部样式表：在 HTML 文档的 <head> 部分，使用 <style> 标签包含 CSS 代码。




<head>
  <style>
    p { color: blue; }
  </style>
</head>

外部样式表：创建一个 CSS 文件（比如 styles.css），然后在 HTML 文档的 <head> 部分，使用 <link> 标签链接到这个 CSS 文件。




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

CSS 选择器：

基础选择器：
- 标签选择器：直接使用标签名作为选择器。
- 类选择器：以 . 开头，可以应用于任何元素。
- ID 选择器：以 # 开头，每个 ID 在文档中必须是唯一的。




p { color: green; }
.center { text-align: center; }
#title { font-weight: bold; }

复合选择器：
- 后代选择器：以空格分隔，选择特定父元素的子元素。
- 子选择器：以 > 分隔，选择直接子元素。
- 并集选择器：以 , 分隔，选中所有指定元素。




/* 选择所有 p 标签内的 span 标签 */
p span { color: purple; }
/* 选择所有直接子元素 div 中的 p 标签 */
div > p { font-size: 14px; }
/* 选择所有 class 为 "button" 的元素和所有 id 为 "save" 的元素 */
.button, #save { cursor: pointer; }

CSS 选择器优先级：

内联样式 > 内部样式表和外部样式表。当样式来源相同时，按照选择器的复杂度和特异性排序：

特异性：ID 选择器 > 类选择器 > 标签选择器
复杂度：依次增加，如：.nav > li 优于 .nav

注意：为了提高样式优先级，可以使用 !important，但应谨慎使用，以免破坏样式表的可维护性。

JS细节知识点（请求头，rem，CSS标准文档流与脱离文档流

2024-08-18

请求头(Headers)的设置：
在JavaScript中，可以使用XMLHttpRequest或fetch API来设置HTTP请求头。

使用XMLHttpRequest设置请求头：




var xhr = new XMLHttpRequest();
xhr.open("GET", "url", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send();

使用fetch API设置请求头：




fetch("url", {
  method: "GET",
  headers: {
    "Content-Type": "application/json"
  }
}).then(response => response.json());

rem（root em）是一个CSS单位，其大小是根元素（通常是<html>）的字体大小。

设置根元素字体大小：




html {
  font-size: 16px; /* 或其他期望的大小 */
}

使用rem单位设置元素尺寸：




div {
  width: 10rem; /* 10 * 16px = 160px */
  height: 5rem; /* 5 * 16px = 80px */
}

CSS标准文档流和脱离文档流：

标准文档流：元素按照它们在HTML中的位置顺序进行布局。
脱离文档流：元素的位置不受HTML中位置的影响，可以通过定位属性（如position: absolute;、position: relative;等）来实现。

脱离文档流的定位示例：




div {
  position: absolute;
  top: 100px;
  left: 100px;
}

如果提问是关于CSS的脱离文档流和标准文档流，那么以上回答已经涵盖了这一点。如果你是在寻找其他JavaScript细节，请提供更具体的问题。

JavaWeb快速入门--CSS，从草根到百万年薪程序员的十年风雨之路

2024-08-18

在JavaWeb快速入门中，我们通常不直接介绍CSS，因为它更多地是一种用于定义网页样式的技术，而不是编程语言本身。然而，了解如何在Web项目中使用CSS是很有用的。

以下是一个简单的HTML和CSS代码示例，演示了如何将CSS应用于HTML元素以改善网页样式：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例网页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f8f8;
        }
        header {
            background-color: #333;
            color: white;
            padding: 10px 0;
            text-align: center;
        }
        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        nav ul li {
            display: inline;
            margin-right: 10px;
        }
        nav ul li a {
            text-decoration: none;
            color: white;
        }
        section {
            margin: 15px 0;
            padding-left: 15px;
        }
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <header>
        <h1>我的网站</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">主页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>
    <section>
        <h2>内容标题</h2>
        <p>这里是内容...</p>
    </section>
    <footer>
        <p>&copy; 2023 我的网站</p>
    </footer>
</body>
</html>

在这个示例中，我们定义了一些CSS规则来改善页面的布局和外观。这些规则被放在了<head>标签内的<style>标签中。在实际的JavaWeb项目中，CSS通常会放在外部文件中，以便于管理和重用。例如，可以创建一个名为styles.css的文件，然后在HTML文件中通过<link>标签引入它：




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

这种方法使得维护和更新样式更加容易，也符合分离关注点的原则。

CSS中的外边距重叠及其结果

2024-08-18

外边距重叠（Margin Collapsing）是CSS布局中的一个常见现象。简单来说，当两个垂直相邻的块级元素的垂直外边距相遇时，它们会合并成一个外边距，大小为两者中的较大者。

解决方案：

使用内边距（padding）代替外边距：如果不希望发生外边距重叠，可以使用内边距来代替外边距。
使用边框（border）：给元素添加边框可以阻止外边距合并。
使用透明边框：如果不希望改变元素的边框样式，可以使用border: 1px solid transparent;来避免边框样式改变。
使用浮动（float）或定位（position: absolute/fixed）：浮动和定位的元素不会发生外边距重叠。
使用透明边框或额外元素：在两个元素之间添加一个透明边框或者一个高度为0的额外元素，可以防止外边距合并。

示例代码：




/* 使用内边距来避免外边距重叠 */
.element1 {
  padding: 10px;
  /* 其他样式 */
}
 
/* 使用边框来避免外边距重叠 */
.element2 {
  border: 1px solid #transparent;
  /* 其他样式 */
}
 
/* 使用透明边框来避免外边距重叠 */
.element3 {
  border: 1px solid transparent;
  /* 其他样式 */
}
 
/* 使用浮动来避免外边距重叠 */
.element4 {
  float: left;
  /* 其他样式 */
}
 
/* 使用额外元素来避免外边距重叠 */
.element5 {
  height: 0;
  clear: both;
  /* 其他样式 */
}

CSS自适应分辨率 postcss-pxtorem（适用于 Vite）

2024-08-18




import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';
 
// 自动导入组件库样式
const path = require('path');
const resolve = (dir) => path.join(__dirname, dir);
 
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'element-plus',
          resolveStyle: (name) => {
            return `element-plus/theme-chalk/${name}.css`;
          },
          resolveComponent: (name) => {
            return `element-plus/lib/${name}`;
          },
        },
      ],
    }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/element/index.scss" as *;`,
      },
    },
  },
  // 配置postcss-pxtorem
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
    plugins: [
      {
        name: 'autoprefixer',
        setup(build) {
          const postcss = require('postcss');
          const pxtorem = require('postcss-pxtorem');
          build.onLoad({ filter: /\.scss$/ }, async (args) => {
            const contents = await fs.readFile(args.path, 'utf8');
            const result = await postcss([
              pxtorem({
                rootValue: 16,
                propList: ['*'],
              }),
            ]).process(contents, { from: undefined });
            return { contents: result.css, loader: 'css' };
          });
        },
      },
    ],
  },
});

这个代码实例展示了如何在Vite项目中使用esbuild.plugins来配置postcss-pxtorem，以自动将CSS中的px单位转换为rem单位。rootValue设置为16，意味着1rem等于16px，这样可以使得根元素的字体大小更容易控制。propList设置为['*']表示转换所有属性，也可以根据需要指定特定的属性。