Hướng dẫn lang trong css

  • Trang chủ
  • Tham khảo
  • CSS
  • :lang(mã ngôn ngữ)

Định nghĩa và sử dụng

":lang(mã ngôn ngữ)" chọn thành phần với thuộc tính "lang" có giá trị bắt đầu với "mã ngôn ngữ".

Cấu trúc

tag:lang(mã ngôn ngữ) { 
    property : value;
}

Ví dụ

HTML viết:




Học web chuẩn

Google

vnexpress

Hiển thị trình duyệt khi chưa có CSS:

CSS viết:

p a:lang(vi) {
    color: #ff0000;
}

Color màu đỏ cho những tag a nào có lang="vi"

Hiển thị trình duyệt khi đã có CSS:

Trình duyệt hỗ trợ

":lang(mã ngôn ngữ)" được hỗ trợ trong đa số các trình duyệt.

Ghi chú:
Không hỗ trợ cho trình duyệt IE6, IE7.
Cần khai báo cho trình duyệt IE8.

Định nghĩa và sử dụng

"[Thuộc tính|=ngôn ngữ]" được sử dụng để chọn tất cả các thành phần với thuộc tính có giá trị = "ngôn ngữ".

Lưu ý: Giá trị phải là một từ: lang="en", hoặc theo sau dấu gạch nối (-): lang="en-us".

Cấu trúc

[Thuộc tính|=ngôn ngữ] {
    property: value; 
}

Ví dụ

HTML viết:




Hello!

Hi!

Xin chào !

Hiển thị trình duyệt khi chưa có CSS:

CSS viết:

p [lang|=vi] {
    color: #ff0000; 
}

Chỉ có tag nào có lang="vi" mới có hiệu ứng text color.

Hiển thị trình duyệt khi đã có CSS:

Trình duyệt hỗ trợ

"[Thuộc tính|=ngôn ngữ]" được hỗ trợ trong đa số các trình duyệt.

Ghi chú:
Không hỗ trợ cho trình duyệt IE6.
Cần khai báo cho các trình duyệt IE8 trở xuống.

Chào mừng các bạn đến với một kỹ thuật rất quan trọng trong CSS Layout, mà đã từng làm nhiều người phải “sợ” nó, đó chính là học cách chia cột trên CSS. Có thể nói rằng, website bạn soạn ra bằng văn bản HTML sẽ luôn luôn có một cột duy nhất mà nếu bạn muốn làm một website có hai hoặc nhiều cột thì chắc chắn phải dùng đến CSS.




Chia cột trong CSS là thế nào?

Việc chia cột trong CSS là việc bạn thiết lập những phần tử con trong một phần tử mẹ nằm trên cùng một hàng. Ví dụ, mình muốn phần nội dung website của mình có hai cột thì mình sẽ tạo ra 3 cái

, một cái
 mình gọi nó là container hoặc phần tử mẹ, hai cái
 còn lại mình gọi là column (cột).

[html]

Nội dung của #post

[/html]

Ở ví dụ trên, mình có phần #content chứa hai cột đó là #post và #sidebar. Sở dĩ mình dùng thêm class container cho #content là vì mình muốn sau này có muốn chia thêm cột cho các phần tử khác trong website thì sẽ có thể tái sử dụng cái class này, đơn giản là thói quen của mình thôi chứ bạn không cần cũng được.

Và bây giờ, nhiệm vụ của chúng ta trong bài này là sẽ làm thế nào để cái #post và #sidebar nằm thẳng hàng với nhau.

Các bước chia cột trong CSS

Khi chia cột trong CSS, bạn nên làm tuần tự đầy đủ các bước sau để chia cột được chính xác:

  1. Các cột phải luôn có một container, tức là phần tử mẹ bao bọc nó.
  2. Thiết lập chiều rộng cho container.
  3. Thiết lập chiều rộng cho hai cột, tổng chiều rộng trong hai cột phải luôn bằng hoặc ít hơn chiều rộng của container.
  4. Nên sử dụng box-sizing: border-box để tính toán kích thước chính xác.
  5. Sử dụng thuộc tính float với giá trị left và right để đẩy phần tử về sang trái hoặc phải.
  6. Tiến hành clear float.

Cách chia cột trong CSS

Bây giờ mình sẽ tiến hành chia cột dựa theo đoạn HTML mẫu ở trên nhé.

Trước tiên, chúng ta sẽ tiến hành thiết lập chiều rộng cho class container, nên thêm một cái border để tí nữa bạn sẽ hiểu clear float là thế nào:

/*==Thiết lập container==*/

.container {
width: 960px;
border: 1px solid #333;
padding: 10px;
}

Tiếp tục, chúng ta thiết lập chiều rộng của #post và mình sẽ muốn cột #post sẽ chiếm 660px, đồng thời thêm màu sắc cho hai thằng này để dễ nhìn một xíu.

/*==cột #post==*/
#post {
width: 660px;
height: 150px;
background: #e8e8e8;
}

Tương tự với #sidebar nhưng ta muốn cột #sidebar chỉ 300px mà thôi.

/*==cột #sidebar==*/
#sidebar {
width: 300px;
height: 150px;
background: #b1b1b1;
}

Giờ ta đã có được như thế này:

Hướng dẫn lang trong css

Okay, bây giờ mình muốn cái #post nó sẽ nằm bên trái của #sidebar, nên mình sẽ gắn thêm cho #post một thuộc tính float với giá trị làleft.

float: left;

Đồng thời, mình muốn thằng #sidebar sẽ nhảy qua bên phải nên mình sẽ có thuộc tính float cho nó với giá trị làright.

float: right;

Kết quả thật dễ thương, hai em ấy đã nằm trên cùng một hàng.

Hướng dẫn lang trong css

Nhưng bạn có để ý là cái container nó bị co lại bên trên không? Nói đúng hơn là bây giờ thằng #post và #sidebar đã nhảy ra khỏi cái container luôn rồi. Thế làm sao để cho 2 cột này hiển thị bên trong container đây? Bạn sẽ làm gì? Đặt height cho container dài ra thêm hả? Không hề, mà chúng ta sẽ tiến hành clear float.

Clear float là như thế nào?

Khi chúng ta sử dụng thuộc tính float thì nghĩa là sẽ thiết lập cho một phần tử được đẩy sang trái hoặc phải và cho phép các phần tử gần đó có thể hiển thị bao bọc xung quanh nó. Thế nhưng một vấn đề xảy ra là khi bạn cho toàn bộ các phần tử trong một container float hết thì có nghĩa là thằng container cũng sẽ hiển thị bao bọc xung quanh các phần tử được float, thành ra nó mới bị cái lỗi buồn cười như ở trên.

Do vậy khi tiến hành float các phần tử, việc bạn nên làm là phải tạo ra điểm kết thúc cho việc float này, tức là bạn sẽ muốn nó bắt đầu không float ở đâu nữa. Gọi theo thuật ngữ CSS là clear float.

Về clear float thì có rất nhiều cách, tùy theo trường hợp mà chúng ta sẽ sử dụng cách phù hợp.

Cách 1. Sử dụng thẻ div trống

Cách này khá phổ biến từ rất lâu rồi, đó là chúng ta sẽ tạo ra một class riêng cho việc clear float và khai báo thêm một thẻ

 nữa với class này rồi đặt nó bên dưới của cột cuối cùng.

Bây giờ mình sẽ viết một đoạn CSS cho class tên là .clear như sau:

.clear { clear: both }

Thuộc tính clear này nghĩa là thiết lập không cho phép các phần tử khác float xuống nó, nó có các giá trị là left right bothnone. Và bạn chỉ nên dùng giá trị both thôi để clear cả 2 bên.

Bây giờ, mình sẽ khai báo một thẻ

 với class là clear và đặt nó ngay bên dưới cái cột #sidebar (cột cuối cùng của hàng).

[html]

Nội dung của #post


[/html]

Kết quả:

Hướng dẫn lang trong css

Cách 2. Sử dụng overflow

Cách này thì gọn lẹ hơn, không cần sửa HTML mà chỉ cần viết thêm overflow: auto; cho container là được.

Kết quả y hệt ở trên.

[codepen id=”EaBOgM”]

Lời kết

Nếu bạn đọc tới đây thì có thể sẽ rất vui vì mình biết là có rất nhiều bạn có nhu cầu chia cột cho website mà không biết làm thế nào, đó chính là sử dụng các thuộc tính float mình đã đề cập ở trên và nhớ là clear float cho mỗi container.

Thạch Phạm

Bé Thạch 18 tuổi, hiện công tác tại AZDIGI với vị trí giữ xe và viết thuê tại ThachPham.Com. Sở thích nghiên cứu về website, DevOps, SysAdmin và xăm mình nữa. Phương châm sống của bé là "No Pain, No Gain".

Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.