Ringkaskan kemahiran gaya tetapan css

CSS ialah singkatan Cascading Style Sheets, yang digunakan untuk mentakrif dan mereka bentuk gaya dan reka letak tapak web. CSS boleh menjadikan tapak web lebih cantik dan mudah dibaca, di samping meningkatkan pengalaman pengguna. Berikut ialah beberapa kegunaan biasa dan teknik CSS.

1. Menggunakan pemilih

Pemilih CSS digunakan untuk memilih elemen HTML untuk gaya yang harus digunakan. Terdapat jenis pemilih berikut:

• Pemilih teg: memilih semua elemen dengan teg tertentu
• Pemilih ID: memilih elemen dengan atribut ID tertentu
• kelas Pemilih: Pilih elemen dengan nama kelas tertentu
• Pemilih turunan: Pilih elemen turunan elemen tertentu
• Pemilih kumpulan: Pilih berbilang elemen pada masa yang sama

Contohnya, untuk menetapkan saiz fon kepada 14px untuk semua elemen perenggan, anda boleh menggunakan kod berikut: Salah satu konsep asas merujuk kepada fakta bahawa elemen HTML terdiri daripada empat bahagian: kandungan, padding, sempadan dan jidar. Dalam CSS, anda boleh melaraskan susun atur dan penampilan elemen dengan menetapkan empat bahagian ini.

p {
  font-size: 14px;
}

Sebagai contoh, untuk menetapkan elemen div dengan jidar biru, padding 10 piksel dan padding 20 piksel, anda akan menggunakan kod berikut:

Gunakan Gaya Teks

CSS boleh digunakan untuk menetapkan gaya teks, seperti fon, warna, ketinggian garisan, penjajaran, dsb. Berikut ialah beberapa gaya teks yang biasa digunakan:

div{
  border: 1px solid blue;
  padding: 10px;
  margin: 20px;
}

fon-family: Tetapkan fon
3. warna: Tetapkan warna teks

garis-tinggi: Tetapkan garisan ketinggian

text-align: Tetapkan penjajaran teks
• text-decoration: Tetapkan hiasan teks seperti garis bawah dan coretan
• Contohnya, untuk memusatkan semua perenggan dan gunakan fon Helvetica dan warna hitam, anda boleh menggunakan kod berikut:
• Gunakan reka bentuk responsif

Reka bentuk responsif bermakna tapak web boleh menyesuaikan diri dengan saiz skrin dan resolusi peranti ia diakses daripada Suaikan reka letak dan gaya secara automatik. Ini boleh meningkatkan pengalaman pengguna dan juga merupakan trend dalam reka bentuk laman web moden.

p{
  font-family: Helvetica;
  color: black;
  text-align: center;
}

Dalam CSS, anda boleh menggunakan pertanyaan media untuk mencapai reka bentuk responsif. Pertanyaan media boleh digayakan secara berbeza berdasarkan saiz dan orientasi skrin peranti.

4. Sebagai contoh, untuk menyembunyikan elemen pada skrin yang lebih kecil daripada 800 piksel, anda boleh menggunakan kod berikut:

Gunakan rangka kerja CSS

Rangka kerja CSS ialah satu set peraturan dan gaya CSS pratakrif yang menjadikan pembangunan tapak web lebih pantas dan mudah. Rangka kerja CSS biasa termasuk Bootstrap dan Foundation.

@media screen and (max-width: 800px){
  .element{
    display:none;
  }
}

Menggunakan rangka kerja CSS boleh mengelakkan penulisan gaya CSS dari awal, menjadikan pembangunan tapak web lebih cekap. Ia juga memastikan bahawa tapak web mempunyai keserasian yang lebih baik pada pelbagai peranti dan pelayar.

5. Ringkasan

CSS ialah bahagian penting dalam reka bentuk tapak web. Melalui teknik seperti pemilih, model kotak, gaya teks, reka bentuk responsif dan rangka kerja CSS, anda boleh menjadikan tapak web anda lebih cantik, lebih mudah dibaca dan lebih mudah diakses.

Atas ialah kandungan terperinci Ringkaskan kemahiran gaya tetapan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!