Rumah > Artikel > hujung hadapan web > 7 Hack CSS Setiap Pembangun Perlu Tahu
7 Hack CSS Setiap Pembangun Perlu Tahu
- WBOYke hadapan
- 2023-08-29 14:53:02606semak imbas
CSS ialah singkatan daripada Cascading Style Sheets. Ia digunakan untuk membuat laman web yang menarik secara visual. Menggunakannya akan memudahkan proses mencipta halaman web yang berkesan.
Reka bentuk laman web adalah penting. Ia meningkatkan estetika dan kualiti keseluruhan tapak web dengan memudahkan interaksi pengguna. Walaupun mungkin untuk membuat tapak web tanpa CSS, penggayaan diperlukan kerana tiada pengguna mahu berinteraksi dengan tapak web yang membosankan dan tidak menarik. Dalam artikel ini, kami membincangkan 7 hacks CSS yang setiap pembangun akan perlukan pada satu ketika dalam perjalanan reka bentuk web mereka.
Buat imej responsif menggunakan CSS
Menggunakan pelbagai teknik yang dikenali sebagai imej responsif, imej yang betul boleh dimuatkan untuk resolusi peranti, orientasi, saiz skrin, sambungan rangkaian atau reka letak halaman. Imej tidak boleh diregangkan oleh penyemak imbas agar sesuai dengan reka letak halaman, dan memuat turun imej tidak boleh mengambil masa terlalu lama atau menggunakan terlalu banyak trafik rangkaian. Ini meningkatkan pengalaman pengguna apabila imej dimuatkan dengan cepat dan jelas kepada mata manusia. Untuk mencipta imej responsif, sentiasa tulis sintaks berikut −
img{
max-width: 100%;
height: auto;
}
Teknik paling mudah untuk mencipta foto dengan resolusi tinggi ialah menetapkan nilai lebar dan ketinggiannya kepada separuh saiz sebenar.
Letakkan kandungan elemen di tengah
Jika anda ingin menjajarkan tengah kandungan mana-mana elemen, terdapat pelbagai cara untuk melakukannya. Yang paling mudah disebutkan di bawah.
Atribut kedudukan
Gunakan sifat kedudukan CSS untuk memusatkan kandungan dengan sintaks berikut:
element{
position: absolute;
left: value;
top: value;
}
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-align: center;
}
div{
position: absolute;
left: 45%;
}
</style>
</head>
<body>
<h1> Position property </h1>
<div> This is an example. </div>
</body>
</html>
Gunakan tag
Kandungan yang hendak dijajarkan ke tengah hendaklah ditulis di dalam tag
Gunakan atribut penjajaran teks
Jika kandungan yang anda ingin jajarkan tengah hanya mengandungi teks, anda boleh menggunakan atribut textalign sahaja.
text-align: center;
Gunakan pemilih universal
Pemilih asterisk CSS (*), juga dikenali sebagai pemilih universal CSS, digunakan untuk memilih atau memadankan semua elemen atau bahagian elemen keseluruhan halaman web sekaligus. Setelah dipilih, anda boleh menggunakan mana-mana sifat tersuai CSS untuk menggayakannya dengan sewajarnya. Ia sepadan dengan mana-mana jenis elemen HTML seperti ,
Pemilih universal sebenarnya digunakan untuk menggayakan setiap elemen dalam halaman web. Selalunya, mengekalkan format gaya khusus untuk keseluruhan halaman adalah sukar kerana lalai yang ditetapkan oleh penyemak imbas. Ia membolehkan pembangun menyediakan gaya lalai untuk halaman web. Penggunaan yang paling biasa adalah untuk menggayakan semua elemen halaman web bersama-sama.
Tatabahasa
*{
Css declarations
}
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
*{
color: green;
text-align: center;
font-family: Imprint MT shadow;
}
</style>
</head>
<body>
<h1>Css Universal Selector</h1>
<h2>This is an example. It shows how to style the whole document altogether.</h2>
<div>
<p class = "para1"> This is the first paragraph. </p>
<p class= "para2"> This is the second paragraph </p>
</div>
</body>
</html>
Timpa gaya CSS
Biasanya, kami menggunakan kelas CSS untuk mengatasi gaya CSS. Walau bagaimanapun, jika anda ingin menyatakan bahawa gaya tertentu mesti digunakan pada elemen, kemudian gunakan !penting.
Tatabahasa
element{
property: value !important;
}
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color: blue;
}
.demo {
color: red !important;
}
</style>
</head>
<body>
<h2> This is an example #1 </h2>
<h2> This is an example #2 </h2>
<h2> This is an example #3 </h2>
<h2 class= "demo"> This is an example #4 </h2>
<h2> This is an example #5 </h2>
</body>
</html>
Tingkah laku tatal
Pengalaman pengguna yang baik dan cekap adalah faktor paling kritikal dalam reka bentuk web. Tidak ada gunanya membuat laman web jika laman web anda tidak mesra pengguna. Untuk memastikan pengalaman pengguna yang lancar, anda harus menambahkan kesan tatal yang lancar pada tapak web anda.
Atributscroll-behaviour membolehkan pembangun menentukan gelagat halaman semasa menatal.
html{
scroll-behaviour: smooth;
}
Tambah pertanyaan media dan jadikan reka letak responsif
Apabila jenis media sepadan dengan jenis peranti yang dokumen dipaparkan, pertanyaan media dengan jenis media tersebut akan digunakan untuk menggunakan gaya pada kandungan.
@media (max-width: 100px){
{CSS rules….
}
}
Jika tapak web anda perlu dilihat pada peranti yang berbeza, sebaiknya gunakan unit port pandangan. Ia memastikan kandungan diubah saiz secara automatik mengikut port pandangan.
vw– lebar viewport
vh ——Tinggi viewport
v minit– Minimum viewport
v maks– Maksimum port pandangan
CSS 弹性盒
一个CSS Flexbox是一个包含多个flex元素的容器。这些flex元素可以根据需要排列成行或列。Flex项目是flex容器的子元素，它是其父元素。使用CSS flexbox可以使每个元素具有精美和吸引人的外观。
display:flex帮助开发者让每一个组件都显得合适、可爱。它通过对齐元素的子元素将它们排列成行或列。
它将父元素中的子元素对齐到行或列中。
示例
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background-color: #097969;
align-items: center;
justify-content: center;
width: 60%;
}
.demo1, .demo2, .demo3, .demo4 {
background-color: yellow;
height : 50px;
width: 90%;
margin: 10px;
padding: 12px;
font-size: 17px;
font-weight: bold;
font-family: verdana;
text-align: center;
align-items: center;
color: brown;
}
.demo1{
order: 1;
}
.demo2{
order: 4;
}
.demo3{
order: 2;
}
.demo4{
order: 3;
}
</style>
</head>
<body>
<h1>Order of Flex Items</h1>
<p>The following list of flex elements has them in an ordered arrangement thanks to the order property:</p>
<div class="flex-container">
<div class= "demo1" > This </div>
<div class= "demo2"> example </div>
<div class= "demo3"> is </div>
<div class= "demo4"> an </div>
</div>
</body>
</html>
Atas ialah kandungan terperinci 7 Hack CSS Setiap Pembangun Perlu Tahu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!