Học html cơ bản online, bài 12: cách dàn trang bằng CSS

Học html cơ bản online, bài 12: cách dàn trang bằng CSS, hướng dẩn cách dàn trang bằng css đơn giản nhất, tài liệu học lập trình cho người mới bắt đầu hay nhất…

Bài 12: Dàn trang – Layout (CSS)

Chắc chắn khi nói đến thiết kế website, là phải nói đến công đoạn dàn trang (layout), dàn trang là cách bạn sắp xếp, bố trí các phần tử của web như hình ảnh, chữ, tiêu đề … theo ý tưởng của mình.

Tôi phải thực hiện như thế nào?

Để thực hiện công việc web layout bạn có thể sử dụng Cascading Style Sheets (CSS). Trong bài học này, bạn sẽ được giới thiệu khái quát về CSS. Tuy nhiên bạn có thể học CSS từ cơ bản ở một phần hướng dẫn khác cũng tại website của chúng tôi. Vì vậy hãy xem đây là một lời giới thiệu ngắn gọn để bạn làm quen với CSS.

CSS là một người bạn song hành cùng với HTML. Trong việc viết code bạn có thể xem như: HTML chịu trách nhiệm phần xây dựng cơ bản (cấu trúc khung sườn), trong khi đó CSS sẽ phụ trách phần trang trí (layout).

Như bạn đã được hướng dẫn trong bài số 7, CSS có thể được thêm các thuộc tính. Ví dụ: bạn có thể xác định kích cỡ chữ và loại font

Ví dụ 1:

  1. <p style=font-size:20px;>This is typed in size 20px</p>
  2.  
  3. <p style=font-family:courier;>This is typed in Courier</p>
  4.  
  5. <p style=font-size:20px; font-family:courier;>This is typed in Courier size 20px</p>

Thực tế trên trình duyệt như sau:

This is typed in size 20px

This is typed in Courier

This is typed in Courier size 20px

Trong ví dụ trên, chúng tôi sử dụng thuộc tính  style để xác định loại font chữ được sử dụng ( font-family) và kích cỡ font chữ  (font-size). Chú ý, ở đoạn văn thứ 3, chúng tôi sử dụng dấu ; để phân biệt 2 thuộc tính : loại font chữ ( font-family) và kích cỡ font chữ (font-size).

Xem thêm: Cho thuê hosting việt nam giá rẻ

Vậy phải mất rất nhiều thời gian?

Một trong những chức năng thông minh của CSS là quản lý layout của bạn từ theo phương pháp trung tâm. Thay vì sử dụng thuộc tính style ở mỗi thẻ, bạn có thể khai báo layout cả trang Web cho trình duyệt:

Ví dụ 2:

  1. <html>
  2.  
  3. <head>
  4.  
  5.  
  6. <style type=“text/css”>
  7. h1 {font-size: 30px; font-family: arial;}
  8. h2 {font-size: 15px; font-family: courier;}
  9. p {font-size: 8px; font-family: “times new roman”;}
  10. </style>
  11. </head>
  12.  
  13. <body>
  14.  
  15. <h1>My first CSS page</h1>
  16. <h2>Welcome to my first CSS page</h2>
  17. <p>Here you can see how CSS works </p>
  18.  
  19. </body>
  20.  
  21. </html>

Ở ví dụ trên, CSS được chèn vào phần head và áp dụng cho toàn trang Web. Để thực hiện điều đó bạn chỉ cần sử dụng thẻ <style type="text/css"> để khai báo với trình duyệt bạn đang viết code CSS.

Ở ví dụ trên, các tiêu đề của trang sẽ dử dụng đồng nhất font chữ Arial với kích cỡ 30px, còn phụ đề sẽ áp dụng  font chữ Courier, kích cỡ 15px và toàn bộ các đoạn chữ sẽ sử dụng loại font Times New Roman, kích cỡ 8px.

Một lựa chọn khác để sử dụng CSS với HTML là sử dụng tập tin rời bên ngoài. Với cách sử dụng tập tin rời, bạn có thể kiểm soát layout của hàng loạt trang Web cùng một lúc. Đây là một lựa chọn thông minh nếu bạn muốn thay đổi font chữ hoặc kích thước của một website lớn có hàng ngàn trang. Chúng ta sẽ học điều đó ở các bài học cơ bản CSS.

CSS còn có những chức năng gì?

CSS còn có có nhiều chức năng ngoài việc định dạng loại font và kích cỡ chữ. Ví dụ bạn có thể thêm màu sắc và nền. Đây là một vài ví dụ khác:

  1. <body style=background-image: url(‘http://thietke.website/tkws_logo.png’);>
  2.  
  3. <h1 style=background-color: blue;>Heading on blue background</h1>
  4.  
  5. <p style=color:green;>Green text</p>
  6. </body>

Hãy thực hành những gì bạn vừa học bằng cách thêm CSS vào thẻ HTML hoặc tạo CSS trong phần head của HTML.

Ngoài font chữ, kích cỡ chữ, màu sắc và nền, CSS còn có những gì?

Ngoài những gì bạn đã biết ở trên, CSS còn có thể được sử dụng để kiểm soát, thiết lập và trình bày trang HTML (như lề – margins, phần tử trôi nổi – float, so hàng – alignment, chiều rộng – width, chiều cao – height ).
Xác định các phần tử khác nhau bằng CSS bạn có thể bố trí các trang Web của bạn một cách trang nhã và chính xác.

Ví dụ 3:

  1. <p style=padding:25px;border:1px solid red;>I love CSS</p>

Bạn sẽ nhìn thấy như bên dưới nếu xem ở trình duyệt:

I love CSS

Với thuộc tính float có thể trôi nổi dạt qua trái hoặc phải. Ví dụ sau sẽ cho bạn hình dung như thế nào:

Ví dụ 4:

  1. <img style=float: left; src=“http://thietke.website/tkws_logo.png” alt=“TKWS logo” />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat…

Xem trên trình duyệt:

TKWS logoLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat…

Ở ví dụ trên bạn nhận thấy đoạn chữ đã chừa ra một khoảng trống bên trái để cho vị trí của hình ảnh.

Với thuộc tính position, bạn có thể đặt một phần tử ở bất cứ nơi nào mình muốn trên trang một cách chính xác:

Ví dụ 6:

  1. <img src=“http://thietke.website/tkws_logo.png” alt=“TKWS logo” style=position:absolute;bottom:50px;right:10px; />

Ví dụ trên, hình ảnh được đặt ở ví trí cách đáy màn hình 50 pixels, và cách lề phải 10 pixels, dĩ nhiên bạn có thể đặt ở bất cứ vị trí nào mình muốn.

Thật tuyệt, nhưng thực hiện có dễ dàng không?

Bạn không thể học CSS trong 10 phút. Và như chúng tôi đã nói ở trên, đây chỉ là bài giới thiệu khái quát, nếu bạn muốn học CSS, bạn có thể xem bài hướng dẫn học CSS cơ bản sau này.

Bài tiếp theo: Đưa website lên internet