Căn bản về CSS

một trang web nào khác như là 
nhothuong.html và cấu trúc luôn bắt đầu bằng và kết thúc href="/trung-
tam-tin-hoc/ là dùng để link đến trang web mà bạn muốn tới." Còn class="tree" là 
dùng để khai báo tên của class đó. 
Đây cũng là đoạn code cũng có tác dụng như trên 
<a href="/trung-tam-tin-hoc/index2.html" 
class="dog">Index2 
Và sau đây là những đoạn code, bạn có thể trang trí thêm làm để xung thêm chức 
năng của nó. 
<STYLE 
TYPE="text/css"> a:link { color: green; text-
decoration: none } 
a:active { color: yellow; text-decoration: none } 
a:visited { color: 
green; text-decoration: none } a:hover { color: green; 
text-decoration: 
underline; background: #F9EDED } 
<STYLE 
TYPE="text/css"> a.link { color: green; text-
decoration: none } 
a.active { color: yellow; text-decoration: none } 
a:visited { color: 
green; text-decoration: none } a.hover { color: orange; 
text-decoration: underline; font-family : Verdana, 
Arial, Helvetica, 
sans-serif; } 
a.link { color: green; text-decoration: none } a.active 
{ color: 
yellow; text-decoration: none } a:visited { color: 
green; 
text-decoration: none } a.hover { color: orange; text-
decoration: 
underline; font-size:40pt } 
<STYLE 
TYPE="text/css"> a.link { color: green; text-
decoration: none } 
a.active { color: yellow; text-decoration: none } 
a:visited { color: 
green; text-decoration: none } a.hover { color: orange; 
text-decoration: underline; font-weight: bold} 
<STYLE 
TYPE="text/css"> a.italic:link { color: green; text-
decoration: none 
} a.italic:active { color: yellow; text-decoration: 
none } 
a:italic:visited { color: green; text-decoration: none 
} a.italic:hover 
{ color: orange; text-decoration: underline; font-
style: italic} 
 Bạn muốn đưa con trỏ của bạn vào CSS chỉ cần dùng dòng sau 
CURSOR: url(tencontro.ani); 
Tiếp theo sau chúng ta tìm hiểu về scroll bar trong CSS 
ví dụ đoạn code sau: 
 <STYLE 
TYPE="text/css"> BODY { scrollbar-base-color: orange; 
scrollbar-arrow-color: green; scrollbar-DarkShadow-
Color: blue; } 
scrollbar-base-color: orange; là hiển thị màu cam, cho nguyên thanh bar từ trên 
xuống dưới 
scrollbar-arrow-color: green; là hiển thị màu xanh, cho 2 cái mũi tên lên và xuống 
scrollbar-DarkShadow-Color: blue; là hiện thị bóng màu xanh của thanh scroll 
scrollbar-base-color: là hình để hiển thị toàn bộ màu của thanh scroll 
scrollbar-Face-Color: là để hiển thị màu trên bề mặt của thanh scroll 
scrollbar-Highlight-Color: là để hiện thì màu hightlight của thanh scroll 
Bài viết về các tùy biến trong giao diện ( rất tốt cho bạn nào muốn thay đổi màu 
sắc của skin forum ) 
Chèn ảnh nền vào phần nhập nội dung bài viết: 
Vào Style & Templates/ Manager Style/ Main CSS 
Tại phần Soạn thảo WYSIWYG ta thay phần màu nền background thành 
#F5F5FF url(images/misc/anhnen_text_box.gif) no-repeat 
center 
Trong đó tên "anhnen_text_box.gif" là tên ảnh mà bạn muốn chèn đặt tại thư mục 
images/misc/ 
Thế thui 
Làm viền cho nút 
Ta tới phần Nút (Button) 
Thay vào giá trị màu nền là: #E4E7F5 
Thêm vào ô thuộc tính CSS đặc biệt (phía bên phải của ô màu nền ấy): 
 BORDER-RIGHT: #5182c2 1px dotted; 
 BORDER-TOP: #5182c2 1px dotted; 
 BORDER-LEFT: #5182c2 1px dotted; 
 BORDER-BOTTOM: #5182c2 1px dotted; 
Trong đó tên "anhnen_text_box.gif" là tên ảnh mà bạn muốn chèn đặt tại thư mục 
images/misc/ 
Thế thui 
Làm viền cho nút 
Ta tới phần Nút (Button) 
Thay vào giá trị màu nền là: #E4E7F5 
Thêm vào ô thuộc tính CSS đặc biệt (phía bên phải của ô màu nền ấy): 
BORDER-RIGHT: #5182c2 1px dotted; 
BORDER-TOP: #5182c2 1px dotted; 
BORDER-LEFT: #5182c2 1px dotted; 
BORDER-BOTTOM: #5182c2 1px dotted; 
Sau đó bạn có thể thay các thuộc tính như: 
màu sắc viền (#5182c2) 
Độ dày viền : 1px dotted 
Chèn ảnh nền vào thẻ Body của trang chủ. Cái này nếu biết cách sử dụng thì sẽ rất 
hữu ích 
Tại phần Trang nền (Background page) ngay bên dưới phần Body đó ta nhập thuộc 
tính vào ô màu nền như sau: 
 #FFFFFF url(images/misc/dot.gif) 
Sau đó bạn có thể thay các thuộc tính như: 
màu sắc viền (#5182c2) 
Độ dày viền : 1px dotted 
Chèn ảnh nền vào thẻ Body của trang chủ. Cái này nếu biết cách sử dụng thì sẽ rất 
hữu ích 
Tại phần Trang nền (Background page) ngay bên dưới phần Body đó ta nhập thuộc 
tính vào ô màu nền như sau: 
 #FFFFFF url(images/misc/dot.gif) 
Trong đó tên ảnh là "dot.gif" đặt trong thư mục "images/misc/" 
Category Strips 
'Category Strips' được dùng với hai mục đích. Nó được dùng để chỉ ra một 'Chuyên 
mục' diễn đàn, và nó cũng được sử dụng như một kiểu giao diện cho nội dung 
thanh tiêu đề của hầu hết các bảng. 
Nếu ta muốn chèn ảnh vào phần thanh tiêu đề của "Chuyên mục" thì ta nhập vào ô 
màu nền như sau: 
#FFFFFF url(images/misc/table_header_bg.gif) repeat-x 
top left 
 Trong đó #FFFFFF (màu trắng) là màu nền còn ảnh nền thì các bạn cũng đã hiểu 
với phần trên. 
Lưu ý rằng các bạn phải chú trọng cả đến màu ảnh nền và màu Font. Để cho 2 cái 
có độ tương phản cho dễ đọc 
Màu đầu tiên (First color) và màu thứ hai (Second color) 
Mô tả: 
Hầu hết các bảng trong diễn đàn dùng màu đầu tiên hoặc thứ hai cho màu nền. Đặt 
thuộc tính để sử dụng 'Màu đầu tiên' tại đây. 
Màu đầu tiên là màu nền của phần nội dung bài viết khi bạn xem chủ đề 
Màu thứ hai là màu nền của phần có chứa tên sử dụng, Avatar, danh hiệu... của 
người viết bài 
Các bạn nên sửa cho phù hợp với tông màu của màu nền diễn đàn một cách hài 
hoà. 
Sau đây là thiết lập giao diện của tôi đã thực hiện. Tôi cho rằng giao diện này sửa 
thêm một vài chi tiết nữa thì chẳng kém giao diện của anh Admin bên này. Chú ý 
rằng giao diện đẹp thì phải đi đôi với bộ nút đẹp. Các bạn nên sắm cho mình một 
bộ nút ăn ý với giao diện. Còn bây giờ đây là phần giao diện của tôi: 
Body 
Giữ nguyên thiết lập gốc 
---------- 
Trang nền (Background page) 
Màu nền: #FFFFFF url(images/misc/dot.gif) 
Màu Font: #000000 
------------------------------ 
, , , 
Giữ nguyên thiết lập gốc 
------------------------- 
Viền bảng 
Giữ nguyên thiết lập gốc 
------------------------------- 
Category Strips 
Màu nền: #FFFFFF url(images/misc/tm.gif) no-repeat center 
Màu Font: #003366 
Liên kết CSS bình thường 
Màu nền: transparent 
Màu Font: #003366 
Text decoration: None 
Liên kết CSS đã vào: 
Màu nền: transparent 
Màu Font: #666666 
Text decoration: None 
Liên kết CSS Hover 
Màu nền: transparent 
Màu Font: #006699 
Text decoration: underline 
----------------------------------------- 
Table Header 
Màu nền: #FFFFFF url(images/misc/table_header_bg.gif) repeat-x top left 
Màu Font: #003366 
Liên kết CSS bình thường 
Màu nền: transparent 
Màu Font: #003366 
Text decoration: None 
Liên kết CSS đã vào: 
Màu nền: transparent 
Màu Font: #666666 
Text decoration: None 
Liên kết CSS Hover 
Màu nền: transparent 
Màu Font: #006699 
Text decoration: underline 
-------------------------------------- 
Table Footer 
Màu nền: #FFFFFF 
Màu Font: #003366 
Liên kết CSS bình thường 
Màu nền: transparent 
Màu Font: #003366 
Text decoration: None 
Liên kết CSS đã vào: 
Màu nền: transparent 
Màu Font: #666666 
Text decoration: None 
Liên kết CSS Hover 
Màu nền: transparent 
Màu Font: #006699 
Text decoration: underline 
---------------------------------- 
Màu đầu tiên Màu thứ hai 
Màu nền: #FFFFFF 
Màu Font: #003366 
Thuộc tính CSS đặc biệt: 
border: 1px solid #E5E5E5; 
---------------------------------- 
Soạn thảo WYSIWYG 
Màu nền: #F5F5FF url(images/misc/anhnen_text_box.gif) no-repeat center 
Màu Font: #003366 
Thuộc tính CSS đặc biệt: 
BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted; 
BORDER-LEFT: #5182c2 1px dotted; BORDER-BOTTOM: #5182c2 1px dotted; 
------------------------- 
Ô nhập liệu 
Thuộc tính CSS đặc biệt: 
BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted; 
BORDER-LEFT: #5182c2 1px dotted; BORDER-BOTTOM: #5182c2 1px dotted; 
---------------------------------- 
Nút (Button) 
Màu nền: #E4E7F5 
Thuộc tính CSS đặc biệt: 
BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted; 
BORDER-LEFT: #5182c2 1px dotted; BORDER-BOTTOM: #5182c2 1px dotted; 
------------------------------------ 
Menu 
Small Font 
Time Color 
Được giữ nguyên thiết lập gốc 
------------------------------------- 
Navbar Text 
Màu nền: #FFFFFF 
Màu Font: #003366 
------------------------------------- 
Highlighted Font 
Màu nền: #FFFFFF 
Màu Font: #FF0000 
------------------------------------ 
Panel Surround 
Màu nền: #D5D8E5 url(images/gradients/gradient_panelsurround.gif) repeat-x top 
left 
Màu font: #000000 
--------------------------------- 
Panel (Forms) 
Màu nền: #E4E7F5 url(images/gradients/gradient_panel.gif) repeat-x top left 
Màu font: #000000 
-------------------------------- 
Giữ nguyên 
-------------------------------- 
Điều khiển menu Popup 
Màu nền: #FFFFFF 
Màu Font: #003366 
Thuộc tính CSS đặc biệt: 
padding: 3px 6px 3px 6px; 
white-space: nowrap; 
Liên kết CSS bình thường 
Màu nền: #FFFFFF 
Màu Font: #003366 
Text decoration: None 
Liên kết CSS đã vào: 
Màu nền: #FFFFFF 
Màu Font: #666666 
Text decoration: None 
Liên kết CSS Hover 
Màu nền: #FFFFFF 
Màu Font: #006699 
Text decoration: underline 
------------------------------- 
Popup Menu Body 
Giữ nguyên 
------------------------------- 
Tùy chọn dòng cho Menu Popup 
Màu nền: #FFFFFF 
Màu Font: #000000 
Thuộc tính CSS đặc biệt 
white-space: nowrap; 
cursor: pointer; 
Liên kết CSS bình thường 
Màu nền: #FFFFFF 
Màu Font: #22229C 
Text decoration: None 
Liên kết CSS đã vào: 
Màu nền: #FFFFFF 
Màu Font: #22229C 
Text decoration: None 
Liên kết CSS Hover 
Màu nền: #FFFFFF 
Màu Font: #FFFFFF 
Text decoration: None 
--------------------------------- 
Menu chuyển nhanh 
Item selected 
Màu nền:#FFFFFF 
Màu Font: #003366 
--------------------------------- 
Sưu tầm