10 cách viết CSS tốt cho bạn mới học - AdminTalk

stara

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 [Chỉ có thành viên mới thấy links này. ] 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.
[Chỉ có thành viên mới thấy links này. ]. 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:progidXImageTransform.Microsoft.AlphaI mageLoader”
+ “(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ư [Chỉ có thành viên mới thấy links này. ]:

.someelement {
background-image: url(images/image.png);
}
* html .someelemen {
background-color: #333;
back\ground-color: transparent;
background-image: url(images/blank.gif);
filter: progidXImageTransform.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,f orm,
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ài viết cùng chủ đề: