Membuat dan menerapkan gaya

Penting: Artikel ini adalah terjemahan mesin, lihat penafian. Temukan versi bahasa Inggris artikel di sini sebagai rujukan Anda.

Gaya adalah sekumpulan karakteristik yang ditentukan dalam lembar gaya kaskade (CSS) pemformatan. Anda dapat menerapkan gaya ke konten pada halaman Web, termasuk teks masing-masing karakter atau seluruh paragraf, grafik, lapisan, tabel, dan bahkan ke isi seluruh halaman Web. Gaya memungkinkan Anda untuk menggunakan kembali secara efisien kumpulan properti dan nilai tanpa harus mengatur properti setiap kali Anda ingin menggunakannya.

Gaya CSS bertingkat secara global gaya aturan berlaku untuk elemen HTML kecuali aturan lokal gaya mengesampingkan mereka. Secara umum, gaya lokal aturan mendapat prioritas atas umum gaya aturan. Misalnya, gaya yang ditentukan dalam CSS internal di halaman Web mengesampingkan gaya yang ditentukan dalam CSS eksternal. Demikian pula, sebaris CSS yang ditentukan dalam elemen HTML tunggal pada halaman Web mengesampingkan gaya apa pun yang ditetapkan untuk elemen yang sama dalam CSS internal atau eksternal dari halaman Web. Bagian-bagian dari aturan global gaya yang tidak dibantah oleh lokal CSS gaya aturan diterapkan ke elemen HTML bahkan saat lokal gaya diterapkan.

Di artikel ini

Tipe gaya

Membuat gaya

Menerapkan gaya

Tipe gaya

Gaya yang berada di luar atau internal CSS bisa berbasis kelas, berbasis elemen atau berdasarkan id. Gaya ditentukan oleh kumpulan aturan, yang terdiri dari pemilih, diikuti dengan blok Deklarasi properti yang muncul antara kurung kurawal kurawal kiri ({}) dan kurung kurawal kurawal kanan (}). Setiap tipe gaya dibedakan dari tipe gaya lain oleh pemilih yang; tanda titik (.) mendahului pemilih untuk gaya berbasis kelas; tanda nomor (#) mendahului pemilih untuk gaya berbasis elemen; dan pemilih untuk gaya berbasis elemen yang hanya terdiri dari elemen HTML, seperti H1 elemen.

Gaya berbasis kelas

Gunakan gaya berbasis kelas untuk menentukan sekumpulan properti yang ingin Anda gunakan pada satu atau beberapa item di halaman Web. Jika Anda ingin mengubah gaya, Anda bisa mengedit aturan gaya yang ditetapkan dan setiap item yang sudah Anda Terapkan gaya untuk secara otomatis akan memperlihatkan perubahan.

Dalam contoh berikut, "pengenalan" adalah pemilih gaya, dan "ukuran font: kecil" adalah satu properti Deklarasi, diikuti dengan deklarasi properti kedua.

Contoh aturan mengatur untuk gaya berbasis kelas

.introduction {font-size: small; color: white}

Contoh gaya berbasis kelas yang diterapkan ke < p > tag

<p class="introduction">

Gaya berbasis elemen

Gunakan gaya berbasis elemen untuk menentukan kumpulan properti yang Anda inginkan setiap contoh elemen HTML tertentu untuk digunakan di halaman Web. Sebagai contoh, untuk membuat margin 25 piksel sekitar semua paragraf (konten dikelilingi < p > tag) di halaman Web Anda, Anda membuat gaya berbasis elemen yang menggunakan elemen p sebagai pemilih yang berisi Deklarasi untuk properti margin, seperti yang diperlihatkan dalam kode berikut ini.

Contoh aturan mengatur untuk gaya berbasis elemen

p { margin-left: 25px; margin-right: 25px }

Gaya berbasis elemen

Gunakan gaya berbasis elemen saat Anda ingin mendefinisikan sekumpulan properti untuk satu item atau blok item yang Anda inginkan untuk membedakan dari semua konten lain di dalam satu atau beberapa halaman Web. Gunakan gaya berbasis elemen saat Anda ingin gaya elemen HTML tunggal di halaman Web.

Contoh aturan mengatur untuk gaya berbasis elemen

#footer {background-color: #CCCCCC; margin: 15px}

Contoh gaya berbasis elemen yang diterapkan ke < p > tag

<p id="footer">

Gaya sebaris

Gunakan gaya sebaris saat Anda ingin mendefinisikan sekumpulan properti untuk satu item atau blok item di halaman Web dan tidak ingin menggunakan kembali gaya itu. Tidak seperti gaya berbasis elemen, berbasis elemen dan berbasis kelas, properti yang ditentukan dalam salah satu bagian halaman Web (internal CSS) kepala atau dalam file CSS eksternal, properti dari sebaris gaya (atau sebaris CSS) ditentukan secara langsung dalam elemen HTML yang ingin Anda gunakan gaya.

Contoh aturan mengatur untuk gaya sebaris

<p style="font-weight: bold; font-style: italic; color: #FF0000">

Atas halaman

Membuat gaya

Anda bisa membuat gaya baru dari awal atau dengan menyalin gaya yang sudah ada. Cara yang baik, kotak dialog gaya baru memungkinkan Anda untuk menetapkan semua tentang gaya baru Anda, termasuk tipe pemilih, properti, dan lembar gaya yang akan berisi gaya. Saat Anda ingin membuat gaya sebaris baru, Anda juga bisa menggunakan panel tugas Properti CSS . Saat Anda ingin membuat dan menerapkan gaya baru di halaman Anda tanpa mengatur properti apa pun untuk gaya dengan cepat, Anda juga bisa menggunakan toolbar gaya .

Membuat gaya dengan menggunakan kotak dialog gaya baru

  1. Lakukan salah satu hal berikut ini:

    • Untuk menambahkan gaya ke CSS eksternal, buka .css file.

    • Untuk menambahkan gaya ke CSS internal, buka halaman Web.

    • Untuk menambahkan gaya sebaris, buka halaman Web, dan lalu pilih konten yang Anda inginkan ke gaya.

  2. Lakukan salah satu hal berikut ini:

    • Untuk membuat gaya baru    Klik gaya baru dalam salah satu dari lokasi ini: panel tugas Terapkan gaya atau panel tugas Gaya mengelola , toolbar gaya , atau Format menu.

    • Untuk menyalin gaya yang sudah ada    Lakukan salah satu hal berikut ini:

      • Di panel tugas Terapkan gaya , arahkan ke gaya yang ingin Anda salin, klik panah bawah yang muncul, lalu pilih Salin gaya baru.

      • Di panel tugas Gaya mengelola atau panel tugas Properti CSS , klik kanan gaya yang ingin Anda salin, dan lalu pilih Salin gaya baru.

  3. Dalam kotak dialog gaya baru , lakukan hal berikut:

Gunakan ini

Untuk melakukan hal ini

Pemilih

  • Untuk menggunakan pemilih kelas, ketikkan tanda titik (.) diikuti dengan nama yang unik.

  • Untuk menggunakan pemilih id, ketikkan tanda nomor (#) diikuti dengan nama yang unik.

    Catatan: Kelas dan id pemilih nama tidak boleh berisi spasi kecuali jika Anda membuat pemilih kompleks.

  • Untuk menggunakan pemilih elemen, salah ketik nama elemen HTML atau klik kotak turun bawah pemilih dan pilih nama elemen.

  • Untuk menggunakan pemilih sebaris, pilih gaya sebaris.

  • Untuk membuat pemilih kompleks, ketik pemilih.

Menetapkan dalam

Pilih salah satu hal berikut ini:

  • Halaman saat ini menambahkan gaya baru ke CSS internal di halaman Web saat ini.

  • Lembar gaya baru menambahkan gaya baru ke CSS eksternal kosong baru.

  • Lembar gaya yang sudah ada menambahkan gaya baru ke CSS eksternal yang sudah ada yang Anda tentukan.

Menerapkan gaya baru ke pilihan dokumen

Menerapkan gaya ke pilihan saat ini di halaman Web saat ini.

URL

Jika Anda memilih lembar gaya yang sudah ada di definisikan di, masukkan URL ke .css file.

Kategori

Pilih salah satu hal berikut ini, dan lalu Atur properti yang muncul di sebelah kanan di dalam kotak dialog:

Tips: Tebal kategori yang muncul di dalam daftar kategori berisi mengatur properti.

  • Font mengatur properti font, ukuran, ketebalan, dekorasi dan warna.

  • Blok mengatur tinggi baris, perataan teks, teks indentasi dan penspasian teks.

  • Latar belakang mengatur warna dan latar belakang properti gambar latar belakang.

  • Batas mengatur batas dan propertinya.

  • Kotak mengatur properti pengisian dan margin kotak dan elemen blok-tingkat.

  • Posisi mengatur dimensi dan posisi kotak dan elemen blok-tingkat.

  • Tata letak mengatur visibilitas, mengambang dan Pembungkusan perilaku, kliping dan properti tata letak lainnya kotak dan elemen blok-tingkat.

  • Daftar kumpulan properti dari daftar elemen, termasuk tipe, posisi, dan gambar.

  • Tabel menyetel properti tabel yang terkait elemen, termasuk spasi, tata letak, properti batas.

Catatan: Anda juga bisa menyalin gaya dari satu CSS yang lain. Di panel tugas Kelola gaya , seret gaya dari CSS yang berisi gaya itu ke salah satu nama CSS yang ingin Anda salin, atau ke titik tertentu dalam daftar gaya di target CSS.

Membuat gaya sebaris dengan menggunakan panel tugas properti CSS

  1. Dalam tampilan desain atau tampilan kode, di halaman Web Anda, pilih konten yang ingin Anda tambahkan gaya sebaris.

  2. Di panel tugas Properti CSS , di bawah Aturan diterapkan, baik klik kanan pemilih yang ingin Anda Terapkan gaya sebaris, atau, jika "(tidak ada aturan yang diterapkan)" muncul, klik kanan di mana saja di bawah Aturan diterapkan, dan lalu klik Gaya sebaris baru pada menu pintasan.

  3. Di bawah Properti CSS, atur properti yang Anda inginkan.

Membuat dan menerapkan gaya tidak terdefinisi baru

Anda bisa membuat gaya dan menerapkannya ke item, dan lalu Tentukan gaya nanti. Misalnya, jika Anda ingin bekerja dengan seorang desainer untuk membuat tampilan halaman Anda, Anda bisa menerapkan gaya tidak terdefinisi untuk item di halaman Anda, lalu duduk dengan desainer untuk menetapkan gaya nanti.

  1. Dalam tampilan desain atau tampilan kode, di halaman Web Anda, pilih item yang Anda inginkan untuk menerapkan gaya ke.

  2. Untuk membuat dan menerapkan gaya baru tanpa menentukan properti apa pun, pada toolbar gaya , dalam kotak kelas atau ID , ketikkan nama unik untuk gaya baru.

Atas halaman

Menerapkan gaya

Anda bisa menggunakan panel tugas Terapkan gaya , panel tugas Gaya mengelola atau toolbar gaya untuk menerapkan gaya berbasis kelas atau berdasarkan id dari Anda internal dan eksternal cascading style sheet (CSS). Panel tugas Terapkan gaya memungkinkan Anda untuk menerapkan gaya beberapa pilihan, sementara panel tugas Gaya mengelola dan toolbar gaya yang terbatas untuk menerapkan gaya satu. Toolbar gaya memungkinkan Anda untuk dengan cepat nama dan menerapkan gaya tidak terdefinisi baru di halaman Anda.

Anda tidak perlu menerapkan gaya yang menggunakan elemen untuk pemilih (gaya berbasis elemen) karena jenis gaya otomatis diterapkan ke elemen mereka terkait seluruh halaman Web. Panel tugas Terapkan gaya daftar gaya berbasis elemen di bawah Pemilih kontekstual, dan bersama dengan tugas Kelola gaya panel menampilkan titik biru di samping nama gaya yang. Toolbar gaya tidak daftar gaya berbasis elemen.

  1. Dalam tampilan desain atau tampilan kode , di halaman Web Anda, pilih item yang Anda inginkan untuk menerapkan gaya ke.

  2. Lakukan salah satu hal berikut ini:

    • Untuk menerapkan gaya yang sudah ada beberapa    Di panel tugas Terapkan gaya , tekan CTRL sambil mengklik setiap gaya yang Anda inginkan.

    • Untuk menerapkan gaya tunggal yang sudah ada    Lakukan salah satu hal berikut ini:

      • Di panel tugas Terapkan gaya , klik gaya yang kelas atau id yang Anda inginkan.

      • Pada toolbar gaya , kelas atau kotak turun bawah ID , klik gaya yang Anda inginkan.

      • Di panel tugas Kelola gaya , klik kanan gaya kelas atau id Anda inginkan, dan lalu klik Terapkan gaya pada menu pintasan.

    • Untuk membuat dan menerapkan gaya baru tanpa menentukan properti apa pun    Pada toolbar gaya , dalam kotak kelas atau ID , ketikkan nama unik untuk gaya baru.

Atas halaman

Catatan: Penafian Terjemahan Mesin: Artikel ini telah diterjemahan oleh sistem komputer tanpa campur tangan manusia. Microsoft menawarkan terjemahan mesin ini untuk membantu pengguna yang bukan penutur bahasa Inggris agar dapat menikmati konten tentang produk, layanan, dan teknologi Microsoft. Karena artikel ini diterjemahkan oleh mesin, mungkin akan terdapat kesalahan kosa kata, sintaksis, atau tata bahasa.

Kembangkan keterampilan Anda
Jelajahi pelatihan
Dapatkan fitur baru terlebih dahulu
Gabung ke Office Insiders

Apakah informasi ini bermanfaat?

Terima kasih atas umpan balik Anda!

Terima kasih atas umpan balik Anda! Sepertinya menghubungkan Anda ke salah satu agen dukungan Office kami akan sangat membantu.

×