Look! 10 practical CSS tips worth collecting

This article will share with you 10 great CSS usage skills to make front-end development easier. Come and collect it. I hope it will be helpful to everyone!

I’m going to bring you 10 great CSS tips that will make it easier for you as a developer, especially if you are a beginner. (Recommended learning: css video tutorial)

1. How to fix horizontal scrolling on a web page in CSS

If you are setting the web page style and see horizontal scrolling at the bottom Scrollbar, you need to find an element with a width greater than the available screen width.

For example, in the screenshot below, you can see that there is a horizontal scroll:

You can use the universal selector (*) by applying The following rules to find the culprit element:

* { 
     border: 2px solid red;
}

This applies a 2 pixel red border to every element on the page, so you can easily identify the elements that need adjusting.

After applying the above styles, the result is as follows:

You can see that the second green wave is causing horizontal scrolling. This is because the width is set to 1400 pixels, which is wider than the available screen width of 1200 pixels.

.wave2 {
  width: 1400px;
}

Setting the width back to 1200 pixels or removing it completely will fix the problem so there is no more horizontal scrolling.

2. How to override styles in CSS

In some specific cases, you may want to override a specific style that already exists (e.g. from a library) . Or maybe you have a template with a large stylesheet and you need to customize specific parts of it.

In these cases, you can apply rules for CSS specificity, !importantor you can use exceptions in front of the rules.

In the example below, !important gives each h1 element an emerald green variant of #2ecc71 (my favorite color):

h1 {
    color: #2ecc71 !important;
}

But NOTE - Using this exception is considered bad practice and you should avoid it if possible.

Why? Well, !important actually breaks the cascading nature of CSS, which makes debugging more difficult.

The best use case!important is to use it to identify issues in your code base when dealing with large amounts of template stylesheets or legacy code. You can then quickly fix the problem and eliminate the anomaly.

In addition to using !important to apply styles, you can Learn more about the peculiarities of CSS and apply these rules.

3. How to make a square with CSS

If you want to make a square without having to mess with the width and height too much, you can do this by setting the background color, desired width, and aspect ratio Sets the style of a div [or span as appropriate] with an equal number. The first number is the top and bottom dimensions, the second is the left and right.

You can take it a step further by playing with these two numbers to make rectangles and any square you want.

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

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

4. How to center a div using CSS

As stylesheets get larger, centering a div can become very difficult. To style any div, set it to block display, auto-margins, and a width below 100%.

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

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

##5. How to remove extra padding from boxes in CSS

Use

box-sizing: border-box Make sure you don't add extra padding to the box when setting the width and padding for the box. This will help your layout look better.

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

6. How to make a drop cap using CSS

You can use the initial pseudo-element to make a drop cap. Yes! The drop caps you see in newspapers.

Select the appropriate HTML element and apply the style as follows:

 <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>

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

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前端入门教程）

The above is the detailed content of Look! 10 practical CSS tips worth collecting. For more information, please follow other related articles on the PHP Chinese website!