Định dạng văn bản trong CSS (Phần 1)

Thiết kế Blog giá rẻ  Định dạng
Trong thiết kế web, việc trình bày và định dạng nội dung rất quan trọng, bên cạnh nội dung tốt thì nội dung còn phải được được trình bày rõ ràng, mạch lạc. Bài viết này chúng ta sẽ cùng tìm hiểu một số thuộc tính định dạng văn bản trong CSS.

1. Định dạng màu chữ (Text color)

Thuộc tính color sẽ định dạng màu chữ cho một thành phần nào đó trên trang web. Giá trị của thuộc tính color là các giá trị màu mà CSS hỗ trợ (tên màu trong tiếng Anh, hệ RGB và hệ Hex).

Mặc định, khi không được khai báo thì CSS trình duyệt sẽ quy định màu chữ của toàn bộ trang là màu đen.

Giả sử bây giờ chúng ta muốn màu chữ toàn bộ trang là màu đen, các liên kết có màu vàng cam, các thành phần h1 có màu xanh, thì ta sẽ viết CSS như sau:

body{ color: #000}
a{ color: #f98000 }
h1{ color: blue }

2. Thuộc tính text-align

Thuộc tính text-align giúp chúng ta canh chỉnh văn bản cho các thành phần trong trang web. Thuộc tính này có 4 giá trị:

  • left: canh trái
  • right: canh phải
  • center: canh giữa
  • justify: canh đều

3. Thuộc tính text-decoration

Thuộc tính text-decoration được sử dụng để thêm vào các hiệu ứng gạch chân (underline), gạch xiên (line-through), gạch đầu (overline), và hiệu ứng nhấp nháy (blink).

  • Đoạn văn bản hiển thị với thuộc tính text-decoration:none
  • Đoạn văn bản hiển thị với giá trị underline
  • Đoạn văn bản hiển thị với giá trị blink
  • Đoạn văn bản hiển thị với giá trị overline
  • Đoạn văn bản hiển thị với giá trị line-through

Thuộc tính text-decoration được sử dụng nhiều nhất để loại bỏ hiệu ứng gạch chân trong các liên kết. Đoạn mã sau sẽ loại bỏ hiệu ứng gạch chân của tất cả các liên kết:

a{ text-decoration: none }

4.Thuộc tính text-transform

Thuộc tính text-transform quy định chế độ in hoa hoặc in thường của đoạn văn bản mà không phụ thuộc vào đoạn văn bản gốc trong HTML.

Các giá trị của thuộc tính text-transform bao gồm:

  • uppercase: hiển thị với kiểu chữ in Hoa
  • lowercase: hiển thị với kiểu chữ in thường
  • capitalize: In hoa các ký tự đầu tiên trong mỗi từ
  • none: không áp dụng (Giá trị mặc định)
Thuộc tính text-transform
Ví dụ sau quy định tất cả các thành phần h1 được hiển thị với kiểu chữ in Hoa.

h2{ text-transform: uppercase }

5. Thuộc tính text-indent

Khi thuộc tính text-indent được khai báo, dòng đầu tiên của một đoạn văn bản sẽ được thụt đầu dòng một khoảng. Giá trị của thuộc tính text-indent là các đơn vị đo cơ bản (cm, px, em...).

Đoạn mã sau sẽ quy định dòng đầu tiên của tất cả các thành phần p sẽ được thụt đầu dòng một khoảng 30px

p{ text-indent: 30px }
# Khi gán cho thuộc tính text-indent một giá trị âm thật lớn cho một thành phần nào đó, thì văn bản của thành phần đó sẽ không được hiện thị. Trường hợp này thường được áp dụng để quy định thuộc tính hiển thị của đoạn văn bản so với ảnh nền (chỉ có nền được hiển thị).

Ví dụ:

p.logo{ text-indent: -999999px }
Thuộc tính text-index

6. Thuộc tính letter-spacing

Thuộc tính letter-spacing sẽ quy định khoảng cách giữa các từ trong một đoạn văn bản

Đoạn mã sau quy định các từ trong thành phần h2 có khoảng cách là 7px

h2{ letter-spacing: 7px }
Ở bài sau, chúng ta sẽ tìm hiểu các thuộc tính định dạng văn bản với nhóm thuộc tính font.

Nguồn bài viết: Ewebvn
 

Nguồn : chúng tôi sưu tầm từ nhiều nguồn

Không có nhận xét nào

Một số lưu ý khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Để bình luận một đoạn code, hãy mã hóa code trước nhé!

» Cảm ơn bạn đã ghé thăm websitemika.com
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một góp ý !
» Vui lòng đăng những góp ý lịch sự và gõ tiếng Việt có dấu nếu có thể
HƯỚNG DẪN ĐĂNG THÔNG TIN GÓP Ý :
Bước 1 – Gõ nội dung bạn cần góp ý tới chúng tôi.
Bước 2 - Xử lý mục " Nhận xét với tư cách "
Cách 1 : - Chọn Tên/URL: Gõ tên và địa chỉ blog bạn vào.Nếu không có tài khoản, bạn vẫn có thể nhận xét bằng cách Chọn hồ sơ là Tên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống để cho chúng tôi biết bạn là ai. Bạn vui lòng gõ tiếng Việt có dấu để mọi người không hiểu nhầm so thành sờ, mo thành mò.
Cách 2 : - Chọn Ẩn danh.
Bước 3 - Xem trước: Tuỳ, Bạn là người cẩn thận cần xem lại nội dung Bạn đã gõ (rất cần nếu Bạn có nhập mã, để xem nó hiển thị có đúng không).
Bước 4 - Nên nháy chuột vào nội dung, bấm phím Ctrol + A rồi Ctrol + C nhằm copy nội dung - Đề phòng lỡ hệ thống đăng góp ý trục trặt hoặc mạng rớt, ta có thể Ctrol + V dán đăng lại góp ý để khỏi tốn thời gian!
Bước 5 – Lick vào Button : Đăng nhận xét . Vậy là xong,góp ý của các bạn sẽ được Admin kiểm duyệt và cho đăng trong vòng 12h.Cảm ơn các bạn đã góp ý !

GIỚI THIỆU ĐẾN QUÝ KHÁCH MỘT SỐ DỰ ÁN SẼ THỰC HIỆN TRONG NĂM 2018


DANH MỤC BÀI ĐĂNG - KHÁCH MUỐN XEM NỘI DUNG GÌ LICK VÀO TIÊU ĐỀ ẤY


WEBSITEMIKA - THƯƠNG HIỆU UY TÍN BỞI HƠN 300 DOANH NGHIỆP VÀ CÁC THƯƠNG HIỆU VỪA VÀ NHỎ LỰA CHỌN
Điểm giao dịch: Online 24h
-Email: Setup247@gmail.com - Website: https://thietkeweb.mikalaza.com