分类 css 下的文章

2024-08-08




# 安装PostCSS和常用的PostCSS插件
npm install --save-dev postcss autoprefixer cssnano
 
# 创建一个PostCSS配置文件 postcss.config.js
# 并添加以下内容
module.exports = {
  plugins: [
    require('autoprefixer'), // 自动添加浏览器厂商前缀
    require('cssnano'), // 压缩CSS代码
  ]
};
 
# 接下来，你可以在你的构建脚本中使用PostCSS，例如在webpack配置中

以上是一个基本的安装和配置PostCSS的示例。在实际项目中，你可能需要根据项目的具体需求来安装和配置不同的插件。

- 阅读更多 -

CSS SASS calc() 计算表达式或使用变量

System

2024-08-08

所有,css

在CSS中，calc()函数允许你在值中使用算术运算。这非常有用，特别是当你需要基于其他值进行计算时。SASS也支持变量，这使得管理和维护样式更加容易。

以下是一些使用CSS calc() 和 SASS 变量的例子：

使用 calc() 计算宽度：




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

在这个例子中，.element的宽度被设置为父元素宽度减去20px的结果。

使用 SASS 变量来存储颜色值：




$color-primary: #333;
$color-secondary: #666;
 
.element {
  color: $color-primary;
  border-color: $color-secondary;
}

在这个例子中，我们定义了两个颜色变量$color-primary和$color-secondary，然后在.element类中使用这些变量来设置文本和边框的颜色。

结合使用 calc() 和 SASS 变量：




$element-padding: 10px;
 
.element {
  padding: $element-padding;
  margin-bottom: calc(2em + #{$element-padding});
}

在这个例子中，.element的margin-bottom被设置为2em加上$element-padding变量的值。

注意：在使用SASS时，如果你想在calc()函数内部使用变量，你需要在变量前加上#{}，这样SASS就会将变量的值正确地插入到字符串中。

- 阅读更多 -

css实现动态水波纹效果

System

2024-08-08

所有,css

CSS可以通过使用伪元素和CSS动画实现动态水波纹效果。以下是一个简单的实现示例：

HTML:




<div class="wave-container">
  <div class="wave"></div>
</div>

CSS:




.wave-container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
 
.wave {
  position: absolute;
  width: 200%;
  height: 200%;
  background-image: radial-gradient(circle, #00b4db, transparent);
  background-size: cover;
  background-position: 50%;
  animation: wave-animation 10s linear infinite;
}
 
@keyframes wave-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

这段代码创建了一个.wave-container容器，在其中有一个.wave伪元素，该元素使用了径向渐变背景模拟水波纹效果。通过@keyframes定义的wave-animation动画，伪元素水波纹背景会不断地从右向左平移，形成动态的水波纹效果。

- 阅读更多 -

如何使用 CSS 防止换行

System

2024-08-08

所有,css

要使用CSS防止文本换行，可以使用white-space属性。设置white-space属性为nowrap可以阻止文本在达到边界时自动换行。

下面是一个简单的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prevent Text Wrap</title>
<style>
  .no-wrap {
    white-space: nowrap;
  }
</style>
</head>
<body>
 
<p class="no-wrap">这段文本将不会换行，而是在一行内连续显示，即使它超过了父元素的宽度。</p>
 
</body>
</html>

在这个例子中，<p>元素的类.no-wrap应用了white-space: nowrap;样式规则，这会导致其中的文本不会换行。

- 阅读更多 -

CSSphotoshop相关及切图，三年老Web前端经验面经

System

2024-08-08

所有,css

关于CSS和Photoshop切图的问题，以下是一些基本步骤和示例代码：

使用Photoshop或其他图形软件进行设计。
确定关键标签，比如header、nav、main、aside、footer等。
使用CSS编写样式，并确保样式匹配设计。
使用开发者工具（例如Chrome的DevTools）进行调试。
进行响应式设计，确保在不同屏幕大小上都能良好显示。

示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  header, nav, main, aside, footer {
    display: block;
  }
  header {
    background-color: #333;
    color: white;
    padding: 10px 0;
    text-align: center;
  }
  nav {
    background-color: #ddd;
    padding: 10px;
  }
  main {
    margin: 0 15px;
    padding: 15px 0;
  }
  aside {
    background-color: #eee;
    margin: 0 15px;
    padding: 15px;
  }
  footer {
    background-color: #333;
    color: white;
    padding: 10px 0;
    text-align: center;
  }
</style>
</head>
<body>
<header>Header</header>
<nav>Navigation</nav>
<main>Main Content</main>
<aside>Aside Content</aside>
<footer>Footer</footer>
</body>
</html>

在实际操作中，你需要根据设计稿进行详细的切图工作，并使用CSS处理布局和样式。使用工具如background-image和background-position来设置背景图片，width和height来定义图片大小，以及其他CSS属性来达到设计稿的要求。

- 阅读更多 -

CSS中所有选择器详解

System

2024-08-08

所有,css

CSS 中的选择器是用来指定样式规则应用于哪些元素的。以下是一些常用的选择器类型：

类选择器（Class Selector）: 用于选择具有指定类的元素。




.my-class {
  color: red;
}

ID 选择器（ID Selector）: 用于选择具有指定 ID 的单个元素。




#my-id {
  color: blue;
}

元素选择器（Type Selector）: 用于选择指定类型的元素。




p {
  font-size: 16px;
}

属性选择器（Attribute Selector）: 用于选择包含指定属性的元素。




input[type="text"] {
  background-color: yellow;
}

伪类选择器（Pseudo-class Selector）: 用于选择处于特定状态的元素。




a:hover {
  text-decoration: underline;
}

伪元素选择器（Pseudo-element Selector）: 用于选择元素的一部分（如首字母、前缀或后缀）。




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

子选择器（Child Selector）: 用于选择指定父元素的直接子元素。




ul > li {
  color: green;
}

相邻选择器（Adjacent Sibling Selector）: 用于选择紧跟指定元素之后的元素。




h1 + p {
  margin-top: 0;
}

后代选择器（Descendant Selector）: 用于选择指定父元素的后代（不仅限于直接子元素）。




div p {
  color: purple;
}

通配选择器（Universal Selector）: 选择页面上的所有元素。




* {
  margin: 0;
  padding: 0;
}

组选择器（Grouping Selector）: 将多个选择器合并为一组，可以同时选择多个元素。




h1, h2, h3 {
  font-family: Arial, sans-serif;
}

伪元素选择器（::before 和 ::after）: 用于向元素的内容前后添加内容或者形状。




p::before {
  content: "["
}
 
p::after {
  content: "]";
}

伪元素选择器（::selection）: 用于更改用户选中文本的样式。




::selection {
  background: blue;
  color: white;
}

否定伪类选择器（:not()）: 用于选择不匹配内部选择器的元素。




input:not([type="submit"]) {
  border: 1px solid black;
}

结构伪类选择器（:nth-child, :nth-of-type）: 用于选择特定位置的子元素。




p:nth-child(2) {
  color: orange;
}

只读状态选择器（:read-only, :read-write）: 用于选择只读或可写的表单元素。




input:read-only {
  background-color: lightgray;
}

输入伪类选择器（:enabled, :disabled, :checked, :default）: 用于选择可用、禁用的表

- 阅读更多 -

[html+css+js] 小米官网首页制作，CSS的行内样式与内联样式

System

2024-08-08

所有,css




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官网</title>
    <style>
        /* 这里是内部样式表，可以写CSS规则 */
        body {
            font-family: Arial, sans-serif;
        }
        .header {
            background-color: #FF5E1F;
            color: white;
            text-align: center;
            padding: 10px;
        }
        /* 更多样式规则 */
    </style>
</head>
<body>
    <div class="header">
        <h1>小米官网</h1>
    </div>
    <!-- 页面的其余内容 -->
</body>
</html>

这个示例展示了如何在HTML文件的<head>部分使用<style>标签来包含CSS代码。这是内部样式表的一个简单用法，它将样式信息直接嵌入HTML文档中。在实际开发中，内部样式表适用于单个页面的样式定义。

- 阅读更多 -

CSS实现时间线、时间轴的布局样式实现效果

System

2024-08-08

所有,css




/* 时间轴容器样式 */
.timeline {
  list-style: none;
  padding: 20px 0 20px 0;
  position: relative;
}
 
/* 时间轴项目样式 */
.timeline-item {
  position: relative;
  margin-bottom: 20px;
}
 
/* 时间轴项目的标题样式 */
.timeline-item-title {
  margin-bottom: 10px;
  color: #333;
}
 
/* 时间轴项目的描述样式 */
.timeline-item-description {
  color: #666;
}
 
/* 时间轴项目的点样式 */
.timeline-item-dot {
  background-color: #f5f5f5;
  border: 2px solid #ddd;
  border-radius: 50%;
  display: inline-block;
  height: 16px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -8px; /* 计算点直径的一半 */
  width: 16px;
  z-index: 100;
}
 
/* 时间轴项目的内容样式 */
.timeline-item-content {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 20px;
  position: relative;
  z-index: 1;
}
 
/* 时间轴项目的内容在点右侧的样式 */
.timeline-item-content.right {
  margin-left: 80px; /* 点直径加边框宽度 */
}
 
/* 时间轴项目的内容在点左侧的样式 */
.timeline-item-content.left {
  margin-right: 80px; /* 点直径加边框宽度 */
}
 
/* 时间轴项目的内容标题下方的分隔线样式 */
.timeline-item-divider {
  border-top: 1px solid #eee;
  margin: 10px 0 0 0;
}

这段CSS样式定义了一个简单的时间轴布局，其中.timeline表示时间轴容器，.timeline-item表示每个时间点，.timeline-item-dot是时间点的小圆点，.timeline-item-content是时间点后的内容部分。通过.timeline-item-content.right和.timeline-item-content.left类，可以控制内容区块相对于点的位置。.timeline-item-divider是用于分隔时间轴项目的水平线。这个示例提供了一个基本的布局框架，可以根据具体需求进行样式调整和功能扩展。

- 阅读更多 -

scss使用for循环遍历，动态赋值类名并配置不同颜色

System

2024-08-08

所有,css




// 定义基本颜色
$base-colors: (
  'primary': #333,
  'secondary': #666,
  'tertiary': #999
);
 
// 使用for循环为每种颜色生成类名并设置背景色
@each $color-name, $color-value in $base-colors {
  .bg-#{$color-name} {
    background-color: $color-value;
  }
}

这段代码首先定义了一个$base-colors映射，包含了主要、次要和第三种基本颜色。然后使用@each指令遍历这个映射，为每个颜色名称生成一个类名，如.bg-primary、.bg-secondary和.bg-tertiary，并为这些类设置对应的背景颜色。这种方法可以极大地简化CSS的管理和维护工作。

2024-08-08

由于篇幅限制，我无法在这里提供完整的CSS笔记。但是，我可以提供一些关键点和常用CSS属性的简短描述。如果你需要更详细的信息，请告诉我，我会尽我所能提供。

选择器：
- 标签选择器（例如：p）
- 类选择器（例如：.classname）
- ID选择器（例如：#idname）
- 后代选择器（例如：div p）
- 子选择器（例如：div > p）
- 相邻兄弟选择器（例如：h1 + p）
- 通用兄弟选择器（例如：h1 ~ p）
- 属性选择器（例如：input[type="text"]）
- 伪类选择器（例如：:hover）
- 伪元素选择器（例如：::before）
常用CSS属性：
- 文字属性：font-family, font-size, color
- 背景属性：background, background-color, background-image
- 布局属性：display, position, top, right, bottom, left
- 盒模型属性：width, height, padding, margin, border
- 流属性：float, clear
- 定位属性：overflow, clip, z-index
- 显示属性：visibility, opacity
- 列表属性：list-style
- 表格属性：border-collapse, border-spacing
- 阴影和边框图案属性：box-shadow, border-radius
- 变换属性：transform
- 动画属性：@keyframes, animation
CSS框架和库：
- Bootstrap
- Foundation
- Tailwind CSS
CSS预处理器：
- Sass
- Less
CSS优化和性能：
- 使用CSS工具（例如PostCSS）
- 优化选择器性能
- 使用CSS Sprites
- 使用字体图标
- 减少HTTP请求
- 使用内容分发网络（CDN）
- 代码压缩
响应式设计：
- 媒体查询（@media）
- 弹性盒子布局（display: flex）
- 网格布局（display: grid）
- 流体宽度/高度
其他重要CSS特性：
- 浮动
- 分层（z-index）
- 透明度（opacity）
- 圆角（border-radius）
- 阴影和边框（box-shadow, border）
- 转换（transform）
- 动画（@keyframes, animation）
- 伪元素（::before, ::after）
- cursor属性

这些是CSS的核心概念和属性。记住，CSS是一种声明式语言，你可以用它来选择元素并对其应用样式。每个属性都有一组有效的值，你可以根据需要使用它们。

- 阅读更多 -