VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

CSS Tuts

CSS là gì? Cú pháp CSS Bộ chọn CSS Liên kết css với html Đơn vị đo trong CSS Mã màu trong CSS Comment trong CSS

CSS Các thuộc tính

CSS Background CSS Border Font trong CSS Định dạng văn bản (Text) trong CSS Image trong CSS Link trong CSS Bảng trong CSS Căn lề trong CSS List trong CSS Thuộc tính padding trong CSS Con trỏ trong CSS Thuộc tính outline trong CSS Kích cỡ trong CSS Scrollbar trong CSS Thuộc tính visibility trong CSS Căn chỉnh vị trí trong CSS Thuộc tính z-index trong CSS Pseudo Class trong CSS Pseudo Element trong CSS Các quy tắc trong CSS Kiểu Media trong CSS Layout trong CSS Validation trong CSS

CSS nâng cao

Giới thiệu CSS3 Bo tròn góc trong CSS Border Image trong CSS
1 / 3
❮ ❯

Layout trong CSS


Các quy tắc trong CSS
Validation trong CSS

Nội dung chính

  • Giới thiệu Layout trong CSS
  • Ví dụ mẫu về Column Layout trong CSS

Giới thiệu Layout trong CSS

Bạn có thể sử dụng các bảng trong HTML để tạo các Page Layout. Nhưng bạn có biết rằng CSS cung cấp cho bạn nhiều lựa chọn hơn cho việc thiết lập vị trí các phần tử trong một tài liệu. CSS là xu hướng của tương lai, và tại sao bạn không học và sử dụng CSS để có nhiều sự lựa chọn hơn trong việc thiết kế Layout cho Webpage thay vì chỉ sử dụng bảng một cách đơn điệu?

Dưới đây là một số điểm mạnh và điểm yếu của hai công nghệ trên:

  • Hầu hết trình duyệt đều hỗ trợ bảng, trong khi việc hỗ trợ CSS diễn ra khá chậm chạp.

  • Các bảng thì dễ học và sử dụng hơn là các CSS rule.

  • CSS cung cấp sự chính xác hơn khi là sử dụng các bảng trong HTML.

  • Việc theo dõi và thiết kế các bảng lồng vào nhau thực sự gây cho bạn khá nhiều phiền phức. CSS rule giúp bạn tổ chức tốt hơn, đọc, và tạo các thay đổi một cách dễ dàng hơn.

Dù thế nào đi nữa, nếu bạn quen và thích sử dụng công nghệ nào mà làm cho Webpage của bạn làm việc và được hiển thị tốt nhất thì hãy sử dụng nó.

CSS cung cấp thuộc tính table-layout giúp cho các bảng của bạn được tải nhanh hơn. Ví dụ:


<table style="table-layout:fixed;width:600px;">
   <tr height="30">
      <td width="150">Cell A</td>
      <td width="200">Cell B</td>
      <td width="250">Cell C</td>
   </tr>
</table>

Bạn sẽ nhận thấy lợi thế một cách rõ ràng với các bảng lớn. Với HTML truyền thống, trình duyệt phải tính toán mỗi ô trước khi hiển thị bảng. Trong khi đó, khi bạn thiết lập thuật toán table-layout thành fixed, thì trình duyệt sẽ chỉ cần nhìn vào hàng đầu tiên trước khi hiển thị toàn bộ bảng. Nghĩa là, bảng của bạn sẽ cần có các độ rộng cột và chiều cao hàng cố định.



Ví dụ mẫu về Column Layout trong CSS

Dưới đây là các bước đơn giản để tạo một Column Layout đơn giản trong CSS.

Thiết lập lề và padding của toàn bộ tài liệu như sau:


<style style="text/css">
   <!--
   body {
      margin:9px 9px 0 9px;
      padding:0;
      background:#FFF;
   }
   -->
</style>

Bây giờ, chúng ta sẽ thiết lập màu cho một cột (màu vàng) và sau đó gắn qui tắc này cho thẻ <div>:


<style style="text/css">
   <!--
   #level0 {
      background:#FC0;
   }
   -->
</style>

Lúc này chúng ta sẽ có một tài liệu với thân màu vàng, tiếp đó chúng ta xác định một khối khác bên trong level0.

Output:


<style style="text/css">
   <!--
   #level1 {
      margin-left:143px;
      padding-left:9px;
      background:#FFF;
   }
   -->
</style>

Lồng một hoặc nhiều khối vào trong level1, và tiếp đó chúng ta sẽ chỉ thay đổi màu nền cho chúng:


<style style="text/css">
   <!--
   #level2 {
      background:#FFF3AC;
   }
   -->
</style>

Cuối cùng, sử dụng cùng công nghệ trên, lồng một khối tại level3 vào bên trong level2 để tạo Layout cho cột phải:


<style style="text/css">
   <!--
   #level3 {
      margin-right:143px;
      padding-right:9px;
      background:#FFF;
   }
   #main {
      background:#CCC;
   }
   -->
</style>

Và cuối cùng source code sẽ có dạng sau:


<html>
<head>
<meta charset="UTF-8">
<style style="text/css">
   body {
      margin:9px 9px 0 9px;
      padding:0;
      background:#FFF;
   }
 
   #level0 {background:#FC0;}
 
   #level1 {
      margin-left:143px;
      padding-left:9px;
      background:#FFF;
   }
 
   #level2 {background:#FFF3AC;}
 
   #level3 {
      margin-right:143px;
      padding-right:9px;
      background:#FFF;
   }
 
   #main {background:#CCC;}
</style>
</head>
<body>
   <div id="level0">
      <div id="level1">
         <div id="level2">
            <div id="level3">
               <div id="main">
                   <p> Đây là vùng chứa nội dung trang web </p>
               </div>
            </div>
         </div>
      </div>
   </div>
</body>
</html>

Tương tự, bạn có thể thêm một thanh điều hướng hoặc một thanh quảng cáo chẳng hạn vào phần trên cùng của trang.

Kết quả:


Các quy tắc trong CSS
Validation trong CSS

Recent Updates

Sắp Tết 2024 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2024?Border Image trong CSSBo tròn góc trong CSSGiới thiệu CSS3Layout trong CSSCác quy tắc trong CSSPseudo Element trong CSSPseudo Class trong CSSThuộc tính z-index trong CSSCăn chỉnh vị trí trong CSSThuộc tính visibility trong CSSScrollbar trong CSSKích cỡ trong CSS

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml