header-object

Định dạng đoạn văn

1. Vấn đề

Trong quá trình thực hiện một website thì điều mà bạn luôn luôn gặp phải đó là định dạng cho những đoạn văn. Những đoạn văn được định dạng như thế nào để người tiêu dùng dễ đọc không gây cảm giác nhàm chán, không quá dài để người dùng mỏi mắt. Hôm nay tôi sẽ hướng dẫn các bạn trình bày văn bản

2. Định dạng văn bản

  • Để định dạng văn bản thông thường dùng tag html tên là <p></p> tag này chịu trách nhiệm cho đoạn văn đã được quy định trong html. Bây giờ bạn sẽ tạo một file css tên là paragraph.css và lưu vào folder tên là “css”và includes vào file formatparagraph.html bằng cú pháp
<linkhref="/css/paragraph.css"rel="stylesheet"type="text/css"/>
  • Tìm các đoạn văn bản và đưa vào tag <p></p> như nội dung bên dưới

<p>
Đầm ngắn luôn là mốt để quý cô lựa chọn để điểm trang cho mình them một phần của vẻ đẹp vốn có mà tạo hóa đã ban tặng.
Không chỉ là những kiểu dáng đơn thuần mang phong cách quý phái mà còn phải tạo cho nên them nét độc đáo và quyến rũ. Nét đẹp ấy được các nhà tạo mẫu đã nắn nót từng chút một để cho ra đời kiểu dáng của bộ sưu tập đầy sự pha trộn lẫn tiết tấu
</p>
<p>
Sự kết hợp của màu sắc đỏ tươi gây chú ý đến người nhìn mà còn mang một sức hút của sự sang trọng được thể hiện qua tong màu đen. Hòa lẫn vào đó là thể hiện của màu trắng hồn nhiên và màu xám sang trọng nhẹ nhàng và uyển chuyển.
</p>
<p>
Nét nổi bật của chiếc đầm ngắn là tay dài và cổ hình chữ “U”, một bên vai trần trông điệu đà đầy sức hút. Hai vai trần là điểm nhấn của chiếc đầm ngắn ngang phần than đùi sẽ kết hợp cùng các phụ kiện sẽ tạo nên ấn tượng cho bộ sưu tập
</p>

  • Sau đó, bạn tiến hành cài đặt mã lệnh cho đoạn văn như sau
p 
  {
  font-size:12px;
  font-family:Verdana;
  width:  50%;
  line-height:170%;
  }

Giải thích: định dạng những đoạn văn bản trên với font chính là Verdana, chiều rộng là 50% so với màn hình, khoảng cách giữa các dòng là 170%. Kết quả đạt
được:

dinh-dang-doan-van-1

  • Nếu bạn muốn định dạng ký tự đầu tiên rớt xuống như word drop trong Microsoft word thì chúng ta vẫn có thể làm được. Bạn hãy quan sát mã lệnh bên dưới
p:first-letter 
  {
  float:  left;
  color:  #903;
  font-size:  75px;
  line-height:  60px;
  padding-top:  4px;
  padding-right:  8px;
  padding-left:  3px;
  font-family:  Georgia;
  }

Giải thích: first-letter là thuộc tính dùng để định dạng cho ký tự đầu tiên trong văn bản và ở đây chúng ta cho ký tự này được định dạng có màu sắc là #903, font-size lớn là 75px; và các khoảng cách padding của nó là top: 4px, right: 8px, left: 3px. Và kết quả chúng ta có được là

dinh-dang-doan-van-2

GV Hồ Đức Duy

Thêm ý kiến


Security code
Làm mới


2

Facebook

Thống kê truy cập

Hiện có 757 khách đang truy cập
2491918