Poradnik skrótów
Poniżej przestawie wam krótkie formułki, które są niezbędne do późniejszego wykorzystania ich w css, podpisie lub budowie wyglądu forum lub stron. Podziele je również na kategorię. TŁA • background-color - kolor tła, który nadajemy poprzedzając go znacznikiem # (np. background-color: #2D557D;) - ja używam strony z generatorem kolorów http://fonty.pl/kolory.htm#generator • background-image: - zamiast koloru tła możemy ustalić w zamian tło obrazkowe (np. background-image: url(adresobrazka.png) !Important;) Użyłam również tu komendy important by mieć pewność, że obrazek będzie się wyświetlał. Dodatkowo obrazki polecam umieszczać z https://imgur.com/ ROZMIARY • height - ustalamy wysokość (np. height: 220px;) • width - ustalamy szerokość (np. width: 340px;) • max-height - ustalamy maksymalną wysokość (np. 120px;) • max-width - ustalamy maksymalną szerokość (np. 40px;) • min-height - ustalamy minimalną wysokość (np. 50px;) • min-width - ustalamy minimalną szerokość (np. 10px;) BORDER • border - inaczej ramka, która obejmuje każdą stronę jednak przy tym musimy pamiętać o ustawieniu parametrów bez, których kod nie podziała, a mianowicie mowa tu o grubości borderu np. 5px oraz o rodzaju obramowania (solid - prosta linia, dotted - kropkowana linia, double - podwójna linia, dashed - przerywana linia, none - brak obramowania;) - oczywiście istnieją jeszcze cztery inne (inset - wklejające, outset - uwypuklające, groove - wklęsłe, ridge - wypukłe - proponuje zobaczyć je na jakimś testowym forum lub kodzie bo ciężko wytłumaczyć jak on prawidłowo wyglądają) i ostatnią rzeczą jaką trzeba uwzględnić to kolor obramowania. (np. border: 2px solid #242225;) Poniższych obramowań używamy tak samo, jak zwykły border • border-left - obramowanie dotyczące lewej strony • border-right - obramowanie dotyczące prawej strony • border-top - obramowanie dotyczące górnej strony • border-bottom - obramowanie dotyczące dolnej strony Tych kodów możemy użyć do uzyskania różnych efektów i kolorów dla jednego obrazka, czy tła, etc. • border-radius - zaokrąglenie rogów. Pamiętajmy, że możemy ustalić je jak chcemy, mogą być różne lub takie same (np. border-radius: 50px; - obejmuje wszystkie rogi, zaś border-radius: 15px 20px 35px 30px; - obejmuje każdy róg osobno - lewy górny, prawy górny, prawy dolny, lewy dolny) MARGIN • margin - inaczej marginesy dzięki, którym możemy coś przesunąć • margin-top - margin górny (np. margin-top: 20px;) • margin-bottom - margin dolny (np. margin-bottom: 10px;) • margin-left - margin lewy (np. margin-left: 2px;) • margin-right - margin prawy (np. margin-right: 200px;) Pamiętajcie, że również można ustalić tu margin taki jak: margin-right: -230px; Wartości minusowe w tym wypadku działają na przesunięcie w przeciwnym kierunku. CZCIONKI • font-size - rozmiar czcionki (np. font-size: 12px;) • font-family - rodzaj czcionki, ustalamy jaka ma być w danym tekście i mała uwaga przed całym kodem, czy to w poście, czy podpisie lub w panelu administracyjnym w sekcji HEAD w nagłówku forum, albo w arkuszu css, wstawcie link do czcionki, aby wam prawidłowo zadziałała. (np. font-family: 'Homemade Apple', cursive;) - zaś link do niej ) • font-weight - grubość naszej czcionki (np. font-weight: 600; lub font-weight: normal;) normal - normalna bold - pogrubiona, w tym wypadku działą również skala ustalona co 100 (np. 100, 200, 500, 600) • text-align - wyrównanie tekstu (np. text-align: center;) center -wyśrodkowanie justify - wyjustowanie left - do lewej right - do prawej • text-decoration - dekoracja tekstu (np. text-decoration: underline;) underline - podkreślenie tekstu line-through - przekreślony tekst overline - linia, która wyświetla się nad tekstem none - brak dekoracji • letter-spacing - odstępy między literami, można je przybliżyć do siebie lub oddalić (-/+) (np. letter-spacing: 3px; lub letter-spacing: -2px;) • text-shadow - cień tekstu i oczywiście parametry (np. 2px 1px 4px #c8c8c8;) pierwszy oznacza przesunięcie w poziomie, drugi w pionie, trzeci rozmycie, a czwarty ustala kolor • text-transform - ustala jaki tekst będzie wyświetlany (np. text-transform: capitalize;) uppercase - wyświetli nam tylko i wyłącznie drukowane litery lowercase - wyświetli nam tylko i wyłącznie wszystkie litery z małej litery capitalize - powoduje, że pierwsze litery wyrazów będa wyświetlane z dużej litery INNE • overflow - ustalamy, w jaki sposób dany element się zachowuje, gdy nie mieści się w swoim rozmiarze (np. overflow: hidden;) auto - pojawia nam się tu suwak hidden - kiedy coś się nie miesci to zostaje ukryte • padding - margines wewnętrzny, który określa odstęp pomiędzy początkiem elementu, a jego treścią - ten obejmuję każdą stronę (np. padding: 18px;) • padding-top, padding-bottom, padding-right, padding-left - marginesy wewnętrzne, które obejmują różne strony (góra, dół, prawo, lewo, np. padding-bottom: -3px;) • img src - w ten sposób możemy wstawić obrazek w różne miejsca, kiedy zawodzi nas inny kod taki jak: [img]linkdoobrazka[/img]
• a href - atrybut, który służy do wstawiania linków, a inacze link, który ma za cel przekierować nas na konkretną stronę.
