CSS Tutorial
CSS Selectors
Pemilih elemen
id pemilih
Kelas pemilih (untuk semua elemen)
Pemilih kelas (hanya <p> elemen)
Pengelompokan selektor
Backgrounds CSS
Mengatur warna latar belakang halaman
Mengatur warna latar belakang elemen yang berbeda
Mengatur gambar sebagai latar belakang halaman
Bagaimana untuk mengulang gambar latar belakang hanya secara horizontal
Bagaimana posisi gambar latar belakang
Sebuah gambar latar belakang tetap (gambar ini tidak akan bergeser dengan sisanya halaman)
Semua properti background dalam satu deklarasi
Lanjutan contoh latar belakang
Latar belakang properti menjelaskan
CSS Text
Mengatur warna teks elemen yang berbeda
Sejajarkan teks
Hapus baris di bawah link
Hiasi teks
Mengontrol huruf dalam teks
teks Indent
Tentukan ruang antara karakter
Tentukan ruang antara garis
Mengatur arah teks dari elemen
Meningkatkan spasi antara kata
Nonaktifkan membungkus teks di dalam elemen
vertikal alignment gambar di dalam teks
Properti Text menjelaskan
CSS Font
Mengatur font teks
Mengatur ukuran font
Mengatur ukuran font di px
Mengatur ukuran font di em
Mengatur ukuran font dalam persen dan em
Mengatur gaya font
Mengatur varian font
Mengatur keberanian font
Semua properti font dalam satu deklarasi
Sifat Font menjelaskan
Links CSS
Tambahkan warna yang berbeda untuk mengunjungi / belum dikunjungi link
Penggunaan text-decoration pada link
Tentukan warna latar belakang untuk link
Tambahkan gaya lain untuk hyperlink
Lanjutan - Membuat kotak Link
Tautan properti menjelaskan
Daftar CSS
Semua penanda item daftar yang berbeda dalam daftar
Mengatur gambar sebagai penanda daftar item
Mengatur gambar sebagai penanda daftar item - solusi Crossbrowser
Semua daftar properti dalam satu deklarasi
Sifat Daftar menjelaskan
CSS Tables
Tentukan perbatasan hitam untuk meja, th, dan elemen td
Gunakan perbatasan-runtuh
Tentukan lebar dan tinggi tabel
Mengatur perataan horizontal konten (text-align)
Mengatur perataan vertikal konten (vertical-align)
Tentukan padding untuk elemen th dan td
Tentukan warna perbatasan tabel
Mengatur posisi judul tabel
Buat tabel mewah
Tabel properti menjelaskan
CSS Box Model
Tentukan elemen dengan lebar total 250px
Box Model menjelaskan
CSS Border
Mengatur lebar empat perbatasan
Mengatur lebar perbatasan atas
Mengatur lebar perbatasan bawah
Mengatur lebar batas kiri
Mengatur lebar batas kanan
Mengatur gaya dari empat perbatasan
Mengatur gaya atas perbatasan
Set gaya perbatasan bawah
Mengatur gaya perbatasan kiri
Mengatur gaya perbatasan yang tepat
Mengatur warna dari empat batas
Mengatur warna dari perbatasan atas
Mengatur warna border bawah
Mengatur warna border kiri
Mengatur warna batas kanan
Semua properti perbatasan dalam satu deklarasi
Set perbatasan yang berbeda di setiap sisi
Semua sifat perbatasan atas dalam satu deklarasi
Semua sifat batas bawah dalam satu deklarasi
Semua properti perbatasan kiri dalam satu deklarasi
Semua properti perbatasan yang tepat dalam satu deklarasi
Sifat Perbatasan menjelaskan
CSS Outline
Buatlah garis di sekitar elemen (garis)
Mengatur gaya dari garis
Mengatur warna dari garis
Mengatur lebar garis
Sifat Outline menjelaskan
CSS Margin
Tentukan margin untuk elemen
Properti marjin singkatan
Mengatur margin atas teks menggunakan nilai cm
Mengatur margin bawah teks menggunakan nilai persen
Mengatur margin kiri dari teks menggunakan nilai cm
Sifat Margin menjelaskan
CSS Padding
Mengatur padding kiri elemen
Mengatur padding kanan elemen
Mengatur padding atas unsur
Mengatur padding bawah elemen
Semua sifat bantalan dalam satu deklarasi
Sifat Padding menjelaskan
CSS Dimensi
Mengatur ketinggian gambar menggunakan nilai pixel
Mengatur tinggi dari suatu gambar dengan menggunakan persen
Mengatur lebar elemen menggunakan nilai pixel
Mengatur ketinggian maksimum elemen
Mengatur lebar maksimum elemen menggunakan nilai pixel
Mengatur lebar maksimum dari unsur menggunakan persen
Mengatur ketinggian minimum elemen
Mengatur lebar minimum dari elemen menggunakan nilai pixel
Mengatur lebar minimum dari elemen menggunakan persen
Sifat Dimensi menjelaskan
CSS Tampilan
Cara untuk menyembunyikan sebuah elemen (visibility: hidden)
Bagaimana untuk tidak menampilkan unsur (display: none)
Bagaimana menampilkan elemen sebagai elemen inline
Bagaimana menampilkan elemen sebagai elemen blok
Cara membuat runtuhnya elemen tabel
Sifat Tampilan menjelaskan
CSS Positioning
Posisi elemen relatif terhadap jendela browser
Posisi kerabat elemen ke posisi normal
Posisi elemen dengan nilai absolut
elemen Tumpang Tindih
Mengatur bentuk elemen
Cara membuat scroll bar bila konten elemen ini terlalu besar untuk muat
Bagaimana mengatur browser untuk secara otomatis menangani meluap
Mengatur tepi atas gambar menggunakan nilai pixel
Mengatur tepi bawah gambar menggunakan nilai pixel
Mengatur tepi kiri gambar menggunakan nilai pixel
Mengatur tepi kanan gambar menggunakan nilai pixel
Perubahan kursor
Sifat Positioning menjelaskan
CSS Mengambang
Sebuah penggunaan sederhana dari properti mengambang
Sebuah gambar dengan perbatasan dan margin yang mengapung ke kanan dalam sebuah paragraf
Sebuah gambar dengan keterangan yang mengapung ke kanan
Biarkan huruf pertama dari float ayat ke kiri
Buat galeri foto dengan properti mengambang
Mematikan mengambang (menggunakan properti yang jelas)
Membuat menu horizontal
Membuat homepage tanpa tabel
Sifat mengambang menjelaskan
CSS Menyelaraskan Elemen
Pusat menyelaraskan dengan marjin
kiri / menyelaraskan Kanan dengan posisi
Kiri / Kanan menyelaraskan dengan posisi - solusi Crossbrowser
Kiri / Kanan menyelaraskan dengan float
Kiri / Kanan menyelaraskan dengan float - solusi Crossbrowser
Sejajarkan properti menjelaskan
CSS combinators
Pemilih keturunan
pemilih Anak
Sibling Berdekatan pemilih
Umum Sibling pemilih
Penyeleksi Combinator menjelaskan
CSS Generated Content
Masukkan URL dalam kurung setelah setiap link dengan properti konten
Penomoran bagian dan sub-bagian dengan "Bagian 1", "1.1", "1.2", dll
Tentukan tanda kutip dengan properti kutipan
CSS Pseudo-kelas
Tambahkan warna yang berbeda untuk hyperlink
Tambahkan gaya lain untuk hyperlink
Penggunaan: fokus
: pertama-anak - sesuai dengan elemen p pertama
: pertama-anak - cocok pertama i elemen dalam semua elemen p
: pertama-anak - Sama semua i elemen dalam semua anak pertama elemen p
Gunakan dari: lang
Pseudo-kelas menjelaskan
CSS Pseudo-elemen
Membuat huruf pertama khusus dalam teks
Membuat jalur khusus pertama dalam teks
Membuat huruf pertama dan baris pertama khusus
Gunakan: sebelum memasukkan beberapa konten sebelum elemen
Gunakan: setelah memasukkan beberapa konten setelah elemen
Pseudo-elemen menjelaskan
Bar CSS Navigation
Sepenuhnya gaya bar navigasi vertikal
Sepenuhnya gaya horisontal bar navigasi
Bar navigasi menjelaskan
CSS Galeri
Galeri gambar
Galeri gambar menjelaskan
CSS Gambar Opacity
Membuat gambar transparan - Gunaka mouse efek
Membuat kotak transparan dengan teks pada gambar latar belakang
Gambar opacity menjelaskan
CSS Gambar Sprite
Sebuah gambar sprite
Sebuah sprite gambar - daftar menu
Sebuah sprite gambar dengan efek hover
Gambar sprite menjelaskan
CSS Atribut Selectors
Memilih semua elemen <a> dengan atribut target
Pilih semua elemen <a> dengan target = "_blank" atribut
Memilih semua elemen dengan atribut judul yang berisi daftar dipisahkan dengan spasi dari kata-kata, salah satunya adalah "bunga"
Pilih semua elemen dengan nilai atribut class yang diawali dengan "top" (harus seluruh kata)
Pilih semua elemen dengan nilai atribut class yang diawali dengan "top" (tidak harus seluruh kata)
Pilih semua elemen dengan nilai atribut class yang berakhir dengan "test"
Memilih semua elemen dengan nilai atribut kelas yang berisi "te"
Atribut penyeleksi menjelaskan
CSS3 Borders
Tambahkan sudut dibulatkan ke elemen
Menambahkan kotak-bayangan ke elemen
Gunakan gambar untuk membuat perbatasan di sekitar elemen
Perbatasan CSS3 menjelaskan
Backgrounds CSS3
Mengubah ukuran gambar latar belakang
Peregangan gambar latar belakang untuk sepenuhnya mengisi area konten
Posisi gambar latar belakang dalam konten-kotak
Tetapkan beberapa gambar latar belakang untuk elemen
Latar belakang CSS3 menjelaskan
CSS3 Gradien
Gradient Linear - atas ke bawah
Gradient Linear - kiri ke kanan
Gradient Linear - diagonal
Gradient Linear - dengan sudut tertentu
Gradient Linear - dengan beberapa warna berhenti
Gradient Linear - warna pelangi + teks
Gradient Linear - dengan transparansi
Gradient Linear - linear berulang gradien
Radial Gradient - merata spasi warna berhenti
Radial Gradient - warna berbeda spasi berhenti
Radial Gradient - set bentuk
Radial Gradient - ukuran yang berbeda kata kunci
Radial Gradient - gradien radial berulang
CSS3 gradien menjelaskan
CSS3 Efek Teks
Tambahkan bayangan untuk teks
Biarkan kata-kata panjang untuk dapat istirahat dan membungkus ke baris berikutnya
Efek teks CSS3 menjelaskan
CSS3 Font
Gunakan Anda "sendiri" font di @ aturan font-face
Menggunakan Anda "sendiri" font di @ aturan font-face (bold)
CSS3 font menjelaskan
CSS3 2D Transforms
menerjemahkan () - elemen bergerak dari posisi saat ini
rotate () - rotate elemen
skala () - elemen skala (kenaikan / penurunan)
condong () - mengubah elemen dalam sudut tertentu
matrix () - memutar, skala, bergerak (menerjemahkan), dan elemen condong
CSS3 2D sebagai transformator dijelaskan
CSS3 3D Transforms
rotateX () - elemen memutar sekitar nya X-sumbu pada tingkat tertentu
rotateY () - elemen memutar sekitar nya Y-sumbu pada tingkat tertentu
CSS3 3D sebagai transformator dijelaskan
CSS3 Transisi
Efek transisi - mengubah lebar
efek Transisi - lebar perubahan, tinggi, mengubah
Semua sifat transisi dalam satu contoh
Semua sifat transisi dalam satu (metode singkatan)
Transisi CSS3 menjelaskan
CSS3 Animasi
Ikat animasi untuk elemen
Animasi - perubahan warna background
Animasi - perubahan warna latar belakang dan posisi
CSS3 animasi menjelaskan
CSS3 Beberapa Kolom
Bagilah teks dalam elemen div ke dalam kolom
Tentukan kesenjangan antara kolom
Tentukan lebar, gaya dan warna aturan antara kolom
Beberapa kolom CSS3 menjelaskan
CSS3 User Interface
mengubah ukuran properti - Membuat elemen resizable oleh pengguna
properti kotak-sizing - Membuat dua kotak berbatasan berdampingan
properti outline-offset - mengimbangi garis
Antarmuka pengguna CSS3 menjelaskan
