Các code css hay dùng cho bài viết

Viết bài trong ô soạn thảo thì khá dễ dàng để tạo ra 1 bài post, nhưng để trình bày bắt mắt và cho màu mè tý xiu đồng thời khi chèn một số nội dung đặc biệt như bảng, tạo khung, ... thì bắt buộc phải sử dụng code, khi đó ta phải chuyển qua thẻ HTML để bỏ code vào. Sưu tầm được bài tổng hợp các code css hay dùng bỏ lên đây để tiện tra cứu.

Mục lục:

• Font, màu chữ, thụt vào đầu dòng
• Canh giữa, canh phải
• Dấu + đánh số đầu dòng cho danh sách (list)
• Link chuyển đến vị trí khác trong bài viết
• Chèn Flash vào bài viết
• Chèn hình ảnh vào bài viết
• Chèn link liên kết vào bài viết
• Chèn ảnh chứa link
• Tạo button ẩn hiện nội dung
• Chèn nhạc vào bài viết
• Chèn bảng trong bài viết
• Viền khung một nội dung trong bài viết
• Ảnh rõ hơn khi rê chuột vào
• Tạo hiệu ứng hiện ảnh khác khi rê chuột vào ảnh
• Tạo hiệu ứng khi rê chuột vào link liên kết
• Tạo bóng đổ và bo tròn 4 góc viền

1. Font, màu chữ, thụt vào đầu dòng:

(Dùng dòng 1 hay 2 đều như nhau)

<span style="color:#343434; font:12pt Tahoma; margin-left:12px;">Nội_dung</span>

<span style="color:#343434; font-family:Tahoma; font-size:12pt; margin-left:12px;">Nội_dung</span>

Trong đó: #339966 - Mã màu cho chữ
12pt Tahoma - Cỡ chữ và font chữ
margin-left:12px - Khoảng cách chữ thụt vào đầu dòng

2. Canh giữa, canh phải:

<div style="text-align:center;">Nội_dung</div>

center: Thay center = right canh phải

3. Dấu + đánh số đầu dòng cho danh sách (list):

a. Đánh dấu đầu dòng:

<ul>
<li> Nội_dung1 </li>
<li> Nội_dung2 </li>
<li> Nội_dung3 </li>
</ul>

Tùy biến: Mặc định là dấu tròn đặc, có thể thay dấu khác như dấu tròn rỗng: circle; hay dấu vuông: square. Code như sau:

<ul style="list-style-type: circle;">
<li> Nội_dung1 </li>
<li> Nội_dung2 </li>
<li> Nội_dung3 </li>
</ul>

b. Đánh số đầu dòng:

<ol>
<li> Nội_dung1 </li>
<li> Nội_dung2 </li>
<li> Nội_dung3 </li>
</ol>

Tùy biến: Mặc định là sô thập phân, có thể thay kiểu khác như:

• upper-roman: chữ số La mã (I, II, III, IV, V,...)
• lower-roman: chữ số La mã thường (i, ii, iii, iv, v,...)
• decimal-leading-zero: số thập phân có số 0 ở trước (01, 02, 03,...)
• lower-latin: bằng chữ cái (a, b, c, d, e,...)
• upper-latin: bằng chữ cái in hoa (A, B, C, D, E,...)

Code như sau:

<ol style="list-style-type: upper-roman;">
<li> Nội_dung1 </li>
<li> Nội_dung2 </li>
<li> Nội_dung3 </li>
</ol>

4. Chèn Flash vào bài viết:

(Chọn loại 1 hay 2 đều được)

1.
<div style="text-align:center;"><embed wmode=Transparent pluginspage="http://www.macromedia.com/go/getflashplayer" src="LINK_FLASH" width="900" height="300"
type="application/x-shockwave-flash" scale="" play="true" loop="true"
menu="true"></embed></div>
2.
<embed src="LINK_FLASH" bgcolor="#000000" type="application/x-shockwave-flash" allowscriptaccess="none"  width="400" height="400"></embed>

5. Chèn hình ảnh vào bài viết:

1. Code đơn giản:
<img src="LINK_ẢNH" title="Ghi_chú" alt="Mô_tả"/>

2. Code mở rộng:
<img src="LINK_ẢNH" title="Ghi_chú" alt="Mô_tả" align="bottom" width="400" height="400"/>

6. Chèn link liên kết vào bài viết:

<a href="LINK" target="blank">Tên_Link</a>

• Lệnh target="blank": Mở link liên kết trong một trang mới. Bỏ lệnh này thì trang mới sẽ được mở ngay tại trang đang dùng.
• Ngoài ra, để bỏ khung lấm chấm quanh link khi click vào ta có thể cho lệnh onfocus="blur();" vào:

<a onfocus="blur();" href="LINK" target="blank">Tên_Link</a>

7. Chèn ảnh chứa link:

<a href="LINK" target="blank"><img src="LINK_ẢNH"/></a>

8. Chèn nhạc vào bài viết:

<object name='hat' width=300 height=45>
<embed  type='application/x-mplayer2'
 pluginspage='http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/'
 controls='controlpanel' width=300 height=45 src='LINK_NHẠC'
 autostart="0" showstatusbar="0" ShowControls='true' loop='0' name='hat'></embed></object>

Trong đó:

LINK_NHẠC: Phải là link trực tiếp (VD: http://...bài_hát.mp3)
loop='0': Không lặp lại
loop='1': Lặp lại một lần
loop='-1': Lặp lại mãi mãi
autostart="0": Không tự play
autostart="1": Play ngay khi web tải xong

9. Ảnh rõ hơn khi rê chuột vào:

1. Ảnh có chứa link:
<a href="link_liên_kết" target="blank">
<img
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60" style="opacity:0.6;filter:alpha(opacity=60)" src="LINK_HÌNH"/>
</a>

2. Ảnh không chứa link:
<img
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60" style="opacity:0.6;filter:alpha(opacity=60)" src="LINK_HÌNH"/>

* opacity=0.6 và opacity=60: Ảnh mờ trước khi rê chuột vào.
* Lưu ý: Nếu thay đổi độ mờ thì phải thay đổi cả 4 giá trị.

10. Tạo hiệu ứng hiện ảnh khác khi rê chuột vào ảnh:

1. Ảnh có chứa link:
<a href="link_liên_kết" target="blank"><img onmouseover="this.src='LINK_HÌNH_THAY_THẾ'" onmouseout="this.src='LINK_HÌNH'" src="LINK_HÌNH" ></a>

2. Ảnh không chứa link:
<img onmouseover="this.src='LINK_HÌNH_THAY_THẾ'" onmouseout="this.src='LINK_HÌNH'" src="LINK_HÌNH" >

11. Tạo hiệu ứng khi rê chuột vào link liên kết:

<a href="LINK"  target="blank" onmouseover="oldColor=this.style.backgroundColor;this.style.backgroundColor='#eee';" onmouseout="this.style.backgroundColor=oldColor;">NAME_LINK</a>

LINK: Link liên kết
#eee: Mã màu khi rê chuột lên
NAME_LINK: Tên gán cho link liên kết

12. 4. Tạo bóng đổ và bo tròn 4 góc viền:

* Tạo bóng đổ:
box-shadow: 8px 8px 8px #616D7E;
-webkit-box-shadow: 8px 8px 8px #616D7E;
-moz-box-shadow: 8px 8px 8px #616D7E;

* Tạo bóng đổ 4 cạnh:
box-shadow: 0px 0px 8px #616D7E;
-webkit-box-shadow: 0px 0px 8px #616D7E;
-moz-box-shadow: 0px 0px 8px #616D7E;

* Bo tròn 4 góc viền:
border-radius:4px;

*Bo tròn tùy chọn: top, right, bottom, left:
border-radius:4px 4px 4px 4px; 

Thay box thành text cho chữ