Gốc > Những vấn đề về CNTT > Web > CSS >
Đỗ Thanh Dương @ 16:23 19/03/2011
Số lượt xem: 321
Bài 5: Text
Định dạng và thêm vào các kiểu định dạng đặc biệt cho phần nội dung một trang
web là một vấn đề quan trọng cho bất cứ nhà thiết kế web nào. Như đã nói, ở bài
học này chúng ta sẽ được tìm hiểu về các thuộc tính CSS về định dạng văn bản.
5.1. Màu chữ (thuộc tính color):
Để định màu chữ cho một thành phần nào đó trên trang web chúng ta sử
dụng thuộc tính color. Giá trị của thuộc tính này là các giá trị màu CSS hỗ trợ.
Ví dụ sau chúng ta sẽ viết CSS để định màu chữ chung cho một trang web là đen,
cho tiêu đề h1 màu xanh da trời, cho tiêu đề h2 màu xanh lá chúng ta sẽ làm như
5.2. Thuộc tính text-indent :
Thuộc tính text-indent cung cấp khả năng tạo ra khoảng thụt đầu dòng cho dòng
đầu tiên trong đoạn văn bản. Giá trị thuộc tính này là các đơn vị đo cơ bản dùng
trong CSS.
Trong ví dụ sau chúng ta sẽ định dạng thụt đầu dòng một khoảng 30px cho dòng
văn bản đầu tiên trong mỗi đoạn văn bản đối với các thành phần <p>
5.3. Thuộc tính text-align :
Thuộc tính text-align giúp bạn thêm các canh chỉnh văn bản cho các thành phần
trong trang web.
Cũng tương tự như các lựa chọn canh chỉnh văn bản trong các trình soạn thảo văn
bản thông dụng như MS Word, thuộc tính này có tất cả 4 giá trị : left (canh trái –
mặc định), right (canh phải), center (canh giữa) và justify (canh đều).
Trong ví dụ sau chúng ta sẽ thực hiện canh phải các thành phần h1, h2 và canh đều
đối với thành phần <p>
5.4. Thuộc tính letter-spacing:
Thuộc tính letter-spacing được dùng để định khoảng cách giữa các ký tự trong một
đoạn văn bản.
Muốn định khoảng cách giữa các ký tự trong thành phần h1, h2 là 7px và thành
phần <p> là 5px chúng ta sẽ viết CSS sau:
5.5. Thuộc tính text-decoration:
Thuộc tính text-decoration giúp bạn thêm các hiệu ứng gạch chân (underline), gạch
xiên (line-through), gạch đầu (overline), và một hiệu ứng đặc biệt là văn bản nhấp
nháy (blink).
Ví dụ sau chúng ta sẽ định dạng gạch chân cho thành phần h1, gạch đầu thành
phần h2
5.6. Thuộc tính text-transform:
Text-transform là thuộc tính qui định chế độ in hoa hay in thường của văn bản mà
không phụ thuộc vào văn bản gốc trên HTML.
Thuộc tính này có tất cả 4 giá trị: uppercase (in hoa), lowercase (in thường),
capitalize (in hoa ở ký tự đầu tiên trong mỗi từ) và none (không áp dụng hiệu ứng –
mặc định).
Trong ví dụ dưới đây chúng ta sẽ định dạng cho thành phần h1 là in hoa, h2 là in
hoa đầu mỗi ký tự.
web là một vấn đề quan trọng cho bất cứ nhà thiết kế web nào. Như đã nói, ở bài
học này chúng ta sẽ được tìm hiểu về các thuộc tính CSS về định dạng văn bản.
5.1. Màu chữ (thuộc tính color):
Để định màu chữ cho một thành phần nào đó trên trang web chúng ta sử
dụng thuộc tính color. Giá trị của thuộc tính này là các giá trị màu CSS hỗ trợ.
Ví dụ sau chúng ta sẽ viết CSS để định màu chữ chung cho một trang web là đen,
cho tiêu đề h1 màu xanh da trời, cho tiêu đề h2 màu xanh lá chúng ta sẽ làm như
HTML Code:
body {
color:#000
}
h1 {
color:#0000FF
}
h2 {
color:#00FF00
}
5.2. Thuộc tính text-indent :
Thuộc tính text-indent cung cấp khả năng tạo ra khoảng thụt đầu dòng cho dòng
đầu tiên trong đoạn văn bản. Giá trị thuộc tính này là các đơn vị đo cơ bản dùng
trong CSS.
Trong ví dụ sau chúng ta sẽ định dạng thụt đầu dòng một khoảng 30px cho dòng
văn bản đầu tiên trong mỗi đoạn văn bản đối với các thành phần <p>
HTML Code:
p {
text-indent:30px
}
Thuộc tính text-align giúp bạn thêm các canh chỉnh văn bản cho các thành phần
trong trang web.
Cũng tương tự như các lựa chọn canh chỉnh văn bản trong các trình soạn thảo văn
bản thông dụng như MS Word, thuộc tính này có tất cả 4 giá trị : left (canh trái –
mặc định), right (canh phải), center (canh giữa) và justify (canh đều).
Trong ví dụ sau chúng ta sẽ thực hiện canh phải các thành phần h1, h2 và canh đều
đối với thành phần <p>
HTML Code:
h1, h2 {
text-align:right
}
p {
text-align:justify
}
Thuộc tính letter-spacing được dùng để định khoảng cách giữa các ký tự trong một
đoạn văn bản.
Muốn định khoảng cách giữa các ký tự trong thành phần h1, h2 là 7px và thành
phần <p> là 5px chúng ta sẽ viết CSS sau:
HTML Code:
h1, h2 {
letter-spacing:7px
}
p { letter-spacing:5px }
Thuộc tính text-decoration giúp bạn thêm các hiệu ứng gạch chân (underline), gạch
xiên (line-through), gạch đầu (overline), và một hiệu ứng đặc biệt là văn bản nhấp
nháy (blink).
Ví dụ sau chúng ta sẽ định dạng gạch chân cho thành phần h1, gạch đầu thành
phần h2
HTML Code:
h1 {
text-decoration:underline
}
h2 {
text-decoration:overline
}
Text-transform là thuộc tính qui định chế độ in hoa hay in thường của văn bản mà
không phụ thuộc vào văn bản gốc trên HTML.
Thuộc tính này có tất cả 4 giá trị: uppercase (in hoa), lowercase (in thường),
capitalize (in hoa ở ký tự đầu tiên trong mỗi từ) và none (không áp dụng hiệu ứng –
mặc định).
Trong ví dụ dưới đây chúng ta sẽ định dạng cho thành phần h1 là in hoa, h2 là in
hoa đầu mỗi ký tự.
HTML Code:
h1 {
text-transform:uppercase
}
h2 {
text-transform:capitalize
}
Đỗ Thanh Dương @ 16:23 19/03/2011
Số lượt xem: 321
Số lượt thích:
0 người
- Bài 4: Font Chữ (19/03/11)
- Bài 3: Background (19/03/11)
- Bài 2: Một Số Quy Ước Về Cách Viết CSS (19/03/11)
- Bài 1: Giới Thiệu CSS (19/03/11)
Ý kiến trao đổi