CSS

Нийтэлсэн: Жаргал | Web Design2010.01.28 | 12 сэтгэгдэл байна

Oюутан байхдаа мөнгө олохын тулд вэб хийдэг байлаа. Хүмүүсийн хэлдэгээр бол “халтуур” гэх юмуу да, гэхдээ чанаргүй халтуурдсан гэж байгаа юм биш шүү. Машинтай хүмүүс хүн тээвэрлэж таксинд явахыг халтуур хийнэ гэж ярьдаг да, нэг тиймэрхүү утгаас гарсан үг байх. Ийм зүйлс хийдэг хүнийг “халтуурчин” биш чөлөөт уран бүтээлч(Freelancer) гэж нэрлэвэл арай гоё сонсогдох байх.
Ажлынхаа зав чөлөөгөөр өөрсдийн сайн чаддаг, магадгүй бүр дуртай зүйлээрээ мөнгө олж чадаж байвал болж л байна, хэнд ч мөнгө хэрэгтэй байдаг биз дэ.

HTML5, CSS3(эцсийн байдлаар дуусаагүй хөгжүүлэгдэж байгаа) гарснаас хойш вэб хийгээгүй болохоор нэг ёсондоо хоцрогдож байх шиг байна. Одоо харин эдгээр шинэ стандартуудыг ашиглаж нэг вэб хийх санаатай. Оны өмнө л нэг хүнд вэб хийж өгнө гэж амласан байсан юм, өрөө төлөхгүй бол он дамнаад “хүү” нь бүр талийж өглөө. Энэ далимаараа CSS-н тухай жоохон юм сараачдыму л гэж…

CSS(Cascading Style Sheets) бол энгийн үгээр вэбийн код болон дизайн хоорондын гүүр юм. Мөн CSS-г JavaScript-тэй зөв хослуулж хэрэглэвэл бүр илүү “мундаг” болох ба гагцхүү таны сэтгэмж л мэдэх хэрэг.

Ямар вэб хөтөч вэ, вэб хөтөчийн хувилбар гэдгээс хамаарч таны хийсэн вэб янз бүр харагдах тохиолдол байдаг энэ үед хөтөч болгонд зориулж CSS хийх нь хамгийн тохиромжтой байдаг. Жишээ нь: Зөвхөн Internet Explorer-т зориулсан stylesheet бол дараах кодыг вэбийн таг дотор бичиж өгнө.

Хэрэв IE бусад хөтөчид ашиглах бол
Хэрэв зөвхөн IE 6 хувилбарт ашиглах бол
Хэрэв IE 6-с дээш хувилбарт ашиглах бол (greater than or equal)
Хэрэв IE 6-c дээш өөрийг нь оруулмааргүй байвал (greater than)
Хэрэв IE 6-с доош хувилбарт ашиглах бол (lower than) гэх мэтээр өөрийн хийсэн вэбийг бүх төрлийн вэб хөтөч дээр туршиж үзэх хэрэгтэй. Хэрэв доорх зарим демо нь ажиллахгүй эсвэл гарахгүй байвал вэб хөтөчөө солиод үзээрэй. CSS-г яаж ашигласан байгааг сонирхоцгооё.

1. Зурагтай layer давхарлах

---

2. Цаг

---

3. Зурган биш аргаар 3D харагдуулах

---

4. Он цагийн хэлхээс болон бусад календар

---

5. 3D зураг

---

6. Зурган меню

---

7. Хөдөлдөггүй меню

---

8. Хуудас солигч

---

9. Маш урт менютай үед хэрэглэх шийдэл

---

10. Pre таг-ны жишээ

---

11. Зургийн тайлбар өөрчлөх жишээ

---

12. Бичлэгийг гарчгийг өөрчлөх

---

13. Message box

---

14. Жагсаалттай ажиллах бяцхан арга

---

15. Товч

---

16. Он цагийн хэлхээс, том үсгээр эхлэх, хөвөрдөг зургууд гэх мэт

---

17. Меню

---

18. Меню

---

19. Dock Меню

---

20. Dock Меню

---

21. Тойрог Меню

---

22. Меню

---

23. Хайрцаг хэлбэртэй холбоос

---

24. Нүүр дүүрэн арын дэвсгэр зураг

---

25. Slideshow

CSS-г илүү сайн сурахыг хүсвэл дараах сайтуудаар зочлоорой.

Mastering CSS coding getting started
11 Classic CSS Techniques Made Simple with CSS3
5 simple but useful CSS properties
25 incredibly useful CSS tricks you should know/
5 CSS3 design enhancements that you can use today
W3C

Scaffold CSS Framework
xCSS Framework
Best Web Frameworks

CSS3 жагсаалт татах css3 (120.16 KB)
HTML5 жагсаалт татах html5 (75.01 KB)