Co wpisujemy w selektory?

Zamieściłam tu informacje dla początkujących, jak i dla tych, którzy na CSS już trochę się znają.
Na niewielu blogach są udostępnione te informacje, a jak już są udostępnione, to początkujący nie potrafią z nich korzystać, dlatego postaram się opisać wszystko najprzystępniej jak się da.

Na początek krótkie wprowadzenie, a później wypunktuję wszystko po kolei.
*SELEKTOR - nazwa danego gadżetu w kodzie CSS i HTML (dokładny spis selektorów z czasem dodam na bloga)
*WARTOŚCI - komendy wpisywane w selektor, aby dany gadżet nabrał odpowiedniego wyglądu.

Pokażę to Wam na przykładzie takiego kwadracika, który będziemy edytować (gdzie się da to pokazać, oczywiście te wartości możecie wpisywać w KAŻDY selektor, według uznania).

Tło
kolor tła
Jest kilka możliwości dodawania koloru tła:
.strona1 {background: #f16f9e;}
.strona2 {background-color:#f16f9e;}
Jeśli dodajemy tylko kolor strony,  jest obojętne, czy dodamy {background: #color;}, czy {background-color: #color;}
.strona3 {background: pink;}
.strona4 {background: #ddd;} (jeśli kolor ma w wartości takie same cyfry, bądź litery, można skrócić to do trzech znaków.)
strona 1
strona 2
strona3
strona4
obraz tła
.strona1 {background: url(http://funkyimg.com/i/Sc3B.jpg);}
.strona2 {background-image: url(http://funkyimg.com/i/Sc3B.jpg);}
Tak samo jak w przypadku koloru; jeśli dodajemy tylko obraz tła, nie ma różnicy czy użyje się {background: url();}, czy {background-image: url();}
strona 1
strona 2
kolor i obraz tła
Można także mieszać kolor z obrazem tła, wtedy uważamy, żeby przy wartości obrazu było {background-image:url();}, a wartości koloru {background-color: #nazwakoloru;}
.strona1 {background-image: url(http://funkyimg.com/i/HoxP.png);
background-color: #f16f9e;}

Można także zapisać w ten sposób:
.strona1 {background-image: url(http://funkyimg.com/i/HoxP.png);
background: #f16f9e;}

strona 1
kilka obrazów tła
Używamy tego, gdy chcemy dodać obraz tylko na górze, bądź na dole selektora (do tego potrzebne jest pozycjonowanie, które jest opisane poniżej), bądź jeśli chcemy nałożyć na siebie kilka teł.
PAMIĘTAJCIE, ŻE TŁO, KTÓRE JEST PIERWSZE, JEST NAJBARDZIEJ WIDOCZNE I PRZYSŁANIA NASTĘPNE TŁA, WIĘC KOLEJNOŚĆ JEST WAŻNA.
Przy stronie 2 zastosowałam te same właściwości, ale wypozycjonowałam tło, żebyście widzieli, że są dwa tła nałożone na siebie.
.strona1 {background-image: url(http://funkyimg.com/i/GwJ8.png), url(http://funkyimg.com/i/Sc3B.jpg);}
strona 1
strona 2
pozycja obrazu tła
Jeśli mamy duży element, a chcemy, aby tło było tylko na górze, możemy łatwo wypozycjonować tło (pamiętając, żeby zablokować powtórzenie tła, co jest opisane poniżej). Z pozycjonowaniem trzeba się pobawić, według własnego uznania, pokażę tu niektóre efekty, jakie można uzyskać.
Naszym obrazem tła będzie: http://funkyimg.com/i/Srgg.png
.strona1 {background-position: left top;}
.strona2 {background-position: top;}
.strona3 {background-position: left bottom;}
.strona4 {background-position: right center;}
strona 1
strona 2
strona 3
strona 4

.strona1 {background-position: 20px 40px;}
.strona2 {background-position: -20px -10px;}
.strona3 {background-position: 20px -10px;}
.strona4 {background-position: -20px 40px;}
Pierwsza właściwość na plusie przesuwa tło w prawo, a na minusie w lewo;
Druga właściwość na plusie przesuwa tło w dół, a na minusie w górę.
strona 1
strona 2
strona 3
strona 4
powtórzenie obrazu tła
Ponownie posłużę się tym obrazem: http://funkyimg.com/i/Srgg.png
.strona1 {background-repeat: repeat;}
.strona2 {background-repeat: no-repeat;}
.strona3 {background-repeat: repeat-y;}
.strona4 {background-repeat: repeat-x;}
*domyślną wartością jest {background-repeat: repeat;}
strona 1
strona 2
strona 3
strona 4
przewijanie obrazu tła
Zastosowałam tu selektor .body, ponieważ tylko w nim używamy tego kodu. Jest to kod na przewijanie głównego obrazu tła;
Domyślną wartością jest {background-attachment: scroll;}
.body {background-attachment: fixed;}
.body {background-attachment: scroll;}
zastosowanie wszystkich wartości na raz
Pokażę przykładowy kod na zastosowanie wszystkich wartości tła na raz. Wartości można zmieniać według uznania.
.strona1{
background-image: url(http://funkyimg.com/i/Srgg.png), url(http://funkyimg.com/i/Sc3B.jpg);
background-repeat: no-repeat, repeat;
background-position: left bottom, center;}

Zastosowałam dwa obrazy tła, pierwszy http://funkyimg.com/i/Srgg.png i drugi http://funkyimg.com/i/Sc3B.jpg, pierwszy nie jest powtórzony, drugi jest, abym miała ciągłość obrazu (jest to ważne szczególnie przy dużych elementach. Pierwszy obraz jest w lewym górnym rogu, drugi jest wyśrodkowany.
strona 1
ramki
styl ramki
Radzę w jednym gadżecie nie mieszać stylów ramek, ponieważ w efekcie blogspot źle je wyświetla i nieładnie wyglądają.
.strona1 {border-style: none;}
.strona2 {border-style: hidden;}
.strona3 {border-style: solid;}
.strona4 {border-style: dotted;}
.strona5 {border-style: dashed;}
.strona6 {border-style: double;}
.strona7 {border-style: groove;}
.strona8 {border-style: ridge;}
.strona9 {border-style: inset;}
.strona10 {border-style: outset;}
strona 1
strona 2
strona 3
strona 4
strona 5
strona 6
strona 7
strona 8
strona 9
strona 10
kolor ramki
Domyślnym kolorem ramki jest kolor tekstu danego gadżetu.
.strona1 {border-color: #d9bfc4;}
.strona2 {border-color: grey;}
strona 1
strona 2
rozmiar ramki
.strona1 {border-width: thin;}
.strona2 {border-width: medium;}
.strona3 {border-width: thick;}
.strona4 {border-width: 1px;}
.strona5 {border-width: 4px;}
.strona6 {border-width: 9px;}
strona 1
strona 2
strona 3

strona 4
strona 5
strona 6
ramki poszczególnych boków gadżetu
Radzę w jednym gadżecie nie mieszać stylów ramek, ponieważ w efekcie blogspot źle je wyświetla i nieładnie wyglądają.
.strona1 {border-bottom-style: solid;}
.strona2 {border-top-style: solid;}
.strona3 {border-right-style: solid;}
.strona4 {border-left-style: solid;}
.strona5 {border-style: solid;}
strona 1
strona 2
strona 3
strona 4
strona 5
zaokrąglenie
.strona1 {border-radius: 50px;}
.strona2 {border-radius: 50%;}
strona 1
strona 2
zastosowanie wszystkich wartości na raz
Pokażę przykładową ramkę gadżetu stworzoną z wartości, które podałam powyżej.
Przy ramkach mamy dwa sposoby na zastosowanie wartości.
.strona1{
border-style: solid;
border-color: #888;
border-width: 3px;}

Bądź łatwiejszy sposób:
.strona2 {border: solid 2px #d9bfc4;}
strona 1
strona 2
tekst
rodzaj fontu (czcionki)
.strona1 {font-family:arial;}
.strona2 {font-family:times new roman;}
INSTALACJA NIESTANDARDOWYCH CZCIONEK (tutorial)
strona 1
strona 2
kolor czcionki
.strona1 {color: white;}
.strona2 {color: #888;}
strona 1
strona 2
wyrównanie tekstu
.strona1 {text-align: center;}
.strona2 {text-align: left;}
.strona3 {text-align: right;}
.strona4 {text-align: justify;}
strona 1
strona 2
strona 3

strona 4 strona 4 strona 4
dekoracja tekstu
.strona1 {text-decoration:none;}
.strona2 {text-decoration:underline;}
.strona3 {text-decoration:line-through;}
.strona4 {text-decoration:overline;}
strona 1
strona 2
strona 3
strona 4
tramsformacja tekstu
.strona1 {text-transform:capitalize;}
.strona2 {text-transform:uppercase;}
.strona3 {text-transform:lowercase;}
strona jeden
strona dwa
strona trzy

styl tekstu
.strona1 {font-style:normal;}
.strona2 {font-style:italic;}
strona 1
strona 2
rozmiar czcionki
Rozmiar czcionki można zapisać za pomocą pikseli (px), bądź punktów (pt).
.strona1 {font-size:10px;}
.strona2 {font-size:10pt;}
strona 1
strona 2
odstępy
1. Odstęp pomiędzy literami;
2. Odstęp pomiędzy słowami;
3. Odstęp pomiędzy linijkami.
.strona1 {letter-spacing: 3px;}
.strona2 {word-spacing:30px;}
.strona3 {line-height:180%;}
strona jeden
strona dwa strona dwa
strona trzy strona trzy strona trzy
zastosowanie wszystkich wartości na raz
Możecie mieszać te wartości według uznania. Ja wybrałam losowe, żeby wam pokazać jak to wszystko działa.
.strona1 {color: #888;
font-family: times new roman;
text-align: center;
font-size: 10pt;
letter-spacing: 2px;
text-decoration:underline;
font-style:italic;
text-transform:lowercase;}

strona 1
Cienie
cień tekstu
Trzy wartości pikselowe można dodać, a ostatnia to kolor cienia.
1. Pierwsza wartość na plusie odpowiada za przesunięcie cienia w prawo, na minusie - w lewo;
2. Druga wartość na plusie odpowiada za przesunięcie cienia w dół, na minusie - w górę;
3. Trzecia wartość odpowiada za rozproszenie cienia. Im jest większa, tym cień jest bardziej niewyraźny.
.strona1 {text-shadow: 0px 0px 10px #000;}
.strona2 {text-shadow: 0px 0px 2px #000;}
.strona3 {text-shadow: 5px 0px 5px #000;}
.strona4 {text-shadow: -5px 0px 5px #000;}
.strona5 {text-shadow: 0px -5px 5px #000;}
.strona5 {text-shadow: 0px 5px 5px #000;}
strona 1
strona 2
strona 3
strona 4
strona 5
strona 6
cień całego gadżetu
Trzy wartości pikselowe można dodać, a ostatnia to kolor cienia.
1. Pierwsza wartość na plusie odpowiada za przesunięcie cienia w prawo, na minusie - w lewo;
2. Druga wartość na plusie odpowiada za przesunięcie cienia w dół, na minusie - w górę;
3. Trzecia wartość odpowiada za rozproszenie cienia. Im jest większa, tym cień jest bardziej niewyraźny.
.strona1 {box-shadow: 0px 0px 10px #000;}
.strona2 {box-shadow: 0px 0px 2px #000;}
.strona3 {box-shadow: 5px 0px 5px #000;}
.strona4 {box-shadow: -5px 0px 5px #000;}
.strona5 {box-shadow: 0px -5px 5px #000;}
.strona6 {box-shadow: 0px 5px 5px #000;}
.strona7 {box-shadow: inset 0px 5px 5px #000;}
.strona8 {box-shadow: inset -5px 0px 15px #000;}
Cienie w środku działają tak samo, jak cienie na zewnątrz, tylko do kodu trzeba dodać wartość "inset".
strona 1
strona 2
strona 3
strona 4
strona 5
strona 6
strona 7
strona 8
Zastosowanie kilku cieni na raz
Każdy cień można zastosować dowolną ilość razy i bawić się nim według własnej fantazji. Musimy jednak pamiętać, że kod cieni musi mieć ciągłość i każdy kolejny cień musimy zapisywać po przecinku, a nie w osobnej sekcji 'box-shadow'. Dotyczy się to i inset i outset (kiedy nie wpisujemy outset; cień gadżetu poza jego granicami). Pokażę to na dwóch przykładach, ale wy możecie używać cieni według własnego uznania i komponować je jak wam się tylko podoba! :)
.strona1 {box-shadow: inset -5px 0px 2px #000, inset -15px 0px 2px #ddd, inset 0px 5px 2px #fff,inset -20px -5px 2px #888, inset -25px -5px 2px #000, inset -35px -5px 2px #fff, 0px 10px 3px #000;}
.strona2 {box-shadow: inset 0px 3px 2px #ddd, inset 0px -3px 2px #fff, 20px -5px 2px #999, inset -25px -10px 2px #888, inset -35px -5px 2px #fff, 0px 10px 3px #000;}
Jak widzicie - insety możecie mieszać z outsetami, dopóki robicie to w ciągłym kodzie.
Cienie mogą posłużyć do ciekawych efektów przycisków menu, ale to pokażę Wam kiedy indziej.
strona 1
strona 2

Followers

Template made by Robyn Gleams