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.
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.
Jika anda ingin menjajarkan tengah kandungan mana-mana elemen, terdapat pelbagai cara untuk melakukannya. Yang paling mudah disebutkan di bawah.
Gunakan sifat kedudukan CSS untuk memusatkan kandungan dengan sintaks berikut:
element{
position: absolute;
left: value;
top: value;
}
<!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>
Kandungan yang hendak dijajarkan ke tengah hendaklah ditulis di dalam tag
Jika kandungan yang anda ingin jajarkan tengah hanya mengandungi teks, anda boleh menggunakan atribut textalign sahaja.
text-align: center;
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.
*{
Css declarations
}
<!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>
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.
element{
property: value !important;
}
<!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>
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;
}
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 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!
Kedudukan sepuluh pertukaran mata wang digital teratas
Perbezaan dan sambungan antara java dan javascript
Cara membuat html dengan webstorm
Medan aplikasi komputer
harga mata wang fil harga masa nyata
Kaedah penyulitan storan data
Bagaimana untuk menulis segitiga dalam css
Perisian ujian bateri komputer riba manakah yang terbaik?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
