分类 css 下的文章

2024-08-11

CSS（层叠样式表）是一种用来描述网页和用户界面的样式语言，用于控制网页的布局和显示元素的外观。CSS可以使网页的展示更加生动和多样化，并且可以提高开发者的工作效率。

在Django中，CSS可以通过几种方式来使用：

内联样式：直接在HTML标签中使用style属性来添加样式。




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

内部样式表：在HTML文件的<head>部分使用<style>标签添加CSS规则。




<head>
    <style>
        p { color: red; }
    </style>
</head>
<body>
    <p>这是一个红色的段落。</p>
</body>

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




/* styles.css */
p {
    color: green;
}




<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>这是一个绿色的段落。</p>
</body>

CSS选择器用于选择需要应用样式的HTML元素，常见的选择器有类选择器、ID选择器、标签选择器等。




/* 类选择器 */
.center {
    text-align: center;
}
 
/* ID选择器 */
#header {
    background-color: yellow;
}
 
/* 标签选择器 */
p {
    margin: 0;
}




<p class="center">这段文字居中显示。</p>
<div id="header">头部区域</div>
<p>一个普通的段落。</p>

CSS的功能非常强大，可以实现更复杂的样式设计，包括布局、背景、文本样式、浮动、定位等。CSS3还增加了更多的特性，如动画、阴影等。

在Django项目中，通常会将CSS文件放在项目的静态文件目录中，并通过模板标签来引入。




{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'styles.css' %}">

以上是CSS的基本介绍和在Django中的使用方法，实际开发中可以根据需要进行更复杂的样式设计。

System

2024-08-11

所有,css




/* 定义一个简单的flex容器 */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 设置元素之间的间隙 */
}
 
/* 定义容器内部的子元素样式，使它们的宽度自适应 */
.container > div {
  flex: 1;
  min-width: 0; /* 防止子元素由于flex: 1产生的最小宽度影响自适应 */
  background-color: #f0f0f0; /* 设置背景色用于区分元素 */
}
 
/* 使用CSS变量设置容器内部的背景颜色 */
.container {
  --bg-color: #4facfe;
  background-color: var(--bg-color); /* 使用CSS变量设置背景色 */
}
 
/* 使用CSS自定义属性设置容器内部的背景颜色 */
.container {
  background-color: #ff6347; /* 默认背景色 */
}
.container[data-bg-color="blue"] {
  background-color: #0000ff; /* 当data-bg-color属性为blue时，背景色改为蓝色 */
}
 
/* 示例HTML结构 */
<div class="container" data-bg-color="blue">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

这个代码实例展示了如何在一个flex容器中设置元素之间的间隙（gap），并且如何使用CSS变量和自定义属性来控制容器的样式。同时，子元素的宽度会自适应内容大小，避免因flex布局的flex: 1属性导致的宽度溢出问题。

- 阅读更多 -

React 中 CSS in JS 的最佳实践，详解系列文章

System

2024-08-11

所有,css

在React中，CSS in JS是一种实现方式，它允许我们在组件内部直接编写CSS。这种方法有一些优点，例如可以避免CSS类名冲突，但也有一些缺点，例如增加了组件的体积和复杂性。

以下是一些CSS in JS的最佳实践：

使用styled-components库

styled-components是一个库，它允许我们使用JavaScript来编写CSS。这是一个很好的实践，因为它可以保持组件的功能性和样式的封装性。




import styled from 'styled-components';
 
const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
 
  &:hover {
    background-color: green;
  }
`;
 
export default function App() {
  return <Button>Click me</Button>;
}

避免使用内联样式

尽管内联样式可以直接在JSX中编写，但是它们通常不推荐用于性能原因。相反，应该使用常规的CSS文件或styled-components。

避免在样式中使用props

尽管可以在样式中使用组件的props来动态创建样式，但这可能会导致性能问题，因为每次prop更改时都会重新计算样式。

使用CSS模块化

CSS模块化是一种把CSS样式封装到一小块功能性的代码里的实践，这样可以保持代码的可维护性和可复用性。




import styles from './App.module.css';
 
export default function App() {
  return <div className={styles.container}>Hello World</div>;
}

避免使用!important

!important可以覆盖CSS中的所有样式，但是它应该尽可能避免使用，因为它破坏了CSS的特性和优先级规则。

使用CSS-in-JS库

除了styled-components，还有其他的CSS-in-JS库，例如emotion和radium等，每个库都有自己的优点和适用场景。

使用主题化

主题化是一种让用户可以轻松更换应用程序风格的实践，它可以通过CSS-in-JS库来实现。




const theme = {
  color: 'blue',
};
 
const Button = styled.button`
  color: ${props => props.theme.color};
`;
 
// 使用主题
<Button theme={theme}>Hello World</Button>

以上就是React中CSS in JS的一些最佳实践，每种实践都有其适用的场景，开发者可以根据自己的需求和项目的实际情况来选择合适的实践。

- 阅读更多 -

利用CSS延迟动画，打造令人惊艳的复杂动画效果！

System

2024-08-11

所有,css

在CSS中，我们可以使用animation-delay属性来设置动画的延迟时间，这样可以让动画在指定的延迟之后才开始执行。下面是一个使用CSS实现一个简单的元素延迟动画的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 动画延迟示例</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    animation: moveBox 2s infinite alternate;
    animation-delay: 1s; /* 动画在1秒后开始 */
  }
 
  @keyframes moveBox {
    0% {
      left: 0;
    }
    100% {
      left: calc(100% - 100px);
    }
  }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

在这个例子中，.box元素将会在页面加载后延迟1秒钟开始执行名为moveBox的动画，动画会无限次数地在0%和100%状态之间切换，并且是交替执行的。这个动画效果是让元素在延迟一秒后向右移动，直到移动到父元素的右边界。

- 阅读更多 -

WEB 安全 DIV CSS基础

System

2024-08-11

所有,css

在网页安全性方面，确保CSS不包含可能被攻击者利用的不安全的样式属性是非常重要的。以下是一些CSS属性，它们可能会导致安全漏洞，应当避免使用：

behavior：这个属性被用来绑定一个CSSS（Cascading Style Sheets for Scripting）行为，它可能被用来执行恶意脚本。
expression：在某些浏览器中，这个属性可以执行JavaScript表达式，并且可能被用于跨站脚本攻击（XSS）。

为了避免这些问题，请不要在生产环境中使用这些属性。

以下是一个CSS样式示例，展示了如何安全地设置元素的样式：




/* 安全的CSS样式 */
.element {
  /* 使用background-image而不是background，以避免使用expression */
  background-image: url('image.jpg');
  
  /* 使用contain或cover来保证图片的尺寸不会超过元素的容器 */
  background-size: contain;
  
  /* 设置边框样式，避免使用expression */
  border: 1px solid black;
  
  /* 设置颜色时，使用十六进制代码，避免使用expression */
  color: #ff0000;
  
  /* 设置字体大小，不使用可能导致性能问题的em单位 */
  font-size: 16px;
}

在实际应用中，你应该审查你的CSS文件，移除任何可能导致安全问题的属性，并确保使用安全的CSS属性和方法。

- 阅读更多 -

用css控制标题字符溢出,用省略号表示

System

2024-08-11

所有,css

要用CSS控制标题文本溢出并用省略号表示，可以使用以下CSS属性：

text-overflow: ellipsis; 当文本溢出时显示省略号。
white-space: nowrap; 禁止文本换行。
overflow: hidden; 隐藏溢出的内容。

以下是一个简单的例子：

HTML:




<div class="title">这是一个很长的标题，需要被截断并显示省略号</div>

CSS:




.title {
  width: 200px; /* 定义一个宽度限制 */
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
}

在上述代码中，.title 类定义了一个宽度限制，当内容超出这个宽度时，文本将会以省略号显示，并且保证不会换行。

- 阅读更多 -

【前端CSS】CSS的3种基本选择器和5种高级选择器使用方式

System

2024-08-11

所有,css

CSS的基础选择器主要有3种：标签选择器、类选择器和ID选择器。

标签选择器（Element Selector）：直接使用HTML标签作为选择器。




div {
  color: blue;
}

类选择器（Class Selector）：使用.前缀。




.my-class {
  color: red;
}

ID选择器（ID Selector）：使用#前缀。




#my-id {
  color: green;
}

CSS的高级选择器包括：组合选择器、属性选择器、伪类选择器和伪元素选择器。

组合选择器：用于选择特定子元素或后代元素。




div a {
  text-decoration: none;
}

属性选择器：用于选择具有特定属性的元素。




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

伪类选择器：用于选择特定状态的元素。




a:hover {
  text-decoration: underline;
}

伪元素选择器：用于选择特定内容或位置。




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

以上代码展示了基本选择器和高级选择器的用法。在实际应用中，可以根据需要组合使用它们以实现复杂的样式效果。

- 阅读更多 -

CSS基础之盒子模型

System

2024-08-11

所有,css

CSS盒子模型定义了元素如何显示以及与其他元素间的关系。它包括内容区域（content area）、内边距（padding）、边框（border）、外边距（margin）和边框（border）。

CSS盒子模型属性包括：

width 和 height：指定内容区域的宽度和高度。
padding：内边距，在内容区域外面，且包括在元素的宽度和高度之内。
border：边框，包括在元素的宽度和高度之内。
margin：外边距，在边框外面，且不包括在元素的宽度和高度之内。

可以单独设置元素的上、右、下、左内边距（padding-top、padding-right、padding-bottom、padding-left）、上、右、下、左边框（border-top、border-right、border-bottom、border-left）和上、右、下、左外边距（margin-top、margin-right、margin-bottom、margin-left）。

CSS代码示例：




.box {
  width: 300px;        /* 内容宽度 */
  height: 200px;       /* 内容高度 */
  padding: 20px;       /* 统一设置内边距 */
  border: 1px solid;   /* 统一设置边框 */
  margin: 10px;        /* 统一设置外边距 */
  background-color: #f0f0f0; /* 背景颜色 */
}

HTML代码示例：




<div class="box"></div>

以上代码会创建一个宽度和高度均为300px的盒子，内容区域有20px的内边距，边框宽度为1px，外边距为10px，背景色为浅灰色。

- 阅读更多 -

css文本镂空效果

System

2024-08-11

所有,css

要实现CSS文本的镂空效果，可以使用text-stroke或者text-shadow。以下是一个使用text-shadow实现文本镂空的例子：




.hollow-text {
  color: white; /* 文本边缘颜色 */
  text-shadow:
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000; /* 文本阴影 */
}




<div class="hollow-text">这是一个镂空文本</div>

这段代码会给文本添加四向的黑色阴影，从而模拟出一种镂空的效果。你可以根据需要调整text-shadow的值来改变镂空的粗细和颜色。

- 阅读更多 -

CSS 图片遮罩学习小节

System

2024-08-11

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS图片遮罩示例</title>
<style>
  .container {
    position: relative;
    width: 100%; /* 根据实际需要设置宽度 */
  }
 
  .image {
    width: 100%;
    display: block;
  }
 
  .mask {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* 半透明遮罩 */
    color: white;
    width: 100%;
    padding: 20px;
    text-align: center;
    transition: opacity 0.5s ease-in-out;
  }
 
  .container:hover .mask {
    opacity: 0; /* 鼠标悬停时遮罩透明度为0 */
  }
 
  .content {
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0);
    color: white;
    width: 100%;
    padding: 20px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }
 
  .container:hover .content {
    opacity: 1; /* 鼠标悬停时内容透明度为1 */
  }
</style>
</head>
<body>
 
<div class="container">
  <img src="path_to_image/image.jpg" alt="Nature" class="image">
  <div class="mask">
    <h2>图片标题</h2>
    <p>图片描述文字</p>
  </div>
  <div class="content">
    <h2>图片标题</h2>
    <p>图片描述文字</p>
  </div>
</div>
 
</body>
</html>

这个代码示例展示了如何使用CSS创建一个简单的图片遮罩效果。鼠标悬停时遮罩会消失，显示更多的内容。遮罩和内容部分使用了opacity属性的变化来实现渐变效果，并且使用了transition属性来平滑过渡。这是一个基础的例子，可以根据实际需求进行样式和内容的调整。

- 阅读更多 -