Cara mengubah penanda dalam daftar. Cara mengubah warna penanda daftar html menggunakan CSS. Penanda dengan sebelumnya

daftar CSS— sekumpulan properti yang bertanggung jawab atas desain daftar. Menggunakan daftar HTML sangat umum saat membuat bilah navigasi situs web. Item daftar mewakili kumpulan elemen blok.

Menggunakan properti CSS standar, Anda bisa mengubah tampilan penanda daftar, tambahkan gambar untuk penanda, Dan mengubah lokasi penanda. Ketinggian blok penanda dapat diatur dengan properti line-height.

Mendesain daftar menggunakan gaya CSS

1. Tipe penanda daftar tipe gaya daftar

Properti mengubah jenis penanda atau menghilangkan penandanya untuk daftar berpoin dan bernomor. Diwarisi.

Sintaksis

Ul (tipe gaya daftar: tidak ada;) ul (tipe gaya daftar: persegi;) ol (tipe gaya daftar: tidak ada;) ol (tipe gaya daftar: alfa rendah;) Beras. 1. Contoh perancangan daftar berpoin dan bernomor

2. Gambar untuk item daftar gambar gaya daftar

Anda dapat menggunakan gambar dan isian gradien sebagai penanda item daftar. Diwarisi.

Sintaksis

Ul (gambar-gaya-daftar: url("images/romb.png");) ul (gambar-gaya-daftar: gradien-linier(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
Beras. 2. Rancang daftar poin menggunakan gambar
Beras. 3. Rancang daftar berpoin menggunakan gradien

3. Posisi gaya daftar

Properti ini menyediakan kemampuan untuk menempatkan penanda di luar atau di dalam konten item daftar. Diwarisi.

Saat ini, setiap orang harus memiliki keterampilan komputer dan menguasai setidaknya serangkaian program minimum. Standar dan paling populer termasuk Microsoft Word. Saat bekerja di Word, pengguna dihadapkan pada kebutuhan untuk menyorot rentang teks tertentu agar lebih jelas. Seringkali perlu memasukkan daftar ke dalam dokumen. Ini bisa berupa daftar berpoin atau bernomor - pengguna memiliki kesempatan untuk bernavigasi sesuai dengan situasinya.

Program ini memungkinkan Anda membuat dokumen, surat, dan proyek apa pun, menggunakan peluang luas untuk mempelajari semua fungsi Microsoft Word, Anda perlu meluangkan waktu, tetapi hasilnya sepadan.

Daftar diperlukan untuk membuat teks menjadi jelas dan ekspresif. Daftar bernomor dan berpoin pada satu tingkat digunakan di sebagian besar dokumen. Dalam disertasi dan karya ilmiah, daftar bertingkat digunakan.

Penomoran dan penanda

Pertama-tama, Anda perlu memilih paragraf yang harus diformat sebagai daftar. Ini dapat dilakukan dengan menggunakan mouse atau cukup dengan menempatkan kursor di awal baris tempat daftar akan dimulai.

Di MS Word ada tab "Beranda", di mana Anda dapat memilih sisipan yang diinginkan di grup "Paragraf". Pengguna mengklik tombol “Penomoran” atau “Penanda”, lalu menggunakan penggaris untuk mengatur indentasi. Metode ini sangat sederhana dan dapat dimengerti, tetapi pengguna yang tidak berpengalaman mungkin mengalami kesulitan tersembunyi. Saat Anda memasukkan kembali daftar berpoin dan bernomor, Anda harus mengedit indentasinya lagi.

Jika perlu memformat setiap daftar secara terpisah dan mengubah parameter font, tidak setiap pengguna program dapat membuat teks menjadi benar, dan terlebih lagi, ini akan membutuhkan banyak waktu dan tenaga.

Daftar bernomor

Setiap elemen daftar disorot dengan nomor, dan penomorannya disesuaikan secara otomatis. Untuk membuat dan mengedit daftar, ada tombol “Penomoran” di grup “Paragraf”. Anda juga dapat menggunakan fungsi “Penomoran” di menu konteks paragraf yang dipilih.

Opsi daftar:

• Format angka menentukan karakter mana yang akan muncul di sebelah setiap elemen.
• Gaya penomoran dapat dipilih tergantung pada karakteristik dokumen tertentu: angka Arab atau Romawi, huruf besar, dll.
• Bidang “Nilai awal” memungkinkan Anda memilih nomor yang akan digunakan untuk memulai daftar.
• Jika Anda perlu membuat daftar serupa, tetapi memberi nomor baru, akan lebih mudah untuk menggunakan fungsi "Mulai daftar baru". Anda perlu memilih elemen dan mengatur semua parameter.

Anda dapat menyisipkan daftar bernomor secara otomatis. Untuk melakukan ini, Anda perlu melakukan hal berikut:

• Di awal paragraf, sebelum memasukkan teks, Anda perlu meletakkan “1.”, lalu “Spasi” atau Tab. Paragraf tersebut akan muncul sebagai item pertama dalam daftar.
• Dengan mengawali paragraf dengan "1)" lalu menekan Spasi atau Tab, pengguna akan membuat jenis daftar yang berbeda.
• Dengan analogi, daftar dengan huruf dibuat. Di baris Anda harus masuk dengan titik atau tanda kurung. Setelah setiap paragraf Anda harus menekan Spasi atau Tab.

Buat daftar poin secara otomatis

Anda dapat menyisipkan daftar berpoin di Word sebagai berikut:

• Di awal paragraf, Anda harus mengetikkan tanda bintang atau tanda lebih besar dari, lalu tekan Spasi atau Tab.
• Secara otomatis membuat daftar berpoin. Anda dapat mengaktifkannya dengan membuka tab "File" dan memilih grup "Opsi". Di tab “Ejaan”, pilih “Opsi Koreksi Otomatis.” Di bagian “Format Otomatis”, Anda perlu mencentang kotak di sebelah gaya.

Anda dapat membuat daftar berpoin dari tipe berikut:

Daftar bertingkat

Daftar berpoin dan bernomor adalah elemen. Mereka harus dikonfigurasi sesuai kebutuhan pengguna dalam kasus tertentu. Strukturnya dapat diedit menggunakan fungsi Define Multi-Level List. Akan lebih mudah untuk memeriksa bagaimana semua daftar ditampilkan di grup “Daftar dalam Dokumen”. Untuk mengubah pengaturan font setiap font, daftar multi-level dikaitkan dengan gaya paragraf.

Opsi utama untuk menyiapkan daftar multi-level

Saat menyiapkan daftar, yang terdiri dari beberapa level, Anda perlu memperhatikan parameter berikut:

• Memilih level dan contoh desainnya.
• Menentukan pengaturan font; jika perlu, Anda dapat mengatur bagian konstan dari nomor tersebut.
• Pilih jenis penomoran: simbol, gambar, huruf dan pilihan lainnya.
• Menentukan tingkat pembaruan penomoran.
• Tentukan indentasi dan penempatan teks.
• Opsi pengeditan tambahan.
• Mencocokkan gaya paragraf dan daftar multi-level.

Pengaturan yang telah dibuat satu kali dapat diterapkan secara otomatis ke daftar berikutnya. Namun jika ada kebutuhan untuk mengedit, Anda harus mengerjakan setiap daftar secara terpisah. Ketidaknyamanan ini mungkin tampak tidak signifikan, tetapi jika ada banyak daftar dalam teks, pemformatan akan memakan banyak waktu.

Bagaimana cara mengubah gaya penanda?

Dengan mengklik tombol “Penanda”, Anda dapat memilih opsi yang sesuai dalam kasus ini. Untuk melakukan ini, buka area “Perpustakaan” dan klik di atasnya. Jenis penomoran dipilih dengan cara yang sama: di area “Perpustakaan Penomoran”.

Untuk mengubah daftar bernomor atau berpoin menjadi teks di Word, Anda hanya perlu menekan tombol yang sesuai.

Setiap elemen teks dapat disorot dengan spidol khusus. Untuk memformat daftar sesuai dengan persyaratan dokumen tertentu, Anda harus memilih perintah “Tentukan penanda baru”.

Setelah menguasai semua fitur Microsoft Word, bekerja dengan dokumen akan menyenangkan, dan Anda tidak perlu menghabiskan banyak waktu untuk memformat teks. Daftar berpoin, seperti daftar bernomor, disertakan di hampir semua dokumen dan sering digunakan, sehingga akan berguna bagi pengguna program untuk terbiasa membuat daftar dari berbagai jenis.

Menggunakan kotak dialog Daftar Anda dapat mengubah opsi daftar berpoin berikut:

Simbol penanda ke simbol apa pun dari font yang diinstal di komputer.

Ukuran tonjolan.

Jarak antara simbol poin dan teks.

Penyelarasan.

Untuk tujuan ini Anda perlu masuk ke menu Format – Daftar dan tekan tombolnya Mengubah, setelah itu kotak dialog akan terbuka Edit daftar berpoin, disajikan pada Gambar. 4.25.

Beras. 4.25. Jendela dialog Edit daftar berpoin

Di bawah ini adalah daftar opsinya:

Mengubah format daftar bernomor

Daftar bernomor dibuat di tab Bernomor(Gbr. 4.24). Jika format daftar bernomor yang disarankan tidak sesuai untuk desain dokumen tertentu, Anda dapat membuat format daftar Anda sendiri dengan mengklik Mengubah di kotak dialog Daftar di tab Bernomor. Ini akan membuka jendela dialog Mengubahbernomordaftar(Gbr. 4.26).

Beras. 4.26. Jendela dialog Edit daftar bernomor

Di bawah ini adalah opsi dalam kotak dialog yang memungkinkan Anda mengubah format daftar bernomor.

Membuat daftar bertingkat

Jenis daftar yang lebih kompleks ditemukan di banyak jenis dokumen. Inilah yang disebut bertingkat daftar. Mereka juga menggunakan penandaan atau penomoran, dan terkadang kombinasi keduanya. Namun perbedaan utama mereka dari jenis daftar sebelumnya adalah adanya beberapa level. Tergantung pada levelnya, simbol atau nomor ditetapkan untuk setiap paragraf.

Beras. 4.27. tab Bertingkat kotak dialog Daftar.

Daftar bertingkat berbeda dari daftar biasa dengan adanya indentasi. Lekukan tertentu diambil sebagai tingkat daftar tersebut.

Membuat daftar bertingkat hanya dapat dilakukan menggunakan kotak dialog Daftar. Selain itu, levelnya ditentukan oleh pemainnya sendiri, dengan menetapkan indentasi tertentu. Word menganalisis indentasi dan, bergantung pada ukurannya, memberi nomor pada indentasi tersebut, membuat level.

Anda dapat membuat format penomoran yang dimodifikasi untuk berbagai level daftar multilevel, namun hanya satu format daftar multilevel yang diperbolehkan per dokumen.

Untuk membuat daftar bertingkat, Anda harus menyelesaikan langkah-langkah berikut:

1. Tentukan bagian dokumen yang seharusnya diformat sebagai daftar.

2. Buat indentasi untuk setiap paragraf menggunakan tombol Tingkatkan indentasi pada bilah alat Pemformatan(Anda tidak dapat menggunakan tab saat membuat indentasi).

3. Pilih bagian teks yang dipilih.

4. Pilih tim Format–Daftar. Di jendela dialog Daftar buka tab Bertingkat(Gbr. 4.27).

5. Pilih jenis daftar bertingkat yang diinginkan dari opsi yang diusulkan. Klik OKE.

Hari ini kita akan mengetahui bagaimana daftar dibuat di halaman web, penanda apa yang digunakan, dan menguji berbagai gaya untuk mengubah tampilan.

Izinkan saya mengingatkan Anda bagaimana gaya dihubungkan ke halaman HTML:

Ada css daftar berpoin atau tidak berurutan dan diberi nomor.

Daftar penanda adalah gambar berbagai bentuk: lingkaran, kotak, gagak dan sejenisnya. Mereka juga disebut peluru. Anda juga dapat menggunakan gambar Anda sendiri sebagai penanda daftar.

Daftar bernomor mewakili keluaran informasi bernomor 1, 2, 3, dst.

Biasanya, penanda berupa lingkaran hitam sederhana yang familiar bagi pengguna, namun di sisi lain tidak terlalu menarik perhatian pada teks.

Jika Anda memutuskan untuk mengganti mug ini dengan mug desainer, maka Anda harus menguasainya menata daftar menggunakan css. Itulah yang akan kami lakukan hari ini.

Dasar dari daftar apa pun terdiri dari kode halaman web berikut:

• Elemen pertama dari daftar
• Elemen kedua dari daftar
• Elemen terakhir dari daftar

Blok ini terlihat seperti ini:

• Elemen pertama dari daftar
• Elemen kedua dari daftar
• Elemen terakhir dari daftar

Gaya css penanda daftar

Kami akan menulis keluaran eksternal dalam file gaya gaya.css. Namanya mungkin berbeda, tetapi memiliki ekstensi .css.

Penanda CSS standar: lingkaran (lingkaran) – lingkaran tidak terisi, titik (disk) – lingkaran terisi, kotak (persegi) – persegi terisi.

Menghasilkan daftar dalam kode css jalan- dengan bantuannya kami mengatur penanda standar mana yang akan ditampilkan pada halaman.

Misalnya, mari kita tampilkan daftar menggunakan lingkaran. Entri dalam file css akan seperti ini:

Ul (tipe gaya daftar: lingkaran)

Namun seringkali penanda perlu diganti tidak di semua daftar yang ditampilkan, tetapi hanya di blok tertentu. Misal ubah di postingan, tapi tidak di komentar. Dalam hal ini, kode ul tidak boleh memiliki arti apa pun, dan gaya lingkaran harus ditentukan hanya untuk daftar di postingan. Ini adalah tampilan kode tanpa nilai:

Ul (tipe gaya daftar: tidak ada)

Jika Anda tidak dapat menemukan kode di file css yang bertanggung jawab untuk menampilkan daftar di blok yang Anda perlukan, gunakan plugin untuk Firefox - Firebug atau di Google Chrom, klik kanan pada halaman web blog. Kemudian "lihat kode elemen".

Misalnya, salah satu opsi untuk mengubah tampilan daftar di postingan menjadi lingkaran standar, jika tidak ada konten untuk blok tersebut jalan:

Ul pasca-konten (tipe gaya daftar: lingkaran)

Atau contoh lain:

#content-blok ul(tipe-gaya daftar:persegi)

Menyelesaikan kursus “latihan Css”

]]> ]]>

Pengetahuan tentang CSS penting bagi setiap webmaster, karena ini adalah cara universal untuk membuat desain berkualitas tinggi tanpa membebani kode halaman secara berlebihan.

Bagi mereka yang ingin pelajari trik penataan css dengan sangat cepat, ]]> merekomendasikan ]]> kursus lanjutan "Latihan CSS" oleh Evgeniy Popov.

Artikel berikutnya:

Penanda grafis untuk daftar.

Daftar indentasi css.

Bagaimana cara mengubah warna css penanda daftar agar warnanya berbeda dengan warna teks.

Daftar bersarang. Cara membuat daftar horizontal di css. Ubah gaya daftar bernomor.

Unduh penanda cantik untuk daftar situs.

Penggunaan daftar dalam sebuah artikel memiliki efek positif pada SEO dan persepsi pengguna terhadap informasi. Ada banyak cara untuk menampilkan marker dengan indah (dengan gambar atau menggunakan CSS). Kita akan melihat metode yang cukup sederhana namun bergaya untuk mengubah penanda daftar menggunakan CSS.

Seperti apa bentuknya?

Dalam hal ini, kita tidak dapat melakukannya tanpa teknologi baru, yaitu CSS3 dengan dukungan kelas semu sebelumnya. Hanya dengan menggunakan gaya dan tata letak HTML dasar, kami akan mengubah penanda standar membosankan yang tidak memenuhi standar modern.

Dalam kasus pertama, kita akan menggunakan daftar poin yang ditawarkan tag tersebut kepada kita

:
• Apa yang kami dapatkan.
• Tidak buruk, bukan?

Oleh karena itu, dalam kasus kedua, daftar bernomor dari tag

:
1. Di sebelah kiri teks ada angka.
2. Kelanjutan daftar jumlah field yang kita butuhkan.

Elemen-elemennya berada pada jarak yang sama dari awal blok teks, yang memberi mereka pesona tambahan.

Daftar poin yang bagus

Berbagai makna dapat dijadikan simbol. Cukup memasukkan kode baru ke properti konten.

HTML

• Elemen 1
• Elemen 2

CSS

ul ( tipe gaya daftar: tidak ada; ) ul li:sebelum ( konten: "\203A "; padding-kanan: 6 piksel; ukuran font: 16 piksel; warna: #00bf80; berat font: tebal; )

Daftar bernomor yang bagus

Dengan menggunakan daftar bernomor, Anda dapat mendesain blok teks pada halaman dengan baik, atau membuat sesuatu yang nyaman dan mudah dipahami, seperti di awal materi ini.

HTML

1. Elemen 1
2. Elemen 2

CSS

ol ( margin-kiri: 63px; tipe gaya daftar: tidak ada; counter-reset: li; ) ol li:before ( konten: counter(li); kenaikan counter: li 1; padding: 0px 6px; margin-kiri : -28 piksel; ukuran font: 12 piksel; warna: putih;

Format artikel Anda dengan benar agar pengguna tidak meningkatkan rasio pentalan.