CSS гэдэг нь Cascading Style Sheet гэсэн үгний товчлол юм.
HTML-тэй хамт Web Page зохиох зориулалттай программчлалын хэл.
- HTML: Тухайн хуудасны ерөнхий зохион байгуулалт болон утга санааг
- CSS: Тухайн хуудасны өнгө үзэмж, загварыг зохиодог.
Шаардлагатай мэдлэг: HTML
Шаардагдах tool: Ямар ч text editor программ байсан болно.
#2 CSS г хаана бичих вэ?
Тусад нь файл үүгэж бичих: .css өргөтгөлтэй файл үүсгээд линкийг нь командаар зааж өгөх. Жишээ: <link rel="stylesheet" href="mycss.css"> STYLE таг ашиглаж бичих: Жишээ: <style> h1 { color: red; } </style> HTML дээрх таг дотор нь бичих: Жишээ: <p style="color:red"> Text </p>
#3 CSS н үндсэн бичих хэлбэр Select, Property, Value гэсэн үндсэн 3н хэсгээс бүрдэнэ. h1 {
color: red; } Дээрх жишээн дээр Select : h1, Property : color, Value : red
#4 Select /* Бүх элементэд хандах */ * {
color: red; }
/* ID элементэд хандах */
#main {
font-size:36px; }
/* class элементэд хандах */
.test {
font-size: 9px; }
/* Олон элементэд хандах */
#main, .test {
border: 1px solid #ccc; } a, b: аль, алиныг нь a b: аль8 алинд нь байгааг a>b: хүүд нь ab: а-нууд дундаас b-тэйг нь a+b: хажууд нь байгаа
#5 Текст загвар
Өнгө: color: green (or #00ff00);
Фонт: font-size: 14px (or 200%);
Тод: font-weight: bold (normal);
Байрлал: text-align: right;
Мөрний зай: line-height: 30px (or 150%, 1.5);
Текстэн дээрх зураас: text-decoration: line-through underline;
Текст хэлбэр: font-style: italic;
#6 Арын хананы загвар Өнгө: background-color: red; Зураг оруулах: background-image: url('image.png'); /* автоматаар олон давтагдана */ background-repeat: no-repeat (or repeat-x, repeat-y); background-position: 10px 10px (or top-right); background-attachment: fixed (or scroll); or background: url('bg.png') no-repeat top right;
#7 Хүрээний загвар Хүрээ хийх: background-color: red;
width: 50%;
height: 50px;
Өнгө: border-color: green;
Өргөн: border-width: 5px;
Загвар: border-style: solid (or double; dotted; dashed; inset; outset) or
border: green 5px outset;
#8 Хоорондын зайг тохируулах Дотор тал: padding: 20px; /* бүх талаасаа */ padding: 20px 40px; /* дээд-доод, баруун-зүүн */ padding: 20px 30px 40px; /* дээд, баруун-зүүн, доод */ padding: 20px 30px 40px 50px; /* дээд, баруун, доод, зүүн */ Гадна тал: margin: 20px 30px 40px 50px;
#9 Зурагны хажууд текст байрлаалах
Хажууд нь байрлуулах: style="float:left;" Арилгах: style="clear:left;"
#10 Лист Эрэмбэлэгдээгүй лист: list-style-type: square; /* circle; none; */ Эрэмбэлэгдсэн лист: list-style-type: hiragana; /* lower-alpha; */
Листийн гадна, дотор тал: list-style-position: inside; /* outside */
#11 Display display: inline; display: block; display: none;
#12 Cursor cursor: pointer (move, help, text, crosshair, wait, n-resize: ↑, s-resize: ↓, w-resize: ←, e-resize: →
#13 Class /* 擬似クラス */
Курсор очиход өөрчлөгдөх: .person:hover {
color: red; }
Листийн аль нэгд хандах: li:last-child {
color: green; }
Тодрох:
#onamae:focus {
font-weight:bold; }
#14 Select дараалал Бичсэн дараалал id > class Илүү тодорхой бичсэн дарааллаар: p#id1 !important: #id1 {
color: red !important; }
#15 Элементний байрлал position:relative position:absolute position:fixed #id3 {
position: relative;
left: 30px;
top: 30px;
}
#id2 {
position: relative; }
#free {
position: absolute;
top: -10px;
left: 50px; }
#id1 {
position: fixed;
bottom: 0; } z-index: 1;
0 comments:
Post a Comment