Tìm thấy 2 mục

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]

BBCode ký tự, các thuộc tính của BBCode

[indent]Thuộc tính BBCode và các ký tự thay thế[/indent]

Bài giới thiệu chuẩn bị cho các BBCode có tiếp nhận thông số, kèm theo đó là các ký tự thay thế hữu dụng.
Những phần mình để trong spoiler là những phần không quan trọng, có thể bỏ qua nếu muốn.

[hs1]Thuộc tính BBCode[/hs1]
[box="border: 5px double black; float: left; margin-right: 5px; padding: 5px; background-color: #fff"]
[toc][/box][hs2]Thuộc tính của BBCode là gì?[/hs2]
[indent]Thuộc tính BBCode nói chung nó là những thông số mà chúng ta phải thêm vào để BBCode làm đúng những gì chúng ta mong muốn. Ví dụ để BBCode font hiển thị đúng font mà chúng ta cần, lẽ hiển nhiên là ta phải nhập tên của cái font cho nó, đó chính là thuộc tính. [/indent]

[hs2]Thuộc tính BBCode được dùng như thế nào?[/hs2]
[indent]Thuộc tính của BBCode được khai báo trong tag mở của BBCode, và được viết theo ba dạng.
[cbox]{Tên thuộc tính}={Giá trị thuộc tính}[/cbox]
hoặc
[cbox]{Tên thuộc tính}[/cbox]
hoặc
[cbox]{Tên thuộc tính}="{Giá trị thuộc tính}"[/cbox]
Vậy khi nào phải dùng dấu ngoặc kép, khi nào không? Chỉ có 5 loại BBCode không cần để giá trị thuộc tính trong ngoặc kép, đó là: color, font, size, url, spoiler. Tất cả chúng đều là BBCode có sẵn.

[box box="border: 4px solid #00dd00; border-radius: 10px"]Nội dung Nội dung Nội dung[/box]

[ob]box box="border: 4px solid #00dd00; border-radius: 10px"[cb]Nội dung Nội dung Nội dung [ob]/box[cb]

Về khai báo rút gọn
Trong trường hợp tên thuộc tính trùng với tên BBCode, ta có thể nối trực tiếp thuộc tính đó vào tên mở đầu của BBCode, trường hợp này mình gọi là khai báo rút gọn.
Hai dòng sau hoạt động hoàn toàn như nhau.
[cbox][ob]box box="border: 4px solid #00dd00; border-radius: 10px"[cb]Nội dung Nội dung Nội dung[ob]/box[cb]
Đây là khai báo thông thường[/cbox]
[cbox][ob]box="border: 4px solid #00dd00; border-radius: 10px"[cb]Nội dung Nội dung Nội dung[ob]/box[cb]
Đây là khai báo rút gọn[/cbox]

- Nếu BBCode nhận nhiều hơn 1 thuộc tính, các thuộc tính cách nhau bằng khoảng trắng (không được phép xuống dòng).
[cbox]{Tên thuộc tính}="{Giá trị thuộc tính}" {Tên thuộc tính}="{Giá trị thuộc tính}" {Tên thuộc tính}="{Giá trị thuộc tính}"[/cbox]

Sự thật là các thuộc tính cũng không nhất thiết phải cách nhau bằng khoảng trắng:

- Thứ tự khai báo thuộc tính không quan trọng, nhưng nếu khai báo rút gọn thì thuộc tính rút gọn luôn phải đứng đầu.

- Không cần phải khai báo tất cả các loại thuộc tính, những thuộc tính bị bỏ qua sẽ tự có giá trị mặc định thay vào.[/indent]

[hs2]Chú ý[/hs2]
[indent]Có 3 ký tự không thể xuất hiện trong giá trị của thuộc tính, đó là: [ , ] và "
Nguyên nhân, hệ thống sẽ nhầm lẫn dấu [ và ] với dấu đóng/mở BBCode và nhầm dấu " với dấu mở đầu/kết thúc giá trị thuộc tính.[/indent]

[hs1]Các ký tự thay thế[/hs1]
[indent]Vậy trong trường hợp cấp bách bạn phải đưa mấy ký tự ở trên vào trong thuộc tính thì sao? Câu trả lời là dùng ký tự thay thế.

Ký tự thay thế	Ký tự hiển thị
#ob#	[ - Dấu mở ngoặc vuông
#cb#	] - Dấu đóng ngoặc vuông
#qu#	" - Dấu ngoặc kép
#cl#	: - Dấu hai chấm
/#	# - Dấu thăng

Ví dụ:
+ #ob#C87#cb# sẽ hiển thị là [C87]
+ Tên#cl# mr.equal sẽ hiển thị là Tên: mr.equal
+ /#ob/# sẽ hiển thị là #ob#
+ //#cb//# sẽ hiển thị là /#cb/#[/indent]

[hs1]Các BBCode ký tự[/hs1]
[hs2]ob[/hs2]: Hiển thị dấu [
[indent][cbox][ob]ob[cb][/cbox][/indent]

[hs2]cb[/hs2]: Hiển thị dấu ]
[indent][cbox][ob]cb[cb][/cbox][/indent]

[hs2]b1[/hs2]: Hiển thị dấu •
[indent][cbox][ob]b1[cb][/cbox][/indent]

[hs2]b2[/hs2]: Hiển thị dấu ◦
[indent][cbox][ob]b2[cb][/cbox][/indent]

[hs2]b3[/hs2]: Hiển thị dấu ‣
[indent][cbox][ob]b3[cb][/cbox][/indent]

[hs2]space[/hs2]: Hiển thị khoảng trắng, mặc định là 30px
[indent][cbox][ob]space="{Độ dài khoảng trắng}"[cb][/cbox]

Nội dung[space="60px"]Nội dung Nội dung[space]Nội dung

Nội dung[ob]space="60px"[cb]Nội dung Nội dung[ob]space[cb]Nội dung

[/indent]

[hs2]clear[/hs2]: Xuống dòng
[indent][cbox][ob]clear[cb][/cbox][/indent]

[hs1]FAQ[/hs1]
Q: Tại sao cần BBCode chỉ để hiển thị mấy ký tự [ và ]?
A: Vì hệ thống sẽ không coi đó là dấu đóng, mở BBCode, và mình có thể dùng chúng để viết như thế này: [ob]center[cb] mà không sợ làm hỏng giao diện.
Q: Vậy còn mấy ký tự • hay ◦?
A: Chúng dùng để đánh dấu đề mục trong danh sách, làm ra vì sự lười dùng BBCode list của mình.
Q: Tới cả khoảng trắng với xuống dòng mà cũng phải dùng BBCode cơ á? Cứ enter với space đều đều là xong mà?
A: Dòng đầu tiên của một đoạn văn thường được viết thụt vào, bạn hãy thử làm bằng cách ấn space thật nhiều xem?
         Nếu bạn quote lại bạn sẽ thấy dòng này có 10 dấu cách đằng trước, nhưng trong hầu hết trình duyệt khi hiển thị thì nó hoàn toàn dính vào lề trái.
[space]Bằng cách dùng BBCode space mình có thể làm việc này hết sức dễ dàng. Trong quá trình sử dụng BBCode chắc chắn bạn sẽ không ít lần gặp tình huống tương tự.

[metabox][tablestyle="alter"]border: 1px solid #87ceeb; border-radius: 5px; width: 100%[/tablestyle]
[tablestyle="alter td"]border: 1px solid #87ceeb; border-radius: 5px; padding: 2px[/tablestyle][/metabox]