Làm Khung viền và nền cho Yahoo Mash
Như bài vừa rồi (Làm Background cho Mash), vẫn chưa có gì, tuy nhiên, nhưng bài tiếp sau đây rất tiện cho những người chưa biết gì về CSS.
Bài này nói về cách làm khung viền cho Yahoo Mash.
Nối tiếp đoạn code của background,Các bạn copy code dưới đây vào sau phần body background:
.mod {
background-color:none;
background-image:url(.....................................);
border-style:solid;
border-width:1px;
border-color:#993366;
}
Giải thích:
background-color:none; => Trong phần này,background-color dùng cho màu nền của khung (module) bài viết, các bạn thay chữ none bằng màu mà các bạn thích. Bảng màu sẽ đc link ở phần viết bên dưới.
background-image:url(.............................................);
background-image trong phần này là hình nền cho khung của module bài viết. Các bạn copy link của hình nền cho khung của module vào ......, giống như là link của hình nền background
border-style:solid; => border-style là đường viền quanh khung, solid: ko ngắt đoạn, bạn có thể dùng những kiểu viền như là : none | dotted | dashed | solid | double | groove | ridge | inset | outset . Các bạn muốn biết nó thế nào thì cứ thay lần lượt từng chữ một thì sẽ rõ. Nhưng khi thay từng chữ các bạn nhớ chỉ click vào preview dể xem thôi nhé, khi nào vừa ý thí click "apply".
border-width:1px; => border-width là kích cỡ của đường viền. Nói cách khác, đây là độ dầy của khung viền, các bạn có thể thay 2xp; hoặc 3xp tùy ý. Cứ thay thử con số rồi sẽ biết đúng ko các bạn.
border-color:#ffffff; => border-color là màu của đường viền.
Về màu của CSS các bạn có thể tham khảo tại đây, hoặc dùng từ của màu.
ví dụ:
border-color:red;
Như vậy đường viền sẽ là màu đỏ.
Các bạn chú ý nếu dùng từ thì ko có dấu thăng #, còn dùng mã thì có.
Như vậy trong css của các bạn đã có 2 đoạn code này, 1 là về background, 1 về khung viền và đặc điển của từng Module:
body {
background:url(...............................);
background-position:center center;
background-repeat:repeat;
}
.mod {
background-color:none;
background-image:url(.....................................);
border-style:outset;
border-width:3px;
border-color:#993366;
}
Mai có giờ rảnh viết típ hihihi
Chúc các bạn thành công
