Tworzenie Stron Internetowych odcinek 8
CSS jednostki Jednostki miary stosuje się w poleceniach dotyczących np. wielkośd czcionki lub rozmiarów marginesów. Zapis składa się z znaku "+" (domyślny) lub " ", liczby oraz jednostki. W zapisie nie można wstawiad spacji. Po wartości 0 jednostka jest opcjonalna. Przykład: +1cm. Jednostki względne: em - wysokośd aktualnej czcionki vw, vh 1% szerokości/wysokości okna przeglądarki px - piksele ekranowe (zależne od urządzenia wyświetlającego) % - procent rozmiaru elementu nadrzędnego Względne jednostki długości stosujemy, gdy chcemy się odwoład do rozmiaru innego elementu (np. wysokości aktualnie używanej czcionki). Jednostki bezwzględne: in - cal (1in = 2.54cm) cm centymetr mm milimetr pt - punkt (1pt = 1/72in) - często używane przy definiowaniu rozmiaru czcionki pc - pika (1pc = 12pt) Jednostek bezwzględne używamy wtedy, gdy chcemy, aby wybrany element zajmował zawsze taki sam obszar na ekranie lub wydruku, niezależnie od rozdzielczości i wielkości monitora.
CSS model pudełkowy Każdy element generuje w dokumencie prostokątny obszar zwany pudełkiem. Pudełko składa się z: content właściwa zawartośd pudełka (np. test, obraz) padding margines wewnętrzny (odstęp) border obramowanie margin margines (zewnętrzny) Dzięki temu można każdy element otoczyd ramką i odsunąd od innych elementów. Uwagi: Ostatnie trzy składniki są opcjonalne, tzn. mogą mied wartośd zero. Rozmiar każdego z czterech boków tych składników można zdad inny. Obwód zewnętrzny każdego z czterech obszarów nazywamy krawędzią (edge). Rozmiary elementu (cechy width oraz height) odnoszą się do samej zawartości (content) i cdn. za chwilę. Tło elementu jest określone dla wszystkich obszarów z wyjątkiem marginesów zewnętrznych, które zawsze są przezroczyste.
CSS model pudełkowy Rozmiary elementu (cechy width oraz height) odnoszą się do samej zawartości (content) i nie wpływają na pozostałe obszary pudełka. Na całkowity rozmiar pudełka składa się więc rozmiar wszystkich jego składników: Całkowita szerokośd = width + lewy padding + prawy padding + lewy border + prawy border + lewy margin + prawy margin Całkowita wysokośd = height + górny padding + dolny padding + górny border + dolny border + górny margin + dolny margin Przykład: background-color: powderblue; width:250px; padding:10px; border:5px solid gray; margin:10px; Całkowita szerokośd elementu wynosi: każdy z czterech boków po 10px każdy z czterech boków po 5px (cechy łączone, można je rozdzielid) każdy z czterech boków po 10px 250px + 2 10px (padding) + 2 5px (border) + 2 10px (margin) = 300px
CSS model pudełkowy Outline (kontur/obrys) to linia otaczająca element na zewnątrz obramowania umożliwiająca jego uwypuklenie. Obrys i obramowanie nie są tym samym. Nie można oddzielnie regulowad cech boków obrysu (wszystkie będą takie same). Obrys nie zabiera miejsca jest tworzony na elemencie rozmiar outline nie wpływa na rozmiar całkowity elementu. outline: kolor styl szerokośd przykład: p {border: 1px solid black; outline: green dotted 3px;} lub po rozbiciu na osobne cechy: outline-style: dotted; outline-color: green; outline-width: 3px;
CSS różności z pudełka Określenie maksymalnej szerokości elementu: max-width Jeśli okno przeglądarki ma szerokośd mniejszą niż zadana maksymalna, element będzie zwężony. Cecha width nie umożliwia takiego dopasowania przeglądarka w tym przypadku dodaje pasek przewijania. Przykład: div {max-width: 500px; height: 300px; background-color: lightyellow;} Nadanie tła: background Tło elementu może byd kolorem (jednolity/gradient) lub obrazem. Następujące cechy umożliwiają nadanie tła: background-color tło wypełnione kolorem, np.: background-color: lightblue; background-image tło obrazkowe, np.: background-image: url("obraz.gif"); background-repeat powtarzanie tła w kierunku x lub y lub w ogóle, np.: background-repeat: repeat-x; lub background-repeat: no-repeat; background-attachment możliwośd zablokowania obrazu tła przy przewijaniu zawartości strony: background-attachment: fixed; background-position położenie obrazu tła, np.: background-position: left top; background: linear-gradient tło kolorowe z gradientem, np. background: linear-gradient(lightblue, gray)
CSS różności z pudełka Nadanie obramowania: border Obramowanie elementu jest nadawane cechą border. Cecha obejmuje szerokośd, styl i kolor obramowania. Możliwe jest odniesienie stylu do każdego boku osobno. Przykłady: p {border: 5px solid red;} łączone cechy obramowania: grubośd, styl, kolor p {border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid;} p {border-bottom: 5px dashed red; background-color: lightgrey;} p {border: 2px solid red; border-radius: 5px;} tylko styl obramowania, rozdzielony na boki tylko łączony styl dla jednego boku plus tło obramowanie z zaokrągleniem rogów
CSS położenie Cechy opisujące położenie w CSS umożliwiają umieszczenie elementów HTML w wybranym miejscu, wsunięcie elementu za inny element lub wskazanie co ma się stad z niemieszczącą się zawartością elementu. Metody pozycjonowania: Statyczne (static) domyślna, elementy są ułożone tak jak są wpisane w HTML Względne (relative) przesuwa element względem położenia domyślnego o zadaną wartośd. Miejsce zajmowane w położeniu domyślnym nie zostaje zwolnione. h1 {position:relative; left:-20px} Ustalone (fixed) położenie elementów jest zadane względem okna przeglądarki (viewport). Nie podlegają przesunięciom nawet przy przewijaniu strony. Miejsce domyślne zostaje zwolnione. p {position:fixed; top:30px; right:5px} Bezwzględne (absolute) ustala pozycję elementu względem najbliższego elementu-przodka, który ma pozycjonowanie inne niż statyczne. Jeśli brak takiego elementu, to punktem odniesienia jest <body>. Elementy pozycjonowane w ten sposób nie wpływają na położenie innych elementów. img {position:absolute; left:100px; top:150px} Przyczepne (sticky) pozycjonowanie elementu zależy od położenia suwaka. Po przewinięciu strony i wysunięciu miejsca z elementem przyczepia się on do viewport jak w position:fixed. div{position: -webkit-sticky; /* Safari */ position: sticky; top: 0;} Pozycjonowanie ustalane jest poprzez zadanie cech left, right, top i bottom oraz przypisanie im odpowiedniej wartości.
CSS położenie Nakładanie elementów (przesłanianie) Elementy pozycjonowane inaczej niż statycznie mogą nakładad się na inne elementy. Porządkowanie nakładania umożliwia cecha z-index, która podaje kolejnośd umieszczenia w kierunku przód-tył. Elementy o większym z-index znajdują się przed tymi o mniejszym. Z-index może przyjmowad wartości dodatnie i ujemne (liczby całkowite). img {position:absolute; left:0px; top:0px; z-index:-1} Przyleganie Cecha float pozwala przesunąd element na lewo lub prawo, co umożliwia innym elementom blokowym ustawienie się obok. Przesunięcie jest wykonywane maksymalnie w lewo (left) lub w prawo (right). Elementy następujące po przesuniętym dostawią się do niego. Cecha ta jest użyteczna np. przy budowie szablonu strony. img {float:right} div {float:left} Jeśli następne elementy nie mają dosuwad się do poprzedzającego je elementu z cechą float, należy tę cechę wyłączyd. Wyłączenie może dotyczyd strony lewej (left), prawej (right) lub obu (both). p {clear:both}
CSS położenie Ustawienie w poziomie Istnieje kilka sposobów na ustawienie elementów blokowych HTML w kierunku poziomym. Wyśrodkowanie elementów można uzyskad wykorzystując cechę margin. Nadając jej wartośd auto dla marginesu lewego i prawego wskazujemy, że wolna przestrzeo powinna byd równo podzielona pomiędzy lewą i prawą stronę. div.center {margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6} Ustawienie elementów do lewej lub prawej strony można uzyskad wykorzystując cechę float i nadając jej wartośd left lub right. div.right {float:right; width:300px; background-color:#b0e0e6} Ustawienie w pionie Cecha vertical-align pozwala przesuwad elementy w pionie. Przyjmuje ona następujące wartości: baseline, middle, top, bottom, text-top, text-bottom, super, sub lub podanie jednostek miary. span{vertical-align: 3mm}, span{vertical-align: -10%}, span{vertical-align: sub}
CSS wyświetlanie Przepełnienie elementu W przypadku, gdy zawartośd elementu nie mieści się w zadanym rozmiarze, to szerokośd elementu (width) zostaje zachowana, a wysokośd (height) jest powiększana (o ile height nie jest określone). Jeśli height jest zadane, to można, używając cechy overflow, określid się co ma się stad z niemieszczącą się zawartością. Dostępne są następujące opcje: visible zawartośd wystaje poza obszar elementu hidden zawartośd niemieszcząca się jest niewidoczna scroll zawartośd jest ograniczona do obszaru elementu, ale jest dostępna w całości, bo do elementu dodawane są paski przewijania auto działa podobnie jak scroll, ale suwaki dodawane są tylko, jeśli potrzebna. div {width: 150px; height: 150px; overflow: scroll; border: 1px dotted black} Chechy overflow-x oraz overflow-y pozwalają na określenie działania w przypadku niemieszczącej się zawartości osobno w kierunku poziomym i pionowym.
CSS wyświetlanie Wyświetlanie elementu Cechy display, visibility i opacity pozwalają sterowad wyświetlaniem elementów. display pozwala wyświetlad elementy blokowe tak jakby były liniowymi (inline) a liniowe jak blokowe (block); uwaga: to nie zmienia ich charakteru li {display:inline} span {display:block} Wartośd list-item pozwala wyświetlid element tak jak element listy nieuporządkowanej. p {display:list-item} Użycie wartości none skutkuje niewyświetleniem obiektu a miejsce po nim zajmują inne elementy h3 {display:none} cecha visibility z wartością hidden również powoduje niewyświetlenie elementu, ale w przeciwieostwie do display:none miejsce niewyświetlonego elementu zostaje zachowane. h3 {visibility:hidden} Domyślna wartośd tej cechy (visible) powoduje wyświetlenie elementu.
CSS wyświetlanie Wyświetlanie elementu opacity pozwala ustawid przezroczystośd elementu (obrazka, tła); cecha ta przyjmuje wartośd od 0.0 (całkowicie przezroczysty) do 1.0 (całkowicie nieprzezroczysty) img {opacity:0.4; filter:alpha(opacity=40)} /* dla IE8 i wer. wcześniejszych */ wartośd tej cechy może byd zmieniana przy interakcji z użytkownikiem, np.: img {opacity:0.4; filter:alpha(opacity=40)} img:hover {opacity:1.0; filter:alpha(opacity=100)} Zastosowanie opacity do tła bloku z tekstem powoduje (niestety) transparentnośd tego tekstu (dziedziczenie). Można ten problem rozwiązad stosując zapis kolorów przez RGBA (red, green, blue, alpha). Alpha określa przezroczystośd. div {background: rgba(76, 175, 80, 0.3)}
CSS wyświetlanie Wyświetlanie elementu inline-block elementy z taką cechą zachowują się jak liniowe, ale nadal mogą mied cechy width i height. Pozwala to np. utworzyd siatkę obszarów (kolumny, wiersze), które zapełniają szerokośd okna przeglądarki, dostosowując automatycznie liczbę kolumn do tej szerokości. Przykład: div.grid {display: inline-block; width: 150px; height: 75px; margin: 10px; border: 3px solid #73AD21;}
CSS menu nawigacyjne Przyjazne dla użytkownika menu nawigacyjne to jedna z najważniejszych cech dobrej strony/witryny/portalu internetowej/ego. Menu nawigacyjne (=lista odnośników) budujemy wykorzystując listę nieuporządkowaną <ul> (poprawnośd semantyczna). Przykład: <ul> <li><a href="index.html">strona główna</a></li> <li><a href="metody.html">metody pomiarowe</a></li> <li><a href="odnosniki.html">odnośniki</a></li> <li><a href="kontakt.html">kontakt</a></li> </ul>
CSS menu nawigacyjne Wgląd menu ustalamy wykorzystując CSS. Krok 1 usuwamy cechy typowej listy: ul { list-style-type: none; usuwa oznaczenia wypunktowania margin: 0; ustawia marginesy i odstępy na 0 na wypadek innych padding: 0; ustawieo domyślnych w przeglądarce overflow: hidden; } treśd niemieszcząca się w swoim obszarze będzie ukryta Krok 2 zamieniamy odnośniki tekstowe na przyciski li a { display: block; } elementy menu wyświetlane są jako blokowe (możemy użyd modelu pudełka), elementy stają się klikalne w całości ul { width: 150px; } szerokośd elementów menu (przenieśd do kroku 1 dla skrócenia kodu)
CSS menu nawigacyjne Wgląd menu ustalamy wykorzystując CSS. Krok 3 dodajemy tło, odstępy i reakcję na wskazanie myszą, wyśrodkowanie ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; width: 150px; background-color: #f1f1f1; } tło menu li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } kolor tekstu odstępy usunięcie podkreślenia z odnośników li a.active { background-color: darkred; tło aktualnej strony (uwaga: class= active musi byd przy bieżąco wyświetlanym elemencie menu) color: white; } kolor tekstu li a:hover { background-color: #555; tło przy wskazaniu myszą color: white; } kolor tekstu przy wskazaniu myszą li { text-align: center; } wyśrodkowanie tekstu menu
CSS menu nawigacyjne Menu poziome - krok 1, 2, 3 ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; width: 100%; background-color: #f1f1f1; position: fixed; top: 0; left: 0; } szerokośd menu na 100% okna (opcjonalnie) blokada menu w górnym lewym rogu (opcjonalnie) li { float: left } ustawienie elementów menu obok siebie w linii li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li a.active { background-color: darkred; color: white; } li a:hover { background-color: #555; color: white; } li { text-align: center; }
CSS menu nawigacyjne A jeśli menu poziome jest za szerokie przy wyświetlaniu na małym urządzeniu? <meta name="viewport" content="width=device-width, initial-scale=1.0"> @media screen and (max-width: 930px){ #menu li {float: none;} } Wyjaśnienie za chwilę.
CSS układ strony Wykorzystując znacznik <div> lub nowe elementy blokowe (następny slajd) możemy podzielid stronę na obszary takie jak menu, zawartośd główna/poboczna, stopka, itd, czyli zbudowad układ strony. Następnie w CSS nadajemy styl poszczególnym obszarom. Przykładowy prosty układ czteroobszarowy (jednokolumnowy) na blokach div: <div id="naglowek"> nagłówek </div> <div id="menu"> menu nawigacyjne </div> <div id="zawartosc"> zawartośd strony </div> <div id="stopka"> stopka </div> Nagłówek Dobre miejsce na logo lub nazwę strony WWW, opcjonalnie dodatkowe poziome menu zawierające najważniejsze i najczęściej używane odnośniki serwisu. Menu nawigacyjne Zawiera poziome/pionowe menu. Zawartośd strony Tu znajduje się główna i opcjonalna poboczna zawartośd strony. Stopka Miejsce na skróconą notkę o prawach autorskich oraz odnośniki typu "kontakt", "polityka prywatności", itp.
CSS układ strony W HTML5 dostępne są nowe (blokowe) elementy semantyczne służące budowaniu układu stron internetowych. Te elementy to: <header> zawiera nagłówek strony, wprowadzenie do niej (może byd tekst lub obraz) <nav> definiuje zestaw odnośników będących menu nawigacyjnym <section> element definiujący części dokumentu (np. rozdział) <article> element zawierający treśd niezależną, mogącą istnied bez reszty strony (np. wpis na forum, komentarz, news) <aside> definiuje zawartośd poboczną, ale związaną tematyczne z resztą strony (np. przypisy) <footer> zawiera informację na temat samej strony (np. podaje autora, zasady wykorzystania treści, dane kontaktowe, ) Uwaga należy przed użyciem sprawdzid jak przeglądarki obsługują nowe elementy blokowe.
CSS układ strony Przykładowe układy strony. Układ danej strony może zmieniad się w zależności od urządzania wyświetlającego. smartfon tablet PC
CSS układ strony Przykładowy układ dwukolumnowy. Na początek kod HTML. <div id="header"> <h1>nagłówek</h1> <p>to jest strona testowa z układem dwukolumnowym</p> </div> <div id="navmenu"> <a href="#">link1</a> <a href="#">link2</a> <a href="#">link3</a> </div> <div id="row"> <div id="column1"> <h2>aktualności</h2> <p>zawartośd aktualności Lorem ipsum dolor sit amet, consectetur adipiscing elit </p> </div> <div id="column2"> <h2>treśd główna</h2> <p>zawartośd kolumny głównej Lorem ipsum dolor sit amet, consectetur adipiscing elit </p> </div> </div>
CSS układ strony Przykładowy układ dwukolumnowy. Reguły CSS. body { margin: 0; } /* header */ #header { background-color: #f1f1f1; padding: 20px; text-align: center; } /* navmenu */ #navmenu { overflow: hidden; background-color: #333; } /* navmenu linki*/ #navmenu a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* navmenu linki dla hover */ #navmenu a:hover { background-color: #ddd; color: black; }
CSS układ strony Przykładowy układ dwukolumnowy. Reguły CSS. /* dwie kolumny obok siebie */ #column1 { float: left; width: 25%; padding: 15px; } #column2 { float: left; width: 75%; padding: 15px; } /* usunięcie float po kolumnach */ #row::after { content: ""; display: block; clear: both; }
responsywnośd Responsive Web Design (RWD) technika projektowania strony WWW, tak aby jej wygląd i układ dostosowywał się automatycznie do rozmiaru okna urządzenia, na którym jest wyświetlany. Zaprojektowanie strony w RWD wymaga użycia HTML i CSS. Układ strony przy wyświetleniu na danym urządzeniu powinien mieścid się w szerokości wyświetlacza. Użytkownik przewija stronę tylko w pionie, a nie w poziomie. Nie ma konieczności pomniejszania w celu obejrzenia całości. Dostępne jest powiększanie. Ogólne reguły przy projektowaniu RWD: Nie stosuj dużych elementów o ustalonej szerokości. Nie dostosowuj strony do jednej szerokości, przy której będzie dobrze ona wyglądad. Używaj reguł @media dla nadania różnych stylów zależnie od wielkości urządzenia. Używaj rozmiarów względnych (np. 100%) i uważaj na pozycjonowanie absolutne (wypadnięcie elementu poza widoczny obszar). przesuń, powiększ/pomniejsz, pokaż/ukryj
responsywnośd Krok 1 viewport Viewport to obszar strony internetowej, który widoczny jest na urządzeniu użytkownika. Rozmiar viewport zależy zatem od rozmiaru wyświetlacza. W celu kontroli viewport należy dodad do kodu HTML w części <body> następujący element <meta> <meta name="viewport" content="width=device-width, initial-scale=1.0"> width=device-width wskazuje, że szerokośd strony powinna naśladowad szerokośd wyświetlacza, initial-scale=1.0 ustawia powiększenie strony przy pierwszym jej załadowaniu. Krok 2 box-sizing Cecha box-sizing umożliwia dołączenie do zadanych wymiarów width i height odstępu (padding) i obramowania (border). * { box-sizing: border-box; }
responsywnośd Krok 3 width Cecha width pozwala ustawid względne rozmiary sąsiadujących kolumn. Np.: div#menu {width: 25%; float: left;} div#tresc {width: 75%; float: left;} W kodzie HTML należy wyróżnid bloki div będące różnymi obszarami strony. Krok 4 - @media Reguła @media pozwala uwzględnid dany zestaw deklaracji CSS tylko jeśli spełniony jest zadany warunek. Np. w poniższym przypadku tło staje się niebieskie, jeśli strona jest wyświetlana na ekranie (screen) o szerokości mniejszej niż 500 pikseli. @media only screen and (max-width: 500px) { body { background-color: lightblue; } } Przy małej szerokości okna, poniżej zadanego punktu (breakpoint), strona może wyświetlad się jako jedno kolumnowa z pionowym menu. @media screen and (max-width: 500px) { div#menu {width: 100%; float: none;} div#tresc {width: 100%; float: none;} }
responsywnośd @media Reguła @media pozwala dostosowad styl do możliwości urządzenia wyświetlającego. Reguła pojawiła się w CSS2 (nieco inne zastosowanie, patrz <link> w <head>). W CSS3 nazywana jest media queries. Działa na zasadzie instrukcji warunkowej. Pozwala na sprawdzenie następujących własności: szerokośd i wysokośd viewport/wyświetlacza orientacja ekranu (pionowa/pozioma) rozdzielczośd Składnia: @media not only mediatype and (właściwości urządzenia) { deklaracje CSS; } Szczegółowa lista właściwości dostępna jest tu: www.w3schools.com/cssref/css3_pr_mediaquery.asp Przykładowe to: max-width maksymalna szerokośd obszaru wyświetlania orientation orientacja urządzenia aspect-ratio iloraz wysokości i szerokości viewport
CSS układ strony Przykładowy układ dwukolumnowy. Reguły CSS. Dodajemy responsywnośd. /* kolumny w pionie jeśli strona wyświetlana jest na szerokości mniejszej niż 600 */ @media only screen and (max-width:600px) { div*id*= column { width: 100%; } }
responsywnośd W3.CSS Wsparcie tworzenia nowoczesnych stron internetowych z uwzględnieniem responsywności. www.w3schools.com/w3css/default.asp
CSS3 nowości Cecha border wzbogacona o: border-radius zaokrąglenia rogów ramki div {border: 2px solid; border-radius: 25px} box-shadow imitacja cienia pod ramką div {width: 300px; height: 100px; background-color: blue; box-shadow: 10px 10px 15px #888888} x, y wysunięcia cienia, rozmycie cienia, jego kolor Cieo można również ustawid za tekstem korzystając z cechy text-shadow h4 {text-shadow: 5px 5px 5px #FF0000} x, y wysunięcia cienia, rozmycie cienia, jego kolor Efekty cienia można dodawad, np.: h1 {text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF}
CSS3 nowości Inne ciekawe cechy: transform cecha pozwalająca przesuwad, obracad, zniekształcad elementy, np.: obrót o N stopni (+ - w prawo, - w lewo) transform:rotate(ndeg) div { transform: rotate(25deg); -webkit-transform: rotate(25deg); z prefiksem dla Chrome i Safari -moz-transform: rotate(25deg); z prefiksem dla Firefoxa -o-transform: rotate(25deg); z prefiksem dla Opery -ms-transform: rotate(25deg); z prefiksem dla IE9 width: 200px; height: 100px; background-color: #a3acb8}
CSS3 nowości Inne ciekawe cechy: transition stopniowa zmiana wyglądu elementu (rozmiar, kolor, obramowanie, ); przykład: 1. blok kodu (definicja stanu początkowego i sposobu zmiany) div.zmiana { width: 400px; height: 100px; background-color: #d1d1d1; border: 5px solid black; transition: width 2s; -webkit-transition: width 2s; -o-transition: width 2s} 2. blok kodu (stan koocowy) div.zmiana:hover { width: 300px; height: 100px; background-color: #4fc1ff; border: 5px solid red} z prefiksem dla Chrome i Safari z prefiksem dla Opery
CSS3 nowości Inne ciekawe cechy: @keyframes, animation tworzenie animacji, np.: 1. Definicja obiektu i animacji div.pasek { width:100px; height:50px; background-color:green; animation: pulsowanie 3s infinite alternate; -webkit-animation: pulsowanie 3s infinite alternate; } 2. Definicja klatek @keyframes pulsowanie { from {width:100px;} to {width:300px;} } @-webkit-keyframes pulsowanie { from {width:100px;} to {width:300px;} } Więcej nowości CSS3 na www.w3schools.com/css/css3_intro.asp