masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Teks CSS

QQ截图20161011145219.png

Kami tidak akan menerangkan atribut dalam jadual di atas satu persatu. Kami hanya akan menerangkan beberapa atribut yang biasa digunakan, terutamanya untuk dipelajari dan dipraktikkan oleh semua orang pada masa yang sama. Anda boleh menguji sendiri kandungan lain dan anda juga boleh melihat kandungan khusus setiap atribut pada w3c.

Contoh 1 warna warna

index.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <p>查看颜色</p>
        <h1>标题查看颜色</h1>
    </body>
</html>

style.css

body{
   color: aqua;
}

Hasil jalankan :

QQ截图20161011145634.png


Anda boleh lihat bahawa kami menetapkan warna untuk badan, tetapi tag p dan h1 juga menunjukkan warna yang ditetapkan oleh badan Warna fon menunjukkan bahawa kedua-dua tag mewarisi warna fon badan.

Contoh 2 penjajaran teks

penjajaran teks ialah atribut asas yang mempengaruhi perhubungan antara baris teks dalam unsur. 3 nilai pertama adalah agak mudah, tetapi yang ke-4 dan ke-5 adalah sedikit lebih rumit.

Nilai kiri, kanan dan tengah menyebabkan teks dalam elemen itu masing-masing dijajar ke kiri, dijajarkan ke kanan dan di tengah.

Bahasa Barat dibaca dari kiri ke kanan dan nilai lalai semua penjajaran teks ditinggalkan. Teks dijajarkan pada sempadan kiri dan bergerigi pada sempadan kanan (dipanggil teks "kiri-ke-kanan"). index.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <p>php中文网</p>
    </body>
</html>

style.css

body{
   color: red;
   text-align: center;
}

Hasil jalankan:

QQ截图20161011145702.png

Contoh 3 inden teks

Inden teks Inden baris pertama perenggan pada halaman Web Ini adalah salah satu kesan pemformatan teks yang paling biasa digunakan. CSS menyediakan sifat inden teks, yang boleh melaksanakan inden teks dengan mudah. Dengan menggunakan atribut text-indent, baris pertama semua elemen boleh diinden dengan panjang tertentu, malah nilai negatif. Penggunaan atribut ini yang paling biasa ialah untuk mengenden baris pertama perenggan Peraturan berikut akan mengenden baris pertama semua perenggan sebanyak 5 em: 

p {text-indent: 5em;}

Kod dalam index.html di bawah ialah: 

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <div>
            <h3>PHP中文网</h3>
            <p>最好的自学网站</p>
            <p>最好的自学网站</p>
            <p>最好的自学网站</p>
            <p>最好的自学网站</p>
         </div>
    </body>
</html>

Jika anda tidak menambah sebarang pengubahsuaian css pada masa ini. Kesan yang dipaparkan ialah:

Tambahkan lekukan berikut pada kod style.css kami untuk mengesot tiga perkataan "Bangunan Makmal" sebanyak 2 bait. 

 h3{
   text-indent: 5em;
 }

Hasil jalankan:

QQ截图20161011145739.png

Jarak perkataan

atribut jarak perkataan ialah OK Tukar jarak standard antara aksara (perkataan). Nilai lalainya normal adalah sama seperti menetapkannya kepada 0.

Atribut jarak perkataan menerima nilai panjang positif atau negatif. Jika nilai panjang positif disediakan, jarak antara perkataan meningkat. Menetapkan nilai negatif untuk jarak perkataan akan membawanya lebih dekat: 

<html>
<body>
		<h1 style="word-spacing:15px;">设置中文字符间距</h1>
		<h1 style="word-spacing:15px;">this is a test</h1>
	</body>
</html>

Jarak huruf

Perbezaan antara sifat jarak huruf dan jarak perkataan ialah jarak huruf mengubah suai jarak antara aksara atau huruf.

Seperti atribut jarak perkataan, nilai yang mungkin untuk atribut jarak huruf termasuk semua panjang. Kata kunci lalai adalah biasa (yang sama dengan jarak huruf:0). Nilai panjang yang dimasukkan akan menambah atau mengurangkan ruang antara huruf dengan jumlah yang ditentukan: 

<html>
<head>
<style type="text/css">
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
</style>
</head>
<body>
<h1>php中文网</h1>
<h4>php中文网</h4>
</body>
</html>

Penukaran Aksara

<🎜 The >atribut text-transform mengendalikan kes teks. Atribut ini mempunyai 4 nilai:

  • tiada

  • huruf besar

  • huruf kecil

  • menggunakan huruf besar

Nilai lalai tiada yang tidak membuat sebarang perubahan pada teks dan akan menggunakan huruf besar asal dalam dokumen sumber. Seperti yang dicadangkan oleh namanya, huruf besar dan huruf kecil menukar teks kepada semua huruf besar dan semua huruf kecil. Akhir sekali, huruf besar hanya menggunakan huruf besar pada huruf pertama setiap perkataan.

Sebagai atribut, transformasi teks mungkin tidak penting, tetapi ia boleh berguna jika anda tiba-tiba memutuskan untuk menjadikan semua elemen h1 huruf besar. Daripada mengubah suai kandungan semua elemen h1 secara individu, hanya gunakan text-transform untuk melakukannya untuk anda: 

h1 {text-transform: uppercase}

Menggunakan text-transform mempunyai dua faedah. Pertama, tulis sahaja peraturan mudah untuk mencapai pengubahsuaian ini tanpa mengubah suai elemen h1 itu sendiri. Kedua, jika anda kemudian memutuskan untuk menukar semua kes kembali kepada kes asal, adalah lebih mudah untuk menyelesaikan pengubahsuaian.

Hiasan Teks

Seterusnya, kita membincangkan atribut hiasan teks, iaitu atribut yang sangat menarik yang menyediakan banyak tingkah laku yang menarik.

teks-hiasan mempunyai 5 nilai:

  • tiada

  • garis bawah

  • overline

  • line-through

  • berkelip

Seperti yang dijangkakan, garis bawah akan Elemen digariskan , sama seperti elemen U dalam HTML. overline melakukan sebaliknya dan melukis garis atas di bahagian atas teks. Nilai baris-lalu melukis garis melalui di tengah-tengah teks, bersamaan dengan elemen S dan mogok dalam HTML. blink menyebabkan teks berkelip, serupa dengan tag blink yang banyak difitnahkan yang disokong oleh Netscape.

Nilai none mematikan semua hiasan yang asalnya digunakan pada elemen. Biasanya, teks biasa ialah rupa lalai, tetapi itu tidak selalu berlaku. Sebagai contoh, pautan digariskan secara lalai. Jika anda ingin mengalih keluar garis bawah daripada hiperpautan, anda boleh menggunakan CSS berikut untuk berbuat demikian: 

a {text-decoration: none;}

Nota: Jika anda secara eksplisit menggunakan peraturan sedemikian untuk mengalih keluar garis bawah pautan, maka satu-satunya perbezaan visual antara sauh dan teks biasa ialah warna (sekurang-kurangnya ini adalah lalai, tetapi tidak ada jaminan bahawa warna akan sama) perbezaannya).

Anda juga boleh menggabungkan berbilang hiasan dalam satu peraturan. Jika anda mahu semua hiperpautan digariskan dan digariskan, peraturannya adalah seperti berikut: 

a:link a:visited {text-decoration: underline overline;}

Walau bagaimanapun, ambil perhatian bahawa jika dua hiasan berbeza sepadan dengan elemen yang sama, nilai peraturan yang menang akan betul-betul Ganti nilai lain. Sila pertimbangkan peraturan berikut: 

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

Untuk peraturan yang diberikan, semua elemen h2 dengan stickyn kelas hanya mempunyai satu hiasan garisan dan tiada garis bawah atau garis atas, kerana nilai hiasan teks akan digantikan sebaliknya Kumpul.

Mengendalikan ruang kosong

Atribut ruang putih mempengaruhi pengendalian ejen pengguna terhadap ruang, baris baharu dan aksara tab dalam dokumen sumber.

Menggunakan atribut ini, anda boleh mempengaruhi cara penyemak imbas mengendalikan ruang kosong antara perkataan dan antara baris teks. Pada tahap tertentu, pemprosesan XHTML lalai sudah mengendalikan ruang putih: ia menggabungkan semua aksara ruang putih ke dalam satu ruang. Oleh itu, memandangkan penanda berikut, apabila dipaparkan dalam pelayar web, hanya satu ruang akan dipaparkan di antara setiap perkataan, manakala baris baharu dalam elemen akan diabaikan: 

<p>This     paragraph has    many
    spaces           in it.</p>

Lalai ini boleh ditetapkan secara eksplisit dengan pengisytiharan berikut Gelagat: 

p {white-space: normal;}

Peraturan di atas memberitahu penyemak imbas untuk melakukan perkara yang biasa dilakukan: buang sebarang ruang kosong tambahan. Jika nilai ini diberikan, aksara baris baharu (pemulangan pengangkutan) ditukar kepada ruang dan jujukan berbilang ruang pada satu baris ditukar kepada satu ruang.

Arah Teks

Jika anda membaca buku dalam bahasa Inggeris, anda akan membacanya dari kiri ke kanan dan atas ke bawah, iaitu bahasa Inggeris arah aliran. Walau bagaimanapun, ini tidak berlaku untuk semua bahasa. Kita tahu bahawa bahasa Cina kuno dibaca dari kanan ke kiri, dan sudah tentu Ibrani dan Arab dibaca dari kanan ke kiri. CSS2 memperkenalkan sifat untuk menerangkan hala tujunya. Atribut arah

mempengaruhi arah penulisan teks dalam elemen peringkat blok, arah susun atur lajur dalam jadual, arah kandungan mengisi kotak elemennya secara mendatar dan kedudukan baris terakhir dalam elemen yang dibenarkan .

Nota: Untuk elemen sebaris, atribut arah hanya digunakan apabila atribut unicode-bidi ditetapkan untuk membenamkan atau bidi-override. Atribut arah

mempunyai dua nilai: ltr dan rtl. Dalam kebanyakan kes, lalai ialah ltr, yang memaparkan teks dari kiri ke kanan. Jika memaparkan teks kanan ke kiri, nilai rtl harus digunakan.

Meneruskan pembelajaran
||
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div> <h3>PHP中文网</h3> <p>最好的自学网站</p> <p>最好的自学网站</p> <p>最好的自学网站</p> <p>最好的自学网站</p> </div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492286 permainan