Modul Teks CSS menerangkan fungsi CSS yang mengawal terjemahan teks sumber ke dalam teks berformat dan pembalut baris. Pelbagai sifat CSS memberikan kawalan ke atas penukaran kes, pengendalian ruang putih, peraturan pembalut teks dan baris, penjajaran, jarak dan lekukan.
Unit asas teks ialah simbol. Walau bagaimanapun, memandangkan sistem penulisan tidak selalunya semudah abjad bahasa Inggeris asas, makna simbol sebenarnya bergantung pada konteks di mana istilah itu digunakan. Contohnya, dalam sistem tulisan Korea, setiap perwakilan segi empat sama bagi suku kata (cth. 한 = han) boleh dianggap sebagai watak. Walau bagaimanapun, simbol segi empat sama terdiri daripada beberapa huruf, setiap satunya mewakili fonem (contohnya, ㅎ = h, ㅏ = a, ㄴ = n), dan setiap satu daripadanya juga boleh dianggap sebagai simbol.
1. Mengubah teks: sifat mengubah teks
Teks gaya sifat mengubah teks. Ia tidak menjejaskan kandungan asas dan tidak sepatutnya menjejaskan kandungan operasi salin-tampal teks biasa.
Harta itu diwarisi.
Sintaks
Teks-transformasi: tiada; text-transform: huruf besar; text-transform: huruf besar; text-transform: huruf kecil; text-transform: mewarisi; text-transform: permulaan;
2. Mengendalikan ruang dan pemisah baris: sifat ruang putih
Sifat ruang putih mengendalikan ruang antara perkataan dan pemisah baris dalam elemen.
Harta itu diwarisi.
ruang putih | |
---|---|
Nilai: | |
biasa | Nilai asal. Hanya satu ruang disisipkan antara perkataan; ruang tambahan dibuang. Teks hanya dibalut apabila perlu. |
nowrap | Melarang talian putus kecuali apabila digunakan . |
pra | Ruang dalam teks tidak diabaikan; penyemak imbas memaparkan ruang tambahan dan pemisah baris. |
pra-bungkus | Mengekalkan ruang putih dalam teks dengan menambah pemisah baris jika perlu. |
pra-baris | Mengalih keluar ruang tambahan melainkan . |
ruang rehat | Tingkah laku adalah sama dengan pra-bungkus kecuali: sebarang jujukan ruang yang tidak boleh dialihkan sentiasa mengambil ruang, termasuk di hujung baris; Kemungkinan pemisah baris wujud selepas setiap ruang yang tidak boleh ditanggalkan, termasuk antara ruang. |
permulaan | |
mewarisi |
Sintaks
Ruang putih: biasa; white-space: nowrap; ruang putih: pra; ruang putih: pra-bungkus; ruang putih: pra-garisan; ruang putih: ruang rehat; ruang putih: mewarisi; ruang putih: awal;
3. Tetapan tab: sifat saiz tab
Sifat saiz tab digunakan untuk menukar jumlah lekukan yang dihasilkan oleh kunci TAB. Nilai sifat diabaikan apabila sifat ruang putih ditetapkan kepada salah satu daripada tiga nilai pra-baris , normal atau nowrap .
Hanya berfungsi untuk elemen
Harta itu diwarisi.
Sintaks
Saiz tab: 0; saiz tab: 10px; saiz tab: mewarisi; saiz tab: awal;
4. Pecah baris dan sempadan perkataan
Apabila kandungan peringkat baris dipecahkan kepada baris, ia dipecahkan kepada blok linear. Pecahan ini dipanggil pemecahan baris.
Apabila garis putus disebabkan kawalan pemisah baris yang jelas, seperti baris baharu atau teg
, permulaan atau penghujung blok ialah putus baris paksa.
Jika baris terputus disebabkan pembungkusan kandungan, di mana penyemak imbas mencipta pemisah baris yang tidak perlu untuk memuatkan kandungan, itu adalah pembalut lembut.
4.1. Melanggar peraturan untuk surat: harta pecah perkataan
Sifat pemecah kata menentukan kemungkinan sempang lembut antara huruf, i.e. Bilakah boleh diterima untuk memecahkan baris teks? Khususnya, ia mengawal sama ada sempang lembut wujud antara unit huruf dan/atau nombor tipografi bersebelahan. Ini tidak menjejaskan peraturan yang mengawal peluang pemindahan lembut yang dicipta oleh ruang.
Harta itu diwarisi.
Sintaks
Pecah kata: biasa; pecah kata: pecah-semua; putus kata: simpan-semua; putus kata: mewarisi; pemecahan kata: awal;
4.2. Pecah baris: pemecahan baris
Sifat pemisah baris mentakrifkan peraturan pemisah baris yang digunakan dalam elemen, khususnya cara pemecahan baris berinteraksi dengan tanda baca dan simbol.
Harta itu diwarisi.
putus baris | |
---|---|
Nilai: | |
auto | Penyemak imbas mentakrifkan satu set sekatan pemecahan baris untuk digunakan, yang boleh berbeza-beza bergantung pada panjang baris, contohnya, gunakan set peraturan pemecahan baris yang kurang ketat untuk garis pendek. Nilai asal. |
longgar | Memecahkan teks menggunakan set peraturan pecah baris yang paling ketat. Biasanya digunakan untuk baris pendek, seperti dalam surat khabar. |
biasa | Memecahkan teks menggunakan set peraturan pecah baris yang paling biasa. |
tegas | Memecahkan teks menggunakan set peraturan melanggar baris yang ketat. |
permulaan | Menetapkan nilai harta kepada nilai lalai. |
mewarisi | Mewarisi nilai harta daripada elemen induk. |
Sintaks
Line-break: auto; line-break: longgar; putus baris: normal; line-break: ketat; line-break: mewarisi; line-break: permulaan;
4.3. Sempang: sifat sempang
Sifat sempang menentukan sama ada sempang dibenarkan untuk mencipta keupayaan sempang lembut dalam baris teks.
Sempang ialah pemecahan perkataan terkawal di mana ia biasanya tidak dibenarkan dipecahkan untuk memperbaiki aliran perenggan. Lazimnya, perkataan dipecah mengikut sempadan suku kata atau morfem dan dengan petunjuk visual pembahagian (biasanya dengan memasukkan tanda sempang, ‐). Dalam sesetengah kes, sempang juga boleh mengubah ejaan sesuatu perkataan. Walau apa pun, bungkus perkataan hanyalah kesan pemaparan: ia tidak seharusnya menjejaskan kandungan dokumen, mahupun pemilihan teks atau carian.
Teks CSS Tahap 3 tidak mentakrifkan peraturan sempang perkataan yang tepat, jadi adalah disyorkan untuk memilih titik sempang yang sesuai untuk bahasa tersebut.
Harta itu diwarisi.
tanda sempang | |
---|---|
Nilai: | |
tiada | Perkataan tidak sempang, walaupun aksara dalam perkataan itu secara jelas mentakrifkan keupayaan sempang. |
manual | Kata sempang hanya di tempat yang terdapat simbol di dalam perkataan yang jelas menunjukkan kemungkinan sempang perkataan (watak khas -). Nilai asal. |
auto | Perkataan boleh dipecahkan kepada kemungkinan sempang yang ditentukan secara automatik oleh sumber sempang bersesuaian bahasa selain daripada yang dinyatakan secara eksplisit oleh sempang bersyarat. Anda mesti menetapkan bahasa kandungan anda (contohnya, menggunakan atribut HTML lang atau pengepala Kandungan-Bahasa HTTP) untuk mendapatkan pembungkusan perkataan automatik yang betul. |
permulaan | Menetapkan nilai harta kepada nilai lalai. |
mewarisi | Mewarisi nilai harta daripada elemen induk. |
Sintaks
Sempang: tiada; sempang: manual; sempang: auto; sempang: mewarisi; sempang: awal;
4.4. Limpahan blok pembungkus: sifat limpahan-balut/pembalut perkataan
Sifat limpahan-balutan (atau nama balut perkataan yang ditamatkan) menentukan sama ada garisan tidak putus boleh diputuskan pada titik yang tidak dapat diselesaikan untuk mengelakkan blok garisan daripada melimpah. Berfungsi apabila sifat ruang putih membenarkan pembalut.
Harta itu diwarisi.
limpahan-bungkus, bungkus-kata | |
---|---|
Nilai: | |
biasa | Garisan tidak putus hanya boleh putus pada titik putus yang dibenarkan. Nilai asal. |
kata putus | |
di mana-mana sahaja | Urutan aksara yang tidak terputus boleh dipecahkan pada titik sewenang-wenangnya jika tiada titik putus lain yang boleh diterima dalam baris. Menjejaskan hanya paparan visual, tanpa menjejaskan teks asal. Tiada sempang ditambahkan pada titik putus baris. Keupayaan balutan lembut yang ada di mana-mana diambil kira semasa mengira dimensi kandungan minimum anda sendiri. |
permulaan | Menetapkan nilai harta kepada nilai lalai. |
mewarisi | Mewarisi nilai harta daripada elemen induk. |
Sintaks
Balutan limpahan: normal; limpahan-bungkus: break-word; limpahan-bungkus: di mana-mana; limpahan-bungkus: mewarisi; limpahan-bungkus: awal;
5. Penjajaran dan justifikasi garisan
Penjajaran garisan dan justifikasi mengawal cara kandungan sebaris diedarkan dalam blok baris.
5.1. Pendek kata untuk penjajaran teks: sifat penjajaran teks
Blok teks ialah koleksi blok linear. Sifat penjajaran teks menentukan sifat penjajaran-semua-teks dan penjajaran-teks-terakhir dan menerangkan cara kotak peringkat baris dalam setiap kotak baris dijajarkan berbanding dengan sisi permulaan dan akhir kotak baris. Nilai selain justify-all atau match-parent diberikan kepada text-align-all dan ditetapkan semula kepada auto dalam text-align-last .
Harta itu diwarisi.
penjajaran teks | |
---|---|
Nilai: | |
mulakan | Kandungan peringkat baris dijajarkan ke tepi hadapan kotak baris. Nilai asal. |
tamat | Kandungan peringkat baris dijajarkan ke tepi mengekor kotak baris. |
dibiarkan | Kandungan peringkat baris dijajarkan ke tepi kiri baris blok baris. Dalam sistem tulisan menegak, ini akan menjadi bahagian atas atau bawah fizikal, bergantung pada orientasi teks. |
betul | Kandungan peringkat baris dijajarkan ke tepi kanan baris blok baris. Dalam sistem tulisan menegak, ini akan menjadi bahagian atas atau bawah fizikal, bergantung pada orientasi teks. |
pusat | Kandungan peringkat baris dipusatkan dalam kotak baris. |
mewajarkan | Teks dijajarkan dengan lebar kotak garisan untuk mengisi jidar garisan dengan tepat, menekan pada tepi kiri dan kanan elemen induk. Melainkan dinyatakan sebaliknya dalam text-align-last , baris terakhir sebelum pemecahan paksa atau penghujung blok dijajarkan ke permulaan. Ruang antara perkataan dan huruf diedarkan supaya panjang semua baris adalah sama. Pelayar yang berbeza boleh meningkatkan kedua-dua lekukan antara perkataan dan jarak antara huruf. |
mewajarkan-semua | Tetapkan text-align-all dan text-align-last untuk mewajarkan , juga menjajarkan baris terakhir. |
padan-induk | Nilai berkelakuan sama seperti warisan kecuali nilai permulaan atau akhir yang diwarisi ditafsirkan secara relatif kepada nilai arah (atau blok asal yang mengandungi jika tiada induk) dan menghasilkan nilai pengiraan kiri atau kanan . |
mewarisi | Mewarisi nilai harta daripada elemen induk. |
Sintaks
Penjajaran teks: mula; text-align: end; text-align: kiri; text-align: kanan; text-align: tengah; text-align: justify; text-align: justify-all; text-align: match-parent; text-align: mewarisi;
5.2. Penjajaran teks lalai: sifat text-align-all
Sifat text-align-all ialah versi trengkas bagi sifat text-align yang menentukan penjajaran semua baris kandungan dalam bekas blok, kecuali baris terakhir, yang ditindih oleh text-align-last . Menerima nilai mula , tamat , kiri , kanan , tengah , justify dan match-parent .
Harta itu diwarisi.
Sintaks
Text-align-all: mulakan; text-align-all: tamat; text-align-all: kiri; text-align-all: kanan; text-align-all: tengah; text-align-all: justify; text-align-all: padankan-induk; text-align-all: mewarisi;
5.3. Penjajaran baris terakhir: text-align-last property
Sifat text-align-last menerangkan cara baris terakhir blok atau baris dijajarkan sejurus sebelum pemisah baris paksa.
Jika ditetapkan kepada auto , kandungan dalam baris yang sepadan diselaraskan dengan text-align-all , melainkan text-align-all ditetapkan untuk justify , dalam hal ini ia dijajarkan dengan permulaan blok. Semua nilai lain ditafsirkan seperti yang diterangkan untuk penjajaran teks.
Menerima nilai auto , start , end , left , right , center , justify dan match-parent .
Harta itu diwarisi.
Sintaks
Text-align-last: auto; text-align-last: mula; text-align-last: tamat; text-align-last: kiri; text-align-last: kanan; text-align-last: tengah; text-align-last: justify; text-align-last: padankan-induk;
6. Jurang
CSS membolehkan anda mengawal jarak antara perkataan dan aksara tipografi menggunakan sifat jarak perkataan dan jarak huruf.
6.1. Ruang antara perkataan: sifat jarak perkataan
Sifat jarak perkataan menentukan jarak tambahan antara perkataan.
Menetapkan jarak antara perkataan. Nilai positif dan negatif boleh digunakan. Dengan makna negatif, perkataan boleh bertindih antara satu sama lain.
Nilai jarak perkataan dipengaruhi oleh nilai sifat penjajaran teks dalam kes teks yang dibenarkan.
Harta itu diwarisi.
Sintaks
Jarak perkataan: normal; jarak perkataan: 1px; jarak perkataan: 0.2em; jarak perkataan: 50%; jarak perkataan: mewarisi; jarak perkataan: awal;
6.2. Penjejakan: sifat jarak huruf
Sifat jarak huruf menentukan ruang tambahan, atau penjejakan, antara aksara tipografi bersebelahan. Jarak huruf ialah pelengkap dan jarak perkataan. Bergantung pada peraturan penjajaran yang berkuat kuasa, ejen pengguna boleh menambah atau mengurangkan lagi jarak antara unit aksara tipografi untuk menjajarkan teks.
Harta itu diwarisi.
Sintaks
Jarak huruf: biasa; jarak huruf: 0.1em; jarak huruf: 2px; jarak huruf: mewarisi; jarak huruf: awal;
7. Inden baris pertama: sifat inden teks
Sifat inden teks menentukan lekukan yang digunakan pada baris kandungan sebaris dalam blok. Pelapik dianggap sebagai margin yang digunakan pada tepi permulaan kotak garisan.
Jika terdapat imej pada baris pertama elemen blok, ia akan bergerak bersama-sama dengan seluruh teks.
Harta itu diwarisi.
Sintaks
Inden teks: 5mm; inden teks: 20px; inden teks: 5%; inden teks: 2em setiap baris; inden teks: 2em tergantung; text-indent: mewarisi; indent teks: awal;
Salam, pembaca laman blog yang dihormati. Hari ini kami terus mengkaji dan seterusnya kami mempunyai ciri hiasan teks, penjajaran menegak, penjajaran teks, inden teks dan beberapa lagi, yang membantu mereka bentuk rupa teks dalam kod Html.
Dalam artikel terakhir kami melihat sifat yang bertujuan untuk menyesuaikan penampilan fon apabila .
Malah, lebih awal lagi kami melihat semua jenis secara terperinci, mengetahui cara ia boleh dikumpulkan dan keutamaan yang ditetapkan oleh penyemak imbas semasa mentafsirnya. Benar, semua ini dibahagikan kepada beberapa artikel, jadi agar tidak keliru, saya menasihati anda untuk mengkaji bahan-bahan dalam susunan seperti yang diberikan dalam.
Hiasan teks, penjajaran teks, inden teks dalam CSS
Bagaimana untuk bekerja dengan teks dalam Css? Adalah logik untuk menganggap bahawa terdapat peraturan yang direka khas untuk tujuan ini. Mari kita mulakan dengan penjajaran teks, yang sebenarnya merupakan pengganti bagi atribut penjajaran (ia digunakan untuk menjajarkan kandungan seperti perenggan atau tajuk P).
Ia hanya mempunyai empat makna yang mungkin:
Maknanya tetap sama seperti dahulu. Jajaran teks- ini ialah penjajaran mendatar garisan. Peraturan ini digunakan secara eksklusif untuk menyekat elemen (perenggan, tajuk, dll.), i.e. teg di mana beberapa baris mungkin muncul. Kerana Memandangkan elemen sebaris hanya boleh mempunyai satu baris, tiada titik tertentu dalam menggunakan penjajaran teks di dalamnya.
Adalah jelas bahawa nilai peraturan ini bermaksud penjajaran, masing-masing: kiri, kanan, tengah dan lebar halaman (Justify - serentak kiri dan kanan dengan meningkatkan jarak antara perkataan) . Tidak perlu dikatakan bahawa nilai Justify harus digunakan untuk elemen dengan sekurang-kurangnya beberapa baris teks, jika tidak, tiada kesan yang boleh dilihat.
Sebagai contoh, saya mewajarkan perenggan sebelumnya (anda boleh melihat ia mempunyai sempadan licin di kedua-dua kiri dan kanan) menggunakan:
Text-align:justify;
Secara lalai, penjajaran teks mendatar dibiarkan, i.e. Tidak perlu menulis secara khusus text-align:left, melainkan, sudah tentu, anda telah menentukan penjajaran yang berbeza sebelum ini. Dengan cara ini, saya menyelaraskan perenggan ini ke tengah (tengah), sekali lagi untuk contoh yang jelas, tetapi di sini, saya fikir, semuanya jelas.
Peraturan Css seterusnya inden teks membolehkan anda menentukan garis merah, contohnya, untuk teks dalam teg perenggan P. Lekukan garis merah boleh ditentukan dengan menentukan nilai (sama ada dengan tanda tambah atau tanda tolak, menggunakan ) atau menggunakan peratusan:
Apakah peratusan yang dikira dalam inden teks? Daripada lebar kawasan yang diperuntukkan untuk teks. Itu. Inden teks peraturan CSS: 50% akan menetapkan garis merah sama dengan separuh panjang baris ini. Nah, perenggan ini berfungsi sebagai contoh peraturan sedemikian.
Atau anda boleh, sebagai contoh, menetapkan nilai negatif untuk garis merah dalam inden teks dan kemudian kami akan mendapat lebih kurang perkara yang anda lihat dalam perenggan ini. Untuk mencapai hasil ini, saya menulis peraturan CSS berikut untuk tag perenggan P:
Inden teks:-1em;
Nah, penggunaan biasa teks-indent (untuk menetapkan garis merah standard) mungkin kelihatan seperti ini: text-indent:40px; (digunakan pada perenggan ini, dengan cara itu). Peraturan ini, sama seperti penjajaran teks yang dibincangkan sebelum ini, hanya terpakai kepada elemen blok, iaitu di mana beberapa baris mungkin muncul (perenggan, tajuk, dll.).
Baiklah, sekarang mari kita beralih kepada hiasan teks(reka bentuk menggunakan garis mendatar), yang telah digunakan pada semua elemen Html (sebaris dan blok).
Ia boleh mempunyai empat makna sahaja:
Itu. boleh digunakan menggunakan hiasan teks: garis atas, garisan atau garis bawah, atau tidak menggunakan apa-apa (tiada). Sesetengah elemen HTML sudah mempunyai reka bentuk garis mendatar secara lalai, contohnya (ia digariskan secara lalai).
Oleh itu, menyerlahkan sesuatu yang lain dengan garis bawah (kecuali untuk hiperpautan) adalah tidak baik, kerana pengguna telah menulis di bawah sedar mereka bahawa apabila ia digariskan (dan juga diserlahkan dalam warna), ia bermakna mereka boleh mengklik padanya untuk pergi. Tetapi dengan menyerlahkan teks biasa dengan garis bawah, anda mengelirukan pengguna dan kemudiannya menjadi kecewa dengan sumber anda (dia menyangkanya, tetapi ternyata...).
Nuansa dalam menggunakan peraturan hiasan teks Css ialah anda boleh memasukkan tiga (atau dua) nilai sekali gus untuk mana-mana elemen Html (tanpa meninggalkan) dan sebagai hasilnya anda akan mendapat serpihan teks bergaris-garis-garis-garis(bunyi dan kelihatan keren, bukan?):
Text-decoration:garis bawah garis atas garis-garis;
Nilai untuk hiasan teks (jika anda ingin menggunakan beberapa daripadanya sekaligus) perlu ditulis melalui watak ruang.
Penjajaran menegak - penjajaran menegak
Seterusnya kita mempunyai penjajaran menegak - penjajaran menegak. Untuk hampir semua elemen dalam kod HTML, ini bermakna menjajarkan elemen sebaris dengan teks berbanding garis dasarnya. Benar, untuk ini ia bermakna sedikit berbeza - semua kandungan yang ada dalam sel ini akan diselaraskan secara menegak.
Untuk peraturan penjajaran menegak CSS, anda boleh menggunakan nilai berikut:
Garisan dijajarkan garis dasar secara lalai. Lihat, saya memohon besarkan saiz fon untuk sekeping teks ini dan kedua-dua serpihan ini dijajarkan ke garisan pangkal (bawah). Dan penjajaran menegak menggunakan penjajaran menegak dengan tepat bertujuan untuk mengubah cara garisan dijajarkan.
Contohnya, jika saya menulis vertical-align:baseline untuk sekeping teks yang sama diperbesarkan, maka tiada perubahan akan berlaku, kerana nilai garis dasar digunakan untuk peraturan CSS ini secara lalai.
Dengan cara ini, anda juga boleh menggunakan nombor sebagai nilai untuknya, dan tulisan vertical-align:0 akan bermaksud perkara yang sama seperti vertical-align:baseline, i.e. garis dasar bersamaan dengan sifar. Oleh itu, jika kita ingin menunjukkan sebarang anjakan dalam penjajaran menegak, maka anjakan ini akan ditentukan secara relatif kepada garis dasar (atau sifar).
Anda boleh menulisnya seperti ini:
penjajaran menegak:10px;
Dan kami akan menerima alihkan serpihan dengan fon yang lebih besar ke atas 10 piksel berbanding garis dasar. Jika kita menulis nilai negatif:
Jajaran menegak:-10px;
Kemudian kita dapat alihkan serpihan ke bawah berbanding dengan garis dasar. Daripada contoh, jelas bahawa disebabkan oleh peralihan, ketinggian garisan meningkat supaya teks sesuai di dalamnya tanpa berlanggar dengan baris bersebelahan. Peralihan juga boleh ditentukan dalam Em dan Ex, dan sebagai peratusan, yang akan dikira daripada ketinggian garisan elemen ini (ingat dalam artikel lepas kita belajar cara menetapkannya menggunakan ).
Untuk menjajarkan kandungan sel jadual secara menegak, penjajaran menegak harus menggunakan nilai Atas dan Bawah untuk masing-masing menjajarkan kandungan ke bahagian atas dan bawah sel (baik, tengah dalam sel jadual digunakan sebagai nilai penjajaran menegak lalai ).
Dan untuk elemen fon anda boleh menggunakan teks-atas, teks-bawah, tengah. Mari kita jadikan ia sebagai contoh sekeping teks ini maksud:
vertical-align:middle;
Apa yang berlaku akibatnya? Garis tengah serpihan yang diperbesarkan diselaraskan dengan garis dasar teks biasa, i.e. kami mendapat penjajaran menegak ke garis tengah. Untuk teks-atas dan teks-bawah semuanya akan sama. Ini text-top , dan ini text-bottom .
Nilai sifat Css sub dan super sejajar menegak sepadan dengan sub dan indeks super yang berlaku dalam Html tulen (sebelum menggunakan sifat CSS untuk reka bentuk visual).
Transformasi teks, jarak huruf, jarak perkataan dan ruang putih
Tiada yang digunakan secara lalai dan bermakna bahawa aksara dalam teks tidak akan berubah dalam apa jua cara - seperti yang ditulis dalam Html, ini adalah cara ia akan dipaparkan. Nilai Huruf Besar untuk transformasi teks akan mengubah semua huruf dalam serpihan kepada huruf besar ( contoh ditunjukkan dalam ayat ini, di mana peraturan text-transform:huruf besar digunakan, dan huruf asalnya ditulis dalam huruf kecil).
Nilai huruf kecil untuk peraturan transformasi teks Css akan membolehkan anda mengubah semua aksara dalam serpihan kepada huruf kecil, dan nilai huruf besar akan menjadikan semua huruf pertama perkataan itu menggunakan huruf besar ( contoh dalam ayat ini- text-transform: capitalize). Itu. menggunakan text-transform anda boleh melakukan apa sahaja yang anda mahu dengan teks biasa, dan kemudian mengembalikan semuanya dengan mudah.
Oleh itu, jika, sebagai contoh, anda mempunyai tugas untuk membuat semua tajuk hanya ditulis dalam huruf besar, kemudian tuliskannya dalam Html seperti biasa, dan jadikannya sebagai huruf besar dalam CSS melalui text-transform:huruf besar. Kemudian, jika anda memutuskan untuk menukar sesuatu kembali, anda hanya perlu membuat sedikit perubahan pada gaya dan bukan pada kandungan semua 100,500 pengepala di tapak anda.
Secara lalai, kedua-dua jarak huruf dan jarak perkataan ditetapkan kepada Normal, atau ini adalah sama dengan sifar (iaitu, jarak antara aksara dan perkataan tidak berubah dalam apa jua cara). Jumlah perubahan dalam jarak dalam peraturan ini hanya boleh ditentukan dalam piksel, sama ada Em atau Ex, tetapi bukan dalam peratusan.
Walau bagaimanapun, anda boleh menggunakan kedua-dua nilai positif (jarang aksara atau perkataan) dan nilai negatif (merapatkan aksara atau perkataan). Sebagai contoh, anda boleh "inilah cara untuk menipiskan watak dalam frasa ini" menggunakan peraturan Css berikut:
Jarak huruf: 0.4em;
Atau anda boleh "inilah cara untuk merapatkan simbol dalam frasa ini" dengan menggunakan:
Jarak huruf:-1px;
Perkara yang sama boleh dikatakan tentang jarak perkataan, dengan satu-satunya perbezaan ialah jarak akan berubah antara perkataan, sebagai contoh, dalam frasa ini, menggunakan binaan CSS ini:
Jarak perkataan:4em;
Begitu juga, anda boleh menggunakan nilai negatif dalam jarak perkataan untuk mengurangkan jarak antara perkataan.
Nah, peraturan CSS terakhir untuk hari ini, yang membolehkan anda memformat teks dalam kod Html dengan cara tertentu, ialah ini ruang putih. Ia bertanggungjawab untuk memaparkan aksara ruang putih pada halaman web yang berlaku semasa menulis kod Html.
Seperti yang anda ingat dari artikel tentang, penyemak imbas, apabila menghuraikan kod, menggabungkan semua ruang, pemisah baris dan tab ke dalam satu ruang tunggal, dan memecahkan baris pada halaman web dengan tepat mengikut aksara ruang yang berlaku dalam kod.
Jadi, ruang putih boleh mengambil salah satu daripada tiga nilai:
Adalah jelas bahawa nilai lalai adalah Normal dan dalam kes ini semuanya dipaparkan seperti yang saya nyatakan di atas. Tetapi apabila menggunakan nilai Pra, kita mendapat analogi lengkap dengan menggunakan, i.e. Pada halaman web, teks akan dipaparkan dengan semua aksara ruang kosong tambahan yang terdapat semasa menulis kod dan penyemak imbas tidak lagi akan dapat membuat pemindahan menggunakan kod tersebut.
Nah, apa maksudnya? nowrap Ia hanya akan menghalang penyemak imbas daripada membungkus sebarang aksara ruang putih yang ditemuinya di dalam serpihan dengan peraturan CSS white-space:nowrap. Anda boleh mencuba cara semuanya berfungsi sendiri dengan mencipta fail Html yang mudah dan melampirkan mana-mana bahagian teks dalam teg seperti ini:
Semoga berjaya! Jumpa anda tidak lama lagi di halaman laman blog
Anda mungkin berminat
Gaya senarai (jenis, imej, kedudukan) - Peraturan css untuk menyesuaikan penampilan senarai dalam kod Html
Kedudukan menggunakan indeks Z dan peraturan Kursor CSS untuk menukar kursor tetikus
Padding, Margin dan Border - tetapkan padding dalaman dan luaran dalam CSS, serta sempadan untuk semua sisi (atas, bawah, kiri, kanan)
Untuk apa CSS, cara menyambung helaian gaya berlatarkan ke dokumen Html dan sintaks asas bahasa ini
Terapung dan jelas dalam CSS - alat susun atur blok
CSS - apakah itu, bagaimana helaian gaya berlatarkan disambungkan kepada kod Html menggunakan Gaya dan Pautan
Unit dimensi (piksel, Em dan Ex) dan peraturan pewarisan dalam CSS
Tag, kelas, Id dan pemilih universal, serta pemilih atribut dalam CSS moden
Kedudukan (mutlak, relatif dan tetap) - cara untuk meletakkan elemen Html dalam CSS (peraturan kiri, kanan, atas dan bawah)
Latar belakang dalam CSS (warna, kedudukan, imej, ulangan, lampiran) - segala-galanya untuk menetapkan warna latar belakang atau imej latar belakang elemen Html
Tag HTML yang menentukan penjajaran teks dan lekukan
Teks dibenarkan yang digunakan dalam tipografi
Contoh di bawah menunjukkan cara menjajarkan teks kepada lebar muka surat:
align="left" | align="right" |
---|---|
Bilangan pekerja yang diambil bekerja dalam sektor perkhidmatan dan penyebaran maklumat semakin meningkat setiap hari. Jika simbol abad yang lalu adalah ladang dan kilang, maka simbol abad ke-21 semasa ialah pejabat yang dilengkapi dengan komputer yang mempunyai akses kepada aliran maklumat. |
|
align="justify" | align="center" |
Bilangan pekerja yang diambil bekerja dalam sektor perkhidmatan dan penyebaran maklumat semakin meningkat setiap hari. Jika simbol abad yang lalu adalah ladang dan kilang, maka simbol abad ke-21 semasa ialah pejabat yang dilengkapi dengan komputer yang mempunyai akses kepada aliran maklumat. |
Bilangan pekerja yang diambil bekerja dalam sektor perkhidmatan dan penyebaran maklumat semakin meningkat setiap hari. Jika simbol abad yang lalu adalah ladang dan kilang, maka simbol abad ke-21 semasa ialah pejabat yang dilengkapi dengan komputer yang mempunyai akses kepada aliran maklumat. |
Nilai justify memastikan seragam selaraskan teks ke kanan dan kiri, itu dia dalam lebar. Kaedah ini digunakan secara meluas dalam percetakan.
Menjajarkan teks dalam HTML ke tengah dan lebar
Jajarkan teks dalam HTML berpusat, teks ke kanan:
Keputusan:
Atribut dan nilai
- align="left" - mentakrifkan penjajaran teks kiri(lalai).
- align="center" - menjajarkan teks ke tengah.
- align="right" - menjajarkan teks ke kanan.
Jajarkan | lekukan teks HTML
Teks HTML dan lekukannya di sebelah kiri halaman
Kami akan menghasilkan lekukan teks di sebelah kiri dalam dua cara:
Keputusan:
Lihat dalam tetingkap baharu.
Menetapkan penjajaran baris terakhir blok teks.
maklumat ringkas
Jawatan
Penerangan | Contoh | |
---|---|---|
<тип> | Menunjukkan jenis nilai. | <размер> |
A && B | Nilai mesti dikeluarkan dalam susunan yang ditentukan. | <размер> && <цвет> |
A | B | Menunjukkan bahawa anda perlu memilih hanya satu nilai daripada yang dicadangkan (A atau B). | biasa | topi kecil |
A || B | Setiap nilai boleh digunakan secara berasingan atau bersama-sama dengan yang lain dalam sebarang susunan. | lebar || kira |
Nilai kumpulan. | [ tanaman || menyeberang ] | |
* | Ulang sifar atau lebih kali. | [,<время>]* |
+ | Ulang satu kali atau lebih. | <число>+ |
? | Jenis, perkataan atau kumpulan yang ditentukan adalah pilihan. | sisipan? |
(A, B) | Ulang sekurang-kurangnya A, tetapi tidak lebih daripada B kali. | <радиус>{1,4} |
# | Ulang satu kali atau lebih dipisahkan dengan koma. | <время># |
Nilai
auto Memadankan penjajaran yang ditentukan oleh sifat penjajaran teks, kecuali untuk nilai justify. Untuk itu, penjajaran akan menjadi seperti permulaan . mula Baris dijajarkan ke tepi permulaan blok, yang boleh berubah bergantung pada arah teks (kiri ke kanan atau kanan ke kiri). akhir Baris dijajarkan ke tepi penghujung blok, yang ditentukan oleh arah teks. kiri Garisan dijajarkan ke kiri. kanan Garisan dijajarkan ke kanan. tengah Garisan berpusat. mewajarkan Garis adalah wajar. Jika terdapat hanya satu perkataan dalam baris terakhir, ia akan dijajar ke kiri.
Kesan nilai yang berbeza pada kedudukan teks ditunjukkan dalam jadual. 1.
Maknanya | Penjajaran | Jenis teks |
---|---|---|
dibiarkan | Dibiarkan | |
betul | Betul | ![]() |
pusat | Berpusat | ![]() |
mewajarkan | Lebar | ![]() |
Kotak pasir
Winnie the Pooh sentiasa tidak suka minum sedikit, terutamanya pada pukul sebelas pagi, kerana pada waktu itu sarapan pagi telah lama berakhir, dan makan tengah hari belum bermula. Dan, tentu saja, dia sangat gembira melihat Arnab sedang mengeluarkan cawan dan pinggan.
div ( text-align-last: start ; )
Contoh
Model objek
Sebuah objek.style.textAlignLast
Catatan
Internet Explorer dan Edge tidak menyokong nilai mula dan tamat.
Firefox sebelum versi 49 menyokong sifat -moz-text-align-last.
Spesifikasi
Setiap spesifikasi melalui beberapa peringkat kelulusan.
- Syor - Spesifikasi telah diluluskan oleh W3C dan disyorkan sebagai standard.
- Syor Calon ( Cadangan yang mungkin) - kumpulan yang bertanggungjawab untuk piawaian berpuas hati bahawa ia memenuhi matlamatnya, tetapi memerlukan bantuan daripada komuniti pembangunan untuk melaksanakan piawaian tersebut.
- Cadangan Cadangan Cadangan Cadangan) - pada peringkat ini dokumen diserahkan kepada Majlis Penasihat W3C untuk kelulusan akhir.
- Draf Kerja - Versi draf yang lebih matang yang telah dibincangkan dan dipinda untuk semakan komuniti.
- Draf editor ( Draf editorial) - versi draf standard selepas perubahan dibuat oleh editor projek.
- Draf ( Spesifikasi draf) - versi draf pertama standard.
CSS | internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
2.1 | 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
3 | 2.0+ | 11.6+ | 3.1+ | 3.6+ | 2.1+ | 2.0+ |
maklumat ringkas
Versi CSS
Nilai
tengah Menjajarkan teks ke tengah. Teks diletakkan secara mendatar dalam tetingkap penyemak imbas atau bekas di mana blok teks terletak. Baris-baris teks nampaknya digantung pada paksi halimunan yang mengalir di tengah-tengah halaman web. Kaedah penjajaran ini digunakan secara aktif dalam tajuk dan pelbagai tandatangan, seperti kapsyen; ia memberikan rupa rasmi dan kukuh pada reka bentuk teks. Dalam semua kes lain, penjajaran tengah jarang digunakan atas sebab ia menyusahkan untuk membaca sejumlah besar teks sedemikian. justify Justified, yang bermaksud diselaraskan ke kiri dan kanan pada masa yang sama. Untuk melakukan tindakan ini, penyemak imbas dalam kes ini menambah ruang antara perkataan. kiri Menjajarkan teks ke kiri. Dalam kes ini, baris teks dijajarkan ke kiri, dan tepi kanan disusun sebagai tangga. Kaedah penjajaran ini adalah yang paling popular di tapak web, kerana ia membolehkan pengguna mencari baris baharu dengan mudah dan membaca teks besar dengan selesa. kanan Menjajarkan teks ke kanan. Kaedah penjajaran ini bertindak sebagai antagonis kepada jenis sebelumnya. Iaitu, baris teks dijajarkan ke tepi kanan, manakala kiri kekal "koyak". Oleh kerana tepi kiri tidak dijajarkan, iaitu tempat baris baharu dibaca, teks ini lebih sukar dibaca berbanding jika dijajar ke kiri. Oleh itu, penjajaran kanan biasanya digunakan untuk tajuk pendek tidak lebih daripada tiga baris. Kami tidak menganggap tapak tertentu yang teks perlu dibaca dari kanan ke kiri, yang mungkin kaedah penjajaran yang serupa akan berguna. auto Tidak mengubah kedudukan elemen. mewarisi Mewarisi nilai ibu bapa. mula Sama seperti kiri jika teks pergi dari kiri ke kanan dan kanan apabila teks pergi dari kanan ke kiri. tamat Sama seperti kanan jika teks pergi dari kiri ke kanan dan kiri apabila teks pergi dari kanan ke kiri.HTML5 CSS2.1 IE Cr Op Sa Fx
Hasil daripada contoh ini ditunjukkan dalam Rajah. 1.
nasi. 1. Jajarkan teks dalam penyemak imbas Safari
Internet Explorer sehingga dan termasuk versi 7.0 mentafsir contoh ini agak berbeza daripada penyemak imbas lain, menyelaraskan bukan sahaja teks, tetapi juga blok (Gamb. 2).
nasi. 2. Penjajaran teks dalam Internet Explorer 7
Model objek
document.getElementById("elementID ").style.textAlign
Pelayar
IE sehingga dan termasuk versi 7.0 menyelaraskan bukan sahaja kandungan elemen peringkat blok, tetapi juga elemen itu sendiri.