CSS3: Tutorial dengan semua asas untuk pemula
Dalam tutorial ini, kami akan memperkenalkan CSS3 kepada anda. CSS3 adalah standard baru untuk menentukan reka bentuk laman web atau dokumen. Di samping HTML, CSS merupakan asas yang paling penting dalam pembangunan web.
Tutorial CSS3: Keperluan
Sebelum anda dapat memulakan CSS pengaturcaraan, anda memerlukan editor. Kami mengesyorkan editor percuma Notepad ++, yang hanya tersedia untuk Windows. Jika anda bekerja dengan Mac, anda akan mendapati alternatif yang bagus di sini. Anda juga memerlukan pengetahuan mengenai HTML. Asas HTML5 dapat dijumpai dalam tip praktikal lain.
Tutorial: Struktur arahan CSS
Pertama, kita mempelajari struktur asas arahan CSS.
- Pada dasarnya, apabila membina arahan CSS, anda perlu bertanya kepada diri sendiri siapa yang harus mengambil nilai mana dari harta tertentu.
- Contoh: Semua
Tajuk harus mempunyai nilai merah dalam warna fon harta.
- Sintaks kemudian kelihatan seperti ini: [element] {[property]: [value]; }
- Dalam contoh kami, kami mewarnakan tajuk seperti ini: h1 {color: red; }
- Mana-mana bilangan pasangan nilai harta boleh mengikut satu sama lain dalam kurungan keriting.
- Penting: Setiap pasangan mestilah berakhir dengan titik koma.
Tutorial CSS3: Benamkan CSS dalam HTML
Terdapat tiga cara untuk menanamkan CSS dalam HTML, tetapi hanya satu daripada mereka yang benar-benar masuk akal.
- Variasi 1: Pelarasan secara langsung dalam elemen dengan atribut gaya. contoh:
tajuk
- Itu hanya terpakai kepada satu elemen ini. Di sini juga, beberapa pasangan bernilai harta boleh digunakan berturut-turut.
- Variasi 2: Pada permulaan fail HTML dalam teg dalam dokumen. Contoh: h1 {color: red; warna latar belakang: biru; }
- Variasi 3: outsource kepada dokumen lain. Tulis arahan dalam fail luaran dengan sambungan .css. Anda kemudian masukkan fail ini di kepala HTML.
- Dalam hampir setiap kes, anda harus menggunakan variasi 3. Ini adalah satu-satunya cara untuk menggunakan reka bentuk dalam beberapa fail HTML tanpa perlu menulis kod yang sama beberapa kali.
Tutorial CSS3: Unsur, ID dan kelas sebagai pemilih
Nilai pertama sebelum pendakap selalu sesuai dengan pemilih. Ini menentukan siapa yang berikut digunakan.
- Anda hanya boleh menggunakan hari sebagai pemilih. Ini kemudian menjejaskan setiap elemen tag ini. Dalam contoh di atas, setiap tajuk h1 tunggal akan menjadi merah.
- Sebagai alternatif, anda boleh menggunakan ID untuk memastikan hanya satu elemen yang boleh digunakan. Untuk melakukan ini, tambah atribut dalam elemen HTML:
Pengepala saya
- Kemudian rujuk ID ini dalam hela CSS dengan # di depan pemilih: #myHeader {color: red; }
- Secara alternatif, anda boleh menetapkan kelas untuk mempengaruhi beberapa, tetapi tidak semua elemen:
Pengepala saya
- Daripada #, gunakan '.' Di CSS sebelum pemilih: .myH1Class {color: red; }
Tutorial CSS: ciri penting
Berikut adalah sifat utama yang anda perlukan untuk memanipulasi rupa elemen.
- warna: tetapkan warna fon. Banyak warna biasa dipratentukan, contohnya merah, hitam, putih, kuning, dan lain-lain. Anda boleh menentukan warna individu sebagai nilai hex: # B3D2FF
- warna latar belakang: Gunakan ini untuk menetapkan warna latar belakang. Anda boleh menggunakan warna yang sama seperti warna.
- sempadan: Tentukan bingkai di sekeliling elemen. sempadan: pepejal 2px hitam; Buat frame hitam, sebagai contoh.
- saiz fon: Tetapkan saiz fon. Nilai relatif (em) atau titik (pt) adalah perkara biasa di sini.
- lebar dan ketinggian: Nyatakan lebar dan ketinggian elemen. Ini biasanya dilakukan secara statik melalui piksel (px) atau relatif kepada nilai maksimum dalam peratus: div {width: 70%; height: 300px; }
- float: Gunakan kiri dan kanan untuk menentukan sama ada elemen harus dibiarkan atau sejajar dengan betul.
- padding: Masukkan padding. Sebagai contoh, anda boleh meletakkan teks di dalam kotak.
- margin: Sama dengan padding, kecuali anda menyatakan margin di sini. Dengan cara ini anda boleh mewujudkan jurang antara dua kotak.
Tutorial CSS3: kemungkinan dengan CSS3
Dengan CSS3, kurang kerap diperlukan untuk membuat dan mengintegrasikan grafik anda sendiri kerana lebih banyak kesan boleh dibuat secara dinamik.
- kelegapan: Dengan nilai antara 0 dan 1 anda boleh dengan mudah menentukan ketelusan elemen.
- Warna kini boleh ditentukan dalam format HSL. 'H' bermaksud Hue (hue), 'S' untuk Saturation (ketepuan) dan 'L' untuk Lightness: warna: hsl (300, 100%, 60%);
- box-shadow: Berikan bayang-bayang untuk suatu kawasan. kotak-bayang: 10px 10px 10px merah; akan mewujudkan bayangan merah ke kanan dan bawah.
- Radius sempadan: Cukup buat sudut bulat untuk permukaan atau imej.
Bagaimana untuk menukar jarak baris HTML dengan CSS boleh dibaca dalam hujung praktikal seterusnya.