Catatan Teknis zhaoJian

Kursus IT Dasar CSS 019_HelloCSS

Pembelajaran / Dasar CSS ~8740 kata · 22 menit baca - dilihat

Apa itu CSS?

CSS (Cascading Style Sheets, Lembar Gaya Bertingkat) mirip dengan HTML, CSS juga bukan bahasa pemrograman yang sebenarnya, bahkan bukan bahasa markup. CSS adalah bahasa lembar gaya, digunakan untuk menambahkan gaya ke elemen HTML, mendeskripsikan tampilan dokumen HTML, dan mengontrol warna, ukuran, font, tata letak, dll. dari elemen dokumen HTML.

CSS adalah bagian penting dari pengembangan web, dapat membantu Anda membuat halaman web yang menarik dan mudah digunakan.

Struktur Dasar CSS

Gaya CSS terdiri dari selektor dan properti. Selektor digunakan untuk memilih elemen HTML yang akan diberi gaya. Properti menentukan nilai gaya.

Contoh:

p {
    color: red;
}

Hasil:

Contoh efek

Analisis Struktur:

Contoh efek

[!Ringkasan]

  • Selektor (Selector) Nama elemen HTML berada di awal kumpulan aturan. Ia memilih satu atau lebih elemen yang perlu ditambahkan gaya (dalam contoh ini elemen <p>). Untuk menambahkan gaya ke elemen yang berbeda, cukup ubah selektor.

  • Deklarasi (Declaration) Sebuah aturan tunggal, seperti color: red; menentukan properti elemen yang akan diberi gaya. Deklarasi CSS selalu diakhiri dengan titik koma ; dan diapit oleh kurung kurawal {}:

  • Properti (Properties) Cara mengubah gaya elemen HTML (dalam contoh ini color adalah properti elemen <p>). Dalam CSS, penulis memutuskan properti mana yang akan diubah.

  • Nilai properti (Property value) Di sebelah kanan properti, setelah titik dua, adalah nilai properti, yang memilih satu nilai dari banyak tampilan yang mungkin (selain red, ada banyak nilai properti lain untuk color).

Bagaimana cara menyertakan CSS?

Penyertaan inline:

Kode CSS ditulis langsung dalam tag HTML, menggunakan atribut style.

Penyertaan inline adalah menulis kode gaya langsung dalam tag HTML, metode yang sederhana dan cepat. Kelebihan: nyaman dan cepat, cocok untuk sedikit gaya. Kekurangan:

  • Tidak menguntungkan untuk penggunaan ulang gaya, sulit dipelihara.
  • File HTML berantakan, tidak sesuai dengan prinsip pemisahan.
  • Tidak menguntungkan untuk cache browser, mempengaruhi kinerja.

Contoh:

  <div style="color: red; font-size: 16px;">Ini adalah teks merah</div>

Hasil:

Contoh efek

Penyertaan internal:

Kode CSS ditulis dalam tag <style>, ditempatkan di dalam tag <head>.

Penyertaan internal adalah menulis kode gaya dalam tag style file HTML, pendekatan yang relatif seimbang. Kelebihan: gaya terpisah dari file HTML, mudah dipelihara. Selain itu, cache browser dapat meningkatkan kecepatan pemuatan. Kekurangan:

  • Memerlukan permintaan jaringan tambahan saat memuat halaman, relatif tidak efisien.
  • Gaya dan file HTML masih memiliki kopling tertentu.

Contoh:

div {
    color: red;
    font-size: 16px;
}
  <div>Ini adalah teks merah</div>

Hasil:

Contoh efek

Penyertaan eksternal:

Kode CSS ditulis dalam file CSS terpisah, kemudian disertakan menggunakan tag link.

Penyertaan eksternal adalah menulis kode gaya dalam file CSS terpisah, metode yang standar. Kelebihan: gaya dan file HTML benar-benar terpisah, mudah dipelihara. Selain itu, akselerasi CDN dapat meningkatkan kecepatan pemuatan. Penyertaan eksternal juga mendukung kompresi dan penggabungan untuk mengurangi ukuran file. Kekurangan:

  • Memerlukan permintaan jaringan tambahan saat memuat halaman, tetapi dapat dioptimalkan.
  • Bergantung pada sumber daya eksternal, dapat menyebabkan pemblokiran atau kegagalan pemuatan.
  • Selama pengembangan mungkin memerlukan beberapa permintaan ke file eksternal.

Contoh:

<head>


<!-- Di direktori saat ini, referensi ke file gaya di subfolder styles -->
<link rel="stylesheet" href="style.css" />


<!-- Di direktori saat ini, referensi ke file gaya di styles/general -->
<link rel="stylesheet" href="/style.css" />


<!-- Di direktori induk, referensi ke file gaya di subfolder styles -->
<link rel="stylesheet" href="../styles/style.css" />


</head>
div {
    color: red;
    font-size: 16px;
}

Hasil:

Contoh efek Contoh efek

Urutan Kaskade dan Prioritas

Urutan kaskade CSS (Cascading Order) dan spesifisitas (Specificity) adalah dua faktor kunci yang menentukan efek gaya CSS yang ditampilkan.

Urutan kaskade: Urutan kaskade CSS mendefinisikan bobot aturan gaya, dari tinggi ke rendah:

  1. Kepentingan (!important): Aturan gaya yang dideklarasikan dengan !important memiliki prioritas tertinggi. Harus digunakan dengan hemat karena penyalahgunaan mempersulit pemeliharaan.
  2. Gaya penulis (Author Styles): Gaya yang didefinisikan oleh pengembang web, termasuk lembar gaya eksternal, internal, dan gaya inline. Prioritas antara gaya pengguna dan gaya agen pengguna.
  3. Gaya pengguna (User Styles): Gaya yang ditetapkan oleh pengguna melalui plugin atau pengaturan browser, prioritas lebih tinggi dari gaya agen pengguna, contoh: plugin font.
  4. Gaya agen pengguna (User Agent Styles): Gaya default browser, prioritas terendah, contoh: font.

Prioritas: Ketika ada beberapa aturan gaya pada level yang sama atau aturan yang bertentangan, CSS menampilkan gaya sesuai prioritas.

  1. Gaya inline (Inline Styles): Gaya yang ditentukan dalam tag HTML, prioritas tertinggi.
  2. Selektor ID (id): Gaya yang ditentukan oleh selektor ID, contoh: #header.
  3. Selektor kelas, atribut, dan pseudo-kelas (class): Melalui selektor kelas, contoh: .container. Melalui selektor atribut, contoh: [type="text"]. Melalui selektor pseudo-kelas, contoh: :hover.
  4. Selektor elemen: Selektor dengan nama elemen HTML, contoh: div, p.

Pada prioritas yang sama, aturan yang didefinisikan terakhir memiliki prioritas lebih tinggi.

Contoh:

#header {
    color: red;
}


.container p {
    color: blue;
}


p {
    color: green;
}
Pewarisan CSS

Pewarisan CSS berarti elemen anak mewarisi beberapa nilai properti dari elemen induk. Pewarisan adalah fitur penting dalam CSS yang menyederhanakan penulisan gaya dan meningkatkan pemeliharaan kode. Tidak semua properti CSS dapat diwariskan, hanya sebagian yang didefinisikan sebagai dapat diwariskan.

Properti CSS yang dapat diwariskan terutama meliputi:

  • Properti teks: font-family, font-size, font-weight, font-style, color, text-decoration, text-align, line-height, letter-spacing, word-spacing
  • Properti warna: background-color, border-color, color, outline-color
  • Properti border: border-width, border-style, border-color
  • Properti model kotak: margin, padding, width, height, display, float, position, z-index

Properti CSS yang tidak dapat diwariskan termasuk width, height, margin, padding dan properti model kotak lainnya, pemosisian (position), float (float), clear (clear) dan properti tata letak lainnya.

Properti CSS yang umum digunakan dan fungsinya:

Properti dasar width, height: Mengatur lebar dan tinggi elemen. margin: Mengatur margin elemen. padding: Mengatur padding elemen. color, background-color: Mengatur warna dan warna latar belakang elemen. font-size, font-family, font-weight, font-style: Mengatur ukuran, keluarga, berat, dan gaya font.

Properti tata letak display: Mengatur mode tampilan elemen. float: Mengatur perilaku float elemen. position: Mengatur posisi elemen. top, left, right, bottom: Mengatur posisi atas, kiri, kanan, dan bawah. z-index: Mengatur urutan tumpukan elemen.

Properti teks text-align: Mengatur perataan teks. text-decoration: Mengatur dekorasi teks. line-height: Mengatur tinggi baris. font-variant: Mengatur varian font. text-transform: Mengatur transformasi teks. letter-spacing, word-spacing: Mengatur jarak karakter dan kata.

Properti border border: Mengatur gaya border elemen. border-width: Mengatur lebar border. border-style: Mengatur gaya border. border-color: Mengatur warna border. border-radius: Mengatur radius sudut border.

Properti latar belakang background: Mengatur latar belakang elemen. background-color: Mengatur warna latar belakang. background-image: Mengatur gambar latar belakang. background-repeat: Mengatur mode pengulangan gambar latar belakang. background-position: Mengatur posisi gambar latar belakang. background-size: Mengatur ukuran gambar latar belakang.

Properti transisi transition: Mengatur efek transisi elemen. transition-property: Mengatur properti transisi. transition-duration: Mengatur durasi transisi. transition-timing-function: Mengatur fungsi transisi. transition-delay: Mengatur penundaan transisi.

Kursus IT Kursus HTML Kursus CSS Kursus JavaScript Kursus Java Sistem Komputer dan Jaringan hello css Dasar CSS
Bagikan:

Komentar