分类 css 下的文章

2024-08-13

在CSS中，有三种方式可以将样式添加到HTML元素中：

行内引入（Inline Styles）：直接在HTML元素的style属性中书写CSS代码。
内部引入（Internal Styles）：在HTML文档的<head>部分使用<style>标签包含CSS代码。
外部引入（External Styles）：创建一个单独的CSS文件，并通过HTML文档的<link>标签引入。

以下是每种方法的示例代码：

行内引入：




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

内部引入：




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

外部引入：




<!-- 在<head>部分引入外部CSS文件 -->
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

styles.css 文件内容：




p {
  color: green;
}

HTML文件使用上述<link>标签引入了一个外部的CSS文件，所有<p>元素将显示为绿色。

- 阅读更多 -

scss - 清除默认样式

System

2024-08-13

所有,css

在SCSS中，清除默认样式通常涉及重置或 normalize 样式。以下是一个简单的SCSS例子，它清除了一些常见的浏览器默认样式：




// 重置元素样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; // 使元素的宽高包含内边距和边框
}
 
// 移除列表的默认样式
ul, ol {
  list-style: none;
}
 
// 移除链接的默认样式
a {
  text-decoration: none;
  color: inherit; // 使链接文本颜色继承父元素
}
 
// 清除输入框的默认样式
input, textarea {
  outline: none;
  border: none; // 移除边框
  padding: 10px; // 添加内边距
}
 
// 设置图片在某些情况下不加载
img {
  display: block;
  max-width: 100%;
}
 
// 更多的样式重置...

这个例子只是一个基本的起点，根据你的项目需求，你可能需要添加更多的样式规则来确保跨浏览器的一致性。记住，normalize.css 或其他现代重置样式库可以提供更全面和可靠的样式重置解决方案。

- 阅读更多 -

使用css让图片无限循环旋转360度

System

2024-08-13

所有,css

要使用CSS使图片无限循环旋转360度，您可以使用@keyframes规则来定义动画，并使用animation属性应用这个动画。以下是实现这个效果的CSS代码示例：




@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
.rotating-image {
  animation: rotate 5s linear infinite;
}

接下来，您需要将这个类rotating-image应用到您想要旋转的图片上。例如：




<img src="path/to/your/image.jpg" class="rotating-image" alt="Rotating Image">

这段代码将确保图片无限期地以每秒5秒的速度连续旋转360度。您可以根据需要调整动画的持续时间（这里是5秒）。

- 阅读更多 -

css前端主题切换方案(三种)

System

2024-08-13

所有,css

在CSS中实现前端主题切换可以通过以下三种方案：

使用CSS变量（Custom Properties）：




:root {
  --background-color: #fff;
  --text-color: #000;
}
 
.theme-dark {
  --background-color: #000;
  --text-color: #fff;
}
 
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

使用CSS媒体查询来根据时间实现自动切换主题：




@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
  }
}
 
@media (prefers-color-scheme: light) {
  body {
    background-color: #fff;
    color: #000;
  }
}

使用JavaScript来手动切换主题：




function switchTheme(isDarkMode) {
  if (isDarkMode) {
    document.body.classList.add('theme-dark');
  } else {
    document.body.classList.remove('theme-dark');
  }
}
 
// 监听按钮点击事件来切换主题
document.getElementById('theme-toggle-button').addEventListener('click', function() {
  var isDarkMode = localStorage.getItem('isDarkMode') === '1';
  switchTheme(!isDarkMode);
  localStorage.setItem('isDarkMode', !isDarkMode);
});
 
// 页面初始化时应用主题
if (localStorage.getItem('isDarkMode') === '1') {
  switchTheme(true);
}

在这个JavaScript示例中，我们使用了localStorage来记住用户的选择并在页面加载时应用相应的主题。同时，我们添加了一个按钮来手动切换主题，并在点击时保存选择。

- 阅读更多 -

探索现代化CSS重置方案：Modern CSS Reset

System

2024-08-13

所有,css




/* 设置默认字体和字体大小 */
body {
    font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
    font-size: 16px;
}
 
/* 重置所有元素的内边距和外边距 */
* {
    margin: 0;
    padding: 0;
}
 
/* 设置列表元素为内联块，方便布局 */
li {
    list-style: none;
}
 
/* 取消元素的默认样式，如去掉链接的下划线 */
a {
    text-decoration: none;
    color: inherit;
}
 
/* 设置图片为块级元素，并且不要保护空格 */
img {
    display: block;
    vertical-align: middle;
}
 
/* 设置表单元素的外边距和内边距，使其更易于阅读 */
input, button, select, textarea {
    margin: 0;
    font-size: 100%;
    vertical-align: middle;
}
 
/* 移除按钮的默认样式，使其更像一个按钮 */
button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
 
/* 设置浮动和定位元素的盒模型行为 */
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}
 
.relative {
    position: relative;
}
 
.absolute {
    position: absolute;
}
 
/* 使用em而不是px来设置字体大小，以便于用户调整字体 */
.small-text {
    font-size: 0.875em;
}
 
.large-text {
    font-size: 1.125em;
}
 
/* 使用flexbox布局来简化布局 */
.flex-container {
    display: flex;
}
 
.flex-item {
    flex: 1;
}
 
/* 设置一个全屏的hero 区域 */
.hero {
    width: 100%;
    height: 300px;
    background-color: #f0f0f0;
    text-align: center;
    line-height: 300px;
    font-size: 2em;
}
 
/* 设置一个水平居中的容器 */
.center-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
 
/* 设置一个响应式的三列布局 */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    padding: 10px;
}
 
/* 设置一个网格项为自动填充可用空间 */
.grid-item {
    grid-column: auto / span 1;
}
 
/* 设置一个网格项为跨越两列 */
.grid-item-double {
    grid-column: auto / span 2;
}

这个代码示例展示了如何使用现代CSS技术来创建一个简洁而有效的重置样式表，它包括了一些常用的CSS复位规则，以及一些布局辅助类，如flexbox和grid。代码示例中的样式是基于常见的Web开发需求设计的，并且为可读性和可维护性做了优化。

System

2024-08-13

所有,css




/* 设置基本图片样式 */
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
 
/* 使用@media screen规则为不同屏幕宽度设置不同的图片样式 */
@media screen and (max-width: 768px) {
  /* 对于屏幕宽度小于或等于768像素时，图片样式调整 */
  .img-responsive {
    margin: auto;
    width: 80%; /* 调整宽度以适应屏幕 */
  }
}
 
@media screen and (max-width: 480px) {
  /* 对于屏幕宽度小于或等于480像素时，图片样式调整 */
  .img-responsive {
    width: 100%; /* 使图片宽度填满屏幕宽度 */
  }
}

这段代码定义了一个.img-responsive类作为所有响应式图片的基础样式，然后使用@media screen规则来定义在不同屏幕尺寸下如何调整图片的样式。在屏幕宽度小于或等于768像素时，图片的宽度被设置为屏幕宽度的80%，而在屏幕宽度小于或等于480像素时，图片宽度被设置为100%，以使图片填满屏幕宽度。这样的设置可以确保图片在不同设备上的显示效果符合设计需求。

- 阅读更多 -

20 个 CSS 函数，释放你的创造力

System

2024-08-13

所有,css

CSS函数是一种特殊的值，它可以接受参数，并根据参数计算新的值。CSS函数有许多种，例如attr(), calc(), linear-gradient(), url()等等。下面是20个CSS函数的简单介绍和使用示例：

attr()：可以获取元素的属性值。




div::before {
  content: attr(data-info);
}

linear-gradient()：创建线性渐变背景。




div {
  background: linear-gradient(to right, red, yellow);
}

radial-gradient()：创建径向渐变背景。




div {
  background: radial-gradient(circle, red, yellow, green);
}

url()：引入外部资源，如图片和字体。




div {
  background-image: url('image.png');
}

calc()：执行简单的数学运算。




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

min()和max()：取两个值中的最小值或最大值。




div {
  font-size: max(10px, 15px);
}

clamp()：限制一个值的范围。




div {
  font-size: clamp(10px, 14px, 18px);
}

repeat()和repeat-x()/repeat-y()：设置背景图片的重复方式。




div {
  background-image: repeat(url('image.png'));
}

mix()：混合两种颜色。




div {
  background-color: mix(red, blue);
}

step()：根据指定的间隔返回不同的值。




div::before {
  content: 'State ' counter(section);
  counter-increment: section;
}
@media print {
  div::before {
    content: step(section, 'Step ', 'Chapter ');
  }
}

var()：获取CSS变量的值。




:root {
  --main-color: #333;
}
div {
  color: var(--main-color);
}

counter()和counterIncrement()：创建自定义计数器。




div::before {
  counter-increment: section;
  content: 'Section ' counter(section);
}

filter()：应用各种视觉效果，如模糊，锐化，饱和度等。




div {
  filter: blur(5px);
}

hsl()和hsla()：使用色相，饱和度，亮度或透明度值定义颜色。




div {
  background-color: hsl(240, 100%, 50%);
}

rgb()和rgba()：使用红，绿，蓝或透明度值定义颜色。




div {
  background-color: rgba(255, 0, 0, 0.5);
}

min()和max()：取两个值中的最小值或最大值。




div {
  font-size: max(10px, 15px);
}

calc()：执行简单的数学运算。




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

custom-ident()：用于自定义标识符。




.foo {
  --strategy: thing

- 阅读更多 -

CSS相关知识点

System

2024-08-13

所有,css

CSS（层叠样式表）是一种用来描述网页和其他HTML文档样式的语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

以下是一些关于CSS的常见知识点：

选择器：CSS选择器用于选择需要应用样式的元素。常见的选择器包括类选择器（.class）、ID选择器（#id）、元素选择器（p, h1, div等）、后代选择器（h1 p）、子选择器（ul > li）、相邻选择器（h1 + p）、通用兄弟选择器（h1 ~ p）等。
属性：CSS属性用于定义页面元素的样式。例如，color属性用于定义文本颜色，background-color属性用于定义背景颜色，width属性用于定义元素的宽度等。
值：CSS属性可以接受多种值，例如长度值（px, em, rem等）、颜色值（如red, #FF0000等）、URL（图片链接）、关键词（如normal, bold等）等。
继承：某些CSS属性是可以继承的，意味着子元素将自动应用父元素的某些属性。
优先级：当多个选择器选中同一元素，并对同一属性设置了不同的值时，CSS解析器会根据一定的优先级规则决定哪个值会被应用。
层叠：当多个选择器选中同一元素，并对同一属性设置了相同的值时，这些值会层叠在一起，产生一个单一的结果。
盒模型：CSS盒模型定义了元素如何显示以及如何处理元素的内边距、边框和外边距。
布局：CSS提供了多种布局方式，包括流式布局、浮动布局、绝对定位布局、相对定位布局等。
媒体查询：CSS3中的媒体查询可以根据设备的不同特性（如屏幕宽度、分辨率等）应用不同的样式规则。
动画和变换：CSS3提供了动画和变换特性，可以实现复杂的视觉效果。

以下是一个简单的CSS样式规则示例，该规则将应用于所有h1元素，并设置其颜色为蓝色：




h1 {
  color: blue;
}

以上就是CSS的一些基本知识点和一个简单的示例。

- 阅读更多 -

CSS 字体图标+定位+平面转换+渐变

System

2024-08-13

所有,css




@font-face {
    font-family: 'MyFont';
    src: url('myfont.woff') format('woff');
}
 
.icon-home:before {
    content: '\e001';
    font-family: 'MyFont';
}
 
.icon-home {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    color: white;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
}

这个例子中，我们首先定义了一个自定义字体，并在.icon-home:before伪元素中使用了字体图标。然后我们使用绝对定位将图标居中，使用translate进行平面转换。背景使用线性渐变从左到右渐变，边框半径为50%，设置了宽度和高度，并在图标内部居中显示文本。这个例子展示了如何结合多种CSS技术来创建一个有趣的图标。

- 阅读更多 -

css三角的做法及其案例

System

2024-08-13

所有,css

CSS三角可以通过使用透明图像和定位技术来实现。这里是一个简单的例子，展示如何使用CSS创建一个向下指向的三角形：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Triangle Example</title>
<style>
  .triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid black;
  }
</style>
</head>
<body>
  <div class="triangle-down"></div>
</body>
</html>

在这个例子中，.triangle-down 类利用了CSS的边框属性创建了一个向下指向的三角形。border-left 和 border-right 设置为透明，而 border-top 设置为实色，形成了三角形的效果。你可以通过调整 border-top 的大小来改变三角形的大小，调整 border-left 和 border-right 的宽度来改变三角形的宽度。

- 阅读更多 -