Tuesday, 2. January 2007, 13:17:36
Mấy hôm trước có ngồi mò tới mò lui trong Main CSS của các theme có sẵn trong Opera thì phát hiện được 1 số cách thay đổi những chi tiết nho nhỏ, ko biết cộng động Opera Blog Việt Nam có những bài viết như thế này ko nhưng tui cũng xin "mạn phép" trình bày. Ai là dân chuyên nghiệp về CSS nếu thấy những gì tôi nói chưa đúng xin hãy góp ý 1 cách nhiệt tình. Tui ko dám múa rìu wa mắt thợ đâu, vì tôi có học wa một trường lớp CSS nào đâu.
Đầu tiên, chúng ta hãy tìm đoạn Code viết về các đường link dẫn trong các bài Blog Entry của chúng ta.
Đây là đoạn code của blog tôi:
a:link, a:active {
color:#3300ff;
text-decoration:none;
}
a:visited {
color:#3300ff;
text-decoration:none;
}
a:hover {
text-decoration:underline;
color:#3300ff;
}Hoặc chúng ta có thể vào _http://my.opera.com/community/css/users/
3/main.css, bấm Ctrl+F của trình duyệt và đánh vào các chữ như: a:link, a:hover, a:visited...thì sẽ thấy code gốc của chúng, vì có thể khi copy dòng code này vào paste vào CSS Page của bạn thì nó sẽ ko họat động. Trong đó tôi tô đỏ số 3 tức là còn những theme khác tương ứng với các số 1,2,4,v.v...
Bây giờ, chúng ta hãy nhìn vào các từ tôi to màu xanh lá. Ở đây chắc mọi người cũng hiểu nó. Nhưng tôi cũng xin giải nghĩa nó luôn (theo tôi á nhá

).
_LINK ở đây là hiệu ứng link khi link chưa "bị" chúng ta "đụng chạm" gì tới nó. Tức là các link mà mọi người thấy khi chưa đụng hoặc Click vào link đó.
_ACTIVE là hiệu ứng link khi click lên link nhưng không thả chuột. Tôi thì gộp chung nó vào lệnh A:LINK luôn.
_Visited là hiệu ứng link khi đường link đã "bị" bạn click vào nó và khi bạn quay lại thì nó sẽ...sẽ ra sao thì còn tùy thuộc vào cách chỉnh sữa vào chủ Blog, có thể sẽ như khi chưa click hoặc sẽ khác ban đầu.
_HOVER ở đây là trạng thái của link khi chúng ta trỏ chuột vào các đường link đó.
Trong { } của mỗi Menu (tạm gọi là Menu vậy) chúng ta có thể thay đổi các thông số của nó hoặc thêm bớt gì đó là tùy ý chúng ta. Theo tôi thì mặc định của Opera thì đã ổn rồi, chúng ta chỉ cần trang trí màu của nó và 1 số hiệu ứng nhỏ khác cho phù hợp với các skin mới của mình. Vì đôi khi chúng ta sau lúc thay skin bằng cách dùng chung theme có sẵn thì sẽ xảy ra chuyện màu link và màu BackGround chủ đạo Skin gần như trùng nhau và dẫn đến việc mất thẩm mỹ hoặc khó thấy link cho blog.
Trong đoạn Code trên của tui gồm có 2 lệnh (tạm gọi là lệnh luôn vì vồn từ ngũ tin học của tôi kém wé T_T) là color và text-decoration.
_Color chỉ thị màu của link
_Text-decoration gồm có các thuộc tính như: line-through (gạch ngang dòng chữ), inherit (chả biết là cái gì), blink (Nhấp nháy - không có tác dụng trên IE), overline (gạch trên đoạn chữ), underline (gạch dưới đoạn chữ) và none (ko có gì). Nếu dùng kết hợp như A:hover {text-decoration: overline underline;}
Ngoài ra, chúng ta có thể thêm vào 1 số lệnh khác vào như: background (nền), font-size (kích cỡ chữ), fone-weight (kiểu chữ như in đậm, nghiêng hoặc gách dưới),v.v...còn 1 số những lệnh khác mà chắc tôi chưa biết. Bạn có thể lấy từ main CSS tôi đưa link ở trên và từ mò mẫm.
Các đoạn code này cũng có tác dụng vào chữ Edit Post mà chỉ mình chúng ta mới chỉ có thể nhìn thấy.
Tiếp theo, bài viết của tôi xin đề cập tới các đoạn Code về cách trang trí nút "Comment". Khi chúng ta đọc xong bài viết trên topsite và muốn comment cho bài viết ấy thì chúng ta sẽ click vào "Comment" để viết. Ở đây tôi đang đề cập tới cái "Comment" đó.
.postcomments a:visited {
color:#f5f6f9;
}
.postcomments a:link {
color:#fff;
}
.postcomments a:hover {
color:#66ffff;
}Thực ra, đoạn code này cũng tương tự, nó chỉ thêm vào chữ .postcomments (thêm s vào cuối chữ) mà thôi. Các lệnh trong dấu { } thì cũng tương tự, của tôi chỉ gồm có Color, bạn có thể thêm vào những lệnh khác như background, text-decoration,v.v... bằng cách cứ sau dấu ";" bạn nhớ đánh dấu cách và bắt đầu viết lệnh mình muốn vào.
Ví dụ:
.postcomments a:link {
color:#fff; background:#000;
}Chúng ta cũng hãy để dấu ";" ở cuối câu lệnh cuối cùng mặc dù ko để cũng ko ảnh hưởng gì. Vì có lẽ ko để ";" 1 lúc nào đó chúng ta wên và chẳng hiểu tại sao lệnh nó ko xuất hiện.
Ngoài ra, tôi cũng đã "khám phá" ra cách thay đổi các trang trí của khung CODE trong Entry Blog (bài post của chúng ta ý) bằng đoạn code sau đây (chỗ này hình như nhớ là đọc bài tương tự của chị Thủy Hiền thì phải):
code,pre {
display: block;
padding:10px 6px;
margin:0 0 10px 0;
border: 1px dashed #aaa;
background:#000;
overflow: auto;
}Để trang trí, chúng ta hãy để ý vào các lệnh như (theo tôi nghĩ): background. Trong đoạn code này chúng ta ko thấy lệnh Color hay 1 số thứ khác vì đây là Code blog tui. Do đó, chúng ta hãy thêm vào như Color, Font-weight,... nếu chúng ta thích.
Cuối cùng xin nhắc lại với lại với mọi người là: Nếu các đoạn Code trên khi copy nó ko "chịu" thì chúng ta hãy tìm trong Main CSS tôi gửi link trên và nhấn Ctrl+F để tìm nhá...Tìm xong nhớ copy nguyên bản rồi cho vào CSS page há.
Lời nhắn cuối đến các Pro: Có gì thì xin các anh chị chỉ bảo góp ý, tận tình...Thanks vì đã xem bài viết nho nhỏ này.
Đóng dấu bởi Xuân Bách...