Tutorial CSS
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
Semua properti background dalam satu deklarasi
Background canggih
CSS Borders
Mengatur lebar dari empat perbatasan
Mengatur lebar dari batas atas
Mengatur lebar dari batas bawah
Mengatur lebar dari batas 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
Menambahkan perbatasan bulat untuk elemen
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 ketebalan 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
Batas hitam untuk, tabel elemen th, dan td
Penggunaan border-collapse
Perbatasan tunggal di sekitar tabel
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 Keren
CSS Box Model
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)
Cara agar elemen tidak ditampilkan (display: none)
Cara 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 dimuat
Cara mengatur browser agar 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
Membuat huruf pertama dari paragraf seperti koran
Buat sebuah galeri gambar dengan properti mengambang
Mematikan mengambang (menggunakan properti yang jelas)
Membuat menu horizontal
Membuat homepage tanpa tabel
CSS Menyelaraskan Elemen
Menyelaraskan teks pusat
Pusat menyelaraskan dengan marjin
Pusat gambar
Pusat vertikal dengan bantalan
Pusat secara vertikal dan horizontal
Pusat vertikal dengan line-height
Pusat secara vertikal dan horizontal dengan posisi
Kiri / kanan menyelaraskan dengan posisi
Kiri / kanan menyelaraskan dengan posisi - solusi Crossbrowser
Kiri / kanan menyelaraskan dengan pelampung
Kiri / kanan menyelaraskan dengan pelampung - solusi Crossbrowser
CSS combinators
Pemilih keturunan
Pemilih anak
Berdekatan pemilih Sibling
Pemilih umum Sibling
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 - cocok dengan p elemen pertama
: pertama-anak - cocok elemen i pertama di semua elemen p
: pertama-anak - 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
CSS Opacity
Membuat gambar transparan
Membuat gambar transparan - efek mouseover
Efek mouseover terbalik untuk gambar transparan
Kotak transparan / div
Transparan kotak / div dengan nilai-nilai RGBA
Membuat kotak transparan dengan teks pada gambar latar belakang
Bar CSS Navigasi
Sepenuhnya bergaya bar navigasi vertikal
Sepenuhnya bergaya bar navigasi horisontal
CSS dropdown
teks dropdown
Menu drop down
Menu dropdown right-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
Galeri gambar Responsif
Sprite CSS Gambar
Sebuah sprite image
Gambar sprite - daftar menu
Sebuah sprite gambar dengan efek hover
CSS Atribut Selectors
Memilih semua elemen <a> dengan atribut target
Memilih 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"
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"
Bentuk CSS
Field input full-width
Field input
Field input berbatasan
Bawah field input border
Field input berwarna
Field input terfokus
Difokuskan field input 2
Input dengan icon / gambar
Masukan pencarian animasi
Hapus styling
Styling pilih menu
Styling tombol masukan
Penghitung CSS
Buat counter
Counter 1
Counter 2
CSS3 Rounded Corners
Tambahkan sudut bulat ke elemen
Putaran setiap sudut secara terpisah
Buat sudut elips
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
Backgrounds CSS3
Tambahkan beberapa gambar latar belakang untuk elemen
Tentukan ukuran gambar latar belakang
Skala gambar latar belakang menggunakan "contain" dan "cover"
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
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)
CSS3 Text
Menyembunyikan teks yang melebihi batas
Cara menampilkan konten yang melebihi batas ketika hover di atas elemen
Membuat kata-kata panjang ke baris berikutnya
Tentukan garis melanggar aturan
CSS3 Font
Gunakan Anda font "family" di @ font-face aturan
Gunakan Anda "family" font dalam aturan @ font-face (bold)
CSS3 2D Mentransformasi
menerjemahkan () - memindahkan elemen dari posisi saat ini
memutar () - memutar searah jarum jam elemen
memutar () - memutar elemen berlawanan arah jarum jam
skala () - meningkatkan unsur
skala () - menurunkan unsur
skewX () - skews elemen sepanjang sumbu X
skewY () - skews elemen di sepanjang sumbu Y
condong () - skews elemen sepanjang X dan Y-axis
matriks () - memutar, skala, bergerak, dan condong unsur
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
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
Breadcrum
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 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
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 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