Assalamu alaikum Wr Wb.
Dalam pertemuan kali ini, saya akan memaparkan mengenai Format Teks Pada CSS.
Warna Teks
Tag properti color digunakan untuk mengatur warna teks.
Dengan CSS, warna yang paling sering ditentukan oleh:
- nama warna - seperti "merah"
- nilai HEX - seperti "#ff0000"
- nilai RGB - seperti "rgb (255,0,0)"
Warna teks bawaan untuk halaman didefinisikan dalam pemilih tubuh.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
body{
color: blue;
}
h1{
color: green;
}
</style>
</head>
<body>
<h1>Ini adalah Heading 1</h1>
<p>Ini adalah Sebuah Paragraf.</p>
</body>
</html>
Hasil:
Teks Align
Tag text-align digunakan untuk mengatur alignment horizontal teks.
Sebuah teks dapat kiri atau kanan sejajar, berpusat, atau dibenarkan.
Contoh berikut menunjukkan pusat sejajar, dan kiri dan kanan teks selaras (perataan kiri adalah bawaan jika arah teks kiri ke kanan, dan keselarasan yang tepat adalah bawaan jika arah teks kanan ke kiri.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-align: center;
}
h2{
text-align: left;
}
h3{
text-align: right;
}
</style>
</head>
<body>
<h1>Heading 1 (rata tengah)</h1>
<h2>Heading 2 (rata kiri)</h2>
<h3>Heading 3 (rata kanan)</h3>
<p>Ketiga Heading Di Atas posisinya rata tengah, rata kiri, dan rata kanan.</p>
</body>
</html>
Hasil:
Ketika text-align diatur ke justify, setiap baris meregang sehingga setiap baris memiliki lebar yang sama, dan kiri dan kanan margin lurus (seperti di majalah dan koran).
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 10px;
width: 200px;
height: 200px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Contoh text-align: justify;</h1>
<p>Tag text-align: justify; nilai membentang garis sehingga setiap baris memiliki lebar yang sama (seperti di koran dan majala.</p>
<div>
Dalam tahun lebih muda dan lebih rentan ayah saya memberi saya beberapa saran bahwa saya telah membalik dalam pikiran saya sejak.
</div>
</body>
</html>
Hasil:
Teks Dekorasi
Tag text-decoration digunakan untuk mengatur atau menghapus dekorasi dari teks.
Nilai text-decoration: none; sering digunakan untuk menghilangkan garis bawah dari link.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
<p>Sebuah link tanpa garis bawah: <a href="http://www.allifsulthonia.blogspot.com">allifsulthonia.blogspot.com</a></p>
</body>
</html>
Hasil:
Yang lain text-decoration nilai-nilai yang digunakan untuk menghias teks.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<h3>Ini adalah heading 3</h3>
</body>
</html>
Hasil:
Transformasi Teks
Tag text-transformation ini digunakan untuk menentukan huruf besar dan huruf kecil dalam teks.
Hal ini dapat digunakan untuk mengubah segalanya menjadi huruf besar atau kecil, atau memanfaatkan huruf pertama dari setiap kata.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="uppercase">Ini adalah beberapa teks.</p>
<p class="lowercase">Ini adalah beberapa teks.</p>
<p class="capitalize">Ini adalah beberapa teks.</p>
</body>
</html>
Hasil:
Teks Indentasi
Tag text-indent digunakan untuk menentukan indentasi dari baris pertama dari teks.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-indent: 50px;
}
</style>
</head>
<body>
<p>Dalam tahun lebih muda dan lebih rentan ayah saya memberi saya beberapa saran bahwa saya telah membalik dalam pikiran saya sejak. 'Setiap kali Anda merasa seperti mengkritik siapa pun, "katanya kepada saya,' hanya ingat bahwa semua orang di dunia ini tidak memiliki kelebihan yang Anda miliki."</p>
</body>
</html>
Hasil:
Letter Spacing
Tag letter-spacing digunakan untuk menentukan ruang antara karakter dalam teks.
Contoh berikut menunjukkan bagaimana untuk menambah atau mengurangi ruang antara karakter.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
</style>
</head>
<body>
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
</body>
</html>
Hasil:
Tinggi Baris
Tag line-height digunakan untuk menentukan ruang antara garis.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
p.small {
line-height: 0.7;
}
p.big {
line-height: 1.8;
}
</style>
</head>
<body>
<p>
Ini adalah sebuah paragraf dengan standar garis-tinggi.<br>
Garis standar tinggi dalam kebanyakan browser adalah sekitar 110% sampai 120%.<br>
</p>
<p class="small">
Ini adalah sebuah paragraf dengan yang lebih kecil garis-tinggi.<br>
Ini adalah sebuah paragraf dengan yang lebih kecilgaris-tinggi.<br>
</p>
<p class="big">
Ini adalah sebuah paragraf dengan yang lebih besar garis-tinggi.<br>
Ini adalah sebuah paragraf dengan yang lebih besar garis-tinggi.<br>
</p>
</body>
</html>
Hasil:
Arah Teks
Tag text-decoration digunakan untuk mengubah arah eks dari unsur.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
direction: rtl;
}
</style>
</head>
<body>
<div>Ini adalah bawaan arah teks.</div>
<div class="ex1">Ini adalah arah teks kiri ke kanan .</div>
</body>
</html>
Hasil:
Kata Spasi
Tag word-spacing digunakan untuk menentukan ruang antara kata-kata dalam sebuah teks.
Contoh berikut menunjukkan bagaimana untuk menambah atau mengurangi ruang antara kata-kata.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
</style>
</head>
<body>
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
</body>
</html>
Hasil:
Bayangan Teks.
Tag text-shadow menambahkan bayangan untuk teks.
Contoh berikut menetapkan posisi bayangan horizontal (3px), posisi bayangan vertikal (2px) dan warna bayangan (merah).
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 3px 2px red;
}
</style>
</head>
<body>
<h1>Efek Bayangan Teks</h1>
<p><b>Catatan:</b> Internet Explorer 9 dan versi sebelumnya tidak mendukung properti bayangan teks.</p>
</body>
</html>
Hasil:
REFERENSI
No comments:
Post a Comment