�ݺ�ߣ

• Тэмдэглэгээт хэлэн дээр бичигдсэн (Markup Language)
файлын формат болон харагдах байдалд гол нөлөөтэй
CSS хэл нь HTML, XHTML, XML, SVG, XUL дээр
бичигдсэн вэб хуудсыг загварчилдаг.

• CSS3 modules гэж нэрлэгдсэн хэд хэдэн документэд
хуваагддаг. Аль ч модуль нь CSS2 дээр бичигдсэн бүх
зүйлийг өргөтгөх эсвэл шинээр нэмэх, хийх боломжтой
зүйлүүдийг оруулж болдог.

• CSS-ийн 3 дахь түвшний хувилбарыг CSS2 гарахад
эхэлж байсан бөгөөд анхны драфт нь 1999 оны 6 сард
гарч байжээ.

• 2011 оны 11 сарын байдлаар CSS-ийн 50 модулийг
гаргасан гэнэ. Тэдгээрээс 2011 онд W3C-гээс санал
болгож байгаа нь Selectors, Namespaces, Color юм байна.

• Нэр дэвшүүлж байгаа модулиудын хувьд Backgrounds and
Colors, Media Quieries, Multi-Column Layout орж байгаа
бөгөөд энэ түвшинд цаашид улам сайжруулъя гэвэл
vendor prefix-үүдийг багасгах хэрэгтэй гэж зөвлөж байгаа
юм.

• CSS3 одоогоор бүх браузераар дэмжигдэхгүй ч JavaScript
болон CSS3 дээр ижил эффектийг ашиглан нэг ижил
имэйжин дээр ажилласан үр дүнг харьцуулахад CSS3
дээр ажилласан нь арай дэвшилттэй үр дүнг гаргасан
байна.

• CSS-ын нэг дутагдалтай тал нь өөр өөр браузер ашиглаж
байгаа тохиолдолд дэлгэцэн дээр юуны хэрхэн харагдахыг
өөрчлөх филтерийг сайжруулах хэрэгцээ, шаардлага
байгаа гэж үзэж байна.

• CSS Firefox болон Chrome дээр төдий л сайн
дэмжигдэхгүй байгаа юм.

• CSS3 нь вэб сайтын харагдах байдлыг, өнгө үзэмжийг
нилээдгүй сайжруулахуйц шинэ шинэ элементүүдийг
оруулснаараа давуу болж байна.

• Вэб сайтын бүтцэд хамгийн чухал үзүүлэлт биш ч
хэрэглэгчид хялбархан ашигладаг шигээ өнгө үзэмжийг
илүүтэй чухалчлах болсон өнөө үед CSS-ийн ахисан 3
дахь хувилбар нь оновчтой сонголт болох юм.

• CSS3-ийг сонгосноор вэб сайтын бүтэц хийгээд үзэмж
аль аль нилээд боловсронгуй болох юм.

• Сабменюнүүд дүүжлэгдэж унжих, менюгээ
хөндлөнгөөш байрлуулах, дугуйрсан өнцөгтэй
менюнүүд гээд вэб сайтад байх цомхон хэмжээний
донжыг нь олсон чимэгнүүдийг CSS3 ашиглан хийх
боломжтой.

• CSS3 дээр ажиллахад илүү хялбар, цэгцтэй
болсныг дараах харьцуулсан жишээгээр үзүүлье!

CSS2 <div class=”foo”>
<div class=”inner”>
<div class=”inner2”>
• Нэмэлтээр 3 элемент ашиглах <div class=”inner3”></div>
• 4 background зураг, булан бүрт </div>
</div>

нэгийг, эсвэл нэг том зураг </div>

.foo {
background: url(/slideshow/css3-12554751/12554751/img/corner_tr.png) top right no-repeat;
}
.foo .inner {
background: url(/slideshow/css3-12554751/12554751/img/corner_br.png) bottom right no-repeat;
}
.foo .inner2 {
background: url(/slideshow/css3-12554751/12554751/img/corner_t1.png) top left no-repeat;
}
.foo .inner3 {
background: url(/slideshow/css3-12554751/12554751/img/corner_tr.png) bottom left no-repeat;
}

CSS3
• 20рх - бүх булангийн радиусын хэмжээ • 40рх - хөндлөнгөөш байх булангийн
радиусны хэмжээ
• 20 рх: босоогоорх радиусны хэмжээ

Border-radius: 20px Border-radius: 40px / 20px

CSS3
• 40px - зүүн дээд, баруун доод булан • 40рх – зүүн дээд булан
• 10px - баруун дээд, зүүн доод булан • 50% - баруун дээд, зүүн доод булан
• 0 – баруун доод булан

Border-radius: 40px 10px Border-radius: 40px 50% 0

 CSS3 дээр сүүдэр оруулах өөрчлөлтүүдийг дэмжих браузер

• Сүүдэр оруулах

CSS2

<div class="wrap1"><div class="wrap2">
<div class="wrap3"><img src=/slideshow/css3-12554751/12554751/"object.gif"
alt="The object casting a shadow"/></div>
</div></div>

.wrap, .wrap2, wrap3 {
display:inline-table;
/**/ display:block;/**/
}
.wrap {
float:left;
background:url(/slideshow/css3-12554751/12554751/shadow.gif) right bottom no-repeat;
}
.wrap2 {
background:url(/slideshow/css3-12554751/12554751/corner_b1.gif) left bottom no-repeat;
}
.wrap3 {
padding: 0 4px 4px 0;
background:url(/slideshow/css3-12554751/12554751/corner_tr.gif) right top no-repeat;
}

CSS3
• 10px - Хөндлөнгөөш оффсет • 10px - Хөндлөнгөөш оффсет
• 5px - Босоо оффсет • 5px - Босоо оффсет
• 15px - Бүдгэрүүлэлтийн радиус • 15px - Бүдгэрүүлэлтийн радиус
• rgba - Сүүдэрлэх өнгө • inset - Дотогшоогоо сүүдэрлэх

box-shadow: 10px 5px 15px rgba (0,0,0,.5) box-shadow: 10px 5px 15px black inset

CSS3
• 20px - Хөндлөнгөөш оффсет
• 20px - Босоо оффсет
• 15px - Бүдгэрүүлэлтийн радиус
• -15px - Сүүдэрлэж харагдах зай
• rgba - Сүүдэрлэх өнгө

box-shadow: 20px 20px 15px -15px #f09

 Уусгалт оруулах

CSS2 CSS3

Нэг axis-т давхацсан 1 рх х N рх график #f09 - Эхний өнгө
black – Дараачийн өнгө

background: #f09 url(linear-gradient.png) top repeat-x; background: linear-gradient (#f09, black)

Өндөр өргөнийг дурын хэмжээгээр өгөх

background: #f09 url(radial-gradient.png) top left no repeat;

CSS3

-45 deg – Өнцөгний хэм white- Эхний өнгө
#f09 - Эхний өнгө #f09 – Голын өнгө
black – Дараачийн өнгө black – Дараачийн өнгө

linear-gradient: (-45 deg, #f09, black) linear-gradient: (white, #f09, black)

CSS3

white – Эхний өнгө #f09 – Эхний өнгө
#f09 20% - 20% дээр #f09 өнгө байрлана transparent – Дараачийн өнгө
black – Дараачийн өнгө

linear-gradient (white, #f09 20%, black) radial-gradient (#f09, transparent)

 CSS3 дээр уусгалт оруулах өөрчлөлтүүдийг дэмжих браузер

 Эргүүлэг болон налалт хийх хуучирсан арга
CSS2

<img src=/slideshow/css3-12554751/12554751/"rotated-with-text.png" alt=""/>

.foo{
background:: url(/slideshow/css3-12554751/12554751/rotated-box.png) no-repeat;
width: 200px;
height:200px;
padding:20px;
overflow:auto;
}

CSS3
Rotate – шилжүүлэг өөрчлөлт хийх хэлбэр /
Rotate – шилжүүлэг өөрчлөлт хийх хэлбэр /
эргүүлэх
эргүүлэх
30 deg – Хөндлөнгөөр налуулах
-30 deg – эргүүлэх өнцөгний хэмжээ
-10 deg – Босоогоор налуулах

transform: rotate (-30deg) transform: skew (30deg, -10deg)

 CSS3 хийж болох бусад өөрчлөлтүүд
Эргүүлж бас налуулахаас гадна

• Матриц
• Орчуулга
• Хэмжилт

зэргийг хийж болно.

 CSS3 дээр 2D-ээр хийж болох бусад
өөрчлөлтүүдийн дэмжих браузер

 CSS Selectors (Сонголтууд)

 Columns (Баганад хуваах)

 Hue / Saturation / Luminance color

Hue Өнгөний дэвсгэр, нүүрний өнгө
Saturation Нэвтрэлт
Luminance Гэрэлтэх байдал зэргийн өнгийг өгөх, сонгох

 Rounded corners (Буланг дугуйруулах)

 Gradiants (Уусгалт)

 Background enhancements (Background
нэмэх сайжруулах)

 Border image (Зурган хүрээ)

 Flexible Box Model (Хайрцаглах загвар)

�ݺ�ߣ

CSS3

Recommended

More Related Content

Viewers also liked (20)

CSS3