Văn bản W3.CSS
Căn chỉnh văn bản
Các lớp w3-left-align và w3-right-align được sử dụng để căn chỉnh văn bản.
Căn trái văn bản.
Văn bản được căn phải.
Thí dụ
<div class="w3-container w3-border w3-large">
<div
class="w3-left-align"><p>Left aligned text.</p></div>
<div
class="w3-right-align"><p>Right aligned text.</p></div>
</div>
Các yếu tố căn giữa
Lớp w3-center được sử dụng để căn giữa các phần tử:
Nội dung tập trung
Một số văn bản được căn giữa.
Thí dụ
<div class="w3-container w3-center">
<h2>Centered Content</h2>
<img src="img_car.jpg" alt="car" style="width:80%;max-width:320px">
<p>Some centered text.</p>
</div>
Văn bản rộng
Lớp rộng w3 chỉ định một văn bản rộng hơn:
Văn bản này là bình thường.
Văn bản này rộng hơn.
Thí dụ
<p class="w3-wide">The w3-wide class specifies a wider text.</p>
Độ mờ văn bản
Lớp w3-opacity được thiết kế để hoạt động với tất cả các màu:
Độ mờ văn bản
Độ mờ văn bản
Độ mờ văn bản
Độ mờ văn bản
Thí dụ
<div class="w3-panel w3-pink">
<h2 class="w3-opacity">Text Opacity</h2>
</div>
Bóng văn bản
Thuộc tính text-shadow của CSS3 có thể được sử dụng để thêm hiệu ứng đổ bóng hoặc làm mờ vào văn bản:
Bóng văn bản
Bóng văn bản
Bóng văn bản
Bóng văn bản
Thí dụ
<h2
class="w3-blue" style="text-shadow:1px 1px 0 #444">Text Shadow</h2>
Hiệu ứng đặc biệt
Độ mờ văn bản + In đậm
Chữ Vàng + Bóng + Đậm
Văn bản màu cam + Bóng + Đậm
Thí dụ
<div class="w3-panel w3-pink">
<h1 class="w3-opacity">
<b>Text Opacity + Bold</b></h1>
</div>
<div class="w3-panel w3-amber">
<h1 class="w3-text-yellow"
style="text-shadow:1px 1px 0 #444">
<b>Yellow Text + Shadow + Bold</b></h1>
</div>
<div class="w3-panel w3-blue">
<h1 class="w3-text-orange"
style="text-shadow:1px 1px 0 #444">
<b>Orange Text + Shadow + Bold</b></h1>
</div>
Text Shadow không hoạt động trong IE 9 trở về trước.