CSS Syntax
Unsur pemilih
Id selector
Kelas pemilih (untuk semua elemen)
Kelas pemilih (hanya <p> elemen)
pengelompokan selektor
Backgrounds CSS
Mengatur warna latar belakang halaman
Mengatur warna latar belakang dari elemen yang berbeda
Mengatur foto 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 gulir dengan sisa halaman)
Semua properti background dalam satu deklarasi
Background canggih misalnya
Latar belakang properti menjelaskan
CSS Borders
Mengatur lebar dari empat perbatasan
Mengatur lebar dari perbatasan atas
Mengatur lebar dari batas bawah
Mengatur lebar dari perbatasan kiri
Mengatur lebar dari batas kanan
Mengatur gaya dari empat perbatasan
Mengatur gaya perbatasan atas
Mengatur gaya perbatasan bawah
Mengatur gaya perbatasan kiri
Mengatur gaya perbatasan yang tepat
Mengatur warna dari empat perbatasan
Mengatur warna perbatasan atas
Mengatur warna dari batas bawah
Mengatur warna dari perbatasan kiri
Mengatur warna dari batas kanan
Semua properti perbatasan dalam satu deklarasi
Mengatur perbatasan yang berbeda di setiap sisi
Semua properti perbatasan atas dalam satu deklarasi
Semua properti perbatasan bawah dalam satu deklarasi
Semua properti perbatasan kiri dalam satu deklarasi
Semua properti perbatasan yang tepat dalam satu deklarasi
Margin CSS
Tentukan margin yang berbeda untuk masing-masing sisi elemen
Biarkan margin kiri diwariskan dari elemen induk
Properti Margin singkatan
Mengatur margin auto ke pusat elemen dalam wadah
CSS Padding
Mengatur padding kiri elemen
Mengatur padding kanan elemen
Mengatur padding atas sebuah elemen
Mengatur padding bawah elemen
Semua padding dalam satu deklarasi
CSS Text
Mengatur warna teks unsur yang berbeda
Sejajarkan teks
Hapus garis bawah link
Menghias teks
Mengontrol huruf dalam teks
teks indent
Tentukan ruang antara karakter
Tentukan ruang antara baris
Mengatur arah teks dari suatu unsur
Meningkatkan ruang putih di antara kata-kata
Menonaktifkan membungkus teks dalam sebuah elemen
Alignment vertikal gambar di dalam teks
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
CSS Links
Tambahkan warna yang berbeda untuk mengunjungi / link yang belum dikunjungi
Penggunaan text-decoration pada link
Menentukan warna latar belakang untuk link
Tambahkan gaya lain untuk hyperlink
Lanjutan - Buat kotak Link
Lanjutan - Buat kotak tautan dengan perbatasan
Daftar CSS
Semua berbeda penanda daftar item dalam daftar
Mengatur foto sebagai daftar-item penanda
Posisi daftar-item penanda
Semua sifat daftar dalam satu deklarasi
Daftar gaya dengan warna
-Lebar penuh berbatasan daftar
Tabel CSS
Tentukan batas hitam untuk meja, elemen th, dan td
Penggunaan border-collapse
Perbatasan tunggal di sekitar meja
Tentukan lebar dan tinggi tabel
Mengatur alignment horizontal konten (text-align)
Mengatur alignment vertikal konten (vertical-align)
Tentukan padding untuk th dan td elemen
pembagi horisontal
tabel Hoverable
tabel bergaris
Tentukan warna perbatasan tabel
Mengatur posisi judul tabel
Tabel responsif
Membuat tabel mewah
CSS Box Model
Tentukan elemen dengan lebar total 250px
CSS Outline
Menggambar garis di sekitar elemen (outline)
Mengatur gaya garis
Mengatur warna garis
Mengatur lebar garis
CSS Dimensi
Mengatur tinggi dan lebar elemen
Set max-lebar elemen
Mengatur tinggi dan lebar elemen yang berbeda
Mengatur tinggi dan lebar gambar menggunakan persen
Set min-width dan max-lebar elemen
Set min-height dan max-height dari unsur
CSS Tampilan
Cara menyembunyikan elemen (visibility:hidden)
Bagaimana tidak menampilkan elemen (display:none)
Bagaimana menampilkan elemen blok-tingkat sebagai unsur inline
Bagaimana menampilkan elemen inline sebagai elemen blok-tingkat
Cara menggunakan CSS bersama-sama dengan JavaScript untuk menampilkan konten yang tersembunyi
CSS Positioning
Posisi elemen relatif terhadap jendela browser
Posisi elemen relatif terhadap posisi normal
Posisi elemen dengan nilai absolut
unsur tumpang tindih
Mengatur bentuk elemen
Cara membuat scroll bar bila konten elemen ini terlalu besar untuk muat
Cara mengatur browser untuk secara otomatis menangani luapan
Mengatur tepi atas dari suatu gambar dengan menggunakan nilai pixel
Mengatur tepi bawah gambar menggunakan nilai pixel
Mengatur tepi kiri gambar menggunakan nilai pixel
Mengatur tepi kanan gambar menggunakan nilai pixel
Mengubah kursor teks gambar Posisi (pojok kiri atas)
Posisi gambar teks (pojok kanan atas)
Posisi gambar teks (bawah pojok kiri)
Posisi gambar teks (pojok kanan bawah)
Teks posisi gambar (berpusat)
CSS Mengambang
Sebuah penggunaan sederhana dari properti mengambang
Gambar dengan perbatasan dan margin yang mengapung ke kanan di paragraf
Sebuah gambar dengan keterangan yang mengapung ke kanan
Biarkan huruf pertama dari float ayat ke kiri
Buat sebuah galeri gambar dengan properti mengambang
Mematikan mengambang (menggunakan properti yang jelas)
Membuat menu horizontal
Membuat homepage tanpa tabel
CSS Menyelaraskan Elemen
Pusat menyelaraskan dengan marjin
Kiri / kanan menyelaraskan dengan posisi
Kiri / kanan menyelaraskan dengan posisi - solusi Crossbrowser
Kiri / kanan menyelaraskan dengan pelampung
Kiri / kanan menyelaraskan dengan pelampung - solusi Crossbrowser
Menyelaraskan sifat menjelaskan
CSS combinators
pemilih keturunan
pemilih anak
Berdekatan pemilih Sibling
Pemilih umum Sibling
Penyeleksi Combinator menjelaskan
CSS Generated Content
Masukkan URL dalam kurung setelah setiap link dengan properti konten
Penomoran bagian dan sub-bagian dengan "Section 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
:first-child - cocok dengan p elemen pertama
:first-child - cocok elemen i pertama di semua elemen p
:first-child - Sama semua i elemen dalam semua elemen p anak pertama
Penggunaan :lang
CSS Pseudo-elemen
Membuat huruf pertama khusus dalam teks
Membuat baris pertama khusus dalam teks
Membuat huruf pertama dan jalur khusus pertama
Gunakan: sebelum memasukkan beberapa konten sebelum elemen
Gunakan: setelah memasukkan beberapa konten setelah elemen
Bar CSS Navigasi
Sepenuhnya bergaya bar navigasi vertikal
Sepenuhnya bergaya bar navigasi horisontal
CSS dropdown
teks dropdown
Menu drop down
Menu dropdown benar-blok
image dropdown
Bar navigasi dropdown
CSS Tooltips
tooltip tepat
tooltip meninggalkan
Top tooltip
bawah tooltip
Tooltip dengan panah
animasi tooltip
CSS Galeri
Galeri Foto
Responsif Galeri gambar
CSS Gambar Opacity
Membuat gambar transparan - efek mouseover
Membuat kotak transparan dengan teks pada gambar latar belakang
Sprite CSS Gambar
Sebuah sprite image
Gambar sprite - daftar menu
Sebuah sprite gambar dengan efek hover
CSS Atribut Selectors
Memilih semua <a> elemen dengan atribut target
Memilih semua <a> elemen dengan target = "_ blank" atribut
Memilih semua elemen dengan atribut judul yang berisi daftar dipisahkan dengan spasi dari kata-kata, salah satunya adalah "bunga"
Memilih semua elemen dengan nilai atribut kelas yang dimulai dengan "top" (harus seluruh kata)
Memilih semua elemen dengan nilai atribut kelas yang dimulai dengan "top" (tidak harus seluruh kata)
Memilih semua elemen dengan nilai atribut kelas yang berakhir dengan "test"
Memilih semua elemen dengan nilai atribut kelas yang berisi "te"
Atribut penyeleksi menjelaskan
Bentuk CSS
Field input full-width
Field input empuk
Field input berbatasan
Bawah field input border
Field input berwarna
Field input terfokus
Difokuskan field input 2
Input dengan icon / gambar
Masukan pencarian animasi
dihapus saja styling
Styling pilih menu
Styling tombol masukan
Penghitung CSS
Buat counter
Counter bersarang 1
Bersarang counter 2
CSS3 Rounded Corners
Tambahkan sudut dibulatkan ke elemen
Putaran setiap sudut secara terpisah
Buat sudut elips
Sudut dibulatkan CSS3 menjelaskan
Gambar CSS3 Border
Buat gambar perbatasan sekitar elemen, menggunakan kata kunci putaran
Buat gambar perbatasan sekitar elemen, menggunakan kata kunci peregangan
Gambar perbatasan - nilai slice Berbeda
CSS3 gambar perbatasan menjelaskan
Backgrounds CSS3
Tambahkan beberapa gambar latar belakang untuk elemen
Tentukan ukuran gambar latar belakang
Skala gambar latar belakang menggunakan "berisi" dan "penutup"
Tentukan ukuran beberapa gambar latar belakang
Full-size background image (benar-benar mengisi area konten)
Gunakan background-asal untuk menentukan di mana gambar latar belakang adalah diposisikan
Gunakan background-clip untuk menentukan daerah lukisan latar belakang
Latar belakang CSS3 menjelaskan
CSS3 Gradien
Linear Gradient - atas ke bawah
Linear Gradient - kiri ke kanan
Linear Gradient - diagonal
Linear Gradient - dengan sudut tertentu
Linear Gradient - dengan beberapa berhenti warna
Linear Gradient - warna pelangi + teks
Linear Gradient - dengan transparansi
Linear Gradient - gradien linier berulang
Radial Gradient - merata spasi berhenti warna
Radial Gradient - berhenti warna berbeda spasi
Radial Gradient - set bentuk
Radial Gradient - kata kunci ukuran yang berbeda
Radial Gradient - gradien radial berulang
CSS3 Efek Bayangan
Efek bayangan sederhana
Tambahkan warna untuk bayangan
Menambahkan efek blur untuk bayangan
Teks putih dengan bayangan hitam
Sebuah neon merah cahaya shadow
Sebuah neon merah dan biru cahaya bayangan
Teks putih dengan bayangan hitam, biru, dan darkblue
Tambahkan sederhana box-shadow untuk elemen
Tambahkan warna untuk kotak-shadow
Tambahkan warna dan efek blur untuk kotak-shadow
Membuat kartu seperti kertas (teks)
Membuat kartu seperti kertas (polaroid gambar)
Efek bayangan CSS3 menjelaskan
CSS3 Text
Tentukan bagaimana tersembunyi, konten meluap harus memberi isyarat kepada pengguna
Cara menampilkan konten meluap ketika hover atas elemen
Memungkinkan kata-kata panjang untuk bisa menjadi rusak dan membungkus ke baris berikutnya
Tentukan garis melanggar aturan
CSS3 Font
Gunakan Anda font "sendiri" di @font-face aturan
Gunakan Anda "sendiri" font di @font-face rule (bold)
CSS3 2D Mentransformasi
translate() - memindahkan elemen dari posisi saat ini
rotate() - memutar searah jarum jam elemen
rotate() - memutar elemen berlawanan arah jarum jam
scale() - meningkatkan unsur
scale() - menurunkan unsur
skewX() - skews elemen sepanjang sumbu X
skewY() - skews elemen di sepanjang sumbu Y
skew() - skews elemen sepanjang X dan Y-axis
matrix() - memutar, skala, bergerak, dan condong unsur
CSS3 2D sebagai transformator menjelaskan
CSS3 3D Mentransformasi
rotateX() - memutar elemen di sekitar X-sumbunya pada tingkat tertentu
rotateY() - memutar elemen sekitar nya Y-axis di gelar diberikan
rotateZ() - memutar elemen sekitar Z-sumbu pada derajat tertentu
CSS3 transformasi 3D menjelaskan
Transisi CSS3
Lebar perubahan unsur - Transisi
Transisi - lebar perubahan dan tinggi dari suatu elemen
Tentukan kurva kecepatan yang berbeda untuk transisi
Tentukan penundaan untuk efek transisi
Menambahkan transformasi untuk efek transisi
Tentukan semua properti transisi dalam satu properti singkat
CSS3 Animasi
Mengikat sebuah animasi untuk elemen
Animasi - perubahan background-warna unsur
Animasi - perubahan background-warna dan posisi elemen
Menunda animasi
Jalankan animasi 3 kali sebelum berhenti
Jalankan animasi untuk selama-lamanya
Jalankan animasi arah sebaliknya
Jalankan animasi dalam siklus alternatif
Kurva kecepatan untuk animasi
Animasi properti singkat
Gambar CSS3
gambar bulat
gambar dilingkari
gambar thumbnail
Gambar thumbnail sebagai link
image responsif
Gambar teks (pojok kiri atas)
Gambar teks (pojok kanan atas)
Gambar teks (bawah pojok kiri)
Gambar teks (pojok kanan bawah)
Gambar teks (berpusat)
gambar Polaroid
Grayscale filter gambar
Canggih - Gambar Modal dengan CSS dan JavaScript
Tombol CSS3
Tombol CSS dasar
warna tombol
ukuran tombol
tombol bulat
Berwarna tombol perbatasan
tombol Hoverable
tombol bayangan
tombol dinonaktifkan
lebar tombol
kelompok tombol
Kelompok tombol berbatasan
Animasi Button (Hover Effect)
Animasi Button (Ripple Effect)
Animasi Tombol (Bedak Effect)
CSS3 Pagination
pagination sederhana
Pagination aktif dan hoverable
Bulat pagination aktif dan hoverable
Efek transisi Hoverable
berbatasan pagination
Bulat pagination border
Pagination dengan ruang antara link
ukuran pagination
Pagination dengan ruang antara link
berpusat pagination
Remah roti
CSS3 Beberapa Kolom
Buat beberapa kolom
Tentukan kesenjangan antara kolom
Tentukan gaya aturan antara kolom
Tentukan lebar aturan antara kolom
Tentukan warna aturan antara kolom
Tentukan lebar, gaya dan warna aturan antara kolom
Tentukan berapa banyak kolom elemen harus mencakup seluruh
Tentukan disarankan, lebar optimal untuk kolom
CSS3 beberapa kolom menjelaskan
CSS3 User Interface
Biarkan pengguna mengubah ukuran lebar elemen
Biarkan pengguna mengubah ukuran ketinggian elemen
Biarkan pengguna mengubah ukuran baik lebar dan tinggi dari suatu elemen
Tambahkan ruang antara garis dan perbatasan elemen
Antarmuka pengguna CSS3 menjelaskan
CSS3 Box Ukuran
Lebar elemen tanpa box-sizing
Lebar elemen dengan kotak-sizing
Elemen form + box-sizing
CSS3 flexbox
Flexbox dengan tiga item fleksibel
Flexbox dengan tiga item fleksibel - arah rtl
flex-arah - baris-terbalik
flex-arah - kolom
flex-arah - kolom-terbalik
membenarkan-konten - flex-end
membenarkan-konten - pusat
membenarkan-konten - ruang-antara
membenarkan-konten - ruang-sekitar
menyelaraskan-item - stretch
menyelaraskan-item - flex-start
menyelaraskan-item - flex-end
menyelaraskan-item - pusat
menyelaraskan-item - dasar
flex-wrap - nowrap
flex-wrap - bungkus
flex-wrap - wrap-terbalik
menyelaraskan-konten - pusat
Memesan item fleksibel
Margin-right: auto;
Margin: auto; = Sempurna centering
menyelaraskan diri pada item fleksibel
Menentukan panjang item flex, relatif terhadap seluruh item fleksibel
Membuat website responsif dengan flexbox
CSS3 Media Query
Mengubah background-warna lightgreen jika viewport adalah 480px lebar atau luas
Tampilkan menu yang akan mengapung di sebelah kiri halaman jika viewport adalah 480px lebar atau luas
CSS3 pertanyaan media menjelaskan
CSS3 Media Query - Lebih Contoh
Halaman HTML
Lebar dari 520 ke 699px - Terapkan ikon email untuk setiap link
Lebar dari 700 ke 1000px - Kata Pengantar link dengan teks
Lebar di atas 1001px - Terapkan alamat email ke link
Lebar atas 1151px - Tambahkan ikon seperti yang kita gunakan sebelumnya
Gunakan daftar link email di sidebar di halaman web
Media CSS3 query contoh menjelaskan