12 petua CSS bernilai penanda halaman! !

Artikel ini berkongsi dengan anda 12 petua CSS yang patut anda kumpulkan, anda boleh cuba mengingatinya, yang boleh menyelamatkan nyawa dalam saat-saat genting! Semoga ia membantu semua orang!

1 Gunakan Shape-out untuk membengkokkan teks di sekeliling imej terapung

Ia ialah sifat CSS yang membenarkan menetapkan bentuk. Ia juga membantu menentukan kawasan di mana teks mengalir. kod css:

.any-shape {
  width: 300px;
  float: left;
  shape-outside: circle(50%);
}

2. Gabungan ajaib

Gabungan kecil ini sebenarnya boleh menghalang kebanyakan ralat reka letak yang anda hadapi dalam HTML. Kami benar-benar tidak mahu peluncur mendatar atau item diposisikan secara mutlak untuk melakukan apa yang mereka mahu, dan kami juga tidak mahu margin rawak dan padding di mana-mana sahaja. Jadi inilah gabungan ajaib anda.

* {
padding: 0;
margin: 0;
max-width: 100%;
overflow-x: hidden;
position: relative;
display: block;
}

Kadangkala "display:block" tidak berguna, tetapi dalam kebanyakan kes anda akan menganggap <a></a> dan <span></span> sebagai blok seperti blok lain. Jadi, dalam kebanyakan kes, ia sebenarnya akan membantu anda!

3. Pisahkan HTML dan CSS

Ini lebih kepada jenis teknik "aliran kerja". Saya mengesyorkan anda membuat fail CSS yang berbeza semasa membangunkan dan hanya menggabungkannya pada penghujungnya. Contohnya, satu untuk desktop, satu untuk mudah alih, dsb. Akhir sekali, anda mesti menggabungkannya kerana ini akan membantu meminimumkan bilangan permintaan HTTP ke tapak web anda.

Prinsip yang sama digunakan untuk HTML. Jika anda tidak membangun dalam persekitaran SPA seperti Gatsby, PHP boleh digunakan untuk memasukkan coretan kod HTML. Sebagai contoh, anda ingin menyimpan folder "/modules" yang akan mengandungi bar navigasi, pengaki, dsb. dalam fail berasingan. Jadi jika sebarang perubahan perlu dibuat, anda tidak perlu mengeditnya pada setiap halaman. Lebih banyak modulariti, lebih baik hasilnya.

4. ::Huruf awal

Ia menggunakan gaya pada huruf pertama elemen peringkat blok. Oleh itu, kita boleh membawa kesan yang kita biasa dengan daripada majalah cetak atau kertas. Tanpa unsur pseudo ini, kita perlu mencipta banyak rentang untuk mencapai kesan ini. Contohnya:

Bagaimana ini dilakukan? Kodnya adalah seperti berikut:

p.intro:first-letter {
  font-size: 100px;
  display: block;
  float: left;
  line-height: .5;
  margin: 15px 15px 10px 0 ;
}

5 Empat sifat teras

Animasi CSS menyediakan cara yang agak mudah untuk peralihan antara sejumlah besar sifat. Antara muka animasi yang baik bergantung pada pengalaman yang lancar dan lancar. Untuk mengekalkan prestasi yang baik dalam garis masa animasi kami, kami mesti mengehadkan sifat animasi kami kepada empat teras berikut:

• skala - transform:scale(2)
• Putar - transform:putar(180deg)
• Kedudukan - transform:translateX(50rem)
• Tiada Ketelusan - kelegapan: 0.5

Sifat animasi seperti jejari jidar, tinggi/lebar atau jidar mempengaruhi kaedah reka letak penyemak imbas, manakala animasi latar belakang, warna atau bayang kotak mempengaruhi kaedah lukisan penyemak imbas. Semua ini akan mengurangkan FPS (FramesPerSecond) anda dengan ketara. Anda boleh menggunakan sifat ini untuk menghasilkan beberapa kesan yang menarik, tetapi ia harus digunakan dengan berhati-hati untuk mengekalkan prestasi yang baik.

6. Gunakan pembolehubah untuk kekal konsisten

Cara yang baik untuk kekal konsisten ialah menggunakan pembolehubah CSS atau pembolehubah prapemproses untuk mentakrifkan pemasaan animasi.

:root{ timing-base: 1000;}

Menetapkan animasi garis dasar atau tempoh peralihan tanpa menentukan sel memberi kita kefleksibelan untuk memanggil tempoh ini dalam fungsi calc(). Tempoh ini mungkin berbeza daripada pembolehubah CSS asas kami, tetapi ia akan sentiasa menjadi pengubahsuaian mudah bagi nombor ini dan akan sentiasa mengekalkan pengalaman yang konsisten.

7. Kecerunan Kon

Pernah terfikir sama ada anda boleh membuat carta pai menggunakan CSS sahaja? Berita baiknya, anda sebenarnya boleh! Ini boleh dilakukan menggunakan fungsi kecerunan kon. Fungsi ini mencipta imej yang terdiri daripada kecerunan dengan set peralihan warna berputar di sekitar titik tengah. Anda boleh melakukan ini menggunakan baris kod berikut:

.piechart {
  background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d  56% 100%);
  border-radius: 50%;
  width: 300px;
  height: 300px;
}

8. Menukar warna pemilihan teks

Untuk menukar warna pemilihan teks kami menggunakan ::selection. Ia ialah elemen pseudo yang ditindih pada peringkat penyemak imbas untuk menggantikan warna serlahan teks dengan warna pilihan anda. Anda boleh melihat kesannya dengan memilih kandungan dengan kursor anda.

::selection {
     background-color: #f3b70f;
 }

9. Kesan Tuding

Kesan tuding biasanya digunakan pada butang, pautan teks, bahagian sekat tapak, ikon, dsb. Jika anda ingin menukar warna apabila seseorang menuding di atasnya, hanya gunakan CSS yang sama tetapi tambahkan :hover padanya dan tukar gaya. Begini cara anda melakukannya;

.m h2{ 
    font-size:36px; 
    color:#000; 
    font-weight:800; 
} 
.m h2:hover{ 
    color:#f00; 
}

Ini akan menukar warna teg h2 anda daripada hitam kepada merah apabila seseorang menuding di atasnya. Ia berguna kerana anda tidak perlu mengisytiharkan saiz fon atau berat sekali lagi jika anda tidak mahu menukarnya. Ia hanya mengubah mana-mana sifat yang anda tentukan.

10 Drop Shadow

Tambah atribut ini untuk membawa kesan bayang yang lebih baik kepada imej lutsinar. Anda boleh melakukan ini menggunakan baris kod yang diberikan.

.img-wrapper img{
          width: 100% ;
          height: 100% ;
          object-fit: cover ;
          filter: drop-shadow(30px 10px 4px #757575);
 }

11. 使用放置项居中 Div

居中 div 元素是我们必须执行的最可怕的任务之一。但不要害怕我的朋友，你可以用几行 CSS 将任何 div 居中。只是不要忘记设置display:grid; 对于父元素，然后使用如下所示的 place-items 属性。

main{
     width: 100% ;
      height: 80vh ;
      display: grid ;
      place-items: center center;
}

12. 使用 Flexbox 居中 Div

我们已经使用地点项目将项目居中。但是现在我们解决了一个经典问题，使用 flexbox 将 div 居中。为此，让我们看一下下面的示例：

<div class="center h-48">
  <div></div>
</div>

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #b8b7cd;
}

首先，我们需要确保父容器持有圆，即 flex-container。在它里面，我们有一个简单的 div 来制作我们的圆圈。我们需要使用以下与 flexbox 相关的重要属性：

• display: flex; 这确保父容器具有 flexbox 布局。
• align-items: center; 这可确保 flex 子项与横轴的中心对齐。
• justify-content: center; 这确保 flex 子项与主轴的中心对齐。

之后，我们就有了常用的圆形 CSS 代码。现在这个圆是垂直和水平居中的，试试吧！

更多编程相关知识，请访问：编程视频！！

Atas ialah kandungan terperinci 12 petua CSS bernilai penanda halaman! !. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!