Latest web development tutorials

Contoh CSS

CSS Background

Mengatur warna latar belakang halaman

Mengatur warna latar belakang dari elemen yang berbeda

Mengatur gambar sebagai latar belakang halaman

gambar latar belakang yang salah

Bagaimana untuk mengulang gambar latar belakang dalam arah horisontal

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

Menjelaskan latar belakang properti

teks CSS

Pengaturan berbagai elemen warna teks

teks Keselarasan

Hapus link yang digarisbawahi

Dekorasi teks

Mengontrol huruf dalam teks

teks indent

Menentukan ruang antara karakter

Menentukan ruang antara baris dan baris

Mengatur elemen orientasi teks

Meningkatkan ruang antara kata-kata

Menonaktifkan membungkus teks dalam sebuah elemen

Alignment vertikal gambar di dalam teks

Jelaskan properti Text

CSS Font

Mengatur font teks

Mengatur ukuran font

Ukuran font yang ditetapkan oleh px

Em dengan ukuran font set

Mengatur ukuran font sebagai persentase dan em

Mengatur gaya font

Mengatur varian font yang

Mengatur berat font yang

Semua properti font dalam satu deklarasi

Jelaskan sifat Font

Link CSS

Untuk akses / link yang belum dikunjungi untuk menambahkan warna yang berbeda

Gunakan hiasan teks pada link

Menentukan warna latar belakang dari link

Hyperlink untuk menambahkan gaya tambahan

Lanjutan - Buat Link kotak

Menjelaskan sifat-sifat hubungan

daftar CSS

Daftar semua penanda daftar item yang berbeda

Ditetapkan sebagai penanda gambar item daftar

solusi crossbrowser menggunakan daftar set barang penanda image

Semua sifat daftar dalam satu deklarasi

Interpretasi daftar properti

tabel CSS

Tentukan tabel Th, elemen TD dan perbatasan hitam

Menggunakan border-collapse

Lebar dan tinggi tabel

Mengatur alignment horizontal isi (perataan teks)

Set Isi dari vertical alignment (kesejajaran vertikal)

Mengisi ditentukan TH dan TD elemen

Menentukan warna perbatasan tabel

Mengatur posisi judul tabel

Membuat tabel mewah

Tabel menjelaskan properti

model kotak CSS

Total lebar elemen tertentu untuk 250 piksel

solusi crossbrowser menggunakan elemen tertentu dari total lebar 250 piksel

Model kotak interpretasi

CSS Border

Mengatur lebar dari empat perbatasan

Mengatur lebar perbatasan

Mengatur lebar batas bawah

Mengatur lebar perbatasan kiri

Mengatur lebar batas kanan

Menyiapkan empat gaya perbatasan

Pengaturan gaya perbatasan

Pengaturan gaya perbatasan

Mengatur gaya perbatasan kiri

Pengaturan gaya batas kanan

Mengatur warna dari empat perbatasan

Mengatur warna perbatasan

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

Dalam sebuah pernyataan, semua properti perbatasan yang tepat

Penjelasan sifat perbatasan

CSS garis

Sekitar unsur (outline), menggambar garis

Mengatur gaya garis

Menyetel warna kerangka

Mengatur lebar garis besar

Menjelaskan sifat-sifat garis

Margin CSS

Menetapkan bahwa unsur margin

properti singkat Margin

Teks margin atas nilai pengaturan cm

Menggunakan nilai persentase teks di tepi bawah

Sentimeter kiri teks dari nilai yang ditetapkan

Jelaskan properti Margin

CSS Padding

bagian kiri dari elemen pengaturan fill

Mengatur bagian kanan dari elemen mengisi

Pengaturan di elemen atas untuk mengisi

Mengatur elemen underfill

Semua padding dalam satu deklarasi

menjelaskan properti Padding

CSS dan pengelompokan bersarang

pemilih kelompok

penyeleksi bersarang

Pengelompokan dan interpretasi bersarang

ukuran CSS

Menggunakan ketinggian nilai pixel dari gambar

Menggunakan set sebagai persentase dari tinggi gambar

Menggunakan nilai pixel untuk mengatur lebar elemen

Gunakan persentase untuk mengatur lebar dari elemen

Tinggi maksimum dari elemen

Menggunakan nilai pixel diatur dengan lebar maksimum elemen

Gunakan persentase untuk mengatur lebar maksimum elemen

Mengatur tinggi minimum dari elemen

Lebar minimum dari nilai-nilai pixel untuk mengatur elemen

Lebar minimum menggunakan persentase set elemen

Jelaskan ukuran properti

CSS Tampilan

Cara menyembunyikan elemen (visibility: hidden)

Bagaimana tidak menampilkan elemen (display: none)

Cara menampilkan elemen elemen inline

Bagaimana menampilkan blok elemen

H bagaimana menggunakan bentuk runtuhnya properti

Jelaskan sifat Tampilan

CSS Positioning

posisi elemen relatif terhadap jendela browser

posisi relatif dari elemen

elemen benar-benar diposisikan

unsur tumpang tindih

Mengatur elemen bentuk

Cara menggunakan scroll bar untuk menampilkan isi dari elemen melimpah dalam

Cara mengatur browser untuk secara otomatis menangani luapan

Gunakan atas nilai pixel citra

Bagian bawah gambar menggunakan nilai pixel

Gunakan nilai pixel gambar ke kiri

Hak gambar menggunakan nilai pixel

Ganti kursor

Sifat penjelasan posisi

CSS mengapung

Cukup menggunakan properti mengambang

Gambar kiri menambahkan perbatasan dan margin dan mengapung ke paragraf

Judul dan gambar ke float yang tepat

Biarkan huruf pertama dari float ayat ke kiri

Membuat galeri gambar menggunakan properti mengambang

Terbuka mengambang - properti yang jelas

Membuat menu horisontal

Tidak membuat halaman dengan meja

Jelaskan properti Lampung

CSS Align Elements

penyesuaian marjin menengah

Kiri / posisi yang tepat sejajar

Gunakan Crossbrowser solusi set kiri / posisi yang tepat sejajar

Kiri / kanan, Mengambang

Gunakan Crossbrowser solusi set meninggalkan posisinya / kanan sejajar mengambang

Align interpretasi atribut

CSS konten yang dihasilkan

URL dalam tanda kurung dimasukkan ke dalam setiap link kembali atribut dengan konten

Dan sub-bagian dari nomor bab adalah "Bagian 1", "1.1", "1,2", dll

mengutip properti menentukan tanda kutip

CSS pseudo-kelas

Tambahkan warna yang berbeda dari hyperlink

Tambahkan gaya lain untuk hyperlink

Gunakan: Fokus

: Pertama-anak - cocok dengan p elemen pertama

: Pertama-anak - cocok pertama p elemen Saya elemen

: Pertama-anak - cocok dengan p elemen pertama di semua elemen saya

Gunakan: lang

interpretasi pseudo-class

CSS pseudo-elemen

Huruf pertama dari teks untuk surat khusus

Baris pertama dari pengaturan teks untuk khusus

Huruf pertama dari baris pertama dari teks diatur ke khusus

Gunakan: memasukkan beberapa konten sebelum elemen

Gunakan: memasukkan beberapa konten setelah elemen

Dijelaskan pseudo-elemen

CSS bar navigasi

gaya penuh bar navigasi vertikal

gaya penuh bar navigasi horisontal

Jelaskan bar navigasi

CSS Galeri

Galeri gambar

Galeri penjelasan

image CSS opacity

Membuat gambar transparan - efek mouseover

Membuat kotak transparan dengan gambar latar belakang teks

Opacity interpretasi citra

CSS mosaik citra

image Berpisah

image Split - daftar navigasi

Meratakan efek gambar melayang

Meratakan interpretasi citra

CSS atribut penyeleksi

Pilih elemen dengan atribut judul

Pilih elemen judul nilai tertentu =

Pilih judul tertentu = nilai elemen (menggunakan (-) memisahkan atribut dan nilai-nilai)

Pilih title = nilai elemen tertentu (menggunakan (|) memisahkan atribut dan nilai-nilai)

Atribut penyeleksi menjelaskan