标签 css 下的文章

2024-08-08




/* 清除默认的列表样式和内外边距 */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
 
/* 设置导航栏链接的默认样式 */
nav ul li a {
    display: block; /* 将链接显示为块级元素 */
    padding: 5px 10px; /* 设置内边距 */
    text-decoration: none; /* 移除下划线 */
    color: #000; /* 设置文本颜色 */
    border-radius: 5px; /* 圆角边框 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 平滑过渡效果 */
}
 
/* 鼠标悬停时的样式变化 */
nav ul li a:hover {
    background-color: #555; /* 背景颜色变深 */
    color: #fff; /* 文本颜色变亮 */
}
 
/* 设置当前活动链接的样式 */
nav ul li a.active {
    background-color: #007bff; /* 背景颜色变蓝 */
    color: #fff; /* 文本颜色变亮 */
}
 
/* 浮动导航栏模块至左侧 */
nav ul li {
    float: left; /* 向左浮动 */
}
 
/* 清除浮动 */
nav ul::after {
    content: "";
    display: table;
    clear: both;
}

这段代码为导航栏模块设置了浮动布局，使得导航链接并排显示。同时，它还展示了如何去除列表的默认样式，并为链接设置了基本的样式和悬停效果。最后，使用了::after伪元素来清除浮动，确保父元素能够包含浮动的子元素。

- 阅读更多 -

CSS的多媒体嵌入

System

2024-08-08

所有,css

CSS多媒体嵌入是一种将CSS样式应用于HTML文档中的多媒体内容（如视频和音频）的方法。这可以通过使用HTML的<style>标签或外部CSS文件来实现。

以下是一个简单的示例，展示了如何在HTML文档中嵌入CSS来控制视频的样式：




<!DOCTYPE html>
<html>
<head>
<style>
  /* 针对所有视频元素 */
  video {
    width: 100%;
    height: auto;
  }
 
  /* 针对特定类名的视频元素 */
  .responsive-video {
    width: 100%;
    height: auto;
    display: block;
  }
</style>
</head>
<body>
 
<!-- 应用全局样式 -->
<video controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
 
<!-- 应用特定类名的样式 -->
<video class="responsive-video" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
 
</body>
</html>

在这个例子中，我们定义了两种类型的视频样式：一种是全局的（不带类名），适用于所有视频元素；另一种是针对具有特定类名的视频（.responsive-video），并设置了其为响应式（宽度为100%，高度自动）。这样，你就可以根据需要为多媒体内容添加样式。

- 阅读更多 -

css选择器优先级排序

System

2024-08-08

所有,css3

CSS选择器的优先级是由选择器本身的特殊性决定的，特殊性值的高低依次是：

内联样式（使用HTML的style属性）
ID选择器
类选择器、属性选择器、伪类
元素选择器和伪元素
通配选择器（*）

特殊性值计算时，会将ID选择器的值计算在内，并且通过相应的乘法积增加。例如，一个类选择器与一个元素选择器组合的特殊性值将会比仅有一个元素选择器的低，因为类选择器的特殊性值为10。

如果两个选择器特殊性值相同，那么后定义的选择器会被应用。

以下是一个简单的例子，演示了如何根据这些规则来判断优先级：




#myId { /* 特殊性值100 */
  color: red;
}
 
div #myId { /* 特殊性值100 + 1 = 101 */
  color: blue;
}
 
.myClass { /* 特殊性值10 */
  color: green;
}
 
div .myClass { /* 特殊性值10 */
  color: purple;
}
 
div { /* 特殊性值1 */
  color: yellow;
}

如果我们应用这些规则到具体的元素上，例如：




<div id="myId" class="myClass">这是一个文本。</div>

根据特殊性值的比较，div #myId 的选择器优先级更高，因此文本颜色应该是蓝色。div .myClass 的选择器优先级和#myId相同，但它在#myId之后被定义，所以它的规则将不会被应用。

在实际开发中，我们通常会使用更复杂的选择器结构，并且利用层叠（cascade）和继承来构建样式，而不是仅仅依赖特殊性值来决定每一个属性。

- 阅读更多 -

css模糊效果(blur)

System

2024-08-08

所有,css3

CSS模糊效果可以使用filter属性中的blur()函数来实现。blur()函数接受一个参数，表示应用模糊的像素级别。

下面是一个简单的例子，演示了如何给一个元素应用模糊效果：




<!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>
  .blur-effect {
    filter: blur(5px); /* 应用模糊效果，模糊半径为5像素 */
  }
</style>
</head>
<body>
 
<div class="original-image">
  <img src="image.jpg" alt="原图">
</div>
 
<div class="blur-effect-image">
  <img src="image.jpg" alt="模糊效果图" class="blur-effect">
</div>
 
</body>
</html>

在这个例子中，.original-image类中的图片是没有应用模糊效果的原图，而.blur-effect-image类中的图片则应用了模糊效果，模糊半径为5像素。你可以通过调整blur()函数中的数值来改变模糊的强度。

- 阅读更多 -

网站开发进阶CSS3媒体查询@media_css @media only

System

2024-08-08

所有,css3

在CSS中，媒体查询（Media Queries）是一种强大的工具，可以让你根据设备的特性（如屏幕尺寸、分辨率等）来应用不同的样式规则。

媒体查询可以使用两种方式：

通过@media指令在CSS中直接使用。
在HTML文档的<link>标签中使用。

下面是使用@media指令在CSS中的一个例子：




/* 应用于所有设备的基础样式 */
body {
  background-color: lightblue;
  color: white;
  font-size: 16px;
}
 
/* 仅当屏幕宽度至少为 600px 时应用以下样式 */
@media only screen and (min-width: 600px) {
  body {
    background-color: darkblue;
    color: black;
    font-size: 20px;
  }
}
 
/* 仅当设备是打印机时应用以下样式 */
@media print {
  body {
    background-color: white;
    color: black;
    font-size: 12px;
  }
}

在HTML中使用媒体查询的例子：




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

在上述例子中，print.css样式表仅在打印文档时应用。

注意：在实际开发中，媒体查询通常用于响应式设计，以便让网站在不同的设备上都可以良好显示，提高用户体验。

- 阅读更多 -

css浮动总结

System

2024-08-08

所有,css3

CSS 的 float 属性用于创建浮动元素，可以让元素向左或向右浮动，并且可以与其他文本或元素的浮动元素形成环境，进行“文字环绕”的效果。

float 属性的可能值：

none：元素不浮动（默认值）。
left：元素向左浮动。
right：元素向右浮动。

使用 float 需要注意以下几点：

浮动元素后的元素会尝试填补浮动元素的空间，导致的现象是文本环绕。
如果父元素的高度不足以包含所有浮动的子元素，则父元素的高度可能不会被撑开。
浮动元素之后的元素可能会被浮动元素“遮挡”，需要使用清除浮动来解决这个问题。

解决浮动引起的父元素高度塌陷的方法：

使用 overflow 属性设置为 auto 或 hidden（如果你确定内容不会被裁剪）。
在父元素的最后添加一个“清除浮动”的元素，并为其设置 clear 属性为 both。
使用伪元素进行清除浮动，这是一种更为现代的方法。

例子：




/* 方法1：使用overflow */
.parent {
  overflow: auto; /* 或者使用 hidden */
}
 
/* 方法2：添加一个清除浮动的元素 */
.clearfix {
  clear: both;
}
 
/* 方法3：使用伪元素清除浮动 */
.parent::after {
  content: "";
  display: table;
  clear: both;
}

在 HTML 中使用：




<!-- 方法1 或 方法2 -->
<div class="parent">
  <div class="child" style="float: left;">左浮动</div>
  <div class="child" style="float: right;">右浮动</div>
  <div class="clearfix"></div> <!-- 清除浮动 -->
</div>
 
<!-- 方法3 -->
<div class="parent">
  <div class="child" style="float: left;">左浮动</div>
  <div class="child" style="float: right;">右浮动</div>
  <!-- 伪元素自动清除浮动 -->
</div>

以上三种方法都可以解决由于浮动元素引起的父元素高度塌陷问题。在实际开发中，可以根据具体情况选择最适合的方法。

- 阅读更多 -

re:从0开始的CSS学习之路 11. 盒子垂直布局

System

2024-08-08

所有,css3




/* 设置基本的HTML元素样式，确保良好的跨浏览器兼容性 */
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;
}
 
/* 使用CSS3的flexbox布局实现盒子垂直布局 */
.container {
    display: flex; /* 使用flexbox布局 */
    flex-direction: column; /* 设置主轴方向为垂直 */
}
 
.box {
    margin: 10px; /* 设置盒子之间的间距 */
    padding: 20px; /* 设置盒子内部的填充 */
    background-color: #f0f0f0; /* 设置盒子的背景颜色 */
}

这段代码展示了如何使用flexbox来实现盒子的垂直布局。.container 类使用了 display: flex 属性，并通过 flex-direction: column 设置了主轴方向为垂直，从而使其子元素（如 .box 类）沿着垂直方向排列。

- 阅读更多 -

解决css文字重叠问题

System

2024-08-08

所有,css3

要解决CSS文字重叠问题，可以使用不同的技巧，以下是一些常用的方法：

使用z-index提高层级：如果元素重叠是由于它们在同一个层级上，可以通过调整z-index属性来改变堆叠顺序。




.higher {
  z-index: 1;
}
 
.lower {
  z-index: -1;
}

使用定位（Positioning）：可以使用绝对定位（position: absolute;）来将一个元素放置在另一个元素之上或之下。




.container {
  position: relative;
}
 
.top {
  position: absolute;
  top: 0;
}
 
.bottom {
  position: absolute;
  bottom: 0;
}

使用margin或padding调整间距：如果元素重叠是由于它们紧挨着彼此，可以通过调整外边距（margin）或内边距（padding）来创建足够的空间。




.spaced-out {
  margin-bottom: 10px; /* 调整间距 */
}

使用visibility属性：如果你想保持元素的位置，但不显示它们，可以使用visibility: hidden;。




.invisible {
  visibility: hidden;
}

使用opacity属性：与visibility类似，opacity: 0;也会隐藏元素，但它还会影响布局（即它仍然占据空间）。




.transparent {
  opacity: 0;
}

使用display: none;：这会完全隐藏元素，并且不会保留它在文档流中的空间。




.hidden {
  display: none;
}

选择哪种方法取决于特定的上下文和需求。通常，z-index用于处理重叠的元素，而定位则用于精确地控制元素的位置。其他属性（如margin、padding、visibility和opacity）可以用来控制元素的可见性而不影响布局。

- 阅读更多 -

css开发技巧（部分结合sass使用）

System

2024-08-08

所有,css3




/* 定义一个基本的文本样式 */
.base-text {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}
 
/* 使用Sass的嵌套规则来简化样式定义 */
.theme-a {
  /* 定义主题颜色 */
  $primary-color: #3498db;
  $secondary-color: #2ecc71;
 
  /* 定义按钮样式 */
  .button {
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: $primary-color;
    color: white;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
 
    &:hover {
      background-color: darken($primary-color, 10%);
    }
  }
 
  /* 定义链接样式 */
  .link {
    color: $primary-color;
    text-decoration: none;
 
    &:hover {
      text-decoration: underline;
    }
  }
}
 
/* 使用Sass的mixin功能来定义一个自动居中的mixin */
@mixin center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 
/* 使用mixin来简化样式应用 */
.logo {
  width: 200px;
  @include center-block;
}

这个代码示例展示了如何在CSS中使用Sass的一些高级特性，如变量、嵌套规则、mixin和函数，以及如何简化和重用样式代码。

- 阅读更多 -

CSS3实现鼠标悬停图片缓慢放大效果

System

2024-08-08

所有,css3

在CSS中，我们可以使用transform: scale()函数来实现图片的放大效果，并结合:hover伪类来实现鼠标悬停时的放大效果。以下是一个简单的例子：

HTML:




<div class="image-container">
  <img src="image.jpg" alt="Sample Image">
</div>

CSS:




.image-container {
  overflow: hidden; /* 确保放大后的图片不超出容器 */
  display: inline-block;
}
 
.image-container img {
  transition: transform 0.3s ease; /* 定义过渡效果 */
  max-width: 100%; /* 限制图片宽度不超过容器宽度 */
  vertical-align: middle; /* 确保图片垂直居中 */
}
 
.image-container:hover img {
  transform: scale(1.1); /* 鼠标悬停时放大1.1倍 */
}

在这个例子中，.image-container 是一个用于包裹图片的容器，它会限制图片的大小，并且在图片上应用一个过渡效果，使得放大缩小变化时不会突兀。.image-container:hover img 是当鼠标悬停在 .image-container 上时，内部 img 元素的样式变化，使图片放大1.1倍。

- 阅读更多 -