Lesson css: home

Lesson CSS:

1.HOME


CSS - bu HTML hujjatini uslublash uchun foydalanadigan til.

CSS HTML elementlari qanday ko'rsatilishi kerakligini tasvirlaydi.

2.CSS Syntax:

p {

color: red;

font-size: 18px;

}

3.CSS Selectors:

CSS selektori siz uslublashni xohlagan HTML element(lar)ni tanlaydi.

Biz CSS selektorlarini besh toifaga ajratishimiz mumkin:

-Oddiy selektorlar (nom, id, sinf asosida elementlarni tanlang)

-Kombinator selektorlari (elementlarni ular orasidagi ma'lum munosabatga asoslangan holda tanlang)

-Pseudo-klass selektorlari (ma'lum bir holatga asoslangan elementlarni tanlash)

-Pseudoelement selektorlari (elementning bir qismini tanlash va uslublash)

-Attribute selectors (select elements based on an attribute or attribute value)

Selector	Example	Example description
#id	#firstname	Selects the element with id="firstname"
.class	.intro	Selects all elements with
element.class	p.intro	Selects only elements with
*	*	Selects all elements
element	p	Selects all elements
element,element,..	div, p	Selects all elements and all elements

4. How To add CSS:

Uslublar jadvalini kiritishning uchta usuli mavjud:

-Tashqi CSS

-Ichki CSS

-Inline CSS
5. Comments:

/* This is
a multi-line
comment */
6.CSS Backgrounds:

background-color

• 
  background-image

body {
  background-image: url("paper.gif");
}
  
• 
  background-repeat

repeat-x, repeat-y, no-repeat;
  
• 
  background-attachment
  
• 
  background-position
  
• 
  background (shorthand property)(background: #ffffff url("img_tree.png") no-repeat right top;
  
• 
  opacity: 0.3;
  

7.CSS Borders:

border-style:

dotted - Defines a dotted border

• 
  dashed - Defines a dashed border
  
• 
  solid - Defines a solid border
  
• 
  double - Defines a double border
  
• 
  groove - Defines a 3D grooved border. The effect depends on the border-color value
  
• 
  ridge - Defines a 3D ridged border. The effect depends on the border-color value
  
• 
  inset - Defines a 3D inset border. The effect depends on the border-color value
  
• 
  outset - Defines a 3D outset border. The effect depends on the border-color value
  
• 
  none - Defines no border
  
• 
  hidden - Defines a hidden border
  

border-width:

 border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */

border-color:

border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */

p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

8. CSS Margins:

p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

9. CSS paddings:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

10.CSS Height and Width:

auto - Bu standart. Brauzer balandlik va kenglikni hisoblab chiqadi;

length – Matnga qarab kengayadi;

% - O'z ichiga olgan blokning foizida balandlik/kenglikni belgilaydi;

initial - Balandlik/kenglikni standart qiymatiga o'rnatadi;

11. CSS Box Model:



12. CSS Outline:



outline-style

dotted - Defines a dotted outline

• 
  dashed - Defines a dashed outline
  
• 
  solid - Defines a solid outline
  
• 
  double - Defines a double outline
  
• 
  groove - Defines a 3D grooved outline
  
• 
  ridge - Defines a 3D ridged outline
  
• 
  inset - Defines a 3D inset outline
  
• 
  outset - Defines a 3D outset outline
  
• 
  none - Defines no outline
  
• 
  hidden - Defines a hidden outline
  

• 
  outline-color
  
• 
  outline-width
  
  • 
    thin (typically 1px)
    

• 
  medium (typically 3px)
  
• 
  thick (typically 5px)
  
• 
  A specific size (in px, pt, cm, em, etc)
  

• 
  
  
• 
  outline-offset
  
  • 
    outline-offset: 15px;
    
• 
  outline