HTML баримтын харагдац, гадаад өнгө үзэмжийг тодорхойлох, вэб агуулга болон загварыг салгахад CSS хэлийг ашигладаг. Энэ хичээлээр CSS-ийн гурван хэрэглээ болох internal CSS, document CSS, external CSS зэргийг туршиж CSS-ийн хэрэглээ, бичих дүрэм зэргийг бататгах дасгал ажиллана. Мөн вэб сайтны баннер хийх зааварт хичээлийг хийж вэб сайтын баннер хийхэд CSS-ийг хэрхэн ашиглаж байгаа талаар судлах бөгөөд вэб байршлын зохиомжийг (layout design) CSS ашиглан хийх аргачлалыг үзнэ. Түүнээс гадна вэб сайтын загварыг хийж гүйцэтгэх дадлага хийнэ.
Агуулга
Дасгал 1. CSS загвар тодорхойлох
HTML FONT элементийн загваруудын талаар MSDN-ээс уншиж судлаад FONT элементэд ямар ямар загваруудыг тодорхойлж болдог тухай судалж өөрийн сонгосон 5 шинжээр (property) элементийн вэб хуудсанд байгаа FONT элементийн загварыг тодорхойл. Жишээ нь: font-size, font-family шинжүүдээр загвар тодорхойлсноор үсгийн хэмжээ, үсгийн хэв зэргийг зааж өгдөг. FONT элементийн загварыг тодорхойлохдоо CSS-ийн 3 хэрэглээг туршиж үзээрэй.
Загварыг тодорхойлж HTML баримтанд ашиглахдаа дараах гурван аргаар хийж үзнэ.
- Inline CSS
- Document CSS
- External CSS
Энэ нь тухайн элементийн хувьд (вэб агуулгад байгаа зөвхөн нэг элементнд) үйлчлэх загварыг түүний STYLE шинжид (attribute) тодорхойлж өгнө.
Энэ аргаар CSS загварыг тодорхойлохдоо HTML баримтын HEAD элемент дотор STYLE элементийг бичиж түүн дотор CSS загварыг тодорхойлно. Гэхдээ CSS загварыг тодорхойлоход selector-ийг хэрхэн өгсөнөөс хамаардаг. Жишээ нь, бүх H1 элементийн хувьд үйлчлэх загварыг тодорхойлоход дараах кодыг бичихэд хангалттай.
<STYLE>
h1{ font-size:12px; }
</STYLE>
Хэрэв хэрэглэгчийн тодорхойлсон загвар үүсгэх бол selector-ын урд цэг (.) бичиж өгнө. Жишээ нь:
.myclass { font-size: 12px; }
Энэ тохиолдолд загвар ашиглах HTML элементийн CLASS шинжид (attribute) загварын класс нэрийг бичиж өгнө. Жишээ нь:
<P >Text is here</P>
Энд өмнөх аргаар тодорхойлсон загварын CSS кодыг .css өргөтгөлтэй файлд бичиж хадгална. Дараа нь HTML баримтын HEAD элемент дотор LINK элементийг бичиж .css өргөтгөлтэй файлаа холбоно. Өөрөөр хэлбэл HTML баримт дотор бичиж өгсөн CSS кодыг нэг файлд бичиж тэр загвараа HTML баримттайгаа холбож өгч байгаа хэрэг юм.
Дасгал 2. Вэб холбоосын загвар өөрчлөх
Вэб холбоосыг хийхэд анхны загвар нь доогуур зураасгүй харагддаг. Тэгвэл вэб холбоос доогуур зураасгүй харагддаг бөгөөд хулгана дээгүүр нь очингуут доогуур зураастай харагддаг байхаар A элементийн хувьд загвар тодорхойлно. Үүний тулд хийсвэр элементэд үйлчлэх CSS загвар тодорхойлох дараах ерөнхий бичиглэлийг ашиглана.
selector:pseudo-class{ property: value; }
pseudo-class-ын оронд hover, active, visited гэх утгууд өгч болно. hover бол хулгана дээгүүр нь очингуут загвар ямар байхыг тодорхойлдог.
Дасгал 3. Вэб хуудасны баннер хийх
Дараах вэб хаягаар орж дасгал 2-ийг ажиллана. Энэ дасгалд вэб сайтны баннер хийхэд CSS загварыг ашигласан тухай зааварт хичээл байгаа. Түүнийг дуурайн дараах зурагт үзүүлсэн вэб баннер хийх нь энэ дасгалын үндсэн ажиллагаа юм. Харин вэб сайтын баннер хийхэд CSS-ийг хэрхэн ашиглаж болдогийг сурч авах нь бидний зорилго болно. Вэб хаяг: http://presentations.lawver.net/standards/css_training_exercises
3.1 Вэб сайтын баннераа туршиж үзсэн бол CSS шинжүүдийн утгыг өөрчлөх замаар өөрийн зохиомжоор шинэ вэб баннер хийнэ.
3.2 Вэб баннерийн CSS кодод байгаа CSS selector-ийг өөрчилнө. Жишээ нь: ID selector-ийг element болон global class selector болгох маягаар өөрчилж болно.
Дасгал 4. Вэб байршлын зохиомжийг DIV элемент ашиглан гүйцэтгэх
Вэб сайтын байршлын загварыг (Layout design) хийх аргын нэг бол DIV элемент ашигладаг. Ингэхдээ CSS position, float зэрэг шинжийг хэрэглэдэг. Дараах кодыг туршиж үзээд энэ аргаар
1. толгой хэсэг, 3 баганатай, хөл хэсэгтэй вэб байршлын загвар
2. толгой хэсэг, толгой хэсэг дотроо зүүн, баруун гэж 2 хуваагддаг, 4 баганатай, хөл хэсэг тэй вэб байршлын загвар
тус тус зохио.
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<style>
body {
font-family:tahoma;
font-size:0.8em;
}
#container {
width: 800px ;
margin-left: auto ;
margin-right: auto ;
}
#content {
margin-left:200px;
height:300px;
padding: 4px ;
border: 1px solid gray;
}
#navbar {
float: left;
width: 200px;
height:300px;
border: 1px solid gray;
}
#footer {
clear: both ;
border: 1px solid gray;
}
#header {
text-align: center ;
height:100px;
border: 1px solid gray;
}
</style>
</head>
<body>
<div id=”container”>
<div id=”header”>Top Header</div>
<div id=”navbar”>Navigation</div>
<div id=”content”><p>Content here</p></div>
<div id=”footer”>Bottom Footer</div>
</div>
</body>
</html>
энийгээ жоохон дэлгэрэнгүй болгоод огоочээ
ер нь энд тэндхийн хичээлүүдийг харж байхад (энэ нийтлэл ч гэсэн) мэддэг нэг нь мэддэг хүндээ заагаад байгаа юм шиг л байх юм даа.
css мэдэхгүй хүнд зориулж тухайн хүн үнэхээр мэдлэг байхгүй шүү гэж бодсон юм бол юуг нь яаж хийхийг, харин юм мэддэг гэж бодсон бол гүнзгийрүүлж мэдлэгийг нь зааж өгмөөр юм.
энэ болохоор анхан шатны мэдлэгийг юм мэддэг хүнд зааж өгөх гээд байгаа юм шиг л санагдчихлаа. (бусад сайт шиг)
цаад хүнээ юу мэддэгийг нь дотроо бодоод тэрэнд нь тохируулж хийгээсэй гэж хүсье дээ.
Хмм.Ухаан нь дутуу биш л бол ойлгоно
баярлаа жоохон юм ч гэсэн ойлгож авлаа
боролдой гуай чи тийм ухаантай юм байж.
тэгвэл яах гэж ийм анхан шатны юмыг ингэж бүрхэгээр юу ч мэдэхгүй улсад зааж өгөөд байгаа юм.
юм мэддэг улсад бол наадах чинь огт хэрэггүй эд. чи ядаж гадаадын сайтуудын хичээлийг харж ав.
Ойлгоол байна……
чи яагаад хүний бичсэнийг устгаад байгаа юм ухаан дээгүүр хүн ингэж устгадаг юмуу?
чи одоо хүртэл хичээл бичиж мэдэхгүй байгаа бол гадны хичээлүүдийг харж ав.
Хэрүүлтэй сэтгэгдэлүүдийг устгасан
После отправки комментариев выходит ошибка – Капча была введена не верно !?
Ничего писать я вообще не вижу, никакой капчи нет а сайт хочет почему то ?
У меня так только?
Ваш сайт hicheel.net нуждается в смене дизайна.
Ну а тема Hicheel.InFo » Css-ийн талаарх товч мэдээлэл просто без картинок и видео. Весь инет забили таким контентом который вы хотите чтобы люди читали но кто щас в наше время вообще читает ???
Hi gyus.Joohin ch gsen setgeleesee ym zai gej bodoj baigaa bol video bichlegtei zaawal ugeer tailbarlasanaas hun oilgohod ur duntei shuu dee….
Тэгмээр л байна тэрэн ч амар байна.
Гэхдээ миний дуу хоолой гологдоно шд 😛 нарийхан
CSS FILE HIIJ OGVOL ZARDAL NI HET BE
ene yagad