Tạo một CSS layout từ một bản thiết kế

Tạo một CSS layout từ một bản thiết kế - phần 7

07 Bây giờ ta sẽ đi sâu vào phần Style cho nội dung (content). Trong phần này chủ yếu là định hình font chữ, khổ chữ, khoảng cách (padding, margin...)

Trong file Css thành phần body được định nghĩa riêng và thường được đặt trên đầu để trình duyệt có thể tìm và định hình ngay.

  body {
	font-family: Arial, Helvetica, Verdana, Sans-serif;
	font-size: 12px;
	color: #666666;
	background: #ffffff;
  }

Để trình bày nội dung cho đẹp, ta định dạng cho h2 và p sẽ cách dòng chữ bên dưới 1 khoảng 15px

   #content h2 {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
   }

   #content p {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
   }

Để style phần nội dung của cột Sidebar, ta thêm vào cho nó 1 class.

 <div id="sidebar-a">
  <div class="padding">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
   Nullam gravida enim ut  risus. 
   Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. 
   Maecenas in lectus. 
   Donec in sapien in nibh rutrum gravida. Sed ut mauris. 
   Fusce malesuada enim vitae lacus 
   euismod vulputate. Nullam rhoncus mauris ac metus. 
  </div>
 </div>

Để style đọan nội dung của Sidebar ta thêm đọan code sau vào file css

#sidebar-a {
	float: right;
	width: 280px;
        line-height: 18px;
}

#sidebar-a .padding {
	padding: 25px;
}

#content {
	margin-right: 280px;
        line-height: 18px;
}

#content .padding {
	padding: 25px;
}

Bây giờ ta sẽ tạo 2 tiêu đề là About và Contact. Ta có thể làm trên Photoshop rồi save thành ảnh. (Sở dĩ ta phải làm vậy vì muốn sử dụng đặc tính smooth trong PS để tiêu đề không bị răng cưa.) Sử dụng cách này cũng khá thuận lợi, nó giúp bạn chủ động hơn trong việc sử dụng font chữ. Nhưng nếu là website bạn làm cho khách hàng thì nên giải thích và hướng dẫn chi tiết để họ có thể tự thay đổi những ảnh này. Bây giờ ta sẽ thêm vào trong file html một đọan code để nó có thể load hình ảnh. Lưu ý, tất cả ảnh sẽ được lưu trong thư mục images trong thư mục chưa toàn bộ các file.

<h2><img src="/images/headings/about.gif" 
width="54" height="14" alt="About" /></h2>

<h2><img src="/images/headings/contact.gif" 
width="98" height="14" alt="Contact Us" /></h2>

Nào bây giờ ta hãy xem sản phẩm của chúng ta như thế nào rồi. Phần tới chúng ta sẽ bắt đầu làm phần Header. Đây là phần quan trọng đóng vai trò quan trọng trong website, nó quyết định phong cách, nội dung cũng như tạo ấn tượng ban đầu cho người xem.