CSS adalah bahasa komputer yang digunakan untuk mengekspresikan gaya file seperti HTML (aplikasi Standard Generalized Markup Language) atau XML (bagian dari Standard Generalized Markup Language).
CSS tidak hanya dapat memodifikasi halaman web secara statis, tetapi juga dapat bekerja sama dengan berbagai bahasa skrip untuk memformat berbagai elemen halaman web secara dinamis.
CSS dapat melakukan kontrol presisi tingkat piksel atas tata letak posisi elemen di halaman web, mendukung hampir semua ukuran dan gaya font, dan memiliki kemampuan untuk mengedit objek halaman web dan gaya model. Untuk studi mendalam, silakan cari "tutorial video CSS situs web Cina php" di Baidu dan pelajari online secara gratis.
1. Atribut umum
nama: nama, bisa diulang, bisa sama; kelas: nama kelas, bisa diulang, atau bisa banyak, digunakan untuk CSS; pengidentifikasi, tidak dapat Pengulangan umumnya digunakan dalam JavaScript, aturan penamaan sama dengan aturan penamaan label dalam bahasa lain;
title: judul, yang dapat ditambahkan dalam tag; seperti <img src="1.jpg" /title="Ini adalah gambar">;/
2. Tandai hubungan
Hubungan keturunan: hubungan orang tua-anak (termasuk hubungan);
Hubungan persaudaraan: hubungan saudara kandung;
3.CSS-Lembar Gaya Bertingkat
Komentar CSS: /Konten komentar ditulis di sini agar programmer dapat melihatnya, dan tidak akan ditampilkan di halaman/;
Aturan tata bahasa CSS: Semua simbol harus dimasukkan menggunakan metode masukan bahasa Inggris, dalam huruf kecil, dan atribut harus ditulis dalam tanda kurung kurawal. Setiap pernyataan atribut harus diakhiri dengan titik koma, dan nilai atribut harus memiliki satuan piksel (px); : atribut: nilai atribut;
4. Bagaimana cara memperkenalkan CSS
Pengenalan sebaris: Metode pengenalan menambahkan gaya dalam tag; Format: <tag style="background:red; font-size:20px;">Konten</tag>; dan html Strukturnya tidak dipisahkan; cakupan pengaruhnya hanya pada tag saat ini; pengenalan sebaris: tambahkan <style type="text/css">CSS style</style> di bagian atas halaman web; pemeliharaan kode relatif buruk, tidak menyadari pemisahan kode CSS dan struktur HTML, dan cakupan pengaruhnya hanya pada halaman saat ini;
Pengenalan tautan eksternal: Buat file xx.css di luar halaman web, dan gunakan <link rel="stylesheet" type="text/css" href="xx.css"> di header halaman web; kode sangat mudah dipelihara. Kode CSS sepenuhnya terpisah dari struktur HTML, memengaruhi semua halaman web yang memasukkan file CSS di seluruh situs web;
5. Sintaks inti CSS:
Format struktur: selector {atribut: nilai atribut; atribut: nilai atribut;...}; Contoh: p{background:red;color:gray;size:20px;};Selector: alat untuk memilih elemen halaman;
Kawat gigi: Konten gaya ditulis di dalam kurung kurawal;
6. Pemilih
Pemilih dasar:
Pemilih universal: digunakan untuk menginisialisasi gaya default halaman web, ditulis di awal lembar gaya; format: *{padding:0;margin:0;}; pemilih label: menambahkan gaya ke format label yang ditentukan; {color:green; }; Pemilih kelas: Pilih untuk menentukan gaya pemilih kelas; Format: .nama kelas {latar belakang: merah muda;}; gaya konten dari beberapa blok adalah sama, lalu beri saja gaya yang sama;
pemilih id: pengidentifikasi unik, tidak dapat diulang; format: #nama id{backgound-image:url(1.jpg);} Catatan: nama id didefinisikan dalam tag id="satu"; , berapa kali Jika gaya konten setiap blok sama, nama ID beberapa blok harus berbeda;;
Perbedaan antara id dan kelas: Perhatikan poin sebelumnya - ID harus dapat menentukan node DOM secara unik. Jika Anda menggunakan pemilih ID di seluruh artikel, meskipun kedua gaya simpul DOM sama persis, Anda harus menulis gaya simpul dua kali. Jika Anda ingin mempertahankannya nanti, Anda harus mempertahankan kode di kedua tempat! ! ! Sangat meningkatkan biaya pemeliharaan;
Pemilih kelas semu: Prinsip Sequential LoVe Hate, Anda dapat melompati, tetapi urutannya tidak dapat diubah; yaitu status tautan (tautan), status dikunjungi (dikunjungi), status aktif (arahkan kursor) dan status klik (aktif);
Kelas menggambar titik: gaya a:link{color: yellow;} a:visited{color:blue;} a:hover{color:red;} a:active{color:pin;} saat mendapatkan fokus a:focus{}; Catatan: Atribut teks, warna latar belakang, dan gambar bisa ditambahkan ke atribut; a{} dan a:link{} menghasilkan efek yang sama; kelas daftar: li:link{color: yellow;};li:visited{color:blue ;} li:hover{color:red;} li:active{color:pin;};Catatan: Atribut rangkaian teks, warna latar belakang, dan gambar dapat ditambahkan ke atribut;
Pemilih gabungan:
Pemilih grup (pemilih gabungan, pemilih ganda): digunakan untuk menambahkan gaya yang sama ke beberapa elemen; misalnya: .one, #one, a, span{color:red;font-size:14px;} berarti Kelas satu, #satu , tag, dan tag span memiliki atribut yang sama; pemilih turunan: menambahkan atribut ke elemen subkelas; contoh: .one a{text-decoration:none;} berarti konten yang dimodifikasi oleh tag turunan kelas satu Tidak ada garis bawah; pemilih elemen anak (pemilih yang ditentukan): menambahkan atribut ke elemen anak yang ditentukan; misalnya: #one>p{color:red;}; berarti menambahkan konten yang bertumpu pada tag p dari properti pemilih id;
Pemilih elemen yang berdekatan:
1. Dua pemilih saudara yang berdekatan menambahkan atribut. Mereka tidak menambahkan atribut ke dirinya sendiri, tetapi hanya menambahkan atribut ke saudara berikut; .one+p{background:red;}; 2.one~p{background:green} berarti Ya untuk menambahkan atribut ke semua elemen tag p setelah satu pemilih, asalkan elemen tersebut memiliki kelas induk;
Pemilih atribut:
1. Tambahkan atribut ke elemen dengan atribut; img[id]{background:red;} Tambahkan atribut ke elemen dengan id;
Tambahkan atribut ke elemen dengan nilai atribut tertentu: img[src="b.jpg"]{background:red;}Tambahkan atribut ke elemen dengan b.jpg;
3. Tambahkan atribut ke elemen yang dimulai dengan karakter yang ditentukan: img[src^="b"]{background:red;} Tambahkan atribut ke semua elemen yang dimulai dengan b; 4. Selector memiliki nilai atribut yang ditentukan di akhir : img[src$="b"]{background:red;}Tambahkan atribut ke semua elemen yang diakhiri dengan b; 5. Selector memiliki elemen yang berisi nilai atribut yang ditentukan: img[src*="b" ]{background:red ;}Tambahkan atribut ke semua elemen yang mengandung b;
7. Penyertaan elemen (klasifikasi metode tampilan)
Elemen blok: digunakan untuk penyusunan huruf. Struktur tipikal meliputi: p, p, li, h1, dt;
Elemen ditampilkan pada garisnya sendiri (tidak tergantung pada lebar); lebar dan tinggi dapat diatur;
Ketika elemen tingkat blok disarangkan, jika lebar elemen turunan tidak disetel, lebar elemen turunan akan menjadi lebar elemen induk;
Elemen sebaris: digunakan untuk menambahkan gaya; span, a, font, kuat; Catatan: Jangan berikan margin atas dan bawah serta bantalan pada elemen sebaris );
Elemen ditampilkan dalam satu baris;
Lebar dan tinggi tidak dapat diatur secara langsung;
Elemen blok sebaris: gambar, masukan;
Elemen ditampilkan dalam satu baris;
Lebar dan tinggi dapat diatur;
Hubungan konversi: inline berisi elemen blok berisi elemen blok, dan elemen blok dapat berisi elemen inline;
Tampilan: inline mengubah elemen menjadi elemen inline Tampilan: inline-block mengubah elemen menjadi elemen blok inline
Tampilan: blok Ubah elemen menjadi elemen blok
8. Properti CSS
Properti terkait font:
ukuran font: ukuran font, berapa piksel, px; berat font: ketebalan font, tebal (700-900), normal, Anda dapat menulis 100-900; gaya font: kemiringan font, miring, normal; : font, Microsoft YaHei, HeiTi;
Penggabungan atribut: font: font-style font-weight font-size/line-height font-family; Catatan: Penggabungan atribut font harus menyertakan font-size dan font-family (atribut lain dapat dihilangkan); -Urutan keluarga tidak dapat diubah;
teks:
warna: warna; indentasi teks: indentasi [satuannya adalah em]; dekorasi teks: baris teks [garis bawah, garis atas, baris yang dicoret, tidak ada baris yang dibatalkan]; jarak; perataan teks: perataan horizontal [default kiri, tengah, kanan];
line-height: tinggi garis, tinggi garis tempat teks berada [bila tinggi garis sama dengan tinggi elemen, teks ditempatkan di tengah vertikal];
Ukuran: Ini adalah ukuran elemen blok. Lebar dan tinggi tidak dapat diatur untuk elemen sebaris.
lebar: lebar;
tinggi: tinggi;
Atribut list ul dan li: list-style-type dapat ditambahkan ke ul tetapi tidak perlu ditambahkan ke li;
list-style-type:none; Hapus simbol, kotak, lingkaran, lingkaran padat disk Anda tidak perlu menulisnya setelah menambahkan gambar list-style-type:none;list-style-image:url(1.jpg) Batas gambar: 1px merah solid; atur batas untuk ul secara keseluruhan
posisi gaya daftar: luar; posisi gambar gaya daftar: di dalam, di luar
latar belakang:
Warna latar belakang warna latar; gambar latar belakang gambar latar Catatan: Saat mengatur gambar latar belakang, pastikan untuk mengatur lebar dan tinggi; ubin latar belakang: ulangi (nilai default) |. x |. (ubin horizontal) posisi latar belakang-y (tiling vertikal): Tetapkan nilai spesifik: kiri|kanan|.atas|.bawah| nomor, nilai pertama mewakili arah horizontal, nilai kedua mewakili arah vertikal, atur format pengaturan gambar latar depan ke gambar latar, atur apakah latar belakang tetap. lampiran latar belakang: Gulir (nilai default) bergulir tetap ( gambar diperbaiki);
Penulisan gabungan atribut: tidak ada batasan jumlah atau pesanan: background:url("") merah tanpa gambut 30px 40px;
line-height: model kotak: digunakan untuk tata letak halaman web, lebarnya harus diatur
Properti batas kotak: komponen:
Lebar dan tinggi batas: lebar batas: 1 piksel; Warna batas: warna batas: merah; Gaya batas: gaya batas: garis padat padat/garis putus-putus/garis putus-putus/tidak ada; ; Catatan: Tidak ada batasan urutan saat menulis atribut secara bersamaan. Warna tepi tepi tidak perlu ditulis, dan lebar tepi tepi tidak perlu ditulis. Cara penulisan terpisah: tepi tepi: bantalan margin bagian dalam: atur jarak antar konten dan batas kotak
Margin: Mengatur jarak antar kotak
p{width:300px;height:200px;border-top:1px solid red;border-left:1px solid red;border-right:1px solid red;border-bottom:1px solid merah;}
Untuk mengatur properti satu per satu:
border-top-color:merah;border-top-style:solid;border-top-width:1px;
Ukuran kotak:
Dimana pengaruh ukuran kotak: Kotak yang diwarisi berada dalam rentang lebar kotak induk, dan nilai padding tidak akan mempengaruhi ukuran kotak. Perhitungan ukuran kotak: lebar = lebar konten + batas kiri dan kanan + padding kiri dan kanan
Perbatasan dapat mempengaruhi ukuran kotak dan padding dapat mempengaruhi ukuran kotak.
Di masa depan, ketika menerapkan tata letak kotak halaman, jika margin dalam ditetapkan untuk kotak, nilai yang sesuai harus dikurangi dari lebar atau tinggi konten.
Margin: Mengatur jarak antar kotak
Tengahkan kotak: Atribut penulisan gabungan:
Kotak di bawah aliran standar berada di tengah: margin: 0px otomatis; kotak yang diposisikan berada di tengah: pertama ambil separuh kotak induk, lalu kembalikan separuh lebarnya sendiri. 10pxMargin: 10px, 20px, atas, bawah, 10px, kiri dan kanan, 20pxMargin: 10px 20px 30px 10px atas, 20px kiri dan kanan, 30px bawah
Margin: 10px 20px 30px 40px kanan atas kiri bawah
Melihat:
Atribut penulisan bersama:
Padding: 10px; jarak antara atas, kanan, bawah dan kiri adalah 10pxPadding: 10px 20px; atas dan bawah 10px kiri dan kanan 20pxPadding: 10px 20px 30px;
Padding: 10px 20px 30px 40px;
Ketika dua kotak ditampilkan secara vertikal, margin tunduk pada nilai maksimum yang ditetapkan (kasus pertama penggabungan margin). Ketika dua kotak ditampilkan secara horizontal, margin tumpang tindih dan margin runtuh (masalah yang sulit) untuk menyelesaikan langkah:
padding: mengatur jarak antara konten dan batas kotak
Tetapkan batas untuk kotak induk
Setel overflow:hidden untuk kotak induk;
Hapus margin:
Metode 1: *{padding: 0; margin: 0;}
Metode 2: Isi,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,p,span{margin:0px;padding:0px;}
9.Tiga karakteristik utama CSS
Warisan:
Dapat diwariskan: color, text-align, text-indent, font-size, font-weight, font-family Tidak dapat diwariskan: text-decoration, border, display, margin, float, padding Premis agar pewarisan terjadi adalah di antara tag Milik ke hubungan bersarang, warna teks dapat diwariskan; ukuran teks dapat diwarisi;
Fitur khusus:
Warna teks pada elemen induk tidak dapat diwariskan (cascading)
<h1></h1> Tag judul tidak bisa mewarisi ukuran teks dari elemen induk
Tumpang tindih: Tumpang tindih mengacu pada cakupan gaya
Sifat gaya berjenjang tidak ada hubungannya dengan urutan pemanggilan gaya, tetapi terkait dengan urutan definisi gaya.
Premis terjadinya cascading: konflik gaya
Prioritas:
Bobot: Pengenalan sebaris (1000) > id (100) > kelas (10) > label (1) > umum (0). Semakin besar nilainya, semakin tinggi prioritasnya.
Bobotnya sama, dan gaya berikut dapat digunakan
10. Catatan pengetahuan tambahan
Penulisan pengoptimalan formulir: <lable for="one">Nama pengguna:</lable><input type="text" id="one">Format ikon daftar: gaya daftar: noneForm merge: border-collapse:collapse (Set penggabungan batas tabel, berlaku untuk tabel) Bfc "Memformat konteks" meluap:
terlihat: Nilai default. Konten tidak akan dipangkas dan akan ditampilkan di luar kotak elemen. Konten akan dipangkas dan konten yang tersisa tidak akan terlihat. Saat gambar berubah posisi, elemen induk juga akan mengubah posisinya elemen induk dapat membuat elemen induk mengubah posisinya. Posisi elemen tetap tidak berubah gulir: Konten akan dipangkas, tetapi browser akan menampilkan bilah gulir untuk melihat konten yang tersisa
otomatis: Jika konten dipangkas, browser menampilkan bilah gulir untuk melihat konten lainnya
11. Aliran standar: elemen tingkat blok ditampilkan dalam satu baris; mode tampilan aliran standar: mode tampilan elemen default
12. Mengambang: Mengambang digunakan untuk memecahkan masalah pembungkusan teks dan gambar yang digunakan untuk membuat bilah navigasi dan tata letak halaman web;
Penggunaan: Float:kiri|.kanan Fitur: Float apa pun yang Anda inginkan
Elemen yang diatur untuk diapungkan tidak menempati posisi aslinya (di luar skrip), memungkinkan elemen tingkat blok ditampilkan sebagai mengambang pada satu baris.
Selama proses konversi mode, gunakan tampilan jika Anda bisa.
Pelampung bening:
Definisi: Menghapus float tidak berarti menghapus float; menghapus float mengacu pada dampak membersihkan float. Perhatikan waktu penggunaan: ketika elemen anak disetel ke float dan elemen induk tidak memiliki ketinggian, tata letak halaman akan menjadi bingung ; dalam hal ini, bersihkan pelampung.
Hapus metode mengambang: [x] Catatan: Tambahkan elemen blok kosong (<p></p>, tag) setelah elemen yang akan dibersihkan, dan tambahkan clear:both left |right ke elemen kosong yang ditambahkan
13. Penentuan posisi: Orientasi: kiri, kanan, atas, bawah (silakan buka saluran tutorial css situs web php Cina untuk detailnya)
Pemosisian statis: Pemosisian statis adalah metode tampilan aliran elemen standar position:static;
Penempatan absolut: Penempatan relatif terhadap elemen induk atau elemen leluhur dari elemen yang diposisikan. Jika elemen induk dan elemen leluhur tidak ada, maka lapisan penampung asli tidak akan menempati posisi sebelumnya: absolut;
Saat mengatur pemosisian absolut untuk satu elemen, pemosisian diatur berdasarkan sudut kiri atas browser (badan). Ketika kotak disarangkan, jika kotak induk tidak mengatur posisi, kotak anak mengatur posisi berdasarkan sudut kiri atas browser. Ketika kotak disarangkan, jika kotak induk diposisikan, maka kotak anak diposisikan berdasarkan sudut kiri atas kotak induk. Pemosisian absolut disetel untuk kotak, dan kotak tidak menempati posisi apa pun (di luar skrip). Setelah pemosisian absolut disetel untuk elemen sebaris, elemen tersebut diubah menjadi elemen blok sebaris.
Catatan: Setelah elemen disetel ke posisi absolut, posisi elemen dapat diatur secara sewenang-wenang melalui nama orientasi tertentu.
Posisi relatif: relatif terhadap posisi awal elemen, ia akan menempati posisi sebelumnya: relatif;
Setelah elemen diatur ke posisi relatif, ia menempati posisi aslinya. Atur posisi relatif dengan posisinya sendiri sebagai referensi.
Anak harus berada pada posisi yang sama dengan induknya (elemen anak diatur ke posisi absolut, dan elemen induk diatur ke posisi relatif)
Pemosisian tetap: relatif terhadap seluruh posisi stabil; pemosisian tetap tidak menempati posisi (di luar label); mengubah elemen sebaris menjadi elemen blok sebaris posisi: tetap
Masalah hierarki:
Akan ada masalah hierarki hanya jika pemosisiannya diatur. Ada pemosisian relatif, absolut, dan lainnya antar elemen saudara yang struktur dokumen HTMLnya ada di belakang dan mana yang berada di lapisan terluar (tingkat lebih tinggi).
Z-index: Mengatur level. Nilainya berupa angka.
14. CSS Elf Rabbit: Pilih dokumen transparan
Sistem koordinat titik pada browser memiliki arah yang benar sebagai arah positif, dan arah di bawah titik adalah positif. Sprite CSS adalah cara untuk mengolah gambar latar belakang halaman web;
Penggunaan sprite
Saat menggunakan fw, Anda harus membuka peta sprite dalam mode terbuka. Saat menggunakan peta sprite sebagai gambar latar, sering kali digunakan bersama dengan posisi latar belakang untuk mengukur koordinat elemen dalam peta sprite pemilih.
Atau gunakan huruf shortcut: k
15. Visibilitas CSS
overflow: tersembunyi Sembunyikan bagian berlebih tampilan: tidak ada Sembunyikan elemen secara langsung tampilan: blok Tampilkan elemen (lebih cocok dengan js) visibilitas: tersembunyi Sembunyikan elemen tampilan: tidak ada Sembunyikan elemen dan jangan menempati posisinya
visibilitas: menyembunyikan elemen dan menempati posisi aslinya
16. Pusatkan gambar dan teks
Setiap elemen blok dalam memiliki perataan vertikal: garis dasar default
perataan vertikal: perataan vertikal tengah; perataan vertikal dan blok sebaris lebih cocok;
17. Hindari aliran yang di luar standar
Dalam proses tata letak halaman web, gunakan aliran standar jika Anda bisa. Aliran standar tidak dapat mengatasi mengambang tidak dapat menyelesaikan penentuan posisi.
Gunakan margin-left/margin-right dan atur nilainya menjadi auto untuk secara otomatis mendorong kotak ke dua sisi luar.
18. Spesifikasi penyertaan label
p dapat berisi tag apa pun di bawah aliran standar tag p tidak boleh berisi p dan tag judul serta tag daftar catatan judul dapat berisi tag lain
Elemen sebaris tidak boleh berisi tag lain
19. Ringkasan pengaturan lebar dan tinggi
Setelah mengambang, elemen dapat mengatur lebar dan tinggi. Setelah posisi absolut, elemen dapat mengatur lebar dan tinggi.
Setelah pemosisian tetap, elemen dapat mengatur lebar dan tinggi
20. Tingkatkan ke CSS3
CSS3 dan CSS2: CSS sangat kuat dan kodenya ringkas
Pemilih kelas semu:
Elemen anak pertama: anak pertama Elemen terbaik: anak terakhir Elemen anak ke-n: anak ke-n (n) adalah bilangan ganjil untuk elemen anak: anak ke-n (ganjil); 2n+1))
Elemen bernomor genap: anak ke-n(genap); atau (anak ke-n(2n))
bayangan-teks: bayangan-teks: horizontal, vertikal, bayangan bayangan kotak: bayangan-kotak: horizontal, vertikal, bayangan
latar belakang: latar belakang