Wstęp
1.Co to jest CSS?
CSS jest skrótem od Cascading Style Sheet o oznacza Kaskadowy Arkusz Styli. CSS nie jest językiem programowania, jest to raczej język tagowy odpowiedzialny za stylizacje strony WWW, np , krój czcionki, kolor tła, wilekość eleemntów, pozycjonowanie elemntów, itd.
2.Ogólna konstrukcja – przykładowa definicja.
p{
font-family:verdana,arial;
font-size:30px;
color:green;
}
p-selektor
font-family, font-size, color – własności selektora
verdana, arial, 30px, green – wartości własności selektora
Definicja ta określi że wszystkie elementy p na stronie www maja miec krój z rodziny verdana lub jęsli nie zostanie odnaleziona w systemie to arial, mają mieć rozmiar 30 px i kolor zielony. Selektory można grupować np.
p, h1, span,a{
font-family:verdana,arial;
font-size:30px;
color:green;
}
3.Sposoby osadzania.
Wyrózniamy trzy sposoby osadzania CSS w kodzie:
-zewnętrzny – CSS zostaje osadzony w osobnym pliku rozszerzeniem .css i załączony do dokumentu HTML poleceniem ( HTML 5)
-wewmętrzny- CSS zostaje osadzony m dokumencie HTML między tagami w tagu
-lokalny- CSS zostaje umieszczony jako wartość atrybutu style danego tagu w dokumencie HTML np.
W momencie gdy w jednym dokumencie HTML istnieją róże sposoby osadzania CSS ( np trzy różne na raz ) to obowiązuje odpowiednia hierarchia nadpisywania wartości własności. Np. gdy kolor dla elementów o klasie .blocks jest czerwony w pliku zewnętrznym .css a w stylach lokalnych .blocks są zielone, to brany jest pod uwagę styl lokalny jako najważniejszy. Oto hierarchia ważności własności selektorów elementów:
1.lokalne
2.wewnętrzne
3.zewnętrzne
4.Jednostki.
Jednostki CSS mozna podzilić na względne i bezwzględne. Względne będą zależne od np. szerokości ekranu np % a bezwzględne będa miały stała wartość.
bezwzględne:
-in – cal
-mm – milimetr
-cm – centymetr
-pt – punkt (72 pt- 1 cal)
-pc – pica 1pc= 12 pt
względne:
-em – wysokość czcionki danego elementu
-ex – wysokość litery (x- dana litera) w danej czcionce
-px – pixel , logiczne punkty ekranowe.
5.Elementy blokowe i liniowe.
Elementy HTML (tagi) , posiadają domyślne właściwości układania się względem siebie w dokumencie.
Elementy blokowe zajmują zawsze cała powierzchnie i nakazują innym elementom zarówno liniowym jak i blokowym układanie się bezpośrednio pod nimi.
elementy blokowe:
h1,h6,p,ul, ol, li ,dl, dt, dd, div
Elementy liniowe zawsze zajmują tyle miejsca ile potrzebują i sąsiadują z innymi elementami liniowymi.
elementy liniowe:
a,b, em ,i ,img, strong, u
UWAGA!!!
Elemety linionowe którę są zagnieżdżone w elementach blokowych blokowych będą wyświetlane również jako liniowe.
Zmiana domyślnego zachowania elementów blokowych i liniowych.
div {
display:inline;
background-color:lightblue;
}
span {
display:block;
margin:15px 0;
background-color:red;
}
W przykładzie tym dzięki zmianie wartości własności display na inline ( w jednej lini ) selektora div zmieni się z domyslnego blokowego na liniowy. Element span który jest domyślnie liniowy zmieni się tutaj na blokowy.
6.Dziedziczenie.
W strukturze eleemntów html obowiązuje hierarchia ;potomkowie dziedziczą wartości własności swoich przodków o ile nie zostało to zdefioniowane w hierachi poniżej ( potomkowie) np dla elementu isnieje wartość właności color: red, to wszytskie elementy stojące w hierachi niżej względem body będą miały kolor czerwony.
7.@import, !important
Czasem gdy istnieje potrzeba zaimportowania innych reguł z css korzystamy z następującego polecenia:
@import url(‚/css/styles.css’);- nastapi dołaczenie do plkiu .css informacji CSS z innego pliku w podanej scieżce.
Czasem istnieje potrzeba łamania reguł CSS i np. chcielibyśmy aby dany element zawsze miał stała wartość np. div o szerokości 300 px. Gdy np. w pliku .css umieścimy taka informację: div{width:300px !important;} to możemy mieć pewność ,że nawet gdy ktoś umieści inna wartość szerokości elementu div w stylach lokalnych w dokumencie html to i tak szerokość będzie wynosić 300 px.
Pozycjonowanie oraz model pudełkowy- boxing – przykładowy kod
Pozycjonowanie.
Wszystkie elementy nie posiadające własności: relative, absolute, fixed – są eleemntami statycznymi nie można ich przemieszczać za pomocą własności:left, top, right, bottom.
Elementy relatywne przemieszczają sie w obrębie swojego rodzica który jest statyczny i nie posiada wyżej wspomnianych własności. Elementy relatywne generują dodatkową przestrzeń.
Elementy absolutne przemieszczają się względem okna przeglądarki ( lewa górna krawędź ) nawet gdy są dziećmi elementów statycznych.Elementy absolutne nie generują dodatkowej przestrzeni i nie wpływają na ułożenie elementów sąsiednich.
Elementy statyczne w kontekście własności fixed, nie zmieniają swojego położenia , nawet gdy pasek przeglądarki jest przewijany.
Aby móc przemieszczać zarówno elementy rodziców oraz dzieci należy stosować własność relative dla rodzica elementu oraz absolute dla jego dziecka. Element nadrzędny nad rodzicem ( np. ) powinien być statyczny ( nie mięc żadnych własności pozycjonowania ).
Model pudełkowy – boxing.
Model pudełkowy zakłada element z daną zawartością np div z elementami tekstowymi p( paragraf ). Element ten posiada granice (border) określająca jego rozmiar. Posiada dwa rodzaje marginesów :padding- margines wewnętrzny, margin- margines zewnętrzny. Margines wewnętrzny określa odległość od krawędzi elementu do zawartości elementu ( kontenera, boxa). Margines zewnętrzny określa odległość od krawędzi zewnętrznej do najbliższego sąsiedniego elementu.
Link z przykładowym obrazkiem i kodem:
http://webkod.pl/kurs-css/lekcje/dzial-1/pozycja-relatywna-absolutna-ustalona
Część CSS
#parent {
width:50%;
height:300px;
position:relative;
top:150px; – odległość od górnej krawędzi przeglądarki
left:200px;- odległość od lewej krawędzi przegladarki
margin:10 px; – margines zewnętrzny od najbliższego elementu 10px
padding:5px; – margines wewnętrzny do wewnętrznej zawartości 5px
border:2px dashed red;- krawędź eleemntu o szerokości 2px, kropkowana w kolorze czerwonym.
}
#child1 {
position:absolute; – pozycja absolutna względem rodzica
margin:1px; – margines zewnętrzny względem rodzica
top:5px; – odległość od górnej krawędzi rodzica
left:5px;- odległóść od lewej krawędzi rodzica
border:1px dashed blue;- krawędź obiektu o szerokości 1px, kropkowany , niebieski
}
#child2 {
position:absolute;
margin:1px;
top:15px;
left:15px;
border:1px dashed blue;
}Część HTML
W przykładzie ty element o id parent jest rodzicem dwoch eleementów o id child 1 i child2. Parent jest szeroki na 50% szerokości okna przeglądarki, wysokość 300px.Jego pozycja jest relatywna w stosunku do elementu nadrzędnego (np.html). Element nadrzędny jest statyczny względem parent.
Selektory CSS
Posted 3 lata ago / Bez kategorii
Czym są selektory w CSS?
Selektory w CSS odwołują się do konkretnego elementu HTML w celu dokonania na nim stylistycznych zmian. Selektory wykorzystują zależności pomiędzy eleementmi na zasadzie potomków, przodków, rodziców, dzieci, rodzeństwa. Selektory mogą się odwoływać do wartości atrybutów eleementu, wyróżnia się również selektory pseudoklas.
Pełna lista selektorów: http://www.w3schools.com/cssref/sel_element_pluss.asp
http://www.kurshtml.edu.pl/css/selektory.html#selektory_elementow
Oto kilka najważniejszych selektorów:
1.* – selektor uniwersalny, selekecja wszytskich eleementów
* {
background-color: yellow;
}Wszystkie elementy będą miały kolor żółty
2. nazwa_elementu- selektor elementu
p {
background-color: yellow;
}Wszystskie elementy p w dokumencie będą miały kolor żółty.
3.nazwa_elementu nazwa_elementu- selektor potomka
div p {
background-color: yellow;
}Wszystkie elementy p będące potomkami wszytskich elementów div będą miały tło o kolorze żółtym. Potomkowie mogą być dowolnie nisko w dole hierarchii .
4. nazwa_elementu > nazwa_elementu- selektor dziecka
div > p {
background-color: yellow;
}Wszystkie elementy p będące bezpośrednimi potomkami a zatem dziećmi elementów div mają mieć żółte tło. Elemnety muszą mieć bezpośrednich rodziców (NIE przodków w dalszej lini).
5.nazwa_elementu + nazwa_elementu – selektor rodzeństwa (braci)
div + p {
background-color: yellow;
}Wszystkie elementy p występujące bezpośrednio za div będą miały kolor żółty. Element p jest rodzeństwem (bratem) elementu div. Pomiędzy rodzeństwem nie może występować żaden element.
6. nazwa_elementu ~ nazwa_elementu – selektor ogólny rodzeństwa ( braci )
p ~ h1 {
background: #ff0000;
}Wszystkie elementy h1 będące rodzeństwem elementów p ale nie występujące bezpośrednio po elemencie p będą miały czerwone tło.
7. .nazwa_klasy_elementu -selektor klas
.intro {
background-color: yellow;
}Wszystkie elementy o klasie intro będą miały kolor żółty. Jedna nazwa klasy może dotyczyć wiele elementów i występować wiele razy.
8. #nazwa_identyfikatora – selektor identyfikatorów
#unikatowy {
background-color: yellow;
}Element o identyfikatorze unikatowy będzie miał kolor żółty. Dana nazwa identyfikatora może wystąpić tylko raz w dokumencie i dotyczyć jednego konkretnego elementu. Odwrotnością identyfikatorów są klasy.
9. Selektory atrybutów.
– nazwa_elementu[nazwa_atrybutu] – prosty selektor atrybutu
a[target] {
background-color: yellow;
}Wszystkie elementy a posiadające atrybut target będą miały żółte tło.
– nazwa_elementu[nazwa_atrybutu = wartość_atrybutu] – selektor atrybutu z daną wartością
a[target=_blank] {
background-color: yellow;
}Wszystkie elementy a z atrybutem target o wartości _blank będą miały żółte tło.
-[nazwa_atrybutu ~ = dana_fraza] selektor atrybutu z podaną frazą występującą jako część wartości atrybutu
[title~=flower] {
background-color: yellow;
}Wszystkie elementy posiadające atrybut title gdzie jego wartość zawiera również podaną frazę flower jako część składową tej wartości.
-[nazwa_atrybutu |= fraza_składowa ]- selektor atrybutu z podaną frazą jako początek całej frazy będącej częścią wartości atrybutu.
[class|=top] {
background-color: yellow;
}Wszystkie elementy posiadające klasę gdzie jej nazwa zaczyna się od frazy „top” będą miały żółte tło. Przy czym należy zauważyć, że fraza ta musi być oddzielona od reszty frazy myślnikiem.
– [nazwa_atrybutu ^=nazwa=frazy]-selektor atrybutów których wartości zaczynają się od podanej frazy, bądź litery, przy czym frazy moga być łączone i mogą być oddzielane myślnikiem oraz spacją
[class^=”test”] {
background: #ffff00;
}
10. Selektory pseudo-klas elementów dynamicznych.
-a:active- selektor aktywnego łącza
a:active {
background-color: yellow;
}Wszystskie aktywne łącza będą miały żółte tło, przy czym aktywne łącze to takie które jest w danym momencie klikane.
-:focus- selektor skupienia
input:focus {
background-color: yellow;
}Te pole input które zostało zaznaczone kursorem myszki będzie miało żółte tło. Selektor ten działa również na tagach hiperłączy.
-:hover – selektor „unoszącego” się kursora
a:hover {
background-color: yellow;
}Nad elementami a gdzie „unosi” się kursor tło będzie żółte. Selektor :hover działa na wszystkich elementach.
11. Selektory pseudo-klas hiperłączy
-:link – selektor nieodwiedzonych linków
a:link {
background-color: yellow;
}Wszytskie nieodwiedzone linki będa miały kolor żółty.
-:visited – selektor odwiedzonych linków
a:visited {
background-color: yellow;
}Wszytskie odwiedzone linki będa miały kolor żółty
– selektor kolejnego dziecka względem bezpośredniego rodzica, przy czym rodzeństwo nie musi być tego samego typu.
p:nth-child(2) {
background: red;
}Wszystkie elementy p będące dziećmi wystepujące jako drugie ( od lewej, albo od góry ) będą miały czerwony kolor.
Animacja CSS3
Posted 3 lata ago / Bez kategorii
Definicja animacji jest różnie definiowana dla przeglądarek. Powiązanie z danym elementem animacji wersja standardowa- animation-name: nazwa_animacji; animation-duration: czas trwania animacji podany w sekundach;
wersja dla safari – -webkit-animation-name: nazwa_animacji; /* Safari 4.0 – 8.0 * -webkit-animation-duration: czas trwania animacji podany w sekundach;. Definicja animacji w wersji standardowej -@keyframes nazwa_animacji { ciało definicji animacji}, wersja dla safari (macintosh)- @-webkit-keyframes nazwa_animacji {ciało definicji animacji}
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 – 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 – 8.0 */
animation-name: example;
animation-duration: 4s;
}
/* Safari 4.0 – 8.0 */
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}Dla elementów div zostanie przypisana animacja o nazwie example, zarówno dla standardowych przeglądarek jak i safari.
Czas trwania animacji został określony na 4s. Istnieja dwie formy zapisu samej definicji animacji example dla standardowej przeglądarek jak i safari. Wartości procentowe będą określać upływ czasu w sekundach np. 0-25% = 1s. Przy każdej wartości procentowej jest definicja CSS jaka ma się wydarzyć w danym momencie.
Np. 75% {background-color:green; left:0px; top:200px;} – między 3 a 4 sekundą właściwość koloru tła ma się zmienić z zielonego na czerwony a jego pozycja z top ( wierzchołek- górna krawędź) z dołu do góry.
Resetowanie -reset.css
Posted 3 lata ago / Bez kategorii
Elementy HTML tj. np. p mogą mieć domyślne wartości np domyślny margines zewnętrzny górny i dolny w momencie ich uprzedniego nie zdefiniowania. Wartości domyślne można zresetować , wyzerować lub też zmienić ich wartość na inną.
Przykładowy sposób na reset CSS znajduje się pod tym linkiem:
Responsywność css
Co to jest responsywność?
Responsywnoscią ( ang. responsive design ) nazywamy układ( layout) strony www dopasowyjący sie do każdej rozdzielczości urządzenia.
W technice rsponsywmności dobrze jest stosować tzw płynny layout- zamiast stosować sztywne , stałe wartości własności CSS zastosować wartości procentowe, dla czcionki em. Można również przyjąć dopuszczalny minimalny oraz maksymalny rozmiar kontenera ( np. div ) – np. min-width, max-width.Dzieki temu eleemnty będa się dopasowywac do rozmiarów okna przeglądarki zgodnie z definicją.
#caly_blok {
font-size:24px;
min-width:480px;
max-width:1600px;
border-left:1px solid gold;
border-right:1px solid gold;
}
#naglowek {
background-color:gold;
text-align:center;
font-size:1.6em;
line-height:1.5em;
}
#lewy {
float:left;
width:25%;
font-size:1em;
line-height:1.5em;
}
#prawy {
float:left;
width:25%;
font-size:1em;
line-height:1.5em;
}
#stopka {
clear:both;
background-color:gold;
text-align:center;
font-size:1.4em;
line-height:1.5em;
}Element o id caly_blok będzie przyjmował szerokośc z przedziału 480-1600 px. Element o id naglowek będzie miał czcionkę o rozmiarze 1.5em dzięki czemu przy zmianie rozdzielczości okna czcionka dopasuje swój rozmiar ( nie będzie stały np.px), wysokość linii 1.5em.Elementy lewy i prawy będą się układać z wyrównaniem w lewo w stosunku do okna przeglądarki. Elementy układają się jeden za drugim, ich szerokość wynosi 25% szerokości okna przeglądarki. Element stopka aby nie dziedziczyć własności float z wartością left po poprzednich elementach stosuje własność clear z wartością both.
Media Queries
Poprzez media queries można rozumieć warunki wykonania CSS. Głównie podawana jest maksymalna lub minimalna rozdzielczośc lub zakres rozdzielczości. Podawane są również typy urządzeń na których mają być zastosowane style.
@media all and (max-width:769px) {// od 0 do 768px., dla wszytskich urządzeń
#caly_blok {
font-size:15px;
}
#lewy, #srodek, #prawy {
float:none;
width:auto;
margin:15px;
}
#lewy p, #prawy p {
border:1px solid gold;
}
}
////////
@media all and (min-width:480px) and (max-width:768px) { //od 480 pikseli do 768 pikseli.
#lewy, #srodek, #prawy {
float:none;
width:auto;
margin:15px;
}
#lewy p, #prawy p {
border:1px solid gold;
}
}Gdy okno przeglądarki przyjmować będzie rozmiar w szerokości od 0 do 768 px , elementowi caly_blok przypisane będą dane własności z wartościami CSS. Elementy #lewy, #srodek, #prawy nie będą się układać jeden obok drugiego dzięki float:none.