Режа: Ранг ва фон хоссалари

• Мавзу: CSS кириш.
• HTMLга уланиш усуллари.
• Селектор турлари.
• Элементлар ва синфлар.
• Ўлчов бирликлар.

Режа:

1. Ранг ва фон хоссалари;

2. Шрифт хоссалари;

3. Матн хоссалари;

6. (span и div) ёрдамида элементларни гуруҳлаш;

5. Идентификация ва гуруҳлаш (class и id);

4. Ҳаволалар псевдосинфлари;

7. CSSда box модели;

• Элемент ранги color хоссаси орқали берилади. Масалан,
• p { color: red;}
• Ранг 16-лик кодлар орқали ҳам берилиши мумкин:
• p { color: #f80b12;}
• Бу хосса мерос қолдирувчи ҳисобланади.

• Фон background-color хоссаси орқали берилади:
• div {background-color: silver;}
• Бу хосса мерос қолдирмайди.

• 1. Ранг ва фон хоссалари

• Фон учун тасвирлар билан ишлаш
• Бунинг учун background-image хоссаси қўлланилади.
• Body {background-image: url(p1.jpg);
• Фон тасвири ихтиёрий элемент учун қўлланилиши мумкин:
• h1 {background-image: url(p1.jpg);}

• Аниқ йўналиш бўйича такрорланиш
• background-repeat хоссаси ёрдамида берилади
• Қийматлари: repeat / repeat-x / repeat-y / no-repeat
• Бошланғич қиймат: no-repeat

• Фон тасвирининг жойлашуви
• background-position хоссаси ёрдамида берилади
• Қийматлари: top / center / bottom / left / right
• div {background-color: blue;
• background-image: url(fon.gif);
• background-repeat: repeat-x;
• background-position: bottom;}

• Фондаги тасвирни блоклаш [background-attachment]

• body {
• background-color: #FFCC66;
• background-image: url("butterfly.gif");
• background-repeat: no-repeat;
• background-attachment: fixed;
• }
• h1 {
• color: #990000;
• background-color: #FC9804;
• }

• Қийматлари: scroll / fixed.

• [background] ни қисқартириб ёзилиши

• background-color: #FFCC66;
• background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom;

• background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

• Қисқартириб ёзилиш тартиби:
• [background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

• font-family
• font-style
• font-variant
• font-weight
• font-size
• font

• [font-family] шрифт оиласи

• Шрифтлар оиласи қуйидагича ёзилади:
• h1 {font-family: arial, verdana, sans-serif;}
• h2 {font-family: "Times New Roman", serif;}

• 2. Шрифт хоссалари

• [font-style] шрифт стили

• Қийматлари: normal / italic / oblique.

• h1 {
• font-family: arial, verdana, sans-serif;
• }
• h2 {
• font-family: "Times New Roman", serif;
• font-style: italic;
• }

• [font-variant] шрифт вариантлари

• Қийматлари: normal / small-caps. small-caps қиймати бу upper case нинг кичикроқ кўриниши.

• h1 {
• font-variant: small-caps;
• }
• h2 {
• font-variant: normal;
• }

• [font-weight] шрифт қалинлиги

• Қийматлари: normal / bold. Баъзи браузерлар 100-900 гача сонли қийматларни ҳа қабул қилади.

• p {
• font-family: arial, verdana, sans-serif;
• }
• td {
• font-family: arial, verdana, sans-serif; font-weight: bold;
• }

• [font-size] шрифт ўлчами

• h1 {
• font-size: 30px;}
• h2 {
• font-size: 12pt;
• }
• h3 {
• font-size: 120%;
• }
• p {
• font-size: 1em;
• }

• [font]нинг қисқартирилган ёзилиши

• p {
• font-style: italic;
• font-weight: bold;
• font-size: 30px;
• font-family: arial, sans-serif;
• }

• Юқоридаги стилларни қисқартириб қуйидагича ёзиш мумкин:

• p { font: italic bold 30px arial, sans-serif; }

• Қисқартириб ёзилиш тартиби:
• font-style | font-variant | font-weight | font-size | font-family

• text-indent
• text-align
• text-decoration
• letter-spacing
• text-transform

• [text-indent] матнни чекиниши

• p {
• px;
• }

• 3. Матн хоссалари

• [text-align] матнни текисланиши

• Қийматлари: left, right, centred ёки justify.

• th {
• text-align: right;
• }
• td {
• text-align: center;
• }
• p {
• text-align: justify;
• }

• [text-decoration] матн декорацияси(кўриниши)

• h1 {
• text-decoration: underline;
• }
• h2 {
• text-decoration: overline;
• }
• h3 {
• text-decoration: line-through;
• }

• [letter-spacing] ҳарфлар орасидаги масофа

• h1 {
• letter-spacing: 6px;
• }
• p {
• letter-spacing: 3px;
• }

• [text-transform] матнни трансформацияси

• Қийматлари: capitalize, uppercase ёки lowercase.
• Масалан, "headline" сўзини "HEADLINE" ёки "Headline" каби тасвирлаш мумкин. text-transformнинг 4 та қиймати мавжуд:
• capitalize
• Ҳар бир сўзни бош ҳарфга ўтказади. Масалан: "john doe" сўзи "John Doe" каби тасвирланади.
• uppercase
• Барча ҳарфларни бош ҳарфга ўтказади. Масалан: "john doe" сўзи "JOHN DOE" каби тасвирланади.
• lowercase
• Барча ҳарфларни қуйи регистрга ўтказади. Масалан: "JOHN DOE" сўзи "john doe" каби тасвирланади.
• none
• Трансформация йўқ. Матн HTML коддаги каби тасвирланади.

• h1 {
• text-transform: uppercase;
• }
• li {
• text-transform: capitalize;
• }

• a {
• color: blue;
• }

• Псевдокласс: link
• Псевдосинф :link дан ҳали фойдаланувчи мурожаат қилмаган ҳолатда фойдаланиши мумкин.

• a:link {
• color: #6699CC;
• }

• 4. Ҳаволалар псевдосинфлари

• Псевдокласс: visited
• Псевдосинф : visited бу фойдаланувчи ҳаволага мурожаат қилгандан кейинги ҳолати

• a:visited {
• color: #660099;
• }

• Псевдокласс: active
• Псевдосинф :active айни вақтда мурожжат қилинган(фаол) ҳавола.

• a:active {
• background-color: #FFFF00;
• }

• Псевдокласс: hover
• Псевдосинф :hover сичқонча кўрсаткичи ҳаволани устига йўналтирилган ҳолати.

• a:hover {
• color: orange;
• font-style: italic;
• }

• Мисол 1a: Ҳарфлар орасидаги масофа

• a:hover {
• letter-spacing: 10px;
• font-weight:bold;
• color:red;
• }

• Мисол 1b: UPPERCASE ва lowercase

• a:hover {
• text-transform: uppercase;
• font-weight:bold;
• color:blue;
• background-color:yellow;
• }

• Мисол 2: Ҳаволадаги остки чизиқни олиб ташлаш

• a {
• text-decoration:none;
• }

• Ёки қуйидаги алоҳида ҳолатлар учун ҳам қўллаш мумкин.

• a:link {
• color: blue;
• text-decoration:none;
• }
• a:visited {
• color: purple;
• text-decoration:none;
• }
• a:active {
• background-color: yellow;
• text-decoration:none;
• }
• a:hover {
• color:red;
• text-decoration:none;
• }

• class ёрдамида гуруҳлаш

• 
  Оқ вино учун узум:
  
• • Рислинг
  • Шардонэ
  • Пино Блан
• 
  Қизил вино учун узум:
  
• • Кабернэ Совиньон
  • Мерло
  • Пино Нуар

• HTML-код

• 5. Идентификация ва гуруҳлаш (class и id)

• Қуйидаги мисол учун классдан фойдаланамиз:

• 
  Оқ вино учун узум:
  
• • Рислинг
  • Шардонэ
  • Пино Блан
• 
  Қизил вино учун узум:
  
• • Кабернэ Совиньон
  • Мерло
  • Пино Нуар

• whitewine ва redwine классларини боғлаймиз.

• a {
• color: blue;
• }
• a.whitewine {
• color: #FFBB00;
• }
• a.redwine {
• color: #800000;
• }

• HTML-код

• CSS-стил

• id ёрдамида элементни идентификация қилиш

• Бўлим 1

• ...
•