Podstawowe kody CSS

POZYCJA: center - wyśrodkowanie;  justify - wyjustowanie; right - do prawej; left - do lewej;
STRONA: left - lewa; center - środkowa; right - prawa;
ADRES: adres url do obrazka, który ma się znaleźć w jakimś miejscu.
#FFFFFF: kolor zapisany szesnastkowo.
RAMKAdotted- kropkowana, dashed- przerywana, solid- ciągła, double- podwójna, hidden- niewidoczna


NAGŁÓWEK

  ustalenie wysokości nagłówka
                     .header { height: 300px;}                         


KARTY

kolor tła kart
.tabs-outer {background-color: #FFFFFF;} 
    
                     obrazek jako tło kart                         
.tabs-outer {background-image: url(URL);} 
  
                                       rodzaj ramki wokół karty                                        
.tabs-outer {border-style: RAMKA;}       

                                    Grubość ramki wokół karty                                         
.tabs-outer {border-width: 5px;}      

    margines kart (górny, prawy, dolny, lewy)
.tabs-outer {margin: 10px 20px 30px 40px;}       

rozsunięcie przycisków kart
.tabs-inner .widget li a {margin: 15px;}     
          
     Odstępy pomiędzy linkami kart
.tabs-outer .widget li a {margin: 5px;}

Długość belki z kartami
.tabs-outer {width: 450px;}  
         
               wysokość belki z kartami               
                                                         .tabs-outer {top: 20px;}                                                         



POSTY

Pozycja nagłówka postu
h3.post-title {text-align: POZYCJA;}   
    
Pozycja daty
h2.date-header {text-align: POZYCJA;}

duże litery w tytule posta
h3.post-title {text-transform: uppercase;}  

  Zaokrąglone rogi tła pod postem
 (Wartości odpowiadają kolejnym rogom zgodnie z kierunkiem ruchu wskazówek zegara, zaczynając od prawego górnego)

.post {border-radius: 10px 20px 30px 40px;}

Margines posta
.post {padding: 50px;}  

Styl ramki wokół postów.
.post {border-style: RAMKA;} 
Grubość ramki wokół postów.
.post {border-width: 1px;}      
   
  Suwak w notce.
.post { overflow: scroll; width: 450px; height: 600px; }

Usunięcie linków "Starszy post", "Nowszy post".
.blog-pager { display: none !important;}    
         
Obrazek pod postem (oddzielający posty)
.post {background-image: url(URL);}    

Linia oddzielająca posty
post-footer {border-bottom: 1px solid #FFFFFF ;}
Usunięcie napisu 'Technologia blogger'
#Attribution1 {display: none;}


KOMENTARZE

Margines komentarza
.comment p {padding: 10px;}   

Styl ramki wokół komentarza
.comment p {border-style: RAMKA;}

Okrągłe awatary w komentarzach
 (wszystkie wartości muszą być takie same!)

.avatar-image-container {
-moz-border-radius: 20px !important;
-webkit-border-radius: 20px !important;
-goog-ms-border-radius: 20px !important;
border-radius: 20px !important;
}             

Styl ramki wokół awatara.
.avatar-image-container {border-style: RAMKA;}   
       
Grubość ramki wokół awatara.
.avatar-image-container {border-width: 5px;} 


KOLUMNY

     Pozycja tekstu w danej kolumnie.
.column-strona-inner {text-align: POZYCJA; }

Marginesy w danej kolumnie
column-strona-inner { margin: 25px 50px 75px 100px; } 
             
Ustawienie odległości pomiędzy linijkami w widżetach.
.sidebar .widget { line-height: 5px; }     

 LINKI

Rozsunięcie się liter linku po najechaniu kursorem.
a:hover { letter-spacing: 3px; } 

Rozsunięcie się wyrazów linku po najechaniu kursorem.
a:hover { word-spacing: 5px; }

Pojawienie się ramki wokół linku po najechaniu kursorem.
a:hover {border-STRONA-style: RAMKA ;}         

   Pojawienie się cienia za linkiem po najechaniu kursorem
a:hover  {text-shadow: 5px 5px 2px #FFFFFF; }

Litery linku stają się duże po najechaniu kursorem.
a:hover {font-variant: small-caps;}        

Pojawienie się ramki o danym kolorze wokół linku po najechaniu kursorem
a:hover{outline-color: #FFFFFF;}            

Rodzaj ramki która pojawi się wokół linku po najechaniu kursorem
a:hover{outline-style: RAMKA;}      

  • Share: