KIẾN THỨC

Cách kết nối Java với SQL server

10 cách khắc phục khi file Word bị hỏng
Bạn có nhiều file tài liệu quan trọng, và đôi khi không hiểu vì một lý do nào đó, bạn không thể mở file văn bản của mình. Trước khi phải chấp nhận sự thật rằng bạn sẽ mất hết những tài liệu quan trọn

HTML 5 - Tương lai web
HTML5 cho phép nhà phát triển, lập trình web tạo ra các trang web có thể hoạt động tốt trên nhiều trình duyệt khác nhau của bất kỳ thiết bị nào – từ MTĐB, MTXT cho đến ĐTTM. Không những vậy, HTML5 cò

DANH NGÔN

Không có con đường nào dài quá đối với kẻ bước đi thong thả, không vội vàng. Không có cái lợi nào xa xôi quá đối với những kẻ kiên nhẫn làm việc

La Bruyere
Trang chủ » Thư viện Tutorial » Học CSS - Javascript

Tạo file reset.css của riêng bạn ( 2035 lượt xem )

thiet ke websiteTạo file reset.css của riêng bạn

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ệ


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

1 * {margin: 0; padding: 0;}

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

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

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%

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

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

01 body
02 {
03     line-height: 1;
04     font-size: 12px;
05 }
06  
07 h1, h2, h3, h4, h5, h6
08 {
09     font-size: 100%;
10     padding: 5px 0;
11     margin: 0 15px;
12 }
13  
14 ul, ol
15 {
16     list-style: none;
17 }
18  
19 img
20 {
21     border: 0;
22 }

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

1 .floatLeft
2 {
3     float: left;
4 }
5  
6 .floatRight
7 {
8     float: right;
9 }

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

01 * {margin: 0; padding: 0;}
02 h1, h2, h3, h4, h5, h6
03 {
04     font-size: 14px;
05 }
06 body
07 {
08     line-height: 1;
09     font-size: 12px;
10 }
11  
12 h1, h2, h3, h4, h5, h6
13 {
14     font-size: 100%;
15     padding: 5px 0;
16     margin: 0 15px;
17 }
18  
19 ul, ol
20 {
21     list-style: none;
22 }
23  
24 img
25 {
26     border: 0;
27 }
28
29
30     color: #000
31     text-decoration: none
32
33    
34 a:hover 
35
36     text-decoration: underline
37
38 .floatLeft
39 {
40     float: left;
41 }
42  
43 .floatRight
44 {
45     float: right;
46 }

Phuc Thinh website

Thư viện Template | Website template

Template Art & Photography  No.9
Template Art & Photography No.9
Template Art & Photography  No.4
Template Art & Photography No.4
Template Travel No.4
Template Travel No.4
Template Hardware No.8
Template Hardware No.8
Template Hotel No.12
Template Hotel No.12
Template Food & Drink No.6
Template Food & Drink No.6
Template Media No.9
Template Media No.9
Template Fashion No.13
Template Fashion No.13
Template Art & Photography  No.5
Template Art & Photography No.5
Template Hotel No.1
Template Hotel No.1
Template Computer No 4
Template Computer No 4
Template Fashion No.9
Template Fashion No.9
«123»
Số lượt truy cập web: 1,353,557 - Trong tháng này: 310,390 - Khách truy cập hôm nay: 100 - Số người đang online: 09.Developed by Phuc Thinh