Lembaran Gaya Pembelajaran Rujukan CSS-Pertukaran Pengetahuan_Pengalaman CSS yang Biasa Digunakan

1. Perbandingan elemen Blok dan sebaris

Semua elemen HTML tergolong dalam satu blok dan sebaris. Ciri-ciri
elemen blok ialah:
sentiasa bermula pada baris baharu
tinggi, ketinggian garisan dan jidar atas dan bawah semuanya boleh dikawal
lebar lalai kepada 100% bekasnya; melainkan anda menetapkan lebar

,

,

,

,

dan
• ialah contoh elemen blok.
  
  Sebaliknya, ciri-ciri elemen sebaris ialah:
  dan elemen lain berada pada baris yang sama; teksnya Atau lebar imej, yang tidak boleh diubah.
  
  ,
  , , , , dan ialah contoh elemen sebaris. Gunakan arahan: sebaris atau paparan: blok untuk menukar ciri elemen ini. Bilakah anda perlu menukar atribut ini?
  Biarkan elemen sebaris bermula pada baris baharu;
  Kekalkan elemen blok dan elemen lain pada baris yang sama; ketinggian elemen sebaris;
  Anda boleh menetapkan warna latar belakang dengan lebar yang sama dengan teks untuk elemen blok tanpa menetapkan lebar.
  
  
  2. Satu lagi kaedah penggodaman kotak
  
  
  Sebab mengapa terdapat begitu banyak kaedah penggodaman kotak adalah kerana pemahaman IE tentang kotak sebelum 6 adalah berbeza daripada yang lain sertakan lebar tepi dan ruang putih. Untuk menjadikan IE5 konsisten dengan penyemak imbas lain, anda boleh menggunakan CSS: padding: 2em;
  sempadan: 1em solid green; / 14em;
  
  Lebar pertama dikenali oleh semua penyemak imbas, tetapi IE5.x tidak mengenali tetapan lebar baris 2, hanya kerana terdapat simbol komen kosong pada baris itu (betapa bodohnya analisis Sintaks! ) , jadi IE5.
  
  
  3. Lebar minimum halaman
  
  
  lebar min ialah arahan CSS yang sangat mudah. ​​Ia boleh menentukan bahawa lebar minimum elemen tidak boleh kurang daripada lebar tertentu, supaya ia boleh dijamin Reka letak sentiasa betul. Tetapi IE tidak mengenali ini, dan ia sebenarnya menganggap lebar sebagai lebar minimum. Untuk menjadikan arahan ini juga berfungsi pada IE, anda boleh meletakkan
  di bawah teg
  , dan kemudian tentukan kelas untuk div:
  
  
  
  Kemudian CSS direka bentuk seperti ini:
  #container
  {

  }
  
  Lebar min pertama adalah biasa; tetapi lebar dalam baris 2 menggunakan Javascript, yang hanya dikenali oleh IE, yang juga akan menjadikan dokumen HTML anda kurang biasa. Ia sebenarnya melaksanakan lebar minimum melalui penghakiman Javascript.
  
  Kaedah yang sama juga boleh digunakan untuk mencapai lebar maksimum untuk IE:
  #bekas
  {
  lebar min: 600px
  lebar maksimum: 1200px ;
  width:expression(document.body.clientWidth
  1200? ”1200px“ : ”auto”;
  }
  
  
  4. Masalah dengan IE dan lebar dan tinggi
  
  IE tidak mengenali definisi min-, tetapi sebenarnya ia menganggap lebar dan tinggi biasa seolah-olah ada min Ini adalah masalah besar jika anda hanya menggunakan lebar dan tinggi, kedua-duanya tidak berfungsi dalam pelayar biasa. Nilai tidak akan berubah Jika anda hanya menggunakan lebar min dan ketinggian min, ini bermakna lebar dan ketinggian tidak ditetapkan sama sekali di bawah IE untuk menetapkan imej latar belakang, lebar ini adalah lebih penting untuk diselesaikan }
  
  html>badan .kotak { lebar: auto;
  tinggi: auto; >}
  
  Semua penyemak imbas boleh digunakan Tetapan kotak pertama, tetapi IE tidak mengenali tetapan kedua kerana tetapan kedua lebih istimewa, jadi ia akan menimpa perintah transformasi font
  
  
  Perintah text-transform sangat berguna Ia mempunyai 3 nilai: text-transform: huruf besar, text-transform: huruf kecil dan text-transform: Tukar teks kepada semua huruf besar, huruf kedua kepada semua huruf kecil, dan huruf ketiga untuk menggunakan huruf besar Ini sangat berguna untuk teks pinyin Walaupun terdapat ralat huruf besar semasa menaip, ia tidak akan kelihatan pada halaman web teks imej hilang dalam IE
  
  
  Kadangkala anda menghadapi masalah teks atau imej latar belakang tiba-tiba hilang, dan ia muncul semula selepas menyegarkan Ini lebih penting apabila anda hampir dengan unsur terapung (nota: Saya tidak pernah melihatnya sebelum ini, anda boleh menetapkan: kedudukan: relatif untuk elemen yang hilang Jika itu tidak berfungsi, cuba nyatakan lebar untuk elemen ini 🎜>7. Teks tidak kelihatan
  
  
  Tidak kira mengapa anda mahu beberapa teks web tidak dipaparkan dalam penyemak imbas, seperti percetakan atau skrin kecil, anda boleh menggunakan paparan: tiada. Ini sangat mudah, tetapi kadangkala ia agak tidak berguna untuk sesetengah orang, dan mereka boleh mengalih keluar kawalan ini, dan kemudian menggunakan: position: absolute left: -9000px .
  
  Ini sebenarnya menentukan teks untuk dipaparkan di luar halaman.
  
  
  8 Reka bentuk CSS khas untuk peranti pegang tangan
  
  
  Iaitu, pengguna dengan skrin kecil seperti telefon bimbit/PDA boleh mereka bentuk CSS khas untuk memaparkan halaman web lebih selesa.Pour ce faire, vous pouvez ajuster la fenêtre du navigateur à 150 points de large pour voir l'effet. La syntaxe pour spécifier le CSS spécifique à l'ordinateur de poche est :
  
  
  
  Vous pouvez également en savoir plus sur la disponibilité spécifique à l'ordinateur de poche.
  
  9. Boutons avec effets 3D
  
  Dans le passé, si vous vouliez créer des boutons avec des effets 3D qui changeaient lorsque vous cliquez dessus, vous deviez utiliser une image remplacement. Maintenant, le CSS fera l'affaire :
  
  a
  {
  display: block;
  border: 1px solid; aaa;
  largeur : 8em ;
  arrière-plan : #fc0 ;
  }
  
  a:survol
  {
  position : relative ; >left: 1px ;
  border-color: #000 #aaa #aaa #000;
  }
  
  Quant à l'effet, vous pouvez également l'ajuster vous-même.
  
  
  10. Utilisez le même code de navigation sur différentes pages
  
  De nombreuses pages Web ont des menus de navigation Lorsque vous entrez dans une certaine page, l'élément correspondant dans le menu sera celui-ci. devrait devenir gris et les autres pages s'allumer. Généralement, pour obtenir cet effet, vous devez écrire un programme ou un design spécifiquement pour chaque page. Vous pouvez désormais obtenir cet effet avec CSS.
  Tout d'abord, utilisez les classes CSS dans votre code de navigation :
  
  
  
  
  

  Accueil
  
  À propos de nous
  
  Contactez-nous
  
  
  Précisez ensuite un identifiant pour le corps de chaque page, et La classe ci-dessus porte le même nom. Comme

  .
  
  Ensuite, concevez le CSS comme suit :
  #home .home, #about .about, #about .about
  {
  les commandes pour la navigation en surbrillance vont ici
  }
  
  Ici, lorsque l'identifiant est défini sur home, .home prendra effet, c'est-à-dire que la rangée de barres de navigation avec la classe définie sur home affichera des effets spéciaux. Il en va de même pour les autres pages.