Thông số CSS

[indent]Giới thiệu về các thuộc tính dùng trang trí trong BBCode[/indent]

Thông qua các thông số CSS chúng ta sở hữu vô số cách thức khác nhau để làm đẹp cho bài viết của mình, bài viết này sẽ giới thiệu sơ lược về một số thông số cơ bản trong số đó. Nếu muốn biết nhiều hơn và tường tận hơn, hãy tham khảo tại đây http://www.w3schools.com/cssref/

[hs2]border[/hs2]: Tạo viền
[indent][cbox]border: {x} {y} {z};[/cbox]
- x: Độ dày viền, mặc định medium (3px).
- y: Kiểu viền, mặc định solid.

solid	double	dashed	dotted
inset	outset	groove	ridge

- z: Màu viền, mặc định #000000 (màu đen).

[box="border: 4px double #0000ff"]Nội dung Nội dung Nội dung[/box]

[ob]box="border: 4px double #0000ff"[cb]Nội dung Nội dung Nội dung[ob]/box[cb]

[/indent]

[hs2]border-radius[/hs2]: Vuốt cong viền
[indent][cbox]border-radius: {x};[/cbox]
- x: Độ cong, mặc định 0.

[box="border: 4px solid #0000ff; border-radius: 20px"]Nội dung Nội dung Nội dung[/box]	[ob]box="border: 4px solid #0000ff; border-radius: 20px"[cb]Nội dung Nội dung Nội dung[ob]/box[cb]
[box="border: 4px solid #0000ff; border-radius: 40%"]Nội dung Nội dung Nội dung[/box]	[ob]box="border: 4px solid #0000ff; border-radius: 40%"[cb]Nội dung Nội dung Nội dung[ob]/box[cb]

[/indent]

[hs2]height[/hs2]: Đặt chiều cao
[indent][cbox]height: {x};[/cbox]
- x: Chiều cao, mặc định auto (trình duyệt tự tính toán).

[box="border: 4px solid #0000ff; height: 150px"]Nội dung Nội dung Nội dung[/box]

[ob]box="border: 4px solid #0000ff; height: 150px"[cb]Nội dung Nội dung Nội dung[ob]/box[cb]

[/indent]

[hs2]width[/hs2]: Đặt chiều dài
[indent][cbox]width: {x};[/cbox]
- x: Chiều dài, mặc định auto.

[box="border: 4px solid #0000ff; width: 200px"]Nội dung Nội dung Nội dung[/box]

[ob]box="border: 4px solid #0000ff; width: 200px"[cb]Nội dung Nội dung Nội dung[ob]/box[cb]

[/indent]

[hs2]text-shadow[/hs2]: Tạo bóng cho chữ
[indent][cbox]text-shadow: {x} {y} {z} {t};[/cbox]
- x: Bắt buộc, độ lệch ngang giữa bóng và chữ.
- y: Bắt buộc, độ lệch dọc giữa bóng và chữ.
- z: Độ mờ, mặc định 0.
- t: Màu của bóng, mặc định #000000.

[box="text-shadow: 6px 4px 3px #dd00dd"]Nội dung Nội dung Nội dung[/box]

[ob]box="text-shadow: 6px 4px 5px #dd00dd"[cb]Nội dung Nội dung Nội dung[ob]/box[cb]

[/indent]

[hs2]box-shadow[/hs2]: Tạo bóng cho box
[indent][cbox]box-shadow: {x} {y} {z} {t} {u} {v};[/cbox]
- x: Bắt buộc, độ lệch ngang giữa bóng và box.
- y: Bắt buộc, độ lệch dọc giữa bóng và box.
- z: Độ mờ, mặc định 0.
- t: Kích thước của bóng vốn bằng kích thước của box, thông số này sẽ khiến kích thước mỗi chiều của bóng tăng thêm t, mặc định 0.
- u: Màu của bóng, mặc định #000000.
- v: Nếu có thì chỉ tiếp nhận duy nhất một giá trị là inset. Khiến bóng lộn ngược vào trong.
[tabs][tab="Không có inset"]

[box="border: 2px solid blue; box-shadow: 5px 5px 2px 10px #00dd00"]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[/box]

[ob]box="border: 2px solid blue; box-shadow: 5px 5px 2px 10px #00dd00"[cb]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[ob]/box[cb]

[/tab]
[tab="Có inset"]

[box="border: 2px solid blue; box-shadow: 5px 5px 2px 10px #00dd00 inset"]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[/box]

[ob]box="border: 2px solid blue; box-shadow: 5px 5px 2px 10px #00dd00 inset"[cb]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[ob]/box[cb]

[/tab][/tabs][/indent]

[hs2]padding[/hs2]: Khoảng cách giữa viền và nội dung bên trong
[indent][cbox]padding: {x} {y} {z} {t};[/cbox]
- x: Khoảng cách giữa nội dung và viền trên, mặc định 0px.
- y: Khoảng cách giữa nội dung và viền phải, mặc định 0px.
- z: Khoảng cách giữa nội dung và viền dưới, mặc định 0px.
- t: Khoảng cách giữa nội dung và viền trái, mặc định 0px.

[box="border: 4px solid #0000ff; padding: 3px 7px 12px 18px"]Nội dung Nội dung Nội dung[/box]

[ob]box="border: 4px solid #0000ff; padding: 3px 7px 12px 18px"[cb]Nội dung Nội dung Nội dung[ob]/box[cb]

[/indent]

[hs2]margin[/hs2]: Khoảng cách giữa viền và nội dung bên ngoài
[indent][cbox]margin: {x} {y} {z} {t};[/cbox]
- x: Khoảng cách giữa nội dung và viền trên, mặc định 0px.
- y: Khoảng cách giữa nội dung và viền phải, mặc định 0px.
- z: Khoảng cách giữa nội dung và viền dưới, mặc định 0px.
- t: Khoảng cách giữa nội dung và viền trái, mặc định 0px.

[box="border: 2px solid"][box="border: 4px solid #0000ff; margin: 10px 15px 20px 25px"]Nội dung Nội dung Nội dung[/box][/box]

[ob]box="border: 4px solid #0000ff; margin: 10px 15px 20px 25px"[cb]Nội dung Nội dung Nội dung[ob]/box[cb]

[/indent]

[hs2]background-color[/hs2]: Đặt màu nền
[indent][cbox]background-color: {x};[/cbox]
- x: Màu nền, mặc định transparent (trong suốt).

[box="border: 2px solid"][box="background-color: #ddffdd"]Nội dung Nội dung Nội dung[/box][/box]

[ob]box="background-color: #ddffdd"[cb]Nội dung Nội dung Nội dung[ob]/box[cb]

[/indent]

[hs2]background-image[/hs2]: Đặt ảnh nền
[indent][cbox]background-color: url('{x}');[/cbox]
- x: Url ảnh dùng làm nền, mặc định none (không có).

[box="background-image: url('https://i.imgur.com/N3rkRSz.png')"]Nội dung Nội dung Nội dung[/box]

[ob]box="background-image: url('https://i.imgur.com/N3rkRSz.png')"[cb]Nội dung Nội dung Nội dung[ob]/box[cb]

[/indent]

[hs2]background-repeat[/hs2]: Lặp lại ảnh nền
[indent][cbox]background-color: {x};[/cbox]
- x: Cách thức lặp lại, mặc định repeat (lặp theo cả chiều dọc và ngang).
[indent]+ repeat: Ảnh lặp theo chiều ngang lẫn chiều dọc.
+ repeat-x: Ảnh chỉ lặp theo chiều ngang.
+ repeat-y: Ảnh chỉ lặp theo chiều dọc.[/indent]
[tabs][tab="repeat"]

[box="background-image: url('http://www.w3schools.com/images/tryitimg.gif'); background-repeat: repeat"]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[/box]

[ob]box="background-image: url('http://www.w3schools.com/images/tryitimg.gif'); background-repeat: repeat"[cb]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[ob]/box[cb]

[/tab]
[tab="repeat-x"]

[box="background-image: url('http://www.w3schools.com/images/tryitimg.gif'); background-repeat: repeat-x"]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[/box]

[ob]box="background-image: url('http://www.w3schools.com/images/tryitimg.gif'); background-repeat: repeat-x"[cb]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[ob]/box[cb]

[/tab]
[tab="repeat-y"]

[box="background-image: url('http://www.w3schools.com/images/tryitimg.gif'); background-repeat: repeat-y"]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[/box]

[ob]box="background-image: url('http://www.w3schools.com/images/tryitimg.gif'); background-repeat: repeat-y"[cb]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[ob]/box[cb]

[/tab][/tabs][/indent]

[hs2]background-attachment[/hs2]: Chọn kiểu hiển thị ảnh nền
[indent][cbox]background-attachment: {x};[/cbox]
- x: Kiểu hiển thị, mặc định scroll.
[indent]+ scroll: Ảnh nền di chuyển theo cửa sổ trình duyệt.
+ fixed: Ảnh nền cố định.[/indent]
[tabs][tab="scroll"]

[box="background-image: url('https://i.imgur.com/N3rkRSz.png'); background-attachment: scroll"]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[/box]

[ob]box="background-image: url('https://i.imgur.com/N3rkRSz.png'); background-attachment: scroll"[cb]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[ob]/box[cb]

[/tab]
[tab="fixed"]

[box="background-image: url('https://i.imgur.com/N3rkRSz.png'); background-attachment: fixed"]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[/box]

[ob]box="background-image: url('https://i.imgur.com/N3rkRSz.png'); background-attachment: fixed"[cb]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[ob]/box[cb]

[/tab][/tabs][/indent]

[hs2]overflow[/hs2]: Chọn cách xử lý khi tràn nội dung
[indent]Tràn nội dung xuất hiện khi thuộc tính width hoặc height được đặt. Ví dụ mình đặt height là 100px, width là 100px và nhập vào đó một nội dung vô cùng dài, lẽ hiển nhiên là cái box sẽ không chứa hết được đống nội dung đó và xuất hiện hiện tượng tràn nội dung.
[cbox]overflow: {x};[/cbox]
- x: Cách thức xử lý, mặc định visible.
[indent]+ visible: Nội dung tiếp tục tràn [s]như chưa hề có cuộc chia ly[/s].
+ hidden: Nội dung tràn sẽ bị cho ẩn.
+ scroll: Xuất hiện thanh cuộn, bất kể nội dung có tràn hay không.
+ auto: Xuất hiện thanh cuộn khi nội dung bị tràn.[/indent]
[tabs][tab="auto"]

[box="width: 125px; height: 100px; overflow: auto"]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[/box]

[ob]box="width: 125px; height: 100px; overflow: auto"[cb]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[ob]/box[cb]

[/tab]
[tab="visible"]

[box="width: 125px; height: 100px; overflow: visible"]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[/box]

[ob]box="width: 125px; height: 100px; overflow: visible"[cb]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[ob]/box[cb]

[/tab]
[tab="hidden"]

[box="width: 125px; height: 100px; overflow: hidden"]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[/box]

[ob]box="width: 125px; height: 100px; overflow: hidden"[cb]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[ob]/box[cb]

[/tab]
[tab="scroll"]

[box="width: 125px; height: 100px; overflow: scroll"]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[/box]

[ob]box="width: 125px; height: 100px; overflow: srcoll"[cb]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[ob]/box[cb]

[/tab][/tabs]
[/indent]

[id="display"][hs2]display[/hs2]: Quy định cách thức hiển thị[/id]
[indent][cbox]display: {x};[/cbox]
- x: Cách thức hiển thị, mặc định inline.
[indent]+ inline: Các box có thể nằm trên cùng một dòng, nhưng sẽ không tiếp nhận thông số width và height.
+ block: Mỗi box nằm trên một dòng riêng biệt.
+ inline-block: Các box có thể nằm trên cùng một dòng, và có thể tiếp nhận thông số width và height.
+ none: Box bị ẩn đi, không hiển thị gì cả.[/indent]
[tabs][tab="inline"]

[box="border: 2px solid black; display: inline"]Cho phép nằm cùng dòng[/box][box="border: 2px solid black; display: inline"]Cho phép nằm cùng dòng[/box]

[ob]box="border: 2px solid black; display: inline"[cb]Cho phép nằm cùng dòng[ob]/box[cb][ob]box="border: 2px solid black; display: inline"[cb]Cho phép nằm cùng dòng[ob]/box[cb]

[/tab]
[tab="block"]

[box="border: 2px solid black; display: block"]Phải nằm trên hai dòng riêng biệt[/box][box="border: 2px solid black; display: block"]Phải nằm trên hai dòng riêng biệt[/box]

[ob]box="border: 2px solid black; display: block"[cb]Phải nằm trên hai dòng riêng biệt[ob]/box[cb][ob]box="border: 2px solid black; display: block"[cb]Phải nằm trên hai dòng riêng biệt[ob]/box[cb]

[/tab]
[tab="inline-block"]

[box="border: 2px solid black; display: inline-block; width: 100px"]Nằm cùng dòng nhưng cho phép đặt width và height[/box][box="border: 2px solid black; display: inline-block; width: 100px"]Nằm cùng dòng nhưng cho phép đặt width và height[/box]

[ob]box="border: 2px solid black; display: inline-block; width: 100px"[cb]Nằm cùng dòng nhưng cho phép đặt width và height[ob]/box[cb][ob]box="border: 2px solid black; display: inline-block; width: 100px"[cb]Nằm cùng dòng nhưng cho phép đặt width và height[ob]/box[cb]

[/tab]
[tab="none"]

[box="border: 2px solid black; display: none"]Phải nằm trên hai dòng riêng biệt[/box]

[ob]box="border: 2px solid black; display: none"[cb] [ob]/box[cb]

[/tab][/tabs][/indent]

[hs2]float[/hs2]: Cho khả năng bay "lơ lửng" về một phía, và dồn toàn bộ nội dung bị nó chiếm chỗ về phía còn lại
[indent][cbox]float: {x};[/cbox]
- x: Hướng float, mặc định none.
[indent]+ none: Không bay
+ left: Bay lơ lửng bên trái.
+ right: Bay lơ lửng bên phải.[/indent]
[tabs][tab="none"]

[box="float: none; border: 1px solid black; margin: 2px; width: 100px; display: inline-block"]Nội dung nằm trong box được float[/box]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung

[ob]box="float: none; border: 1px solid black; margin: 2px; width: 100px; display: inline-block"[cb]Nội dung nằm trong box được float[/box]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[ob]/box[cb]

[/tab]
[tab="left"]

[box="float: left; border: 1px solid black; margin: 2px; width: 100px; display: inline-block"]Nội dung nằm trong box được float[/box]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung

[ob]box="float: left; border: 1px solid black; margin: 2px; width: 100px; display: inline-block"[cb]Nội dung nằm trong box được float[/box]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[ob]/box[cb]

[/tab]
[tab="right"]

[box="float: right; border: 1px solid black; margin: 2px; width: 100px; display: inline-block"]Nội dung nằm trong box được float[/box]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung

[ob]box="float: right; border: 1px solid black; margin: 2px; width: 100px; display: inline-block"[cb]Nội dung nằm trong box được float[/box]Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung[ob]/box[cb]

[/tab][/tabs][/indent]


[metabox][tablestyle="bbcode"]width: 100%[/tablestyle]
[tablestyle="bbcode td"]padding: 3px; vertical-align: top; width: 100%[/tablestyle]
[tablestyle="bbcode td#cl#nth-child(2)"]width: 65%; background-color: #ddeedd; font-family: monospace;[/tablestyle]
[tablestyle="bbcode td#cl#nth-child(1)"]width: 35%; background-color: #eeeedd[/tablestyle][/metabox]