Lihatlah! 10 petua CSS praktikal yang patut dikumpul

Artikel ini akan berkongsi dengan anda 10 kemahiran penggunaan CSS yang hebat untuk memudahkan pembangunan bahagian hadapan. Saya harap ia akan membantu semua orang.

Saya akan membawakan anda 10 petua CSS yang hebat yang akan memudahkan anda sebagai pembangun, terutamanya jika anda seorang pemula. (Pembelajaran yang disyorkan: tutorial video css)

1 Bagaimana untuk membetulkan tatal mendatar pada halaman web dalam CSS

Jika anda menggayakan halaman web dan melihat mendatar di bahagian. bar skrol bawah, anda perlu mencari elemen dengan lebar lebih besar daripada lebar skrin yang tersedia.

Sebagai contoh, dalam tangkapan skrin di bawah, anda boleh melihat bahawa terdapat tatal mendatar:

Anda boleh menggunakan pemilih universal (*) dengan menggunakan Peraturan berikut untuk mencari elemen penyebab:

* { 
     border: 2px solid red;
}

Ini akan menggunakan sempadan merah 2 piksel pada setiap elemen pada halaman, supaya anda boleh mengenal pasti unsur yang perlu dilaraskan dengan mudah.

Selepas menggunakan gaya di atas, inilah hasilnya:

Anda dapat melihat bahawa gelombang hijau kedua menyebabkan penatalan mendatar. Ini kerana lebar ditetapkan kepada 1400 piksel, iaitu lebih lebar daripada lebar skrin 1200 piksel yang tersedia.

.wave2 {
  width: 1400px;
}

Menetapkan lebar kembali kepada 1200 piksel atau mengalih keluarnya sepenuhnya akan menyelesaikan masalah supaya tiada lagi penatalan mendatar.

2. Cara mengatasi gaya dalam CSS

Dalam beberapa kes tertentu, anda mungkin mahu mengatasi gaya tertentu yang telah wujud (mis. daripada pustaka ). Atau mungkin anda mempunyai templat dengan lembaran gaya yang besar dan anda perlu menyesuaikan bahagian tertentu padanya.

Dalam kes ini, anda boleh menggunakan peraturan kekhususan CSS, !important atau anda boleh menggunakan pengecualian di hadapan peraturan.

Dalam contoh di bawah, !important menyediakan varian hijau zamrud #2ecc71 (warna kegemaran saya) untuk setiap elemen h1:

h1 {
    color: #2ecc71 !important;
}

Tetapi berhati-hati - Menggunakan pengecualian ini dianggap amalan buruk dan anda harus mengelakkannya jika boleh.

Kenapa? Nah, !important sebenarnya memecahkan sifat CSS yang melata, yang menjadikan penyahpepijatan lebih sukar.

Kes penggunaan terbaik!important ialah menggunakannya untuk mengenal pasti isu dalam pangkalan kod anda apabila berurusan dengan sejumlah besar helaian gaya templat atau kod warisan. Anda kemudian boleh menyelesaikan masalah dengan cepat dan menghapuskan anomali.

Selain menggunakan !important untuk menggunakan gaya, anda boleh ketahui lebih lanjut tentang keistimewaan CSS dan menggunakan peraturan ini.

3. Cara membuat segi empat sama dengan CSS

Jika anda ingin membuat segi empat sama tanpa terlalu banyak mengacaukan lebar dan tinggi, anda boleh melakukannya dengan menetapkan warna latar belakang, lebar yang dikehendaki dan nisbah aspek Menetapkan gaya div [atau span mengikut kesesuaian] dengan nombor yang sama. Nombor pertama adalah dimensi atas dan bawah, yang kedua adalah kiri dan kanan.

Anda boleh melangkah lebih jauh dengan bermain dengan dua nombor ini untuk membuat segi empat tepat dan mana-mana segi empat sama yang anda mahukan.

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

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

4 Cara memusatkan div menggunakan CSS

Apabila lembaran gaya semakin besar, memusatkan div menjadi sangat sukar. Untuk menggayakan mana-mana div, tetapkan ia untuk menyekat paparan, auto-margin dan lebar di bawah 100%.

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

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

5 Cara mengalih keluar padding tambahan dari kotak dalam CSS

Menggunakan box-sizing: border-box akan memastikan kotak itu ditetapkan Lebar dan padding tidak akan menambah padding tambahan pada kotak. Ini akan membantu reka letak anda kelihatan lebih baik.

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

6. Cara membuat drop cap menggunakan CSS

Anda boleh menggunakan pseudo-element awal untuk membuat drop cap. Ya! Tudung titis yang anda lihat dalam surat khabar.

Pilih elemen HTML yang sesuai dan gunakan gaya seperti berikut:

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

Atas ialah kandungan terperinci Lihatlah! 10 petua CSS praktikal yang patut dikumpul. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!