分类 css 下的文章

2024-08-19

以下是一个简单的示例，演示了如何使用CSS创建一个动态的勾选多选框效果。

HTML:




<label class="checkbox">
  <input type="checkbox" />
  <span class="checkmark"></span>
  Option 1
</label>

CSS:




/* 多选框容器样式 */
.checkbox {
  display: inline-block;
  cursor: pointer;
  user-select: none;
}
 
/* 实际的多选框样式 */
.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
 
/* 勾选/选中标记样式 */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 50%;
  transition: background-color 0.3s;
}
 
/* 当多选框被选中时的标记样式 */
.checkbox input:checked + .checkmark {
  background-color: #2196F3;
}
 
/* 位于勾选标记内的文本样式 */
.checkbox span.checkmark::after {
  content: "";
  position: absolute;
  display: none;
}
 
/* 当多选框被选中时显示勾选标记内的对勾 */
.checkbox input:checked + .checkmark::after {
  display: block;
  content: "✔";
  color: white;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
}

这个示例中，我们创建了一个带有隐藏多选框的标签，并在其上方覆盖了一个圆形的标记。当多选框被选中时，圆形背景色改变，并在其中显示一个对勾符号。CSS中使用了+兄弟选择器来选择紧跟在多选框后面的勾选标记，并在其中添加了文本内容。这个简单的例子演示了如何使用CSS创建交互式UI元素，并且不需要JavaScript。

System

2024-08-19

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式与优先级示例</title>
    <style>
        p {
            font-family: "Times New Roman", Times, serif; /* 设置段落文本的字体 */
            font-size: 16px; /* 设置字体大小 */
            line-height: 1.5; /* 设置行高 */
            font-weight: bold; /* 设置字体为粗体 */
            color: blue; /* 设置字体颜色 */
        }
        span {
            font-style: italic; /* 设置<span>元素内的文本为斜体 */
        }
    </style>
</head>
<body>
    <p>
        这是一个<span>示例</span>段落，其中一部分文本是斜体。
    </p>
</body>
</html>

这段代码在<head>标签内包含了一个内部样式表，定义了一个段落的字体样式和颜色，以及如何将斜体应用于段落中的一部分文本。在<style>标签中，使用了CSS的font-family、font-size、line-height、font-weight和color属性来设置字体样式，并使用font-style属性将特定文本设置为斜体。这样的代码可以教导开发者如何使用CSS来控制网页中文本的显示，并且展示了CSS样式优先级的基本原则。

- 阅读更多 -

HTML5 和 CSS 响应式 Web 设计

System

2024-08-19

所有,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>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .header {
            background-color: #92a8d1;
            padding: 10px;
            color: white;
            text-align: center;
        }
        .nav {
            float: left;
            width: 20%;
            background: #87ceeb;
            padding: 15px 0;
            text-align: center;
        }
        .nav a {
            color: inherit;
            text-decoration: none;
            display: block;
            padding: 5px;
        }
        .nav a:hover {
            background-color: #778899;
        }
        .content {
            float: right;
            width: 80%;
            padding: 15px;
        }
        @media screen and (max-width: 799px) {
            .nav, .content {
                float: none;
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>响应式布局示例</h1>
    </div>
    <div class="nav">
        <a href="#">主页</a>
        <a href="#">关于我们</a>
        <a href="#">产品</a>
        <a href="#">联系方式</a>
    </div>
    <div class="content">
        <h2>内容</h2>
        <p>这里是内容区域，可以根据屏幕大小自适应调整。</p>
    </div>
</body>
</html>

这个示例代码展示了如何使用CSS媒体查询（Media Queries）来创建一个基本的响应式布局。当屏幕宽度小于799像素时，导航栏和内容区将不再浮动，并占满屏幕宽度。这样就能确保不论在平板电脑、手机还是大屏幕设备上查看网页时，布局都能保持良好的可读性和可用性。

- 阅读更多 -

CSS基础：你必须要知道的行高属性 line-height

System

2024-08-19

所有,css

在CSS中，line-height属性用于设置行间距，即行与行之间的垂直距离。这个属性可以影响行框的高度，以及元素的高度和行高四周的空间。

line-height可以接受多种类型的值：

数字：不带单位，与当前字体大小的倍数。
长度单位：如px, em, 等，直接指定行高的具体大小。
百分比：基于当前字体大小的百分比来设置行高。
normal：浏览器默认的行高。

示例代码：




p {
  line-height: 1.5; /* 数字，相对于当前字体大小的1.5倍 */
}
 
p {
  line-height: 24px; /* 长度单位，具体的行高为24像素 */
}
 
p {
  line-height: 150%; /* 百分比，相对于当前字体大小的150% */
}
 
p {
  line-height: normal; /* 默认的行高 */
}

行高对于文本的排版非常重要，它影响文本的可读性和视觉效果。在设计网页时，合理地调整行高可以使文本内容看起来更加整洁、舒服。

- 阅读更多 -

利用css实现文字一行内展示，超出一行，内容中间显示省略号

System

2024-08-19

所有,css

要实现单行文本溢出显示为省略号，可以使用CSS的text-overflow属性结合white-space和overflow属性。以下是实现该效果的CSS代码示例：




.ellipsis {
  white-space: nowrap;      /* 确保文本在一行内显示 */
  overflow: hidden;         /* 超出容器部分隐藏 */
  text-overflow: ellipsis;  /* 使用省略号表示文本溢出 */
}

接下来，将这个类应用到你的HTML元素上：




<div class="ellipsis">这是一段很长的文本，需要在单行内显示并且超出部分用省略号表示</div>

这样，当文本内容超出其容器宽度时，会在末尾显示省略号。

- 阅读更多 -

css学习笔记之展开列表图标动画

System

2024-08-19

所有,css




/* 定义一个简单的动画，用于展示如何为列表项添加展开/折叠动画 */
@keyframes listItemExpand {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 1000px; /* 根据实际内容设置一个足够大的最大高度 */
        opacity: 1;
    }
}
 
/* 应用动画到具有.expand类的元素上 */
.expand {
    animation: listItemExpand 0.5s ease-out;
}
 
/* 应用动画延迟，用于折叠动画 */
.collapse {
    animation: listItemExpand 0.5s ease-out forwards;
}
 
/* 动画延迟后的最大高度设置为0，确保元素在展开后被折叠 */
.collapse.after {
    max-height: 0;
    opacity: 0;
}

这个代码示例展示了如何使用CSS动画来实现一个可折叠列表的展开和折叠动画。.expand类用于触发元素的展开动画，而.collapse类用于触发折叠动画，并且可以通过添加.after类来设置动画延迟之后的状态。这个例子简单明了，有助于理解和学习CSS动画的应用。

- 阅读更多 -

教你用HTML+CSS实现百叶窗动画效果

System

2024-08-19

所有,css

以下是一个简单的HTML和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>
  .blind {
    width: 200px;
    height: 150px;
    background-color: #f0f0f0;
    position: relative;
    margin: 50px;
  }
  .blind::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: white;
    transition: all 0.5s ease;
  }
  .blind:hover::before {
    top: 50%;
  }
</style>
</head>
<body>
 
<div class="blind"></div>
 
</body>
</html>

这段代码创建了一个.blind类，它在鼠标悬停时显示出百叶窗动画效果。.blind::before伪元素用于创建百叶窗的上半部分，并且通过CSS的transition属性实现平滑的动画效果。当鼠标悬停在.blind元素上时，::before伪元素的top属性从0变为50%，从而实现百叶窗从上到下关闭的效果。

- 阅读更多 -

CSS 选择符及其继承属性详解

System

2024-08-19

所有,css

在CSS中，选择符用于指定样式规则应用的HTML元素，而继承属性是指在某些CSS属性在父元素和子元素之间自动传递的特性。

选择符

选择符用于选择需要应用样式的HTML元素。CSS提供多种选择符，如类选择符、ID选择符、属性选择符、伪类选择符等。

例如，为所有<p>元素设置颜色为蓝色：




p {
  color: blue;
}

继承属性

继承属性是指那些可以从父元素继承到子元素的属性。在CSS中，这些属性包括：color、font、line-height、list-style、text-align等。

例如，父元素<div>的颜色会默认应用到所有子元素：




div {
  color: red;
}

在这个例子中，<p>元素继承了<div>的颜色，即使没有为<p>元素指定颜色。




<div>
  <p>This paragraph is red.</p>
</div>

不可继承属性

与继承属性相对的是不可继承属性。不可继承属性是指那些不会从父元素自动应用到子元素的属性，或者说那些只能明确指定给特定元素的属性。

例如，background-color就是不可继承属性，如果在父元素上设置背景色，子元素默认不会有背景色，除非子元素专门指定了背景色。




div {
  background-color: yellow;
}




<div>
  <p>This paragraph does not have a background color.</p>
</div>

重置继承属性

如果需要重置某个元素继承自父元素的属性，可以将该属性设置为初始值或inherit。

例如，重置一个<p>元素的颜色，使其颜色恢复到初始值：




p {
  color: initial;
}

或者使其颜色重新继承父元素的颜色：




p {
  color: inherit;
}

总结：CSS选择符用于选择页面元素，而继承属性是指某些样式可以从父元素自动应用到子元素。不可继承属性需要专门指定给元素。通过initial或inherit关键字，可以重置或强制继承属性。

- 阅读更多 -

【CSS】flex弹性盒保持均分

System

2024-08-19

所有,css

要使用CSS的flex布局使子元素均分父容器的空间，可以将父容器设置为display: flex;，然后将子元素的flex属性设置为1或者相等的值。这样，所有子元素会自动平均分配父容器的空间。

以下是实现这种布局的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex 均分示例</title>
<style>
  .flex-container {
    display: flex; /* 设置flex布局 */
  }
  .flex-item {
    flex: 1; /* 所有子元素均分父容器的空间 */
    text-align: center;
    border: 1px solid #000;
    padding: 10px;
    margin: 5px;
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>
</body>
</html>

在这个例子中，.flex-container 是一个flex容器，其中的 .flex-item 是子元素。每个子元素都通过设置flex: 1;均分了父容器的空间。

- 阅读更多 -

初始CSS

System

2024-08-19

所有,css

初始CSS样式可以用来重置浏览器的默认样式，使得不同浏览器渲染页面的样式保持一致。以下是一个简单的初始CSS样式例子：




/* 重置浏览器默认样式 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box; /* 保证元素的宽高只包含内容区域和内边距，不包含边框和外边距 */
}
/* HTML5 显示设置 */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

这段代码重置了所有元素的边距、填充、边框和字体大小，并确保了列表、引用、表格的边框合并，同时移除了引用和块引用的装饰符。这样做可以确保跨浏览器的一致性，从而减少样式问题的调试时间。

- 阅读更多 -