Class, BBCode [style] và [tablestyle]

[indent]BBCode tạo class[/indent]

Giới thiệu về BBCode style và tablestyle, 2 BBCode tạo class.

[hs1]Class[/hs1]
[box="border: 5px double black; float: left; margin-right: 5px; padding: 5px; background-color: #fff"]
[toc][/box][hs2]Class là gì?[/hs2]
[indent]Class như là đồng phục (áo trại ) của một lớp, đồng phục của một lớp là tập hợp các loại áo, quần, mũ, vv... Tương tự như vậy một class bao gồm các thông số CSS khác nhau. Tất cả học sinh trong lớp đều phải mặc đồng phục giống nhau, tương tự như vậy toàn bộ những đứa nào mang class giống nhau đều nhận các thông số CSS giống nhau mà class đó đang giữ.
[/indent]

[hs1]BBCode style và tablestyle[/hs1]
[hs2]style[/hs2]: Tạo class
[indent][cbox][ob]style="{Tên class}"[cb]{Các thông số}[ob]/style[cb][/cbox]
Tên của class không được mang khoảng trắng.
Class tạo ra có thể được dùng tại bất kỳ post nào của bạn trong trang đó.

[style="custom"]border: 6px double black; padding: 4px 4px 4px 4px; border-radius: 10px; [/style] BBCode này không có biểu hiện bề ngoài, nhưng vì đặc điểm soạn thảo nên bạn sẽ thấy có những dòng trắng xuất hiện.

[ob]style="custom"[cb]border: 6px double black; padding: 4px 4px 4px 4px; border-radius: 10px; [ob]/style[cb]

Gán class này cho box.

[box class="custom"]Box này mang các thông số border, padding, border-radius được lấy từ class[/box]

[ob]box class="custom"[cb]Box này mang các thông số border, padding, border-radius được lấy từ class[ob]/box[cb]

[/indent]

[hs2]hover[/hs2]
[indent]Bằng cách thêm :hover vào đằng sau tên của style, ta có thể tạo hiệu ứng hover.
Lưu ý là đôi khi chế độ tự sửa lỗi sẽ xóa mất dấu : khiến class trở nên vô nghĩa, vì thế trong trường hợp này khuyến khích dùng ký tự thay thế #cl# đã giới thiệu ở bài trước.

[style="custom2#cl#hover"]border: 6px double red; background-color: #ffaaaa; [/style]	[ob]style="custom2#cl#hover"[cb]border: 6px double red; background-color: #ffaaaa; [ob]/style[cb]
[box class="custom2"]Đưa chuột vào box để thấy hiệu ứng[/box]	[ob]box class="custom2"[cb]Đưa chuột vào box để thấy hiệu ứng[ob]/box[cb]

[/indent]

[hs2]tablestyle[/hs2]: Tạo class cho table
[indent]Vì table là BBCode có sẵn nên có một BBCode riêng giành tạo ra class cho chúng.
Tương tự như style, class tạo ra có thể được dùng tại bất kỳ post nào của bạn trong trang đó.
[cbox][ob]tablestyle="{Tên class}"[cb]{Các thông số}[ob]/tablestyle[cb][/cbox]
Các thông số này sẽ tác động tới bảng (các table).
[cbox][ob]tablestyle="{Tên class} tr"[cb]{Các thông số}[ob]/tablestyle[cb][/cbox]
Các thông số này sẽ tác động tới các dòng (các tr).
[cbox][ob]tablestyle="{Tên class} td"[cb]{Các thông số}[ob]/tablestyle[cb][/cbox]
Các thông số này sẽ tác động tới các ô (các td).

[tablestyle="custom2"]border: 6px double green; background-color: #aaffaa; [/tablestyle] [tablestyle="custom2 td"]border: 6px solid green; background-color: #aaffaa!important; border-radius: 4px; width: 125px!important; font-family: Arial!important; [/tablestyle]	[ob]tablestyle="custom2"[cb]border: 6px double green; background-color: #aaffaa; [ob]/tablestyle[cb] [ob]tablestyle="custom2 td"[cb]border: 6px solid green; background-color: #aaffaa; border-radius: 4px; font-family: Arial; [ob]/tablestyle[cb]
Ô 1 dòng 1 Ô 2 dòng 1 Ô 1 dòng 2 Ô 2 dòng 2	[ob]table class="custom2"[cb] [space][ob]tr[cb] [space][space][ob]td[cb]Ô 1 dòng 1[ob]/td[cb] [space][space][ob]td[cb]Ô 2 dòng 1[ob]/td[cb] [space][ob]/tr[cb] [space][ob]tr[cb] [space][space][ob]td[cb]Ô 1 dòng 2[ob]/td[cb] [space][space][ob]td[cb]Ô 2 dòng 2[ob]/td[cb] [space][ob]/tr[cb] [ob]/table[cb]

[/indent]

[hs2]Chú ý[/hs2]
[indent]Các thông số CSS khai báo trực tiếp trong BBCode mạnh hơn thông số CSS lấy từ class.

[box="border: 6px double red" class="custom" ]Box mang viền đỏ vì khai báo trực tiếp mạnh hơn.[/box] Các thông số khác của class không có xung đột thì vẫn được áp dụng như bình thường.

[ob]box="border: 6px double red" class="custom"[cb]Box mang viền đỏ vì khai báo trực tiếp mạnh hơn.[ob]/box[cb]

Thêm !important vào đằng sau thông số CSS sẽ giúp nó đè chết mấy tên còn lại.

[style="custom3"]border: 6px double blue!important; [/style]	[ob]style="custom3"[cb]border: 6px double blue!important; [ob]/style[cb]
[box="border: 6px double red" class="custom3" ]Box mang viền xanh dương vì khai báo có !important là khai báo mạnh nhất.[/box]	[ob]box="border: 6px double red" class="custom3"[cb]Box mang viền xanh dương vì khai báo có !important là khai báo mạnh nhất.[ob]/box[cb]

[/indent]

[hs1]FAQ[/hs1]
[indent]Q: Nếu có ai đó đặt tên class giống tên class của mình thì sao?
A: Không có vấn đề gì cả, class A do bạn tạo ra hoạt động độc lập với class A do ai đó tạo ra, cho dù chúng nằm chung một trang.
Q: Tại sao hover mình tạo ra lại không có hiệu lực.
A: Những thông số nào không có hiệu lực thì hãy thử thêm !important vào đằng sau.
[/indent]