DIV and StyleSheet

DIV AND STYLESHEET

- Nguyễn Trần Thương Nguyễn -

Mục Lục

  1. Giới thiệu
  2. Cách sử dụng
  3. Ưu và nhược điểm
  4. Tóm lại

I. Giới thiệu

  • Thẻ div là một dạng Block-level Element nó giúp định dạng một phần của trang web. Cho nên người ta hay sử dụng thẻ div để định dạng cấu trúc cho trang web để làm cho nó dễ dàng hơn để quản lý, thao tác…
  • Thẻ div là một công cụ mạnh mẽ để thiết kế web, và đang dần trở nên phổ biến .
  • Thẻ div dễ sử dụng hơn một số tag khác về mức độ đơn giản, và tăng khả năng duyệt web nhanh hơn nhờ sự kết hợp chặt chẽ với css.

II. Cách sử dụng thẻ div ( Top )

  1. Thuộc tính căn bản

    align - (Depreciated): được sử dụng để thiết lập sự căn chỉnh nội dung bên trong div. Các giá trị như LEFT, RIGHT, and CENTER.

    Class : hay còn gọi là lớp dùng để chỉ một lớp các đối tượng có chung các thuộc tính. Các đối tượng trong cùng một class có tính thừa kế lẫn nhau, chính vì vậy trong một trang HTML của bạn có thể có rất nhiều các đối tượng có thể thuộc một class nào đó.

    id: được dùng để xác định một đối tượng duy nhất nào đó. Do đó trong một trang HTML của bạn mỗi đối tượng chỉ có duy nhất một id, nếu có 2 đối tượng trở lên có id giống nhau trong cùng một trang thì điều đó có nghĩa là trang đó của bạn không validate HTML.

    Style: là thuộc tính đặc biệt, nó định nghĩ thuộc tính trong các thẻ.

  2. Cách xài ( Top )

    Khai báo một thẻ div như một vùng chứa nội dung ( Top )

    Ví dụ

    Code 1

    Output

    This is a example

    Code 2

    Output

    • Hello A
    • Hello B

    Code 3

    Output

    User

    Div lồng div ( Top )

    Code:

    Output

    Hello1
    Hello2

    Dùng thẻ div tạo bố cục cho website ( Top )

  3. Code:

    Sự dụng css để tạo một bố cục chặt chẽ cho div ( Top )

    1. Phải tạo và liên kết tới file css
      Vi dụ:
    2. Sử dụng id và class để gán thuộc tính cho div
      Nếu là id thì có dấu “#” trước tên biến
      Ví dụ: #tenbien
      Nếu là class thì có dấu “.” trước tên biến
      Ví dụ: .tenbien
    3. Một số thuộc tính căn bản trong Css

      • Boder
        ( Top )

        Code:

        Css:

        Output

        Hello1

      • Width và height ( Top )

        căn chỉnh độ dài và rộng giống ví dụ phần trên

      • Background ( Top )
        - Repeat: Cho phép bạn lặp lại ảnh theo hướng mình mong muốn
        - Non-repeat: không cho phép lặp lại
        - background-img: liên kết tới một file ảnh
        - background-color: màu nền

        Code:

        Css:

        Output

      • Padding ( Top )

        Độ dày viền bao quanh

        Code:

        Css:

        Output


      • Merge ( Top )

        Căn chỉnh khoảng cách so với lề

        Code:

        Css:

        Output

        Merge: auto;

      • Clear và float ( Top )

        - Float right(left): dịch chuyển bên phải(hoặc trái)

        - Clear: thực chất chỉ là một tính năng chống không cho nội dung ở dưới tràn lên trên để lấp vào chỗ trống còn dư(hoặc không).

        Code:

        Css:

        Output

        Float left

      • Position ( Top )

        Static: Trước hết là chế độ Static mặc định khi không có giá trị nào được gán.

        Relative: Liên kết với mẹ của nó.

        Fixed: cố định vị trí không thay đôi khi co giãn.

        Absolute Position: định vị trí nơi muốn đặt. Có thể tải ví dụ tại đây

        Tài liệu: bạn có thể tham khảo về thuộc tính Position tại đây

    4. Một số video tham khảo
      • Cách sử dụng div hiệu quả ( Top )

      • Làm quen với Absolute position và Relative ( Top )

III. Ưu và nhược điểm ( Top )

  • Nhược điểm ( Top )

    Khi mới làm quen với div, bạn nhận thấy nó khó sử dụng hơn Table rất nhiều. Bởi vì Table nó trực quan hơn và đặc biệt là khi bạn sử dụng những chương trình WYSIWYG thì thiết kế trang web giống như tạo bẳng trong Excel vậy. Nhưng để sử dụng được div theo ý muốn thì bạn phải có kinh nghiệm với CSS, phải biết và hiểu được sự giống và khác nhau giữa Block element và Inline Element, khi nào thì sử dụng float và khi nào thì sử dụng Absolute Position và làm cho giao diện tương thích với mọi trình duyệt.

    Đặc biệt là khi bạn chưa hiểu sâu về CSS, khi làm giao diện với div bạn sẽ thấy các thành phần chạy không theo ý muốn và dễ dàng cảm thấy nản và bỏ cuộc. Nhất là khi bạn phải sử dụng div để tạo một giao diện phức tạp với nhiều thành phần khác nhau. Nhưng bạn cứ kiên trì làm giao diện từ nhỏ đến lớn, từ đơn giản đến phưc tạp. Mỗi khi bạn làm thành công một giao diện là bạn đã hiểu thêm một chút về div.

  • Ưu điểm ( Top )

    Xây dựng một nền tảng để thay thế các phương thức cổ điển của Web. Tổ chức World Wide Web Consortium (W3C) tạo ra CSS để thay thế các bảng (table), các thẻ font, frame và các dạng "hack" thẻ HTML để tạo hiệu quả cho website Với tôi, CSS mang lại hiệu quả công việc cao hơn. Nhìn cái tag font rối rắm là tôi thấy nản. Coder muốn sửa chữa gì cũng mệt vì sự rối rắm của nó. Trong trường hợp muốn thay đổi về thiết kế của code, bạn lại đụng tới khá nhiều mảng của coder. Còn nếu sử dụng css, việc chỉnh sửa rất đơn giản, không phụ thuộc vào coder.

    Tăng tốc độ website.
    Thời gian load một website sẽ nhanh hơn. Dung lượng của một trang web sẽ nhẹ hơn 50% so với cách làm cổ điển.
    Theo cơ sở của DOM thì:
    - Table: web browser phải load cả <table>...</table> thì mới có thể dựng thành DOM tree và hiển thị ra màn hình.
    - Div: chỉ cần load <div>..</div> là đã có thể dựng được DOM tree và hiển thị.
    Như vậy, quá trình hiển thị 1 trang table-less sẽ nhanh hơn 1 trang table. Hơn nữa, cùng 1 cấu trúc nhưng DOM tree của table sẽ lớn và phức tạp hơn của div rất nhiều, điều này cũng ảnh hưởng đến bộ nhớ và tốc độ xử lý của browser.
    Chưa kể, cùng 1 trang nhưng nếu dùng table thì code HTML sẽ lớn hơn dùng div. Code CSS có dùng div có thể sẽ lớn hơn, nhưng CSS được load 1 lần, sau đó được cache trên client.

    Thời gian phát triển website nhanh hơn
    Thông qua một thao tác về thiết kế: thay đổi CSS, thì hàng ngàn trang web sẽ được thay đổi theo.

    Typography thể hiện ngầu hơn
    CSS có khả năng kiểm soát mạnh mẽ hơn tag FONT rất nhiều. Chúng ta có thể kiểm soát chiều cao giữa các dòng, thay màu font, các font theo họ - tức là không có font này, sẽ tự chọn font tiếp theo trong danh sách, và nhiều nhiều hơn thế.

    Dễ viết
    Bạn có thể tạo và thay đổi CSS dễ dàng như khả năng làm code HTML thủ công.

    Khả năng phát triển.
    Sử dụng CSS hiệu quả sẽ tương tự như sử dụng cấu trúc nội dung với HTML. Với cấu trúc HTML, chúng ta chỉ giữ lại các tag cho đoạn văn, các tag tiêu đề (H1 -> H6), bảng dành cho một số ít bảng biểu đặc biệt, bạn sẽ tăng khả năng đáp ứng lượng khách viếng thăm mà không cần xây dựng một phiên bản độc lập để giảm tải.

    Thiết kế dành cho in ấn cũng đẹp như dành cho web. CSS hỗ trợ tốt cho một khi bạn cần in ra, chẳng hạn in ấn, hay PowerPoint

    Dễ kiểm soát thông qua vị trí các thành phần trên web. Việc đánh ID trên từng thẻ DIV, sẽ dễ dàng hơn cho bạn khi cần kiểm soát và hỗ trợ tốt cho Ajax.

    . Các trang web tách biệt phần thiết kế và nội dung. Giữ lại thiết kế trong một file liên kết, bạn có thể tiết kiệm nhiều thời gian khi cần thêm bớt các thành phần của một trang web.

    Cải thiện vị trí trong các website tìm kiếm. Với cách sử dụng HTML cho phần nội dung mà thôi, bạn đã loại bỏ các tag định dạng phức tạp cho thiết kế. Điều này là cho các website tìm kiếm index (tạo chỉ mục) website của bạn tốt hơn, và sẽ là tăng thứ hạng của website.

IV. Tóm lại ( Top )

Khi ta sử dụng các thẻ Divs, định nghĩa giao diện, vị trí cho chúng ta không cần phải làm lại điều này với các file khác. Điều này giúp cho việc xây dựng và việc bảo dưỡng nhanh hơn rất nhiều.

Trang web được load nhanh hơn tại phía người dùng. Hãy lưu ý rằng, file Css này được tải về trình duyệt của người dùng 1 lần duy nhất, sau đó nó được lưu trong Cache để xử lý các yêu cầu tới trang đó trong các lần sau cho tới khi nội dung của nó được thay đổi trên máy chủ. Trong khi đó nếu sử dụng bảng, các bảng được tải về trong mỗi lần yêu cầu tới trang cần hiển thị, do đó số lượng thông tin trao đổi tới máy chủ nhiều hơn rất nhiều. Do đó để hiển thị trang Web cùng với một nội dung như nhau, trang Web sử dụng CSS sẽ được tải nhanh hơn rất nhiều lần (tới 50%). Hơn nữa, khi lưu lượng dữ liệu được giảm đi, máy chủ có khả năng phục vụ được nhiều khách hàng hơn với băng thông không thay đổi.

- Các kiểu CSS và thẻ Div cung cấp sự linh hoạt hơn các bảng. Bạn có thể có những file định dạng khác nhau mà xác định các giao diện khác nhau và các vị trí cho các đối tượng khác nhau trong trang. Bằng cách chuyển lien kết của các định dạng, bạn có thể hoàn tất việc thay đổi giao diện của trang mà không cần thay đổi bất kì nội dung nào trong trang. Với các trang ASP.NET, bạn thậm chí có thể thay đổi định dạng mỗi lần chạy và từ đó dễ dàng thực hiện cơ chế mà cho phép người dùng cuối chọn các kiểu mà học thích. Và điều đó không chỉ đơn giản là về màu sắc và font- bạn có thể xác định các vị trí của đối tượng trong file CSS, và từ đó có một file mà đặt vào menu trên góc trên bên trái của trang, một cách khác là có thể đặt nó vào dưới cùng bên phải. Bởi vì chúng ta muốn cho phép các người dùng lấy các dạng mà họ ưa thích từ một danh sách các giao diện có thể sử dụng Đây là một điểm cực kì quan trọng.

- CSS cho phép bạn nhắm vào các loại của các thiết bị khác nhau trong một vài trường hợp mà không cần HTML mới giống như là thiết bị di động như PDA hoặc smartphone. Thử làm điều này nếu bạn dùng bảng, nó sẽ khó hơn nhiều. Bạn phải nghĩ về một cơ chế giao diện tùy biến, và bạn cần viết nhiều trang riêng mà xác định các lớp khác nhau có thể dùng được. Điều này tốt hơn là viết một file CSS mới.

Top

Thông tin liên hệ:
Nguyen Lam Thi Minh Dieu
Email: dieu.nguyenlamthiminh@niit.edu.vn.
Website: www.nguyenlamminhdieu.com