header-object

Định dạng Blockquote trong CSS3

1. Vấn đề

Bạn đã biết tác dụng của tag blockquote trong html chưa? Đây là một trong những tag html quan trọng giúp bạn định dạng văn bản chuyên nghiệp hơn trong hệ thống website của mình và đặc biệt giúp site của bạn thể hiện rõ những nội dung quan trọng mà bạn không cần mất nhiều thời gian để format trong file css.

2. Phương thức load fonts

Để làm được điều bày bạn phải hiểu về tag blockquote html. Nó là một dạng tag cho phép định dạng theo một khối văn bản, thể hiện những nội dung quan trọng trong nhiều đoạn văn bản mà bạn muốn thể hiện nó nổi bật nhất. Những khối này bạn thường bắt gặp trong các catalogs hoặc các tạp chí thời trang. Ví dụ như mẫu bên dưới

blockquote-1

Bây giờ ta bắt đầu thực hiện cách format văn bản bằng cách sử dụng blockquote. Bạn tạo một file css tên là blockquote.css đặt trong folder “css”, tạo một file blockquote.html đặt cùng cấp với folder “css” và tiến hành cài đặt mã lệnh

blockquote
{
float: left;
width: 200px;
margin: 00.7em00;
padding: 0.7em;
color: #e0e1e1;
background-color: black;
font-family: Georgia,Times,"Times New Roman",serif;
font-size: 1.5em;	
font-style: italic;
border-top: 1emsolid#999;
border-bottom: 1emsolid#999;
}
blockquotep
{
margin: 0;
text-align: left;
font-family: Verdana;
font-size: 13px;
line-height: 170%;
width: 60%;
}
div
{
font-family: Verdana;
font-size: 13px;
line-height: 170%;
width: 60%;  
}

Ở đây bạn sẽ cài đặt mã lệnh gồm các elemet của html blockquote và div

  • Tiếp theo tại source html bạn includes file blockquote.css vào bằng mã lệnh
<head> 
  <title></title> 
  <linkhref="/css/blockquote.css"rel="stylesheet"type="text/css"/> 
</head>
  • Và bạn dùng đoạn văn bản như bên dưới để đặt trong tag blockquote và tag DIV
<body> 
  <blockquote> 
  	<p> 
  		TÔ ĐIỂM CHO NÀNG DỄ THƯƠNG
  	</p> 
  </blockquote> 
  <div>
Trong không khí của mùa Thu êm nhẹ, bất  chợt làn gió nhẹ lùa làn qua khe lá để bất ngờ chiếc
lá vàng nhẹ rơi. Trong không  khí lãng mạng đó một hình tượng mang vóc dáng yêu kiều trong
không khí tỏa ngàn  hương ngào ngạt.
<br/><br/>
Lá vàng rơi theo từng nhịp bước thong thả trong dáng đầm thướt tha  và đầy chất trữ tình.
Dáng đầm chính là đây,phong cách mang đến cho nàng nét đẹp  quyến rũ. Màu sắc trang nhã thanh
lịch để nàng không chỉ đẹp về ngoại dáng mà còn đi  sâu vào tâm hồn của từng đường nét hòa
quyện vào mùa thu chất liệu vải đóng một phần  của sự quan trọng để tạo nên một nét đẹp mềm mại
hơn, từng đường nét hoa văn gợn nhẹ theo tà áo. 
<br/><br/> 
Lướt thướt mảnh mai và trang hoàng theo nhịp bước, khoảnh khắc của  mùa thật nhẹ nhàng lãng
mạng Nhà thiết kế cũng rất khéo léo để vẻ lên những đường  cong của nàng đó chính là điều ấn
tượng của bộ sưu tập. Hãy cũng nàng tận hưởng  một mùa thu hoa cùng nhịp sống, nhịp sống của
thời trang bạn nhé!
  </div> 
</body>
  • Kết quả nhận được từ việc định dạng trên là

blockquote-2

Hồ Đức Duy

Thêm ý kiến


Security code
Làm mới


2

Facebook

Thống kê truy cập

Hiện có 761 khách đang truy cập
2491922