Viết tắt trong CSS
- October 12, 2009
- 15 comments
Viết tắt trong CSS giúp bạn tiết kiệm kha khá thời gian khi bạn phải viết code CSS cho một trang web. Thay vì bạn phải khai báo đến 3, 4 dòng và gõ đi gõ lại một đoạn code. Bạn có thể sử dụng cách viết tắt để tiết kiệm thời gian và công sức. Video này sẽ hướng dẫn bạn hầu hết, nếu như không phải tất cả, những cách viết tắt hiện có.
Thời lượng:20:05
Link Download định dạng .avi chất lượng cao: MegaUpload, MediaFire
File Size: 49.7MB
anh ơi, cho em hỏi khi resize website thì nó tự di chuyển theo chứ ko đứng chết một chỗ vậy ạ ?
Bạn thiết lập width bằng một giá trị xác định, hoặc phải có ít nhất max-width, width này phải nhỏ hơn cửa sổ trình duyệt. Rồi chọn margin-left, margin-right là auto (CSS nhé). Khi đó trang web sẽ luôn căn giữa, dù cửa sổ trình duyệt to hay nhỏ.
rất tuyệt ! mong anh có thêm nhiều videos hay nữa
cảm ơn NickB & DW rất nhiều . chúc bạn 2 bạn mạnh khỏe. để giúp bọn mình nhiều hơn. Một lần nữa cảm ơn. hihi
nevermind, I got my answer. thanks
Just for my curiosity, may I ask where did u learn how to do website and other stuff. U really impress me. You live in America? Thanks
phan mem soan thao CSS cua ban la gi vay ?
bạn có thể cho mình hỏi tại sao khi mình copy đoạn code reset CSS về áp dụng như các video bạn hướng dẫn thì nó cứ báo firefox không hiểu (.các thuộc tính như font family, style….) làm thế nào để kahwcs phục? xin cảm ơn
Anh DW ơi cho em hỏi?
Anh set auto thì nó có ý nghĩa gì vậy anh, em không hiểu chỗ đó
Như ví dụ này chẳng hạn:’margin-right: auto;’
Trong việc thiết kế với CSS khái niệm về box, margin, padding rất quan trọng nếu bạn ko có kiến thức rõ ràng chắc chắn thì sẽ rất khó làm việc , chắc chắn khi nào việc với margin ,padding bạn sẽ gặp những tình trạng giai diện bị vỡ , thụt ra thụt vô , xuống hàng ko như mong muốn mà không hiểu tại sao .
Có thể bạn gặp phải những vấn đề như trên ,bạn không hiểu rõ về tính toán chiều rộng.
Đây là những điểm tui mày mò và tích lũy dc có thể các bạn chưa biết hoặc giúp ích nhiều cho các bạn .
Cảm ơn những chia sẻ của bạn. Đúng là về giao diện, nếu làm sâu vào sẽ gặp khá nhiều vấn đề, non tay thì hơi bị mệt :-<
Ôi mắt mờ … viết hơi sai tý “khi width và margin-left dc thiết lập cụ thể thì giá trị margin-right có thể sẽ bị trừ đi(hoặc không cần quan tâm)” nha các bạn … thông cảm .
Tiếp tục nói đến giá trị auto.
+Thứ nhất auto chỉ dc thiết lập với margin và widht (padding ko có nha)
+Tiếp tục xét đến trường hợp ở trên ta có thể dùng auto cho 3 thuộc tính (width, margin-left, margin-right) do đó tạo ra 3 trường hợp cần xét đến .
* Không có giá tri nào là auto trong 3 thuộc tính trên (cái này mới xét)
*Chỉ có một giá tri là auto thì giá trị đó được tính tối đa có thể
`
#box {`width: 200px;
border: 1px solid;
height: 100px;
margin-left: 20px;
margin-right: auto;
}
Tức margin-right là 40px
* Có hai hoặc cả 3 giá trị là auto
+Nếu width dc set auto thì width dc tính tối da sau khi trừ lề , bất kể lề nào set auto đều bằng 0
`
#box {`width: auto;
border: 1px solid;
height: 100px;
margin-left: 20px;
margin-right: auto;
}
Lúc này width là 240px.
+Nếu 2 lề set auto thì mỗi lề dc chia đều sau khi trừ width
`
#box {`width: 210px;
border: 1px solid;
height: 100px;
margin-left: auto;
margin-right: auto;
}
Lúc này margin-left và margin-right là 20px.
Nếu cả 3 là auto đuơng nhiên width là 250px nhỉ
Một chú ý cuối cùng nếu là phần tử trong dòng hoặc trôi nổi(tức là có float) thì margin dc set auto có giá trị 0
Hèn gì mình float rồi không margin auto cho nó căn giữa được
)
Trong margin có nhắc đến giá trị auto vậy auto là j, có liên quan j đến tính toán chiều rộng box.
Tôi xét chiều rộng box từ trái sang phải
có 1 vd như sau
`
__abENT__lt;div id=__abENT__quot;container__abENT__quot;__abENT__gt;`__abENT__lt;div id=__abENT__quot;box__abENT__quot;__abENT__gt;
__abENT__lt;__abENT__#8260;div__abENT__gt;
__abENT__lt;__abENT__#8260;div__abENT__gt;
CSS
`
#box {`width: 200px;
height: 100px;
border: 1px solid;
margin-left: 10px;
margin-right: 40px;
}
#container {
border: 1px solid;
width:250px;
}
Thì bạn sẽ thấy toàn bộ box có chiều rộng là 250px và mọi thứ vẫn bình thường?
Nhưng nếu bây h ta thay đổi ở #box chuyện j sẽ xẩy ra
`
margin-left: 20px;`Lúc này margin-left và margin-right là 20px tức là margin-right bị mất 10px.
Ta có chú ý quan trọng trong việc tính toán chiều rộng “khi width và margin-left dc thiết lập cụ thể thì giá trị margin-left có thể sẽ bị trừ đi(hoặc không cần quan tâm)”
vd như `
margin-left: 60px;` thì margin-left trong trường hợp này ko dc quan tâm và #box bị lòi ra khỏi #container.Lúc này có thể tạo ra hiệu ứng không mong muốn , trong trường hợp này ng ta thường sử dụng thuộc tính ‘overflow: hidden;’ ở #container để xử lý
Thuộc tính scoll trong bài hiển thị ko đúng như ý đồ có thể là do ‘overflow: auto;’
Qua đây tôi cũng giới thiệu 1 số khái niệm liên quan đến margin, padding và auto mà các bạn có thể không nắm rõ hoặc mù mờ .
- Các bạn thường không phân biệt dc margin và padding khách nhau như thế nào và khi nào dùng chúng, có thể nêu ra một số điểm cần chú ý như sau.
+ Khi sử dụng thuộc tính background thì vùng padding vẫn nằm trong bg ngược lại margin tạo ta khoảng trống ngoài bg .
+Nếu có 2 div có id div1,div2 chẳng hạn đặt sát nhau bạn set lần lượt
‘div1{margin-bottom: 15px;}
div2{margin-top: 10px;}’
Bạn nghĩ chuyện j xãy ra 2 hộp sẽ cách nhau 25px đúng không.Thực tế là chúng cách nhau 15px vì margin lấy giá trị giá trị lớn hơn trong 2 giá trị (tương tự như vậy với top, left, right,bottom) . Nhưng chú ý nếu 2 box có set float thì vẫn margin thực vẫn là 25px.
Còn nếu muốn tạo khoảng cách 25px bạn có thể dùng padding(nhưng chú ý đến border) hoặc kết hợp với 1 phần tử set margin 1 phần tử padding . Nhưng thường thì quản lý khá phức tạp.