10 cách viết CSS tốt cho bạn mới học
Nếu bạn là người thiết kế và thường xuyên phải viết CSS cho các trang web thì chắc bạn biết rõ tầm ảnh hưởng của các file CSS đối với trình duyệt (ở đây babyinternet gọi là browser nhé) trong việc hiển thị website của mình. Thật khó mà có thể làm hài lòng tất cả các bác browser khó tính. Ở đây Nhân xin trình bày một số kinh nghiệm nhỏ nhoi nhằm giúp bạn thực hiện công việc một cách dễ dàng và tốt đẹp hơn.1. Canh lề với tag DIV
Việc canh lề và tạo một cột trái có vẻ sẽ không phải là vấn đề đơn giản chút nào với CSS hiện thời. Và trong khi anh em chúng ta ngồi đây đợi CSS 3 ra mắt thì tôi đã lục lọi trên Internet và tìm được giải pháp cho việc canh lề này một cách tốt nhất. Trước tiên ta hãy xem đoạn mã sau đã:
.wrapper {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
Vấn đề ở đây là gì ?
Xem xét đoạn mã CSS trên chúng ta sẽ thấy rằng đoạn code chỉ được định nghĩa chiều cao 100px và trong trường hợp nếu chiều cao của nó nhỏ hơn chiều cao của trình duyệt thì chúng ta không thể có các croll kéo chuột. Trong trường hợp này bạn sẽ đặt ra câu hỏi tại sao lại muốn có croll chuột trong trường hợp này ? Hãy xét một ví dụ khác là nếu dữ liệu bạn chứa trong tag div này lớn hơn chiều cao của tag được định nghĩa. Lúc đó một số dữ liệu bên dưới có thể không được hiển thị trên một số trình duyệt. (Bản thân tôi cũng đã từng gặp không ít trường hợp nà. Híc ! 
)
Giải pháp:
Baby đưa ra giải pháp cho vấn đề này như sau:
<div id=”shim”/></div>
<div id=”wrapper”>
Content
</div>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
* {
margin:0px auto;
padding:0;
}
div#shim {
visibility: hidden;
width: 100%;
height: 50%;
margin-top: -200px;
float: left;
}
div#wrapper {
width: 1000px;
height: 400px;
clear: both;
background:red;
position: relative;
top: -200px;
/* IE4ever Hack: Hide from IE4 **/
position: static;
/** end hack */
}
/* Hide from IE5mac \*//*/
div#shim {
display: none;
}
html, body {
height: auto;
}
/* end hack */
/* ]]> */
2. Min-Height
selector {
min-height:500px;
height:auto; !important
height:500px;
}
3. PNG transparency
Nếu bạn phải sử dụng một ảnh PNG để làm ảnh nền, vấn đề bạn sẽ gặp phải là khi text của bạn trùng với màu của ảnh dẫn đến bạn sẽ không thể nhìn rõ text.
Hãy xem hình dưới đây:
Vấn đề đặt ra ở đây là bạn cần phải làm thế nào để hình ảnh vẫn hiển thị và bạn vẫn có thể đọc được đoạn text của mình. Babyinternet đã xem cách mà website www.ngoisao.net thực hiện và tôi cũng có một giải pháp tương tự. Đầu tiên bạn code đoạn code sau và save thành file JS.
/*
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!–[if lt IE 7]>
<script defer type=”text/javascript” src=”pngfix.js”></script>
<![endif]–>*/
var arVersion = navigator.appVersion.split(“MSIE”)
var version = parseFloat(arVersion[1])if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)
{
var imgID = (img.id) ? “id=’” + img.id + “‘ ” : “”
var imgClass = (img.className) ? “class=’” + img.className + “‘ ” : “”
var imgTitle = (img.title) ? “title=’” + img.title + “‘ ” : “title=’” + img.alt + “‘ ”
var imgStyle = “display:inline-block;” + img.style.cssText
if (img.align == “left”) imgStyle = “float:left;” + imgStyle
if (img.align == “right”) imgStyle = “float:right;” + imgStyle
if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle
var strNewHTML = “<span ” + imgID + imgClass + imgTitle
+ ” style=\”" + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”
+ “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
+ “(src=’” + img.src + “‘, sizingMethod=’scale’);\”></span>”
img.outerHTML = strNewHTML
i = i-1
}
}
}
Phần header bạn cho thêm đoạn sau:
<!–[if lt IE 7.]>
<script defer type=”text/javascript” src=”pngfix.js”></script>
<![endif]–>
Một cách khác là bạn có thể làm như www.ngoisao.net:
.someelement {
background-image: url(images/image.png);
}
* html .someelemen {
background-color: #333;
back\ground-color: transparent;
background-image: url(images/blank.gif);
filter: progid:DXImageTransform.Microsoft.
AlphaImageLoader(src=”images/image.png”, sizingMethod=”scale”);
}
Baby cũng tìm thấy nhiều điều thú vị khi thử thay thế theo một cách khác nữa:
.someelement:hover {
background: #333;
}
.someelement:hover {
background-image: url(images/image2.gif);
}
4. Tự xóa định dạng
.container:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container {display: inline-table;}
/* Hides from IE-mac \*/
* html .container {height: 1%;}
.container {display: block;}
/* End hide from IE-mac */
5. Reset CSS
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,p,blockquote,th,td {
margin:0; padding:0;
}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;font-weight:normal;
}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
q:before,q:after {content:”;}
6. Scrolling Render IE
html {
background : url(null) fixed no-repeat;
}
7. Opacity
#transdiv {
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}
8. PRE Tag
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
9. Li Background Repeat IE
<!–[if lt IE 7]>
<style>
#leftnav li { zoom: 1;} /* haslayout=true */
</style>
<![endif]–>
10. cách tốt nhất là
@charset “UTF-8″;
/* ———————————————————————-
WinIE7
———————————————————————- */
*:first-child+html selector{property:value;}
/* ———————————————————————-
WinIE6 & Mac IE
———————————————————————- */
* html selector{property:value;}
/* ———————————————————————-
WinIE6
———————————————————————- */
/*\*/
* html selector{property:value;}
/**/
/* ———————————————————————-
MacIE
———————————————————————- */
/*\*//*/
selector{property:value;}
/**/
Chúc các bạn có thêm nhiều kinh nghiệm trong thiết kế website.
Bạn nên đọc
7 Comments to “10 cách viết CSS tốt cho bạn mới học”
Post comment
Follow us on Twitter!Follow tôi trên Twitter để theo dõi Blog dễ dàng hơn.
Bài viết mới
- PHP & JQuery Photo Upload and Crop
- Thông báo thảo luận tháng 08/2010
- “Đùa” với wordpress theme
- Top 10 Web safe fonts
- Mời hợp tác kiếm tiền (designer và coder)
- Vừa bán hàng, vừa dọa khách
- Ra mắt WordPress Plugin RobotVN
- Bạn làm gì khi FaceBook sụp đổ ?
- Thêm target blank và nofollow cho liên kết trong blog
- Interview – giải pháp phát triển website chuyên ngành
Ý kiến
- Nguyễn Duy Nhân on phpThumb – tạo thumbnail khi trình bày bài viết
- David on phpThumb – tạo thumbnail khi trình bày bài viết
- Nguyễn Duy Nhân on Xin đừng ghép tội oan cho xe gắn máy
- Nguyễn Duy Nhân on PHP & JQuery Photo Upload and Crop
- CaoSonBao on Xin đừng ghép tội oan cho xe gắn máy
Tag
Who's Online
- 0 Members.
- 7 Guests.
cầm-men cái chơi
)
Cám ơn bạn Nhân đã bỏ nhiều công sưu tầm để viết ra giúp cho mọi người.
Ước mong bạn Nhân ghi thêm nhiều chú thích hướng dẩn để những người mới học thu thập được dể dàng hơn.
Tôi có vài trở ngại khi dùng CSS xin bạn Nhân hướng dẩn giúp:
Tôi dùng CSS cho nhiều trang Web, khi mỡ với IE thì hoàn chỉnh, nhưng khi mỡ với FireFox thì nó hiện ra sai, cã kích thước lẫn màu.
Cám ơn
Mỗi trình duyệt có một mức độ hỗ trợ CSS khác nhau cũng như chế độ hiển thị CSS cũng khác nhau (có trình duyệt tự thiết lập thuộc tính, có trình duyệt không tự thiết lập thuộc tính…). Bạn phải nắm rõ sự khác nhau của mỗi trình duyệt mới có thể đồng hóa được chúng.
Mình sẽ PM yahoo bạn xem có giúp được gì ko
copy nguoi khac ko mà sao comment dc
Mình không hiểu ý bạn.
tôi đang cần học css nhưng không biết bắt đầu từ đâu và như thế nào? có gì đồng chí trợ giúp cho với, cảm ơn!
Bạn có thể tìm thấy nhiều tài liệu về CSS (và nhiều tài liệu về thiết kế website) tại câu lạc bộ webmaster Việt Nam: http://vnwebmaster.com