分类 css 下的文章

【CSS】CSS基本样式修饰

2024-08-13

在CSS中，基础的样式修饰包括字体、颜色、背景、边框、布局等。以下是一些基本的CSS样式示例：




/* 字体样式 */
p {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}
 
/* 背景颜色和图片 */
body {
  background-color: #f0f0f0;
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
 
/* 边框样式 */
div {
  border: 1px solid #000000;
  border-radius: 5px;
}
 
/* 布局 - 浮动和定位 */
img {
  float: left;
  margin-right: 20px;
}
 
/* 列表样式 */
ul {
  list-style-type: square;
}
 
/* 链接样式 */
a:link {
  color: #FF0000;
}
 
a:visited {
  color: #00FF00;
}
 
a:hover {
  color: #FF00FF;
}
 
a:active {
  color: #0000FF;
}
 
/* 伪类 - 首字下沉 */
p:first-letter {
  font-size: 200%;
  float: left;
}
 
/* 伪元素 - 内容插入 */
p::before {
  content: '[';
}
 
p::after {
  content: ']';
}
 
/* 显示和隐藏 */
.hidden {
  display: none;
}
 
.visible {
  visibility: hidden;
}

这些样式可以直接应用于HTML元素，提供基本的视觉修饰和交互体验。

CSS 8种让人眼前一亮的hover效果眼前一亮的HOVER效果

2024-08-13

以下是一些使用CSS创建的简单而又炫目的hover效果的示例代码：

放大效果:




div {
  transition: transform 0.5s ease;
}
 
div:hover {
  transform: scale(1.1);
}

阴影扩散效果:




div {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.5s ease;
}
 
div:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

颜色渐变效果:




div {
  background-color: #f00;
  transition: background-color 0.5s ease;
}
 
div:hover {
  background-color: #0f0;
}

图片过渡效果:




img {
  transition: filter 0.5s ease;
}
 
img:hover {
  filter: grayscale(100%);
}

文字阴影和缩放效果:




h1 {
  transition: text-shadow 0.5s ease, transform 0.5s ease;
}
 
h1:hover {
  text-shadow: 0 0 15px #000;
  transform: scale(1.1);
}

旋转效果:




div {
  transition: transform 0.5s ease;
}
 
div:hover {
  transform: rotate(360deg);
}

渐变色背景效果:




div {
  background: linear-gradient(45deg, #f00, #0f0);
  transition: background-size 0.5s ease;
}
 
div:hover {
  background-size: 200% 200%;
}

边框粗细变化效果:




div {
  border: 2px solid #000;
  transition: border-width 0.5s ease;
}
 
div:hover {
  border-width: 5px;
}

这些例子展示了如何使用CSS的hover选择器和transition属性来创造各种视觉效果，使得网页元素在鼠标悬停时变得更加引人注目。

WEB05Web开发HTML&CSS

2024-08-13

在HTML和CSS中，我们可以创建一个简单的登录表单。以下是一个例子：




<!DOCTYPE html>
<html>
<head>
    <title>Login Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f7f7f7;
        }
        .login-container {
            width: 300px;
            margin: 100px auto;
            padding: 20px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
        }
        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background: #333;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background: #555;
        }
    </style>
</head>
<body>
 
<div class="login-container">
    <form action="/submit-your-login-form" method="post">
        <div>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <div>
            <input type="submit" value="Login">
        </div>
    </form>
</div>
 
</body>
</html>

这个例子中，我们创建了一个登录表单，并通过内联CSS为它提供了一个简单的美观的外观。表单包含用户名和密码字段，以及一个提交按钮。在实际应用中，你需要使用服务器端的脚本来处理表单提交，并确保表单数据的安全性。

CSS 实现立体字效果

2024-08-13

要使用CSS实现立体字效果，可以利用text-shadow属性来创建深度感。以下是一个简单的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Text Example</title>
<style>
  .threeD-text {
    font-size: 60px;
    color: #fff;
    text-align: center;
    font-weight: bold;
    /* Front face */
    text-shadow: 0 0 2px #fff, 0 0 5px #aaa, 0 0 10px #777, 0 0 20px #444, 0 0 30px #222, 0 0 40px #111;
    /* Back face */
    background: linear-gradient(to bottom, #bbb, #eee);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
</style>
</head>
<body>
 
<div class="threeD-text">3D Text</div>
 
</body>
</html>

这段代码中的.threeD-text类定义了一个具有3D效果的文本。它使用text-shadow来创建文本的阴影，从而模拟出立体效果。通过调整阴影的大小、颜色和距离，可以进一步调整立体字的视觉效果。

Linux应用实战之网络服务器CSS介绍

2024-08-13

CSS（Cascading Style Sheets）是用来控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。在这个问题中，我们将介绍CSS的基本概念并提供一个简单的示例来说明如何使用CSS来改善网页的外观。

介绍CSS的基本概念：

CSS规则由选择器和声明组成。
声明由属性和值组成。
可以使用不同类型的选择器来选择元素，例如类选择器（.classname），ID选择器（#idname）和元素选择器（p，h1等）。

示例代码：

假设我们有一个简单的HTML文件，我们想要改善它的外观。HTML文件可能如下所示：




<!DOCTYPE html>
<html>
<head>
    <title>示例网页</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
    <a href="http://example.com">点击这里访问我的主页</a>
</body>
</html>

为了改善外观，我们可以添加一个CSS样式表。在HTML文件中，我们添加一个<style>标签或者链接一个外部的CSS文件。这里我们使用<style>标签来演示：




<!DOCTYPE html>
<html>
<head>
    <title>示例网页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            color: #333333;
            padding: 10px;
            margin: 0;
        }
        h1 {
            color: #325a90;
        }
        a {
            text-decoration: none;
            color: #325a90;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
    <a href="http://example.com">点击这里访问我的主页</a>
</body>
</html>

在这个示例中，我们为body元素添加了背景颜色、文本颜色和内边距，为h1元素添加了文本颜色，为链接a元素添加了文本装饰。当鼠标悬停在链接上时，我们移除了下划线。这些样式的应用使得页面看起来更加专业并且用户友好。

webpack/vue-cli中如何实现css的treeshaking

2024-08-13

在Vue CLI项目中，CSS的TreeShaking是通过PurgeCSS插件自动实现的，该插件在构建过程中分析源代码并移除未使用的CSS。

为了使TreeShaking生效，你需要遵循以下步骤：

确保你使用的是Vue CLI 3.x或更高版本，因为旧版本可能不支持自动TreeShaking。
在你的Vue组件中，不要直接在<style>标签中导入全局CSS文件，而是应该使用模块系统导入你需要的CSS。

例如，如果你有一个Component.vue文件，并且想要TreeShaking其CSS，你可以这样做：




<template>
  <!-- Your template here -->
</template>
 
<script>
export default {
  // Your component here
}
</script>
 
<style module>
.some-class {
  /* Some CSS that is only used by this component */
}
</style>

在<style module>中编写CSS，只有当该组件被引用时，相关CSS才会被包含在最终的打包文件中。

如果你需要导入第三方的模块化CSS（例如，一个npm包），你应该使用ES6的import语法来导入它：




// 在你的组件中
import 'some-npm-package/dist/some-npm-package.css';
 
// 或者，如果包支持ES Module导入
import 'some-npm-package/dist/some-npm-package.module.css';

通过这种方式，PurgeCSS插件可以分析这些导入并确定哪些CSS是未使用的，然后在构建过程中将其移除。

请注意，TreeShaking可能不会在所有情况下都起作用，特别是当全局CSS或第三方库被直接引用时。为了确保最佳效果，尽可能使用模块化的CSS并遵循Vue CLI推荐的做法。

uniapp快速入门系列- CSS技巧与布局

2024-08-13

在uniapp中，CSS技巧主要包括样式的导入、样式的继承、样式的优先级、样式的选择器等。

样式的导入：

在uniapp中，我们可以使用@import语句来导入外部的CSS文件。




/* @import url(./common.css); */

样式的继承：

在CSS中，子元素会继承父元素的一些样式，如color和font-family。




/* 父元素 */
.parent {
  color: red;
  font-size: 16px;
}
 
/* 子元素将继承父元素的color和font-size */
.child {
  /* 此处无需再次声明 */
}

样式的优先级：

当多个选择器选中同一个元素，并且都定义了相同的样式属性时，将采用就近原则。




/* 内联样式优先级最高 */
<view style="color: red;">我是红色的文字</view>
 
/* ID选择器优先级高于类选择器 */
#test { color: green; }
.test { color: red; }
 
/* 具体的选择器优先级高于通配符选择器 */
div { color: blue; }
* { color: yellow; }

样式的选择器：

在CSS中，我们可以使用不同的选择器来选择特定的元素，并对其应用样式。




/* 类选择器 */
.test {
  color: red;
}
 
/* ID选择器 */
#test {
  color: blue;
}
 
/* 属性选择器 */
input[type="text"] {
  color: green;
}
 
/* 伪类选择器 */
a:hover {
  text-decoration: underline;
}

在uniapp中，CSS布局主要包括Flex布局、Grid布局、百分比布局、固定布局等。

Flex布局：

Flex布局提供了一种更灵活的方式来对容器内的项目进行排列和对齐。




/* 使用Flex布局 */
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

Grid布局：

Grid布局是一个基于网格的二维布局系统，它将容器分割成一系列的行和列，然后通过行和列的交叉区域（网格区域）进行布局。




/* 使用Grid布局 */
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* 三个100px宽的列 */
  grid-template-rows: 100px 100px 100px; /* 三个100px高的行 */
}

百分比布局：

百分比布局是一种简单的布局方式，它可以使元素根据容器的宽度或高度按比例分配空间。




/* 使用百分比布局 */
.container {
  width: 100%;
}
 
.child {
  width: 50%; /* 宽度为父元素的一半 */
}

固定布局：

固定布局是一种简单粗暴的布局方式，它可以使元素根据指定的像素值来进行定位。




/* 使用固定布局 */
.container {
  position: relative;
}
 
.child {
  position: absolute;
  top:

CSS设置元素不可点击

2024-08-13

要使CSS中的元素不可点击，可以通过设置pointer-events属性为none来实现。这样做会告诉浏览器元素是不响应鼠标事件的，但是元素仍然可见并且可以被点击通过键盘导航。

下面是一个CSS规则的例子，它将使一个元素不可点击：




.unclickable {
  pointer-events: none;
}

然后你可以在HTML中这样使用这个类：




<div class="unclickable">这个元素不可点击</div>

请注意，pointer-events属性不是CSS中的HTML属性，而是一个独立的CSS属性，可以用来控制元素如何响应鼠标事件。使用这个属性时，你可能还需要考虑元素的可访问性，因为它可能会影响键盘导航。

React 中 CSS in JS 的最佳实践

2024-08-13




import React from 'react';
import styled from 'styled-components';
 
// 使用styled-components创建具有样式的组件
const StyledButton = styled.button`
  background-color: #4CAF50; /* 绿色背景 */
  color: white; /* 白色文本 */
  padding: 15px 32px; /* 内边距 */
  text-align: center; /* 居中文本 */
  text-decoration: none; /* 无文本装饰 */
  display: inline-block; /* 行内块显示 */
  font-size: 16px; /* 字体大小 */
  margin: 4px 2px; /* 外边距 */
  cursor: pointer; /* 手形鼠标光标 */
`;
 
// 使用组件
const App = () => {
  return (
    <div>
      <StyledButton>点击我</StyledButton>
    </div>
  );
};
 
export default App;

这个例子展示了如何在React应用中使用styled-components库来实现CSS in JS的最佳实践。我们创建了一个StyledButton组件，并在其中定义了按钮的样式。然后在App组件中使用了这个样式化的按钮。这种方法使得样式和组件的逻辑更加紧密结合，易于维护和理解。