바라보다! 수집할 가치가 있는 10가지 실용적인 CSS 팁

이 기사에서는 프런트엔드 개발을 더 쉽게 만드는 10가지 훌륭한 CSS 사용 기술을 공유하겠습니다. 모두에게 도움이 되기를 바랍니다.

저는 개발자로서, 특히 초보자인 경우 더 쉽게 만들 수 있는 10가지 멋진 CSS 팁을 가져오겠습니다. (추천 학습: css 비디오 튜토리얼)

1. CSS에서 웹 페이지의 가로 스크롤 문제를 해결하는 방법

웹 페이지의 스타일을 지정하고 하단에 가로 스크롤 막대가 보이면 다음을 사용하여 찾아야 합니다. 사용 가능한 화면 너비 요소보다 너비가 더 큽니다.

예를 들어 아래 스크린샷에는 가로 스크롤이 있는 것을 볼 수 있습니다.

범용 선택기(*)를 사용하여 다음 규칙을 적용하면 범인 요소를 찾을 수 있습니다.

* { 
     border: 2px solid red;
}

이것은 2픽셀 빨간색 테두리가 페이지의 모든 요소에 적용되므로 조정이 필요한 요소를 쉽게 찾을 수 있습니다.

위 스타일을 적용한 후의 결과는 다음과 같습니다.

두 번째 녹색 물결이 가로 스크롤을 유발하는 것을 볼 수 있습니다. 너비를 1400픽셀로 설정했기 때문인데, 이는 사용 가능한 화면 너비인 1200픽셀보다 더 넓습니다.

.wave2 {
  width: 1400px;
}

너비를 다시 1200픽셀로 설정하거나 완전히 제거하면 문제가 해결되어 더 이상 가로 스크롤이 발생하지 않습니다.

2. CSS에서 스타일을 재정의하는 방법

어떤 특정한 경우에는 이미 존재하는 특정 스타일(예: 라이브러리)을 재정의할 수 있습니다. 또는 큰 스타일시트가 포함된 템플릿이 있고 템플릿의 특정 부분을 사용자 정의해야 할 수도 있습니다.

이 경우 CSS 특정 규칙을 적용하거나 !important하거나 규칙 앞에 예외를 사용할 수 있습니다. !important也可以在规则前面使用异常。

在下面的示例中，!important为每个 h1 元素提供#2ecc71（我最喜欢的颜色）的翠绿色变体：

h1 {
    color: #2ecc71 !important;
}

但要注意——使用这个异常被认为是不好的做法，你应该尽可能避免它。

为什么？嗯，!important实际上破坏了 CSS 的级联特性，它会使调试变得更加困难。

最好的用例!important是在处理大量模板样式表或旧代码时，使用它来识别代码库中的问题。然后你可以快速修复问题并消除异常。

除了使用 !important 来应用样式之外，您还可以了解更多关于 CSS 的特殊性并应用这些规则。

3. 如何用 CSS 制作正方形

如果你想制作一个正方形而不必过多地弄乱宽度和高度，您可以通过设置背景颜色、所需宽度和纵横比来设置 div [或视情况而定的跨度] 的样式与相等的数字。第一个数字是顶部和底部尺寸，第二个是左右。

你可以通过玩这两个数字来制作矩形和任何你想要的正方形，从而更进一步。

<div class="square"></div>

.square {
  background: #2ecc71;
  width: 25rem;
  aspect-ratio: 1/1;
}

4. 如何使用 CSS 使 div 居中

随着样式表变大，将 div 居中会变得非常困难。要设置任何 div 的样式，请为其设置块显示、自动边距和低于 100% 的宽度。

<div class="center"></div>

.center {
    background-color: #2ecc71;
    display: block;
    margin: auto;
    width: 50%;
    height: 200px;
}

5. 如何在 CSS 中移除盒子中的额外填充

使用box-sizing: border-box

아래 예에서 !important는 각 h1 요소에 대해 #2ecc71(내가 가장 좋아하는 색상)의 에메랄드 그린 변형을 제공합니다.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

하지만 주의하세요. 이 예외를 사용하는 것은 나쁜 습관으로 간주됩니다. 가능하면 피해야 합니다.

왜? 글쎄, !important는 실제로 CSS의 계단식 특성을 깨뜨려 디버깅을 더 어렵게 만듭니다.

가장 좋은 사용 사례 !important는 대량의 템플릿 스타일시트나 레거시 코드를 처리할 때 코드 기반의 문제를 식별하는 데 이를 사용하는 것입니다. 그러면 신속하게 문제를 해결하고 이상 현상을 제거할 수 있습니다.

스타일을 적용하는 데 !important를 사용하는 것 외에도

CSS의 특징에 대해 자세히 알아보고🎜 이러한 규칙을 적용할 수도 있습니다. 🎜

3. CSS로 정사각형을 만드는 방법 🎜🎜 너비와 높이를 너무 많이 조정하지 않고 정사각형을 만들고 싶다면 배경색을 설정하면 됩니다. , 원하는 너비 및 종횡비를 사용하여 div [또는 적절하게 범위] 스타일을 동일하게 지정합니다. 첫 번째 숫자는 상단 및 하단 치수이고, 두 번째 숫자는 왼쪽 및 오른쪽 치수입니다. 🎜🎜이 두 숫자를 사용하여 직사각형과 원하는 정사각형을 만들면 한 단계 더 발전할 수 있습니다. 🎜

 <p class="texts">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia officia nisi
      veniam laboriosam? In excepturi ea inventore eligendi iusto! Incidunt
      molestiae quas molestias, nesciunt voluptate aut vitae odio corrupti
      quisquam laudantium aperiam consequuntur voluptas eum? Velit, eligendi ad
      laboriosam beatae corporis perferendis tempore consequatur sint rem quam,
      quae, assumenda rerum.
 </p>

rrree🎜🎜< h2 data-id="heading-3">4. CSS를 사용하여 div를 중앙에 배치하는 방법🎜🎜스타일시트가 커질수록 div를 중앙에 배치하는 것이 매우 어려워집니다. div의 스타일을 지정하려면 표시 차단, 자동 여백 및 너비를 100% 미만으로 설정하세요. 🎜

p.texts::first-letter {
  font-size: 200%;
  color: #2ecc71;
}

rrree🎜🎜< h2 data-id="heading-4">5. CSS의 상자에서 추가 패딩을 제거하는 방법 🎜🎜 box-sizing: border-box를 사용하면 너비와 패딩이 설정됩니다. 상자 상자에 추가 패딩이 추가되지 않습니다. 이렇게 하면 레이아웃이 더 좋아 보이는 데 도움이 됩니다. 🎜

<p class="upper">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
      minima.
</p>
<p class="lower">LOREM IPSUM DOLOR SIT AMET</p>

🎜6. CSS를 사용하여 드롭 캡을 만드는 방법🎜🎜초기 의사 요소를 사용하여 드롭 캡을 만들 수 있습니다. 예! 신문에서 볼 수 있는 drop cap. 🎜🎜적절한 HTML 요소를 선택하고 다음과 같이 스타일을 적용하세요. 🎜

.upper {
  text-transform: uppercase;
}

.lower {
  text-transform: lowercase;
}

:root {
  --text-color: hsl(145, 63%, 49%);
}

p {
  color: var(--text-color);
}

🎜🎜🎜

7. 如何在 CSS 中将文本设为大写或小写

大写或小写字母不必直接来自您的 HTML。您可以在 CSS 中强制任何文本为大写或小写。

我希望将来会有 SentenceCase 和 tOGGLEcASE 的选项。但是你为什么要写一个文本 toOGGLEcASE 呢？

<p class="upper">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
      minima.
</p>
<p class="lower">LOREM IPSUM DOLOR SIT AMET</p>

.upper {
  text-transform: uppercase;
}

.lower {
  text-transform: lowercase;
}

8. 如何声明变量以保持 CSS DRY

变量？是的。您可以在 CSS 中声明变量。

当您声明变量时，您可以在许多其他样式中使用它们。如果您有任何要更改的内容，您只需更改该变量，结果将反映在使用它们的任何地方。这将有助于保持您的 CSS 代码干燥（不要重复自己）。

您可以通过将变量放置在根范围内来声明变量，以便它在样式表中是全局的。要使用您的变量，您可以将属性放在“var”关键字旁边的大括号内。

通常在样式表的顶部声明变量 - 即在重置之前。

:root {
  --text-color: hsl(145, 63%, 49%);
}

p {
  color: var(--text-color);
}

9. 如何使用:before和:after选择器向你的 CSS 添加额外的内容

CSS 中的:before选择器可帮助您在元素之前插入内容：

<p class="texts">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
  minima.
</p>

p.texts::before {
  content: "Some Lorem Texts: ";
  color: #2ecc71;
  font-weight: bolder;
}

选择:after器做同样的事情，但它在元素之后插入内容：

p.texts::after {
  content: " Those were Some Lorem Texts";
  color: #2ecc71;
  font-weight: bolder;
}

10. 如何使用纯 CSS 实现平滑滚动

您可以在网页上应用平滑滚动，而无需编写复杂的 JavaScript 或使用插件。因此，如果您有链接到网页上多个部分的锚标记并单击它们，则滚动是平滑的。

html {
  scroll-behavior: smooth;
}

（学习视频分享：web前端入门教程）

위 내용은 바라보다! 수집할 가치가 있는 10가지 실용적인 CSS 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!