css set kandungan teks

CSS ialah bahasa reka bentuk web biasa yang membolehkan pembangun lebih mudah mengawal pelbagai elemen pada halaman web untuk mencipta pelbagai kesan visual dan pengalaman interaktif. Antaranya, CSS sangat penting untuk menetapkan kandungan teks Ia boleh membantu kita mencapai pelbagai gaya teks dan kesan reka letak. Artikel ini akan memperkenalkan cara menggunakan CSS untuk menetapkan kandungan teks.

1. Fon

Fon ialah tetapan paling asas dalam gaya teks, dan CSS menyediakan pelbagai pilihan tetapan fon. Antaranya, kaedah tetapan paling asas ialah menggunakan atribut font-family untuk menentukan nama fon, contohnya:

body {
    font-family: Arial, sans-serif;
}

Kod di atas menetapkan fon dalam badan halaman web kepada Arial atau sans- fon serif. Jika komputer pengguna sudah mempunyai Jika fon Arial dipasang, gunakan fon ini Jika tidak, gunakan fon sans-serif lalai. Pendekatan ini akan mencukupi dalam kebanyakan kes, tetapi jika anda mahukan kawalan yang lebih terperinci ke atas fon, anda boleh menggunakan sifat lain.

Atribut saiz fon boleh menentukan saiz fon dan anda boleh menggunakan piksel, peratusan atau em sebagai unit:

h1 {
    font-size: 32px;
}

Kod di atas menetapkan saiz fon tajuk h1 kepada 32 piksel . Jika anda mahu saiz fon ditetapkan relatif kepada saiz elemen induk, anda boleh menggunakan peratusan atau ems sebagai unit:

p {
    font-size: 120%;
}

span {
    font-size: 1.2em;
}

Kod di atas menetapkan saiz fon perenggan p kepada 120% daripada saiz elemen induk, manakala elemen span Saiz fon ditetapkan kepada 1.2 kali saiz elemen induk.

Selain nama dan saiz fon, atribut fon juga boleh menentukan ketebalan fon, condong, variasi, dsb. Contohnya, atribut font-weight boleh menentukan ketebalan fon, yang boleh menjadi normal, tebal atau nilai berangka (biasanya 400 atau 700):

h2 {
    font-weight: bold;
}

Kod di atas menetapkan fon h2 tajuk kepada tebal. Jika anda ingin menetapkan fon condong, anda boleh menggunakan atribut gaya fon:

em {
    font-style: italic;
}

Kod di atas menetapkan fon di dalam elemen em kepada italik.

2. Warna teks dan warna latar belakang

Warna teks dan warna latar belakang juga merupakan tetapan yang agak asas dalam gaya teks CSS menyediakan dua atribut, warna dan warna latar belakang, untuk pelaksanaan.

Atribut warna boleh menentukan warna teks, anda boleh menggunakan nama warna, nilai RGB heksadesimal atau fungsi RGB:

h3 {
    color: red;
}

p {
    color: #333333;
}

a {
    color: rgb(255, 0, 0);
}

Kod di atas menetapkan warna teks tajuk h3 kepada merah, dan perenggan p Warna teks ditetapkan kepada kelabu gelap dan warna teks pautan ditetapkan kepada merah.

Begitu juga, atribut warna latar belakang boleh menentukan warna latar belakang, menggunakan nama warna, nilai RGB heksadesimal atau fungsi RGB:

footer {
    background-color: #f2f2f2;
}

Kod di atas menetapkan warna latar belakang elemen pengaki kepada kelabu muda.

3. Penjajaran teks dan ketinggian baris

Penjajaran teks dan ketinggian baris juga merupakan tetapan penting dalam gaya teks, yang boleh dicapai melalui dua atribut text-align dan line-height.

text-align boleh mengawal penjajaran mendatar teks, dan nilai ​​boleh ditinggalkan, tengah, kanan atau justify:

h4 {
    text-align: center;
}

Kod di atas akan menyelaraskan teks tajuk h4 secara mendatar dan tengah.

tinggi baris boleh mengawal ketinggian baris teks Anda boleh menggunakan nilai berangka atau peratusan sebagai unit, atau anda boleh menggunakan kata kunci seperti biasa dan mewarisi:

p {
    line-height: 1.5;
}

Kod di atas ditetapkan. ketinggian garisan perenggan p 1.5 kali ganda saiz fonnya.

4. Hiasan teks dan bayang

CSS juga boleh menambah hiasan dan kesan bayangan pada teks melalui ciri hiasan teks dan bayangan teks.

hiasan teks boleh menentukan hiasan teks, seperti garis bawah, coretan, garis atas, dsb.:

a {
    text-decoration: underline;
}

s {
    text-decoration: line-through;
}

u {
    text-decoration: overline;
}

Kod di atas akan menggariskan pautan dan menambah coretan pada teks dalam elemen s . Teks dalam elemen u digariskan.

bayang-teks boleh menambah kesan bayang-bayang pada teks dan anda boleh menentukan parameter seperti warna, kedudukan dan jejari kabur bayang-bayang:

h5 {
    text-shadow: 2px 2px 5px #888888;
}

Kod di atas menambah bayang-bayang kesan pada teks tajuk h5, dan warna bayang Ia #888888, kedudukannya ialah (2px, 2px), dan jejari kabur ialah 5px.

Ringkasan

CSS menyediakan banyak cara untuk menetapkan kandungan teks, termasuk fon, warna teks dan warna latar belakang, penjajaran teks dan ketinggian garisan, hiasan teks dan bayang-bayang, dsb. Dalam pembangunan sebenar, pembangun boleh memilih kaedah tetapan yang sesuai mengikut keperluan untuk mencapai kesan teks yang diingini.

Atas ialah kandungan terperinci css set kandungan teks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!