Định dạng Blockquote trong CSS3

Người đăng: VNTAOBAO.COM on Thứ Ba, 26 tháng 3, 2013

Đị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

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="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%2Fcss%2Fblockquote.css%22rel%3D%22stylesheet%22type%3D%22text%2Fcss"/>
</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à

Hồ Đức Duy


Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài

Thiet ke web hai phong

{ 0 nhận xét... read them below or add one }

Đăng nhận xét

Ads 468x60px

Social Icons

Featured Posts