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

Бўлим 1.1

...

Бўлим 1.2

...

Бўлим 2

...

Бўлим 2.1

...

Бўлим 2.1.2

...

• HTML-код

• Бўлим 1

• ...

• Бўлим 1.1

• ...

• Бўлим 1.2

• ...

• Бўлим 2

• ...

• Бўлим 2.1

• ...

• Бўлим 2.1.2

• ...

• #c1-2 {
• color: red;
• }

• HTML-код

• CSS-стил

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

• 
  Кимки эрта ётиб, эрта турса, у соғлом, бой ва ақлли бўлади.
  

• Мисол – Иқтибос(цитата). Бенджамин Франклин:

• 
  Кимки эрта ётиб, эрта турса, у соғлом , бой ва ақлли бўлади.p>

• HTML-код

• span.benefit {
• color:red;
• }

• CSS-стил

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

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

• <div id="democrats">
• • Франклин Д. Рузвелт
  • Гарри Трумэн
  • Джон Ф. Кеннеди
  • Линдон Б. Джонсон
  • Джимми Картер
  • Билл Клинтон

<div id="republicans">

• Дуайт Д. Эйзенхауэр
• Ричард Никсон
• Джэралд Форд
• Роналд Рейган
• Джордж Буш
• Джордж У. Буш

• #democrats {
• background:blue;
• }
• #republicans {
• background:red;
• }

• HTML-код

• CSS-стил

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

• Article 1:

• 
  
• All human beings are born free и equal in dignity и rights. They are endowed with reason и conscience и should act towards one another in a spirit of brotherhood
• 
  

• Матнга ранг берсак натижа қуйидагича бўлади:

• ва
  . Элементлари учун боксли модел қуйидагича бўлади:

• Майдонлар ва уларни тўлдириш

• Элемент учун майдонни ўрнатиш

• Элементнинг 4 та томони бўлади: right, left, top ва bottom. Майдоннинг margin хусусияти қўшни элементлар билан масофани белгилайди(ёки ҳужжат рамкаси билан).

• Мисол сифатида ҳужжатнинг томонларини элементи мисолида кўрамиз.

• CSS-коди қуйидагича:

• body {
• margin-top: 100px;
• margin-right: 40px;
• margin-bottom: 10px;
• margin-left: 70px;
• }

• Қисқароқ кўриниши:

• body {
• margin: 100px 40px 10px 70px;
• }

• Ихтиёрий тег учун майдонни худди шундай ўрнатишимиз мумкин. Мисол:
  теги учун:

• body {
• margin: 100px 40px 10px 70px;
• }
• p {
• margin: 5px 50px 5px 50px;
• }

• Элементни ичини тўлдириш

• Элементнинг ичи унинг ташки чегарасигача тулдирилади.
• Тулдириш учун padding хусусияти сингари, фон буялади:

• h1 {
• background: yellow;
• }
• h2 {
• background: orange;
• }

• Сарлавҳани фонини бўяш учун хар бир сарлавҳанинг чегарасини белгилаб оламиз:

• h1 {
• background: yellow;
• padding: 20px 20px 20px 80px;
• }
• h2 {
• background: orange;
• padding-left:120px;
• }

• Рамкалар

• border-width
• border-color
• border-style

• Рамка қалинлиги [border-width]

• Рамкани қалинлиги border-width хусусияти орқали аниқланади ҳамда thin, medium ва thick қийматларни ёки пикселда қийматларни олади. Масалан:

• Рамки ранги [border-color]

• border-color хусусияти рамка рангини белгилайди. Масалан: "#123456", "rgb(123,123,123)" ёки "yellow" .

• Рамка тури[border-style]

• Турли хил рамкалар бор. Қуйида рамкаларнинг 8 хил тури Internet Explorer 5.5даги натижа мисолида берилган. Барча мисоллар "gold" рангида ва "thick" қалинлигида берилган.

• Рамка тури учун none ёки hidden хусусияти орқали уни кўринмайдиган қилиш мумкин.

• Мисоллар

• h1 {
• border-width: thick;
• border-style: dotted;
• border-color: gold;
• }
• h2 {
• border-width: 20px;
• border-style: outset;
• border-color: red;
• }
• p {
• border-width: 1px;
• border-style: dashed;
• border-color: blue;
• }
• ul {
• border-width: thin;
• border-style: solid;
• border-color: orange;
• }

• Рамкани турт томони учун ҳам алоҳида хуcуcиятлар бериш мумкин.
• Масалан:

• h1 {
• border-top-width: thick;
• border-top-style: solid;
• border-top-color: red;
• border-bottom-width: thick;
• border-bottom-style: solid;
• border-bottom-color: blue;
• border-right-width: thick;
• border-right-style: solid;
• border-right-color: green;
• border-left-width: thick;
• border-left-style: solid;
• border-left-color: orange;
• }

• [border] нинг қисқартирилган шакли

• p {
• border-width: 1px;
• border-style: solid;
• border-color: blue;
• }

• қуйидагича:

• p {
• border: 1px solid blue;
• }

• height/буйи ва width/эни

• [width] элемент кенглигини ўрнатамиз

• div.box {
• width: 200px;
• border: 1px solid black;
• background: orange;
• }

• [height] элемент баландлигини ўрнатамиз

• div.box {
• height: 500px;
• width: 200px;
• border: 1px solid black;
• background: orange;
• }