Bagaimana untuk menetapkan gaya css

CSS (Cascading Style Sheets) ialah salah satu komponen asas pembangunan web, yang membolehkan pembangun mengawal gaya dan reka letak halaman web. Bagi pemula, CSS mungkin sukar dipelajari, tetapi apabila anda menguasai tetapan CSS asas, ia akan menjadi lebih mudah untuk membangunkan halaman web yang lebih baik. Artikel ini akan berkongsi beberapa pengetahuan asas dan petua tentang cara menggayakan CSS.

1. Pilih pemilih CSS yang sesuai

Pemilih CSS ialah sintaks untuk mencari dan mengubah suai elemen HTML. Ia membenarkan pembangun menggunakan nama teg, nama kelas, pengecam dan atribut Lain untuk memilih elemen HTML . Memilih pemilih yang sesuai boleh memudahkan kod CSS dan meningkatkan prestasi. Berikut ialah beberapa pemilih CSS yang paling biasa digunakan:

1 Pemilih teg

Pemilih teg ialah jenis pemilih yang paling asas dan paling mudah, dan ia boleh digunakan pada dokumen HTML. semua elemen. Sebagai contoh, kod berikut akan menetapkan fon kepada Arial untuk semua elemen perenggan dalam dokumen HTML:

p {
  font-family: Arial;
}

2. Pemilih Kelas Pemilih kelas

ialah pemilih yang lebih berkuasa membolehkan pembangun memilih elemen berdasarkan nama kelas mereka. Nama kelas boleh digunakan pada berbilang elemen supaya mereka berkongsi gaya kelas. Kod berikut akan menetapkan warna latar belakang kepada kelabu untuk semua elemen dengan nama kelas "ujian":

.test {
  background-color: gray;
}

3 Pemilih ID

Pemilih ID memilih berdasarkan ID unik atribut unsur unsur. Nama ID hanya boleh digunakan pada satu elemen. Memandangkan setiap ID adalah unik, ia memudahkan untuk menyasarkan elemen HTML tertentu. Kod berikut akan menetapkan warna fon kepada merah untuk elemen dengan ID elemen "header":

header {
color: red;
}

2. Gunakan model kotak untuk susun atur elemen

Model kotak merujuk kepada menganggap elemen HTML sebagai Kotak yang terdiri daripada kandungan, padding, sempadan dan jidar. Pembangun boleh menggunakan model kotak untuk mengawal saiz, jarak dalaman, gaya sempadan dan kedudukan relatif elemen. Berikut ialah beberapa atribut asas model kotak:

1 Lebar (lebar)

Atribut lebar mentakrifkan lebar elemen. Ia boleh dinyatakan dalam piksel, peratusan atau unit lain. Kod berikut akan menetapkan lebar tetap 800 piksel untuk elemen dengan ID "bekas":

container {
width: 800px;
}

2. Ketinggian (tinggi)

Atribut ketinggian mentakrifkan ketinggian unsur. Ia boleh dinyatakan dalam piksel, peratusan atau unit lain. Kod berikut akan menetapkan ketinggian tetap 30 piksel untuk semua elemen perenggan:

p {
 height: 30px;
}

3 Padding (padding)

Padding merujuk kepada ruang antara kandungan dan sempadan bagi jarak unsur. Ia boleh ditakrifkan menggunakan nilai piksel atau peratusan. Kod berikut akan menetapkan jidar dalam kiri kepada 20 piksel untuk elemen dengan ID "pengepala":

header {
padding-left: 20px;
}

4 Sempadan (sempadan)

Sempadan boleh digunakan untuk menentukan saiz dan bentuk unsur dan warna. Sempadan boleh dibahagikan kepada tiga bahagian: lebar, gaya dan warna. Kod berikut akan menetapkan lebar jidar kepada 1 piksel, gaya kepada garis padat dan warna kepada hitam untuk semua elemen perenggan:

p {
 border: 1px solid black;
}

5. Margin (margin)

The margin merujuk kepada Jarak antara unsur dan unsur bersebelahan. Ia boleh ditakrifkan menggunakan nilai piksel atau peratusan. Kod berikut akan menetapkan margin atas kepada 20 piksel untuk elemen dengan ID "bekas":

container {
margin-top: 20px;
}

3 Warisan gaya dan mengatasi

Gaya CSS boleh ditetapkan pada berbilang peringkat. . Tahap ini termasuk elemen, kelas, ID dan global. Menetapkan gaya pada tahap ini boleh mempengaruhi elemen pada tahap yang berbeza. Berikut ialah beberapa peraturan asas untuk pewarisan gaya dan penggantian:

1. Warisan gaya

Sesetengah gaya dipindahkan daripada elemen induk kepada elemen anak. Contohnya, jika anda menggunakan gaya fon pada elemen induk, elemen anaknya juga akan mewarisi gaya tersebut. Kod berikut akan menggunakan pemilih ID untuk menetapkan fon bagi elemen induk dan semua elemen anak:

parent, #parent * {
font-size: 14px;
}

2. Gaya menimpa

Jika berbilang gaya digunakan pada elemen yang sama di pada masa yang sama, mereka akan ditekan Liputan dengan keutamaan tertentu. Berikut ialah beberapa peraturan penggantian gaya yang paling biasa:

• Gaya terakhir yang ditakrifkan dalam helaian gaya mempunyai keutamaan tertinggi
• Gaya yang ditanda dengan !important mempunyai keutamaan tertinggi
• Pemilih ID mempunyai keutamaan yang lebih tinggi daripada pemilih kelas
• Gaya sebaris mempunyai keutamaan yang lebih tinggi daripada helaian gaya luaran dan helaian gaya dalaman

4 Reka bentuk responsif reka bentuk responsif

Banyak tapak web moden telah menggunakan reka bentuk responsif untuk mengoptimumkan reka letak web pada skrin bersaiz berbeza. Nasib baik, reka bentuk responsif mudah dilaksanakan dengan CSS. Berikut ialah beberapa teknik CSS yang boleh digunakan untuk melaksanakan reka bentuk responsif:

1 Pertanyaan media CSS

Pertanyaan media CSS ialah kaedah kawalan reka letak CSS untuk saiz dan jenis peranti yang berbeza. Pertanyaan media membenarkan pembangun memaparkan elemen HTML dalam cara yang berbeza, menyesuaikan diri dengan pelbagai saiz skrin dan jenis peranti dengan berkesan. Berikut ialah contoh asas:

@media screen and (max-width: 600px) {
 body {
background-color: blue;
}
}

2. Reka letak fleksibel

Reka letak fleksibel membolehkan elemen menskala dan menyusun semula antara saiz skrin yang berbeza. Ia boleh dicapai dengan menetapkan sifat flexbox. Berikut ialah contoh asas:

.container {
 display: flex;
 justify-content: space-between;
 align-items: center;
}
@media screen and (max-width: 600px) {
 .container {
flex-direction: column;
}
}

Ringkasan

CSS ialah teknologi pembangunan web yang penting Sebagai pembangun, mempelajari cara menetapkan gaya CSS akan menjadikan halaman web kami lebih profesional dan cantik. Kita perlu memilih pemilih CSS yang sesuai, menggunakan model kotak untuk elemen susun atur, menguasai pewarisan gaya dan menimpa, dan melaksanakan reka bentuk responsif, supaya halaman web kami bukan sahaja boleh berjalan lancar pada peranti PC, tetapi juga memaparkan lebih baik pada kesan peranti mudah alih . Saya harap artikel ini membantu anda mengetahui lebih lanjut tentang cara menggayakan CSS.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan gaya css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!