Trang Chính
Bạn luôn muốn blog mình thật đẹp, thật ấn
tượng. Bạn say mê chỉnh sửa CSS, bạn chăm chỉ tích hợp nhiều hiệu ứng
vào blog. Rồi đến một hôm bạn bắt gặp câu báo lỗi của Plus [You must be registered and logged in to see this link.]
Làm sao đây khi mà bạn muốn thêm hiệu ứng mới vào blog mà cũng không muốn bỏ các code cũ đi. Thật là nan giải. [You must be registered and logged in to see this link.]
Nhưng olympia có hướng giải quyết cho bạn : Rút gọn code. [You must be registered and logged in to see this link.] Nghe thế bạn sẽ thắc mắc code thì có sẵn rồi làm sao mà rút gọn được, rút gọn thì code làm sao còn có tác dụng được nữa. [You must be registered and logged in to see this link.] Câu trả lời là ta hoàn toàn có thể rút gọn code mà vẫn giữ nguyên tác dụng ban đầu. [You must be registered and logged in to see this link.] Ta cùng xem qua các kiểu rút gọn mà olympia đang áp dụng nhé : [You must be registered and logged in to see this link.]
Ví dụ nếu bạn có code như sau :
#blast .rc div {background:transparent;}
#blast .rc {background:transparent;}
#blast .rc_bd div.rc_bc {background:transparent ;}
#blast .rc_bd {background:transparent ;}
#blast .rc_ft {background:transparent ;}
#blast .rc_ft div {background:transparent ;}
thì bạn có thể rút gọn nó thành:
#blast .rc div, #blast .rc, #blast .rc_bd div.rc_bc, #blast .rc_bd, #blast .rc_ft, #blast .rc_ft div {background:transparent ;}
Tác dụng của code cũ không hề bị thay đổi mà
code lại ngắn hơn. Để sử dụng cách này bạn chỉ cần gôm các phần cùng
tính chất lại rồi viết liên tiếp phân tách nhau bởi dấu ",". Tương tự
cho một ví dụ khác:
.privacy, #introduction_profile p, #footer .ft
.rights, .mod-alist-folderbar , .tag_content , #article_list_module
.mod-alist-tagsbar em, .total , #comment_new strong, #article_new a,
#subscribe_highlight a, #folder a, #photo_highlight a,
#mod-tagged-frd-article a, #update_date .date, #guestbook_entries a,
#calendar td, #comments-listing * ins , .mod-relatives .bd li a ,
.mod-relatives .info {color:#F0F;}
Lấy blog olympia làm ví dụ, đây là bảng có sẵn của Plus được chỉnh sửa lại :
[You must be registered and logged in to see this link.]
Màu chủ đạo là màu #0000FF. Khi để bảng như
thế, phần lớn các màu chữ thanh tiêu đề sẽ là màu #0000FF. Nhờ thế khi
dùng code áp dụng màu cho blog thì code đã được giảm bớt so với không
dùng bảng có sẵn
#article_list_module a, #subscribe_highlight
p, #calendar .hd, #calendar .hd .titlebar .bd a, #comment_container *
.content, #mod-tagged-frd-article ins a, #footer .ft .info a
{color:#0000FF;}
Ngoài ra bạn cũng nên chọn một hay hai màu chủ
đạo cho blog để khi sử dụng code áp dụng màu chữ cho các thành phần sẽ
tiết kiệm hơn. Ví dụ code áp dụng màu các phần của olympia gồm hai màu
#0000FF (màu xanh dương đậm) và #FF00FF (màu hồng).
.privacy, #introduction_profile p, #footer .ft
.rights, .mod-alist-folderbar , .tag_content , #article_list_module
.mod-alist-tagsbar em, .total , #comment_new strong, #article_new a,
#subscribe_highlight a, #folder a, #photo_highlight a,
#mod-tagged-frd-article a, #update_date .date, #guestbook_entries a,
#calendar td, #comments-listing * ins , .mod-relatives .bd li a ,
.mod-relatives .info {color:#F0F;}
#article_list_module a, #subscribe_highlight
p, #calendar .hd, #calendar .hd .titlebar .bd a, #comment_container *
.content, #mod-tagged-frd-article ins a, #footer .ft .info a
{color:#00F;}
Ví dụ đây là code trang trí khung tìm kiếm ở module bài viết
.mod-alist-searchbox input.ipt
{background:transparent
url(https://2img.net/h/i118.photobucket.com/albums/o93/olympia41124/Yahoo_360plus/Hover/2.gif);border-top-color:#0000FF;border-left-color:#0000FF;border-right-color:#0000FF;border-bottom-color:#0000FF;}
có thể viết rút gọn lại thành
.mod-alist-searchbox input.ipt
{background:transparent
url(https://2img.net/h/i118.photobucket.com/albums/o93/olympia41124/Yahoo_360plus/Hover/2.gif);border-color:#0000FF;}
Plus hiện giờ trong các code chia sẻ phần lớn sử dụng màu sắc dạng hex,
ví dụ #FFFFFF(6 chữ số, ký tự). Có một cách rút gọn #FFFFFF có thể viết
#FFF, hoặc #CC0066 viết thành #C06. Có nghĩa là chia 6 số, ký tự đó
thành 3 nhóm từng 2 ký tự một, nếu cả 3 nhòm đó đều là từng nhóm hai số
hay ký tự giống nhau ta có thể rút gọn được. #AAFF00 có thể rút gọn
thành #AF0, nhưng #BC00DD không thể rút gọn được.
Ngoài ra các bạn cũng nên chú ý đến độ dài code CSS của mình và tiết kiệm dần dần. [You must be registered and logged in to see this link.]
Trước hết bạn copy code CSS vào word rồi chọn trên thanh menu tool
>>> Word count. Bạn xem dòng Characters (no space) nhé, khoảng
trên dưới 17000 là code bạn gần full rồi đó [You must be registered and logged in to see this link.]
Đó là một số cách rút gọn mà olympia biết và áp dụng. [You must be registered and logged in to see this link.]
Còn một số cách rút gọn nữa nhưng hoặc là code chia sẻ trên Plus đã rút
gọn sẵn (như code background), hoặc là việc trang trí không cần thiết
dùng đến. [You must be registered and logged in to see this link.] Mong rằng bài viết này giúp ích nhiều cho các bạn. [You must be registered and logged in to see this link.]
Bản quyền bài viết thuộc về [You must be registered and logged in to see this link.]
tượng. Bạn say mê chỉnh sửa CSS, bạn chăm chỉ tích hợp nhiều hiệu ứng
vào blog. Rồi đến một hôm bạn bắt gặp câu báo lỗi của Plus [You must be registered and logged in to see this link.]
Làm sao đây khi mà bạn muốn thêm hiệu ứng mới vào blog mà cũng không muốn bỏ các code cũ đi. Thật là nan giải. [You must be registered and logged in to see this link.]
Nhưng olympia có hướng giải quyết cho bạn : Rút gọn code. [You must be registered and logged in to see this link.] Nghe thế bạn sẽ thắc mắc code thì có sẵn rồi làm sao mà rút gọn được, rút gọn thì code làm sao còn có tác dụng được nữa. [You must be registered and logged in to see this link.] Câu trả lời là ta hoàn toàn có thể rút gọn code mà vẫn giữ nguyên tác dụng ban đầu. [You must be registered and logged in to see this link.] Ta cùng xem qua các kiểu rút gọn mà olympia đang áp dụng nhé : [You must be registered and logged in to see this link.]
- Rút gọn các thành phần giống nhau về tính chất:
Ví dụ nếu bạn có code như sau :
#blast .rc div {background:transparent;}
#blast .rc {background:transparent;}
#blast .rc_bd div.rc_bc {background:transparent ;}
#blast .rc_bd {background:transparent ;}
#blast .rc_ft {background:transparent ;}
#blast .rc_ft div {background:transparent ;}
thì bạn có thể rút gọn nó thành:
#blast .rc div, #blast .rc, #blast .rc_bd div.rc_bc, #blast .rc_bd, #blast .rc_ft, #blast .rc_ft div {background:transparent ;}
Tác dụng của code cũ không hề bị thay đổi mà
code lại ngắn hơn. Để sử dụng cách này bạn chỉ cần gôm các phần cùng
tính chất lại rồi viết liên tiếp phân tách nhau bởi dấu ",". Tương tự
cho một ví dụ khác:
.privacy, #introduction_profile p, #footer .ft
.rights, .mod-alist-folderbar , .tag_content , #article_list_module
.mod-alist-tagsbar em, .total , #comment_new strong, #article_new a,
#subscribe_highlight a, #folder a, #photo_highlight a,
#mod-tagged-frd-article a, #update_date .date, #guestbook_entries a,
#calendar td, #comments-listing * ins , .mod-relatives .bd li a ,
.mod-relatives .info {color:#F0F;}
- Chọn những màu sắc chủ đạo cho blog để tiết kiệm code, tận dụng triệt để bảng có sẵn của Plus
Lấy blog olympia làm ví dụ, đây là bảng có sẵn của Plus được chỉnh sửa lại :
[You must be registered and logged in to see this link.]
Màu chủ đạo là màu #0000FF. Khi để bảng như
thế, phần lớn các màu chữ thanh tiêu đề sẽ là màu #0000FF. Nhờ thế khi
dùng code áp dụng màu cho blog thì code đã được giảm bớt so với không
dùng bảng có sẵn
#article_list_module a, #subscribe_highlight
p, #calendar .hd, #calendar .hd .titlebar .bd a, #comment_container *
.content, #mod-tagged-frd-article ins a, #footer .ft .info a
{color:#0000FF;}
Ngoài ra bạn cũng nên chọn một hay hai màu chủ
đạo cho blog để khi sử dụng code áp dụng màu chữ cho các thành phần sẽ
tiết kiệm hơn. Ví dụ code áp dụng màu các phần của olympia gồm hai màu
#0000FF (màu xanh dương đậm) và #FF00FF (màu hồng).
.privacy, #introduction_profile p, #footer .ft
.rights, .mod-alist-folderbar , .tag_content , #article_list_module
.mod-alist-tagsbar em, .total , #comment_new strong, #article_new a,
#subscribe_highlight a, #folder a, #photo_highlight a,
#mod-tagged-frd-article a, #update_date .date, #guestbook_entries a,
#calendar td, #comments-listing * ins , .mod-relatives .bd li a ,
.mod-relatives .info {color:#F0F;}
#article_list_module a, #subscribe_highlight
p, #calendar .hd, #calendar .hd .titlebar .bd a, #comment_container *
.content, #mod-tagged-frd-article ins a, #footer .ft .info a
{color:#00F;}
- Sử dụng các quy tắc rút gọn của CSS
Ví dụ đây là code trang trí khung tìm kiếm ở module bài viết
.mod-alist-searchbox input.ipt
{background:transparent
url(https://2img.net/h/i118.photobucket.com/albums/o93/olympia41124/Yahoo_360plus/Hover/2.gif);border-top-color:#0000FF;border-left-color:#0000FF;border-right-color:#0000FF;border-bottom-color:#0000FF;}
có thể viết rút gọn lại thành
.mod-alist-searchbox input.ipt
{background:transparent
url(https://2img.net/h/i118.photobucket.com/albums/o93/olympia41124/Yahoo_360plus/Hover/2.gif);border-color:#0000FF;}
- Rút gọn với color
Plus hiện giờ trong các code chia sẻ phần lớn sử dụng màu sắc dạng hex,
ví dụ #FFFFFF(6 chữ số, ký tự). Có một cách rút gọn #FFFFFF có thể viết
#FFF, hoặc #CC0066 viết thành #C06. Có nghĩa là chia 6 số, ký tự đó
thành 3 nhóm từng 2 ký tự một, nếu cả 3 nhòm đó đều là từng nhóm hai số
hay ký tự giống nhau ta có thể rút gọn được. #AAFF00 có thể rút gọn
thành #AF0, nhưng #BC00DD không thể rút gọn được.
Ngoài ra các bạn cũng nên chú ý đến độ dài code CSS của mình và tiết kiệm dần dần. [You must be registered and logged in to see this link.]
Trước hết bạn copy code CSS vào word rồi chọn trên thanh menu tool
>>> Word count. Bạn xem dòng Characters (no space) nhé, khoảng
trên dưới 17000 là code bạn gần full rồi đó [You must be registered and logged in to see this link.]
Đó là một số cách rút gọn mà olympia biết và áp dụng. [You must be registered and logged in to see this link.]
Còn một số cách rút gọn nữa nhưng hoặc là code chia sẻ trên Plus đã rút
gọn sẵn (như code background), hoặc là việc trang trí không cần thiết
dùng đến. [You must be registered and logged in to see this link.] Mong rằng bài viết này giúp ích nhiều cho các bạn. [You must be registered and logged in to see this link.]
Bản quyền bài viết thuộc về [You must be registered and logged in to see this link.]
