1. 首页
  2. 分类
  3. css
CSS设置字体样式
System
2024-08-20
所有,css

在CSS中设置字体样式主要使用font-family属性来指定元素的字体系列，font-size属性来指定字体的大小，font-weight属性来指定字体的粗细，font-style属性来指定字体的风格（如斜体）。

以下是一个简单的例子，演示如何在CSS中设置字体样式：




p {
  font-family: "Helvetica", "Arial", sans-serif; /* 设置字体为Helvetica或Arial或将sans-serif作为后备字体 */
  font-size: 16px; /* 设置字体大小为16像素 */
  font-weight: bold; /* 设置字体为粗体 */
  font-style: italic; /* 设置字体风格为斜体 */
}

在HTML中使用这个样式：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Style Example</title>
<style>
p {
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
}
</style>
</head>
<body>
<p>This is a paragraph with custom font style.</p>
</body>
</html>

在这个例子中，段落<p>的字体被设置为Helvetica或Arial，如果浏览器不支持这些字体，则会使用无衬线字体sans-serif。字体大小为16像素，字体粗细为粗体，字体风格为斜体。

- 阅读更多 -
旋转、缩放、移动：掌握CSS Transform动画的终极指南！
System
2024-08-20
所有,css



/* 定义动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
@keyframes scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
  }
}
 
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}
 
/* 应用动画 */
.element {
  animation: rotate 2s infinite linear,
              scale 2s infinite linear,
              move 2s infinite linear;
}

这段代码定义了三个关键帧动画，分别用于旋转、缩放和移动，并将它们应用于.element类。每个动画都在无限循环中以线性的速度执行，每个动画的持续时间是2秒。这样的组合可以创建一个连续的动画效果，展示了CSS变换的强大功能。

- 阅读更多 -
css中浮动和Flex布局
System
2024-08-19
所有,css

在CSS中，浮动（Floats）和Flex布局（Flexbox）是两种不同的布局模型，它们有各自的特点和用途。

浮动（Floats）:

适用场景：浮动通常用于创建文本环绕图像的效果，或者用于创建一个类似于表格的布局，但不带有表格的所有限制。




.float-left {
  float: left;
}
 
.float-right {
  float: right;
}



<div class="float-left">左侧内容</div>
<div class="float-right">右侧内容</div>
<div>中间内容环绕两侧内容显示。</div>

Flex布局（Flexbox）:

适用场景：Flexbox 布局提供了一种更灵活的方式来对子元素进行排列、对齐和分配空间。它可以用于创建复杂的布局，比如响应式的列表、导航、二维布局等。




.flex-container {
  display: flex;
}
 
.flex-item {
  margin: 5px;
}



<div class="flex-container">
  <div class="flex-item">项目 1</div>
  <div class="flex-item">项目 2</div>
  <div class="flex-item">项目 3</div>
</div>

两者区别：

  • 浮动元素会从文档流中移除，可能导致父元素的高度塌陷。Flex容器则可以自动调整其子元素的高度以包含浮动元素。
  • Flex布局更容易控制子项目的对齐和空间分配，而浮动则需要额外的清除机制（比如使用clear属性）。
  • Flex布局是CSS3的一部分，更加现代和强大，提供了更多的控制和灵活性。
- 阅读更多 -
css为盒子设置滚动条&隐藏滚动条
System
2024-08-19
所有,css

在CSS中，可以使用overflow属性来控制元素的滚动条。如果你想要为盒子设置滚动条，同时隐藏滚动条，可以使用::-webkit-scrollbar伪元素来针对不同浏览器进行样式设置。

以下是一个示例，展示了如何为一个盒子设置滚动条并隐藏它：




/* 设置盒子可滚动 */
.scroll-box {
  width: 300px;
  height: 200px;
  overflow: auto; /* 自动显示滚动条 */
}
 
/* 针对Webkit内核浏览器隐藏滚动条 */
.scroll-box::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
 
/* 针对FireFox浏览器隐藏滚动条 */
.scroll-box * {
  scrollbar-width: none; /* 对于FireFox 64 */
}
 
/* 针对IE和Edge浏览器隐藏滚动条 */
.scroll-box {
  -ms-overflow-style: none; /* 对于IE和Edge */
}

HTML部分：




<div class="scroll-box">
  这里是可以滚动的内容...
  <!-- 更多内容 -->
</div>

这段CSS代码将会为类名为scroll-box的元素设置滚动条，并且通过伪元素::-webkit-scrollbar将Webkit内核浏览器的滚动条隐藏。对于FireFox，使用了scrollbar-width属性，对于IE和Edge，使用了-ms-overflow-style属性。这样就可以实现在保留滚动功能的同时隐藏滚动条的效果。

- 阅读更多 -
css中使文字在盒子中垂直居中的两种方式
System
2024-08-19
所有,css

在CSS中，可以使用以下两种方法使文字在盒子中垂直居中：

  1. 使用 display: flex; 方法：



.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中，如需要的话 */
  height: 100px; /* 或者其他高度 */
}
 
.text {
  /* 如果需要水平居中，可以在文字上应用justify-content */
}



<div class="container">
  <div class="text">垂直居中文字</div>
</div>
  1. 使用 display: table-cell; 方法：



.container {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
  text-align: center; /* 水平居中，如需要的话 */
  height: 100px; /* 或者其他高度 */
}
 
.text {
  /* 如果需要水平居中，可以在文字上应用text-align */
}



<div class="container">
  <div class="text">垂直居中文字</div>
</div>

两种方法都可以实现文本的垂直居中，第一种是现代布局技术，第二种是较旧的技术，但在某些情况下仍可使用。根据项目需求和浏览器兼容性选择合适的方法。

- 阅读更多 -
elementui el-table 如何为tr添加css以及在多选时限制选择数量
System
2024-08-19
所有,css

在Element UI的el-table中为tr添加CSS可以通过自定义类名来实现。你可以在el-table-column中使用row-class-name属性来为特定的行添加类名。




<el-table
  :data="tableData"
  style="width: 100%"
  row-class-name="my-row-class"
>
  <!-- 列定义 -->
</el-table>

然后在你的CSS中定义这个类名：




<style>
.my-row-class {
  /* 你的CSS样式 */
  color: red;
}
</style>

对于限制多选的数量，Element UI没有直接的属性来实现这个功能。但你可以通过监听@selection-change事件来控制。




<el-table
  :data="tableData"
  style="width: 100%"
  @selection-change="handleSelectionChange"
  ref="multipleTable"
>
  <!-- 列定义 -->
</el-table>

在Vue组件的methods中：




methods: {
  handleSelectionChange(selection) {
    if (selection.length > 你的限制数量) {
      this.$refs.multipleTable.clearSelection();
      this.$refs.multipleTable.toggleRowSelection(selection[selection.length - 1]);
    }
  }
}

这段代码会在选择数量超出限制时清除当前的选择，并且保留最后一次的选择。你需要将你的限制数量替换为实际的数量限制。

- 阅读更多 -
html5&css&js代码 024 响应式布局示例
System
2024-08-19
所有,css



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Layout Example</title>
    <style>
        .container {
            width: 100%;
            margin: auto;
        }
        .header, .footer {
            background-color: #ddd;
            padding: 10px 0;
            text-align: center;
        }
        .content {
            background-color: #f8f8f8;
            padding: 20px;
            margin-bottom: 20px;
        }
        @media (min-width: 768px) {
            .container {
                width: 750px;
            }
        }
        @media (min-width: 992px) {
            .container {
                width: 970px;
            }
        }
        @media (min-width: 1200px) {
            .container {
                width: 1170px;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Responsive Layout</h1>
    </div>
    <div class="container">
        <div class="content">
            <h2>Content goes here...</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        </div>
    </div>
    <div class="footer">
        <p>Footer content here...</p>
    </div>
</body>
</html>

这个代码实例展示了如何使用CSS媒体查询来创建一个响应式的布局。.container类根据屏幕宽度的不同使用不同的宽度，从而适应不同的设备。同时，示例中的HTML结构保持简单，并且只包含了必要的内容，以便更好地教学。

- 阅读更多 -
CSS中的圆角和阴影
System
2024-08-19
所有,css

CSS中创建圆角和阴影可以使用border-radius属性来创建圆角，使用box-shadow属性来创建阴影。

以下是创建圆角和阴影的示例代码：




/* 创建圆角 */
.rounded-corners {
  border-radius: 10px; /* 设置圆角的半径为10像素 */
}
 
/* 创建阴影 */
.shadow-effect {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  /* 水平偏移 垂直偏移 模糊半径 颜色 */
}

在HTML中使用这些样式：




<div class="rounded-corners shadow-effect">这是一个圆角且带有阴影的盒子</div>

这段代码会创建一个带有圆角和阴影的盒子。border-radius属性让盒子的四个角变得圆润；box-shadow属性在盒子下方添加了一个阴影，阴影的颜色为半透明的黑色。

- 阅读更多 -
CSS实现table表格：隔行换色的效果
System
2024-08-19
所有,css

在CSS中，可以使用:nth-child伪类选择器来为表格的偶数行或奇数行设置不同的样式，从而实现隔行换色的效果。

下面是实现这种效果的CSS代码示例：




/* 设置奇数行的背景色 */
table tr:nth-child(odd) {
    background-color: #f2f2f2;
}
 
/* 设置偶数行的背景色 */
table tr:nth-child(even) {
    background-color: #ffffff;
}

在HTML中，你只需要确保使用<table>标签来包含你的数据，并且每行数据使用<tr>标签定义。




<table>
    <tr>
        <td>行1, 列1</td>
        <td>行1, 列2</td>
    </tr>
    <tr>
        <td>行2, 列1</td>
        <td>行2, 列2</td>
    </tr>
    <!-- 更多行... -->
</table>

上述CSS代码会使得表格的偶数行具有一个不同于奇数行的背景色，创建出隔行换色的视觉效果。

- 阅读更多 -
有趣且重要的css知识合集知道子元素，如何修改父元素样式？
System
2024-08-19
所有,css

在CSS中，知道子元素并修改其父元素的样式可以通过几种方法实现，但是CSS本身并不直接支持反向选择父元素。不过，有几种方法可以间接实现这个需求：

  1. 使用:focus-within伪类（适用于需要交互的情况，如鼠标悬停或输入框聚焦时）。
  2. 使用JavaScript来动态添加或修改父元素的类。
  3. 使用CSS中的::before或::after伪元素来添加内容到父元素中。

以下是使用:focus-within伪类的例子：




/* 当input获得焦点时，它的父元素会变色 */
.parent:focus-within {
  background-color: yellow;
}

HTML结构：




<div class="parent">
  <input type="text" />
</div>

使用JavaScript的例子：




document.querySelector('.child').addEventListener('click', function() {
  this.closest('.parent').style.backgroundColor = 'yellow';
});

HTML结构：




<div class="parent">
  <button class="child">Click me</button>
</div>

请注意，虽然CSS本身不支持直接反向选择父元素，但是可以通过其他方式（如JavaScript）来实现这种效果。

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