css3中text属性有哪些
css3中text属性有：1、颜色属性color；2、文本对齐属性【text-align】；3、字符间距属性【letter-spacing】；4、文本行高属性【line-height】；5、文本修饰属性【text-decoration】。
本教程操作环境：windows10系统、css3版，该方法适用于所有品牌电脑。
（学习视频分享：css视频教程）
css3中text属性有：
1、color
作用：指定文本的颜色
说明：该属性在块、行内、行内块的样式表中都可以使用，改变被控制元素内部所有文本的颜色
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3之text属性</title>
<style type="text/css">
#coDiv {
color: #00c6ff;
}
#coP {
color: #2b542c;
}
#coSpan {
color: palevioletred;
}
#coStrong {
color: blueviolet;
}
#colIn {
color: deeppink;
}
</style>
</head>
<body>
<div id="coDiv">
<p id="coP">
我是一名前端爱好者1
</p>
我是一名前端爱好者2
</div>
<span id="coSpan">
我是一名前端爱好者3
<strong id="coStrong">我是一名前端爱好者4</strong>
</span>
<input type="text" id="colIn" />
</body>
</html>2、text-align
作用：指定元素文本的水平对齐方式
说明：只在块级元素中使用生效，直接用在内联元素上不生效。如果使用该属性，在块元素中包含的文本、内联元素将会对齐，其内的块元素默认不设置此属性的话也会对齐，是因为子块元素继承父块元素的text-align的属性
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS3之font属性</title>
<style type="text/css">
div {
border: 1px solid;
width: 1200px;
height: 150px;
}
#showdiv1 {
text-align: left;
}
#showdiv2 {
text-align: center;
}
#showdiv3 {
text-align: right;
}
#showdiv4 {
text-align: justify;
}
</style>
</head>
<body>
<div id="showdiv1">
大家好
</div>
<div id="showdiv2">
大家好
</div>
<div id="showdiv3">
大家好
</div>
<div id="showdiv4">
In a sense we've come to our nation's capital to cash a check. When the architects of our republic wrote the magnificent words of the Constitution and the Declaration of Independence, they were signing a promissory note to which every American was to fall heir. This note was a promise that all men, yes, black men as well as white men, would be guaranteed the "unalienable Rights" of "Life, Liberty and the pursuit of Happiness." It is obvious today that America has defaulted on this promissory note, insofar as her citizens of color are concerned. Instead of honoring this sacred obligation, America has given the Negro people a bad check, a check which has come back marked "insufficient funds."
</div>
</body>
</html>3、letter-spacing:
作用：增加或减少字符间的空白 （字符间距）
说明：负值过大时，字体会产生挤压，但不会重叠
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3之text属性</title>
<style type="text/css">
#lsSpan1 {
letter-spacing: normal;
}
#lsSpan2 {
letter-spacing: 10px;
}
#lsSpan3 {
letter-spacing: -4px;
}
</style>
</head>
<body>
<span id="lsSpan1">Hello World</span><br>
<span id="lsSpan2">Hello World</span><br>
<span id="lsSpan3">Hello World</span><br>
</body>
</html>4、line-height:
作用：设置文本的行高
说明：不允许使用负值
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3之text属性</title>
<style type="text/css">
#lsSpan1 {
line-height: 16px;
border: 1px solid;
}
#lsSpan2 {
line-height: 2em;
border: 1px solid;
}
</style>
</head>
<body>
<p id="lsSpan1">Hello World</p><br>
<p id="lsSpan2">Hello World</p><br>
</body>
</html>5、text-decoration
作用：规定添加到文本的修饰，下划线、上划线、删除线等
说明：该属性有以下三种简写 text-decoration-line，text-decoration-color，text-decoration-style
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3之text属性</title>
<style type="text/css">
#lsSpan1 {
text-decoration: none;
text-decoration-line: overline;
}
#lsSpan2 {
text-decoration: underline;
text-decoration-color: pink;
}
#lsSpan3 {
text-decoration: overline;
text-decoration-style: wavy;
}
#lsSpan4 {
text-decoration: line-through;
}
#lsSpan5 {
text-decoration: overline wavy palevioletred;
}
</style>
</head>
<body>
<a id="lsSpan1">这是超链接</a><br>
<p id="lsSpan2">Hello World</p><br>
<p id="lsSpan3">Hello World</p><br>
<p id="lsSpan4">Hello World</p><br>
<p id="lsSpan5">Hello World</p><br>
</body>
</html>相关推荐：CSS教程
Atas ialah kandungan terperinci css3中text属性有哪些. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana untuk mendapatkan sifat literal integer dalam Python tanpa SyntaxError?
Aug 20, 2023 pm 07:13 PM
Togetintlitteralattribute insteadofSyntaxRalat,useaspaceorparenthesis.TheintliteralisapartifNumericLiteralsinPython.NumericLiteralsaljuga termasuk yang berikut-empat jenis angka yang berbeza−int(tandatanganinteger)−Mereka selalunya dipanggil justintegersorints,
Fungsi dir() Python: Lihat sifat dan kaedah objek
Nov 18, 2023 pm 01:45 PM
Fungsi dir() Python: Lihat sifat dan kaedah objek, contoh kod khusus diperlukan. Salah satu fungsi yang sangat berguna ialah fungsi dir(), yang membolehkan kita melihat sifat dan kaedah sesuatu objek. Artikel ini akan memperkenalkan penggunaan fungsi dir() dan menunjukkan fungsi serta penggunaannya melalui contoh kod tertentu. Teks: Fungsi dir() Python ialah fungsi terbina dalam.
Bagaimana untuk menamakan semula sifat JSON menggunakan Gson di Java?
Aug 27, 2023 pm 02:01 PM
Anotasi Gson@SerializedName boleh disirikan kepada JSON dan mempunyai nilai nama yang diberikan sebagai nama medannya. Anotasi ini boleh mengatasi mana-mana FieldNamingPolicy, termasuk dasar penamaan medan lalai yang mungkin telah ditetapkan pada tika Gson. Strategi penamaan yang berbeza boleh ditetapkan menggunakan kelas GsonBuilder. Syntax@Retention(value=RUNTIME)@Target(value={FIELD,METHOD})public@interfaceSerializedNameContoh importcom.google.gson.annotations.*;
Bagaimana untuk melaksanakan sempadan renda dalam css3
Sep 16, 2022 pm 07:11 PM
Dalam CSS, anda boleh menggunakan atribut imej sempadan untuk mencapai sempadan renda. Atribut imej sempadan boleh menggunakan imej untuk membuat sempadan, iaitu, menambah imej latar belakang ke sempadan Anda hanya perlu menentukan imej latar belakang sebagai gaya renda; lebar sempadan imej ke dalam. Sama ada permulaan diulang;".
Apa yang perlu dilakukan jika sifat cakera Win11 tidak diketahui
Jul 03, 2023 pm 04:17 PM
Apakah yang perlu saya lakukan jika sifat cakera Win11 tidak diketahui? Baru-baru ini, pengguna Win11 mendapati bahawa sistem menyebabkan ralat cakera semasa menggunakan komputer mereka. Dan bagaimana untuk menyelesaikannya? Ramai rakan tidak tahu bagaimana untuk beroperasi secara terperinci Editor telah menyusun langkah-langkah untuk menyelesaikan ralat cakera Win11 di bawah Jika anda berminat, ikuti editor untuk membaca di bawah. Langkah-langkah untuk menyelesaikan ralat cakera Win11 1. Mula-mula, tekan kombinasi kekunci Win+E pada papan kekunci, atau klik Penjelajah Fail pada bar tugas 2. Dalam bar sisi kanan Penjelajah Fail, cari bahagian tepi dan klik kanan setempat; cakera (C :), dalam item menu yang terbuka, pilih Properties 3. Local disk (C:) Properties window, tukar ke Tools
sintaks atribut bawah dalam CSS
Feb 21, 2024 pm 03:30 PM
Contoh sintaks atribut dan kod bawah dalam CSS Dalam CSS, atribut bawah digunakan untuk menentukan jarak antara elemen dan bahagian bawah bekas. Ia mengawal kedudukan elemen berbanding bahagian bawah elemen induknya. Sintaks atribut bawah adalah seperti berikut: elemen{bottom:value;} dengan elemen mewakili elemen yang gaya akan digunakan dan nilai mewakili nilai bawah yang akan ditetapkan. nilai boleh menjadi nilai panjang tertentu, seperti piksel
Kaedah dan contoh menambah atribut secara dinamik menggunakan fungsi Vue.set
Jul 24, 2023 pm 07:22 PM
Kaedah dan contoh menggunakan fungsi Vue.set untuk menambahkan sifat secara dinamik Dalam Vue, jika kita ingin menambah sifat secara dinamik pada objek sedia ada, kita biasanya menggunakan fungsi Vue.set. Fungsi Vue.set ialah kaedah global yang disediakan oleh Vue.js, yang boleh memastikan kemas kini responsif apabila menambah sifat. Artikel ini akan memperkenalkan penggunaan Vue.set dan memberikan contoh khusus. Pertama sekali, dalam Vue, kami biasanya menggunakan pilihan data untuk mengisytiharkan data responsif.
Pengenalan kepada sifat-sifat Benang Keputusasaan Hearthstone
Mar 20, 2024 pm 10:36 PM
Thread of Despair ialah kad yang jarang ditemui dalam karya agung Blizzard Entertainment "Hearthstone" dan berpeluang untuk diperolehi dalam pek kad "Wizbane's Workshop". Boleh menggunakan 100/400 mata habuk misteri untuk mensintesis versi biasa/emas. Pengenalan kepada sifat-sifat Thread of Despair Hearthstone: Ia boleh diperolehi dalam pek kad bengkel Wizbane dengan peluang, atau ia juga boleh disintesis melalui habuk misteri. Jarang: Jenis Jarang: Kelas Ejaan: Death Knight Mana: 1 Kesan: Memberi semua minion Deathrattle: Menawarkan 1 kerosakan kepada semua minion
