• Wpisów: 315
  • Średnio co: 7 dni
  • Ostatni wpis: 1 rok temu, 13:44
  • Licznik odwiedzin: 457 763 / 2526 dni
 
testowo
 
Zanim przejdziemy do dalszej czesci minikursu,postaram sie Wam objasnic-jak i jakie rodzaje obramowan mozemy wstawic...
Obramowania w pewien sposob moga upiekszyc bloga,dlatego postanowilem sie na tym skupic...

A wiec za obramowanie odpowiada BORDER:

border-top oznacza gorne obramowanie,
border-bottom oznacza dolne obramowanie,
border-right oznacza prawe obramowanie,
border-left oznacza lewe obramowanie...

Oprocz tego rozrozniamy rodzaje obramowan:

none -oznacza brak obramowania,
dashed -oznacza obramowanie kreskowane,
dotted -oznacza obramowanie kropkowane,
solid -oznacza grube obramowanie,
double -oznacza podwojne obramowanie,
groove -oznacza obramowanie trojwymiarowe...

Oczywiscie w nastepnych lekcjach pokaze na przykladach jak zrobic obramowanie,jednak mam nadzieje ze to Wam tylko ulatwi prace z nimi...

Teraz zrobimy przykladowe obramowanie,np na prawym bloku...

Mamy za zadanie zrobic kropkowane obramowanie koloru czerwonego-tylko prawej strony i dolu o grubosci 2px:

.sidebox {
border-right: red 2px dotted;
border-bottom: red 2px dotted;
border-top: none;
border-left: none;
}

Jak widzicie gorne i lewe obramowanie ma wartosc NONE-oznacza to ze tych obramowan nie bedzie widac,jedynie prawe i dolne w kolorze czerwonym i kropkowane...

Wybaczcie jezeli pisze niezbyt zrozumiale ale to u mnie norma...;)

Napisze Wam jeszcze jeden przyklad a dokladnie-jezeli chcemy zeby obramowanie bylo na okolo bloku,czyli z 4 stron-mozemy to zrobic na dwa sposoby...

Przyklad 1.

.sidebox {
border-top: green 2px dotted;
border-right: green 2px dotted;
border-left: green 2px dotted;
border-bottom: green 2px dotted;
}

Przyklad 2.

.sidebox {
border: green 2px dotted;
}

Jak widzicie drugi przyklad jest o wiele szybszy do wpisania-a daje nam takie same obramowanie jak pierwszy...

W dalszej czesci mini kursu czesto bedziemy do tego powracali...
ramki.png

Nie możesz dodać komentarza.
Tylko zalogowani użytkownicy mogą komentować ten wpis.

  Wyświetlanie: od najstarszego | od najnowszego