1. 首页
  2. 分类
  3. css
CSS概述 | CSS的引入方式 | 选择器
System
2024-08-15
所有,css

CSS（层叠样式表）是一种用来描述网页和其他HTML文档样式的语言。CSS可以用来为网页创建样式规则，控制页面布局，字体，颜色，背景和其他视觉元素。

CSS的引入方式主要有以下几种：

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



<p style="color: red;">这是一个红色的段落。</p>
  1. 内部样式表：在HTML文档的<head>标签内，使用<style>标签包含CSS代码。



<head>
    <style>
        p { color: blue; }
    </style>
</head>
<body>
    <p>这是一个蓝色的段落。</p>
</body>
  1. 外部样式表：创建一个CSS文件，并通过HTML文档的<link>标签引入。



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

在"styles.css"文件中：




p {
    color: green;
}
  1. @import 规则：在内部样式表中使用@import 规则引入外部CSS文件。



<head>
    <style>
        @import url("styles.css");
    </style>
</head>

CSS选择器是用来选择HTML元素的模式，然后将样式应用到选择的元素上。主要有以下几种类型：

  1. 元素选择器：直接使用HTML标签作为选择器。



p { color: red; }
  1. 类选择器：在前面加上"."。



.center { text-align: center; }
  1. ID选择器：在前面加上"#"。



#header { background-color: blue; }
  1. 属性选择器：可以根据元素的属性或属性值选择元素。



input[type="text"] { background-color: yellow; }
  1. 伪类选择器：用于向某些选择器添加特殊的效果，如:hover，:active等。



a:hover { color: purple; }
  1. 伪元素选择器：用于向某些选择器添加特殊的效果，如::before和::after。



p::before { content: "开始"; }

CSS选择器可以结合使用，以实现更复杂的选择模式。例如，可以通过后代选择器选择特定元素的后代：




div p { color: pink; }

这个选择器会选择div元素内部的所有p元素，并将它们的文字颜色设置为粉色。

- 阅读更多 -
怎么改变placeholder提示字的颜色用CSS
System
2024-08-15
所有,css

要改变placeholder提示字的颜色，可以使用CSS的::placeholder伪元素。以下是一个示例代码：




input::placeholder {
  color: #909090; /* 将颜色改为灰色 */
}

或者如果你想针对特定的input元素改变placeholder的颜色，可以增加一个类选择器：




input.my-input::placeholder {
  color: #333333; /* 将颜色改为深灰色 */
}

然后在HTML中给input元素添加my-input类：




<input type="text" class="my-input" placeholder="请输入内容">

这样就可以实现改变placeholder提示字的颜色。

- 阅读更多 -
带你解析原子化css引擎unocss的工作原理
System
2024-08-15
所有,css

原子化CSS引擎UnoCSS的工作原理涉及到CSS原子化设计，这是一种将CSS样式分解为不可分割的原子类的方法，每个类只表示一个属性的一个值。UnoCSS的核心是一个名为"UnoCSS"的库，它可以将这些原子类动态地组合起来，以构建复杂的样式。

以下是一个简化的UnoCSS工作流程的伪代码示例：




// 引入UnoCSS库
import { generateCSS, generateAtomicClasses } from 'unocss'
 
// 定义原子规则
const atomicRules = [
  'p-2 = padding: 2px',
  'm-1 = margin: 1px',
  'bg-gray-200 = background-color: #e2e8f0',
  // 更多规则...
]
 
// 生成原子类
const atomicClasses = generateAtomicClasses(atomicRules)
 
// 应用原子类到HTML元素
document.body.className = `${atomicClasses['p-2']} ${atomicClasses['bg-gray-200']}`
 
// 或者使用UnoCSS的插件API将这些类注入到构建系统中
// 生成并注入CSS
generateCSS(atomicRules).then(css => {
  const style = document.createElement('style')
  style.textContent = css
  document.head.appendChild(style)
})

在这个例子中，我们首先定义了一系列原子规则，这些规则将原子类名映射到CSS属性和值。然后我们使用generateAtomicClasses函数生成这些原子类。随后我们可以将这些原子类应用到HTML元素上，以动态构建所需的样式。

UnoCSS的工作流程通常涉及到使用预定义的原子规则，通过组合这些规则来创建复杂的样式。这样做的好处是减少了CSS文件的大小，提高了样式重用性，并提高了样式表的性能。

- 阅读更多 -
html+js+css登录注册界面
System
2024-08-15
所有,css

以下是一个简单的HTML、JavaScript和CSS结合的登录注册界面示例：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login & Register Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
 
<section class="container">
  <div class="login-box">
    <form id="login-form" autocomplete="off">
      <h2>Login</h2>
      <div class="input-group">
        <input type="text" required>
        <label>Username</label>
      </div>
      <div class="input-group">
        <input type="password" required>
        <label>Password</label>
      </div>
      <button type="submit" class="btn">Login</button>
    </form>
    
    <form id="register-form" autocomplete="off">
      <h2>Register</h2>
      <div class="input-group">
        <input type="text" required>
        <label>Username</label>
      </div>
      <div class="input-group">
        <input type="email" required>
        <label>Email</label>
      </div>
      <div class="input-group">
        <input type="password" required>
        <label>Password</label>
      </div>
      <button type="submit" class="btn">Register</button>
    </form>
  </div>
</section>
 
<script src="script.js"></script>
</body>
</html>

CSS (style.css):




body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #28a745;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.container {
  width: 100%;
  max-width: 400px;
}
 
.login-box {
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  padding: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  position: relative;
}
 
.input-group {
  margin: 10px 0;
}
 
.input-group input {
  width: calc(100% - 10px);
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
}
 
.input-group label {
  position: absolute;
  top: 0;
  left: 10px;
  padding: 10px;
  pointer-events: none;
  transition: 0.5s;
  font-size: 16px;
}
 
.input-group input:focus ~ label,
.input-group input:valid ~ label {
  top: -20px;
  color: #28a745;
  font-size: 12px;
}
 
.btn {
  width: calc(100% - 20px);
  padding: 10px;
  margin: 10px 0;
  background-color: #28a745;
- 阅读更多 -
纯css星空动画
System
2024-08-15
所有,css

创建一个简单的星空动画可以使用CSS3动画和多个背景图像。以下是一个简单的例子：

HTML:




<div class="star-sky"></div>

CSS:




.star-sky {
  width: 100%;
  height: 500px;
  background: url('star-sky.jpg') no-repeat center center fixed;
  background-size: cover;
  position: relative;
  animation: twinkling 10s infinite alternate;
}
 
@keyframes twinkling {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 200%;
  }
}

在这个例子中，.star-sky 元素的背景图像会不断地移动，创建出星空动画的效果。@keyframes twinkling 定义了背景图像移动的动画，使星星看起来在闪烁。

请注意，你需要有一个名为 star-sky.jpg 的星空背景图片放在你的服务器或者项目目录中，并根据实际情况调整图片路径。此外，动画的时长和效果可以根据需要进行调整。

- 阅读更多 -
利用HTML和CSS实现简易导航栏
System
2024-08-15
所有,css



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易导航栏</title>
<style>
  ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
 
  ul.navbar li {
    float: left;
  }
 
  ul.navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
 
  ul.navbar li a:hover {
    background-color: #111;
  }
</style>
</head>
<body>
 
<ul class="navbar">
  <li><a class="active" href="home.html">首页</a></li>
  <li><a href="news.html">新闻</a></li>
  <li><a href="contact.html">联系</a></li>
  <li><a href="about.html">关于</a></li>
</ul>
 
</body>
</html>

这段代码展示了如何使用HTML和CSS创建一个简单的水平导航栏。导航栏具有背景颜色、无边框、圆角边框以及在鼠标悬停时的背景变化效果。这是学习Web开发的一个基本示例，适合初学者学习和模仿。

- 阅读更多 -
CSS：两列布局
System
2024-08-15
所有,css

CSS(2)是指使用CSS第二版的语法来实现两列布局。CSS第一版是在1996年发布的，而第二版（也被称为CSS2）在1998年作为推荐标准发布。CSS2提供了更多的布局控制，比如使用float属性来创建浮动布局，或者使用display属性的table-cell值来创建类似表格的单元格布局。

以下是一个使用float属性的两列布局示例：




<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    overflow: hidden; /* 清除浮动 */
    _zoom: 1; /* 为了兼容IE6 */
  }
  .column {
    float: left; /* 向左浮动 */
    width: 50%; /* 每列宽度为50% */
    padding: 10px; /* 列间距 */
  }
</style>
</head>
<body>
<div class="container">
  <div class="column">
    <p>第一列内容。</p>
  </div>
  <div class="column">
    <p>第二列内容。</p>
  </div>
</div>
</body>
</html>

在这个示例中，.container 类用于创建一个容器，该容器的 overflow: hidden; 属性和 _zoom: 1; 属性用于清除浮动，确保两列能够并列显示。.column 类使用 float: left; 属性让两列并排显示，每列的宽度设置为 width: 50%;，列与列之间的间距设置为 padding: 10px;。

- 阅读更多 -
css溢出隐藏的五种方法
System
2024-08-15
所有,css

CSS中处理溢出内容的常见方法有以下五种：

  1. overflow: hidden; - 隐藏溢出的内容。
  2. overflow: scroll; - 添加滚动条来查看溢出的内容。
  3. overflow: auto; - 根据需要自动添加滚动条。
  4. text-overflow: ellipsis; - 当文本溢出时显示省略号。常用于单行文本。
  5. clip-path: polygon(0% 0%, 100% 0%, 100% 100%); - 裁剪溢出的内容。适用于需要隐藏图片或其他元素溢出部分的情况。

以下是每种方法的简单示例：




/* 方法1: 隐藏溢出的内容 */
.overflow-hidden {
  overflow: hidden;
}
 
/* 方法2: 添加滚动条 */
.overflow-scroll {
  overflow: scroll;
}
 
/* 方法3: 根据需要添加滚动条 */
.overflow-auto {
  overflow: auto;
}
 
/* 方法4: 单行文本溢出显示省略号 */
.text-overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
/* 方法5: 裁剪溢出的内容 */
.clip-path-polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}

在HTML中使用这些类：




<div class="overflow-hidden">溢出隐藏内容</div>
<div class="overflow-scroll">添加滚动条</div>
<div class="overflow-auto">自动添加滚动条</div>
<div class="text-overflow-ellipsis">单行文本溢出显示省略号</div>
<div class="clip-path-polygon">裁剪溢出的内容</div>

这些方法可以根据需要应用于不同的元素和情况。

- 阅读更多 -
flex布局看这一篇就够了
System
2024-08-15
所有,css

Flex布局是CSS布局的一种方式，可以简化布局的设计。Flex布局提供了一种新的布局模型，使得容器内的子元素可以在任何方向上排列，并且可以弹性地伸缩以填充可用空间。

以下是Flex布局的一些关键概念：

  1. Flex容器：通过设置display: flex;或display: inline-flex;将一个元素指定为Flex容器。
  2. Flex项目：Flex容器的直接子元素称为Flex项目。
  3. 主轴（main axis）：Flex项目沿其排列的方向称为主轴。默认情况下，如果容器设置了flex-direction: row;，则主轴为水平方向，否则为垂直方向。
  4. 交叉轴（cross axis）：与主轴垂直的轴称为交叉轴。
  5. 主轴对齐（justify-content）：控制Flex项目在主轴方向上的对齐方式。
  6. 交叉轴对齐（align-items）：控制Flex项目在交叉轴方向上的对齐方式。
  7. 排序方向（flex-direction）：控制Flex项目的排列方向，可以是水平或垂直。
  8. 弹性伸缩（flex-grow）：定义了Flex项目在分配多余空间时的放大比例。
  9. 弹性收缩（flex-shrink）：定义了Flex项目在空间不足时的缩小比例。
  10. 弹性基准尺寸（flex-basis）：定义了Flex项目在分配多余空间之前的初始大小。

以下是一个简单的Flex布局示例代码：




<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
 
.flex-item {
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item" style="background-color: cyan;">1</div>
  <div class="flex-item" style="background-color: magenta;">2</div>
  <div class="flex-item" style="background-color: yellow;">3</div>
</div>
 
</body>
</html>

在这个例子中，.flex-container 类使得div成为一个Flex容器，flex-direction: row; 设置主轴方向为水平，justify-content: space-around; 和 align-items: center; 分别设置主轴和交叉轴上的对齐方式。.flex-item 类定义了Flex项目的尺寸和背景颜色。

- 阅读更多 -
【CSS】盒子模型如何设置阴影
System
2024-08-15
所有,css

CSS盒子模型不能直接设置阴影，但可以使用box-shadow属性为元素添加阴影。

box-shadow属性的基本语法如下：




box-shadow: offsetX offsetY blurRadius spreadRadius color inset;
  • offsetX和offsetY定义阴影的水平和垂直偏移量。
  • blurRadius定义模糊距离。
  • spreadRadius定义阴影的大小。
  • color定义阴影的颜色。
  • inset关键字（可选）定义内阴影而不是外阴影。

例子：




div {
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
}

这段代码会在div元素上添加一个向下及向右偏移5像素的模糊阴影，阴影的颜色为半透明的黑色，模糊半径为10像素。

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