Scribd Logo
Unggah

Selamat datang di Scribd!

  • Tugas 5

    Diunggah oleh

    Hafizh Muchfarild
    4 tayangan6 halaman

    Judul Asli

    tugas 5

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    4 tayangan6 halaman

    Tugas 5

    Diunggah oleh

    Hafizh Muchfarild

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 6

    Penghitung CSS

    Penghitung CSS adalah "variabel" yang dikelola oleh CSS yang nilainya dapat
    ditambah dengan aturan CSS (untuk melacak berapa kali digunakan).
    Penghitung memungkinkan Anda menyesuaikan tampilan konten berdasarkan
    penempatannya di dokumen.
    Penomoran Otomatis Dengan Penghitung
    Penghitung CSS seperti "variabel". Nilai variabel dapat ditambah dengan
    aturan CSS (yang akan melacak berapa kali digunakan).
    Untuk bekerja dengan penghitung CSS, kami akan menggunakan properti
    berikut:
    counter-reset- Membuat atau mengatur ulang penghitung
    counter-increment- Menaikkan nilai penghitung
    content- Menyisipkan konten yang dihasilkan
    counter()atau counters()fungsi - Menambahkan nilai penghitung ke elemen
    Untuk menggunakan penghitung CSS, pertama-tama harus dibuat dengan
    counter-reset.
    Contoh berikut membuat penghitung untuk halaman (di selektor badan), lalu
    menambahkan nilai penghitung untuk setiap elemen <h2> dan menambahkan
    "Bagian < nilai penghitung >:" ke awal setiap elemen <h2>:
    Contoh
    body {
    counter-reset: section;
    }
    h2::before {
    counter-increment: section;
    content: "Section " counter(section)
    Tata Letak Situs Web CSS
    Ada banyak desain tata letak yang berbeda untuk dipilih. Namun, struktur di
    atas, adalah salah satu yang paling umum, dan kita akan melihatnya lebih
    dekat di tutorial ini.

    Tajuk
    Header biasanya terletak di bagian atas situs web (atau tepat di bawah menu
    navigasi atas). Ini sering berisi logo atau nama situs web:

    Contoh
    .header {
    background-color: #F1F1F1;
    text-align: center;
    padding: 20px;
    }
    Unit CSS
    Unit CSS
    CSS memiliki beberapa unit berbeda untuk menyatakan panjang.
    Banyak properti CSS mengambil nilai "panjang", seperti width, margin,
    padding, font-size, dll.
    Panjang adalah angka yang diikuti dengan satuan panjang, seperti 10px, 2em,
    dll.
    Contoh
    Tetapkan nilai panjang yang berbeda, menggunakan px (piksel):
    h1 {
    font-size: 60px;
    }
    p{
    font-size: 25px;
    line-height: 50px;
    }
    Catatan: Spasi kosong tidak boleh muncul di antara angka dan satuan. Namun,
    jika nilainya 0, maka satuannya dapat dihilangkan.
    Untuk beberapa properti CSS, panjang negatif diperbolehkan.
    Ada dua jenis satuan panjang: absolute dan relative
    Kekhususan CSS
    Apa itu Kekhususan?
    Jika ada dua atau lebih aturan CSS yang mengarah ke elemen yang sama,
    pemilih dengan nilai spesifisitas tertinggi akan "menang", dan deklarasi
    gayanya akan diterapkan ke elemen HTML tersebut.

    Pikirkan spesifisitas sebagai skor/peringkat yang menentukan deklarasi gaya


    mana yang pada akhirnya diterapkan pada suatu elemen.

    Lihatlah contoh-contoh berikut:


    Contoh:
    Dalam contoh ini, kami menggunakan elemen "p" sebagai pemilih, dan
    menentukan warna merah untuk elemen ini. Teks akan berwarna merah:
    <html>
    <head>
    <style>
    p {color: red;}
    </style>
    </head>
    <body>
    <p>Hello World!</p>
    </body>
    </html>
    CSS Aturan !important
    Apa yang penting?
    Aturan !importantdalam CSS digunakan untuk menambahkan lebih penting ke
    properti/nilai dari biasanya.

    Faktanya, jika Anda menggunakan !importantaturan, itu akan menggantikan


    SEMUA aturan penataan gaya sebelumnya untuk properti tertentu pada
    elemen itu!

    Mari kita lihat sebuah contoh:

    Contoh
    #myid {
    background-color: blue;
    }

    .myclass {
    background-color: gray;
    }

    p{
    background-color: red !important;
    }
    Fungsi Matematika CSS
    Fungsi matematika CSS memungkinkan ekspresi matematika untuk digunakan
    sebagai nilai properti. Di sini, kami akan menjelaskan tentang calc(), max()dan
    min()fungsi.

    Fungsi calc()
    Fungsi calc()melakukan perhitungan untuk digunakan sebagai nilai properti.

    Contoh:
    Gunakan calc() untuk menghitung lebar elemen <div>:

    #div1 {
    position: absolute;
    left: 50px;
    width: calc(100% - 100px);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    }

    Anda mungkin juga menyukai