Tạo file reset.css của riêng bạn

Đăng bởi Neo trong mục Hướng dẫn vào 14 tháng 8, 2008 | Comments

Rất nhiều người mới đến với CSS không nhận ra tầm quan trọng của việc tạo một file "reset.css". Tại sao lại như vậy? Bạn cần biết rằng, mỗi trình duyệt đều có một kiểu style mặc định sẵn, và không phải tất cả là giống nhau. Và khi bạn sắp xếp mọi thứ thật đẹp trên trình duyệt này rồi xem ở một trình duyệt khác bạn ngạc nhiên tự hỏi "tại sao ở đây lại bị cách ra vậy?", "tại sao chỗ này lại chui xuống dưới nhỉ?"...Và bạn sẽ tìm cách để sửa nó sao cho thể hiện được ở trình duyệt kia. Với kinh nghiệm từ bản thân, tôi khuyên bạn hãy bắt đầu làm CSS với file reset.css

Bước 1: Margin và padding: 0

Mặc định các trình duyệt sẽ thêm thuộc tính margin, padding vào rất nhiều thẻ html. Điều dễ thấy nhất đó là 6px margin ở thẻ body. Và trong thiết kế của bạn chắc rất ít khi có nó. Vậy hãy bắt đầu... cho nó về zero

Bạn có thể thêm 1 cách đơn giản

* {margin: 0; padding: 0;}

Hoặc liệt kê chi tiết các thẻ

body, html, div, blockquote, img, label, p, 
h1, h2, h3, h4, h5, h6, pre, ul,  ol, li, dl, dt,
 dd, form, a, fieldset, input, th, td  
{  
	margin: 0; padding: 0; border: 0; outline: none;  
}  

Bước 2: Nắm quyền điều khiển tất cả các thẻ

Bạn cũng cần chú ý là các thẻ có kích thước font khác nhau ở những trình duyệt khác nhau. Bạn có thể chỉnh về kích thước riêng của bạn hoặc chỉ đơn giản là giá trị 100%

h1, h2, h3, h4, h5, h6
{
	font-size: 14px;
}

Tiếp theo, chúng ta sẽ tạo margin và padding cho từng phần riêng biệt, và ở đây, tôi cũng gỡ bỏ style của thẻ ul, ol

body
{
    line-height: 1;
    font-size: 12px;
}

h1, h2, h3, h4, h5, h6
{
    font-size: 100%;
    padding: 5px 0;
    margin: 0 15px;
}

ul, ol
{
	list-style: none;
}

img
{
	border: 0;
}

Bước 3: Mở rộng

Bạn có thể không cần làm bước này, trong bước này tôi chỉ đưa ra các class hay được sử dụng trong các project của mình

.floatLeft
{
	float: left;
}

.floatRight
{
	float: right;
}

Và file reset.css của bạn

* {margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6
{
	font-size: 14px;
}
body
{
    line-height: 1;
    font-size: 12px;
}

h1, h2, h3, h4, h5, h6
{
    font-size: 100%;
    padding: 5px 0;
    margin: 0 15px;
}

ul, ol
{
	list-style: none;
}

img
{
	border: 0;
}
a  
{  
    color: #000;  
    text-decoration: none;  
}  
  
a:hover  
{  
	text-decoration: underline;  
}  
.floatLeft
{
	float: left;
}

.floatRight
{
	float: right;
}

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter