Pomoc z CSS


Witaj jestem Jane i w tej zakładce pokażę Ci ,jak zrobić podstawowy szablon w CSS: 


Każdy kod CSS składa się z 2 członów.
a)selektor np.
.column-center-inner
b)kod np.
{background-color: #ffffff ;}

-trzeba uważać by nie usunąć żadnego znaku np. ( ;} ),
ponieważ wszystkie inne kody przestaną działać.
-Podczas pisania kodów CSS , trzeba każdy od siebie oddzielać (selektor) poprzez Enter,
przesunięcie do następnej linijki. np.

.column-center-inner {background-color: #ffffff ;}
.main-inner .column-left-inner {background-image: url(LINK) ;}
.header-inner {border-left: 4px solid white ;}

SPIS NAJCZĘŚCIEJ UŻYWANYCH SELEKTORÓW:

.main-inner - wszystkie kolumny
.column-center-inner - kolumna środkowa
.main-inner .column-left-inner - kolumna lewa
.main-inner .column-right-inner - kolumna prawa
.post - post
h2 - wszystkie nagłówki widżetów (łącznie z tytułem posta)
#PageList1 - menu
#PageList1 li a:link, #PageList1 li a:visited - menu ,ale jako link i gdy po najechaniu zostawiamy
                                                                w spokoju
#PageList1 li a:hover - menu po najechaniu
#LinkList1 - lista linków
.post blockquote - cytat
.comment p - komentarz
.avatar-image-container - Avatar
#blog-pager - pager
.blog-pager a - linki pagera (starszy post,nowszy post ,strona główna)
.blog-pager a:hover - linki pagera po najechaniu (starszy post,nowszy post ,strona główna)

SPIS NAJCZĘŚCIEJ UŻYWANYCH KODÓW CSS

{margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;} - pozycjonowanie

{padding: 0px ;} - "odstępy"
{opacity: 90% ;} - przezroczystość (łącznie z tekstem )
{background-color: #000000 ;} - kolor tła
{background-image: url( LINK URL ) ;} - obrazek tła
{box-shadow: 0px 0px 0px white;} - cienie
{border-left: white 2px solid ;} - ramka z lewej strony , po zamianie left na np. bottom , ramka będzie na       dole
{border-radius: 10px 10px 10px 10px;} - zaokrąglenie ramek
{font-size: 12px;} - wielkość liter
{margin: 0px -0px;} - margines

NAJCZĘŚCIEJ UŻYWANE LINKI URL DO TŁA
kod - {background-image: url( LINK URL ) ;} w miejsce LINK URL wklejasz któryś z linków poniżej:

JASNE

-białe - http://funkyimg.com/i/GthQ.png
-zielone - http://funkyimg.com/i/GthX.png
-niebieskie - http://funkyimg.com/i/GthV.png
-złote - http://funkyimg.com/i/GthY.png
-różowe - http://funkyimg.com/i/GthW.png

CIEMNE
-czarne - http://funkyimg.com/i/GthR.png
-czerwone - http://funkyimg.com/i/GthS.png
-brązowe - http://funkyimg.com/i/GthR.png

************
Wszystkie wartości liczbowe typu ( 25px) można zmieniać , tak samo jak #000000 , url tła i rodzaje / kolory ramek , cieni itd.
KOPIUJĄC , KOPIUJ TYLKO SAM KOD BEZ TŁUMACZEŃ ,PONIEWAŻ INACZEJ KODY NIE BĘDĄ DZIAŁAĆ !!!

3 komentarze:

  1. Jaki jest kod na pasek, dzięki któremu możemy przesuwać stronę w dół? http://funkyimg.com/i/JhZi.png
    Jeśli to jest bardziej skomplikowane to nie musisz wszystkiego tłumaczyć :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Ten kod otrzymałam od pewnej bardzo miłej osóbki ,a dokładnie z jej bloga :) wyślij jej komenta jak użyjesz ok ? proszę bardzo LINK a kod wygląda tak :)

      }
      vertical {
      background-color:#000000;
      height: 50px;
      }
      ::-webkit-scrollbar {
      height: 10px;
      width: 9px;
      background-color: #000000;
      }
      ::-webkit-scrollbar-thumb{background: #ffffff ;
      border-radius:5px;}
      }
      POZDRAWIAM ! :D

      Usuń

Bardzo dziękuję, za każdy dodany komentarz :)