Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron...
Transcript of Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron...
![Page 1: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/1.jpg)
Tworzenie stron Tworzenie stron Tworzenie stron Tworzenie stron internetowych internetowych internetowych internetowych z z z z wykorzystaniem wykorzystaniem wykorzystaniem wykorzystaniem HTML5HTML5HTML5HTML5, , , , JavaScriptJavaScriptJavaScriptJavaScript, CSS3 i , CSS3 i , CSS3 i , CSS3 i jQueryjQueryjQueryjQueryŁukasz Łukasz Łukasz Łukasz BartczukBartczukBartczukBartczuk
![Page 2: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/2.jpg)
Podstawy tworzenia stron internetowych
Moduł 1
![Page 3: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/3.jpg)
Agenda
• Podstawy stron internetowych
• Przegląd języka HTML
• Wprowadzenie do kaskadowych arkuszy styli (CSS)
• Wprowadzenie do języka JavaScript
• Wprowadzenie je biblioteki JQuery.
![Page 4: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/4.jpg)
Podstawy stron internetowych
• Technologie internetowe
• Elementy składowe strony internetowej
![Page 5: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/5.jpg)
Technologie internetowe
kik.pcz.pl/Lukasz_Bartczuk/wyklad.html
kik.pcz.pl
get kik.pcz.pl/Lukasz_Bartczuk/wyklad.html
<html><head>…</head><body>…</body>
![Page 6: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/6.jpg)
Adres URL
http://kik.pcz.pl/Lukasz_Bartczuk/wyklad.html
nazwaprotokołu
adresserwera
nazwakatalogu
nazwapliku
![Page 7: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/7.jpg)
Składowe strony internetowej
Dokument
Struktura (XHTML)
Wygląd (CSS)
Funkcjonalność (JavaScript)
![Page 8: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/8.jpg)
Przegląd języka HTML
• Czym jest język HTML?
• Znaczniki
• Dokument HTML
• Podstawowe elementy języka HTML
![Page 9: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/9.jpg)
Znaczniki (1)
• Język HTML składa się z znaczników
• Znacznik zawarty jest pomiędzy parą nawiasów < i >
• Każdy znacznik musi być zamknięty.
• Każdy znacznik posiada swoje znaczenie
<div><p>lorem ipsum…. <img src="rys.jpg" /></p>
</div>
![Page 10: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/10.jpg)
Znaczniki (2)
• Znaczniki mogą być zagnieżdżane
• Każdy znacznik może posiadać atrybuty
• Atrybuty umieszczamy w znaczniku otwierającym
<div><p id="tresc">lorem ipsum….
<img src="rys.jpg" /></p></div>
![Page 11: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/11.jpg)
Dokument HTML
<!DOCTYPE html>
<html>
<head><title>Tytuł strony</title>
</head><body>
Zawartość strony......</body>
</html>
![Page 12: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/12.jpg)
DEMO 1
Stworzenie podstawowej strony internetowej
w Visual Studio 2012
![Page 13: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/13.jpg)
Elementy HTML (1)
• <!DOCTYPE>,<html>,<body>, <!-- -->Podstawowe
• <h1>-<h6>,<p>,<div>,<span>,<br />,<hr/>
Struktura
• <acronym>,<abbr>,<address>,<b>,<bdo>,<big>,<blockquote>,<code>,<del>,<dfn>,<em>,<i>,<ins>,<kbd>,<pre>,<q>,<samp>,<small>,<strong>,<sub>,<sup>,<tt>,<u>,<var>
Formatowania
• <form>,<input>,<textarea>,<button>, <select>,<optgroup>,<option>,<label>,<fieldset>,<legend>
Formularze
• <table>,<caption>,<th>,<tr>,<td>,<thead>,<tbody>,<tfoot>,<col />,<colgroup>
Tabele
![Page 14: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/14.jpg)
Elementy HTML (2)
• <ul>,<ol>,<li>,<dl>,<dt>,<dd>Listy
• <script>,<noscript>,<object>,<param />Programowanie
• <img />,<map>,<area />Obrazy
• <head>,<title>,<meta>Metadane
• <style>Style
• <a>, <link />Linki
![Page 15: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/15.jpg)
Elementy strukturalne
Do elementów strukturalnych języka HTML zaliczamy:
• div-y• paragrafy• nagłówki• span-y
Elementy te mogą zawierać zarówno tekst jak i inne elementy HTML
elementy blokowe
element liniowy
![Page 16: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/16.jpg)
Linki (1)
![Page 17: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/17.jpg)
Linki (2)
• zewnętrzne
<a href="adres_strony.html">link</a>
• wewnętrzne
<a href="#nazwa">link</a> …<div id="nazwa">Zawartość do linku</div>
• do określonego miejsca na stronie
<a href="adres_strony.html#nazwa">link</a>
![Page 18: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/18.jpg)
Rysunki
• Znacznik <img />• Brak znacznika zmykającego
<img src="rys.jpg" />
<img src="rys.jpg"
alt="rysunek"/>
![Page 19: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/19.jpg)
Tabele
<table><caption>Podpis</caption><tr><th>Nagłówek 1</th>
<th>Nagłówek 2</th><th>Nagłówek 3</th>
</tr><tr><td>11</td>
<td>12</td><td>13</td>
</tr><tr><td>21</td>
<td>22</td><td>23</td>
</tr><tr><td>31</td>
<td>32</td><td>33</td>
</tr></table>
![Page 20: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/20.jpg)
Listy
• Wyróżniamy trzy rodzaje list:
• Punktowane (<ul>)• Numerowane (<ol>)• Definicyjne (<dl>)
• Mogą zawierać jeden lub więcej pozycji (<li>)
![Page 21: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/21.jpg)
DEMO 2
Stworzenie strony internetowej zawierającej podstawowe
elementy języka HTML.
![Page 22: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/22.jpg)
Wprowadzenie do CSS
• Czym są kaskadowe arkusze styli
• Składnia CSS i selektory
• Podstawowe style
![Page 23: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/23.jpg)
Czym są kaskadowe arkusze styli
Kaskadowe arkusze styli (ang. Cascade Style Sheets) pozwalają nazdefiniowanie wyglądu i układu strony internetowej.
![Page 24: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/24.jpg)
Składnia CSS
• Informacje o wyglądzie strony są zapisywane w formie reguł• Reguła zapisywana jest w postaci:
• Język jest czuły na wielkość znaków.
selektor { właściwość : wartość;właściwość : wartość;właściwość : wartość;
}
![Page 25: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/25.jpg)
Miejsce umieszczania CSS
miejsce umieszczenia reguł CSS
w tagu HTML w części HEAD w osobnym pliku
…
<p style="color:blue;">
...
</p>
…
<p style="color:blue;">
...
</p>
…
<head>
<style type="text/css">
p {color: blue;}
</style>
</head>
<link rel="stylesheet"
type="text/css"
href="style.css" />
![Page 26: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/26.jpg)
Selektory proste
Selektory
HTML Klasy ID
zależne niezależne
![Page 27: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/27.jpg)
Selektory proste - HTML
Selektory HTML dopasowują się do określonego rodzaju elementu HTML
h1 {color:blue; text-decoration:underline;}
p {color:black; text-style:italic;}
![Page 28: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/28.jpg)
Selektory proste – klasy niezależne
Selektory klasy niezależne dopasowują się do grupy elementów z przypisaną określoną klasą
Każdy element HTML może mieć przypisaną klasę, która pozwala łączyć kilka różnych elementów w grupę.
.news {color:blue; text-decoration:underline;}
…<h1 class="news">Jakiś tytuł 1</h1><p class="news">Jakiś paragraf 1</p><h1>Jakiś tytuł 2</h1><p>Jakiś paragraf 2</p>…
![Page 29: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/29.jpg)
Selektory proste – klasy zależne
Selektory klasy zależne dopasowują się do grupy elementów tego samego typu z przypisaną określoną klasą.
h1.news {color:blue; text-decoration:underline;}p.news {color:black; text-style:italic;}
…<h1 class="news">Jakiś tytuł 1</h1><p class="news">Jakiś paragraf 1</p><h1>Jakiś tytuł 2</h1><p>Jakiś paragraf 2</p>…
![Page 30: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/30.jpg)
Selektory proste – ID
Selektory ID dopasowują się do tylko do elementu z określonym identyfikatorem.
Każdy element HTML może mieć przypisany identyfikator, który pozwala jednoznacznie ten element na stronie.
#newsSuperWazny {color:blue; text-decoration:underline;}#news {color:black; text-decoration:underline;}
…<h1 id="newsSuperWazny">Jakiś tytuł 1</h1><p id="news">Jakiś paragraf 1</p><h1>Jakiś tytuł 2</h1><p>Jakiś paragraf 2</p>…
![Page 31: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/31.jpg)
Grupowanie selektorów
sel1,sel2,… {
właściwość : wartość;
właściwość : wartość;
właściwość : wartość;
}
h1,h2,h3 {color:blue; text-decoration:underline;}
![Page 32: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/32.jpg)
Selektory pochodne
p span {color:orange; text-decoration:underline;}
…
<p id="news">
Jakiś paragraf 1 <span> bardzo <span> interesujące
</span> cytowanie </span> Dalsza część paragrafu 1
<span>kolejne interesujące cytowanie</span> Dalsza
część paragrafu 1
</p>
…
![Page 33: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/33.jpg)
Selektory dzieci
p span {color:orange;}
p>span {color:red;}
…
<p id="news">
Jakiś paragraf 1 <span> bardzo <span> interesujące
</span> cytowanie </span> Dalsza część paragrafu 1
<span>kolejne interesujące cytowanie</span> Dalsza
część paragrafu 1
</p>
…
![Page 34: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/34.jpg)
Selektory dzieci
p span {color:orange;}
p>span {color:red;}
…
<p id="news">
Jakiś paragraf 1 <span> bardzo <span> interesujące
</span> cytowanie </span> Dalsza część paragrafu 1
<span>kolejne interesujące cytowanie</span> Dalsza
część paragrafu 1
</p>
…
![Page 35: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/35.jpg)
Selektory atrybutów (1)
Są dopasowywane do elementów posiadających określone atrybuty lub ich wartości
• [atrybut] – reguła jest dopasowana, gdy element ma przypisaną wartośćdla atrybutu "atrybut"
• [atrybut=wartość] – reguła jest dopasowywana, gdy atrybut "atrybut" madokładnie wartość "wartość".
• [atrybut~=wartość] – reguła jest dopasowana, gdy atrybut "atrybut" maprzypisaną listę wartości oddzielonych spacjami, z których jedna jest równa"wartość"
• [atrybut|=wartość] – reguła jest dopasowana, gdy atrybut ma wartość"wartość" lub, gdy rozpoczyna się od wartości "wartość" po której występujeznak "-".
![Page 36: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/36.jpg)
Selektory atrybutów (2)
a[href="http://onet.pl"] {color:blue;}
img[alt~="opis"] {border:1px solid red;}
<a href="http://onet.pl">onet.pl</a>
<img alt="jakiś opis" />
input[readonly] {color:blue;}
<input type="text" readonly="readonly" />
![Page 37: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/37.jpg)
Pseudo-klasy
a:link {color:blue;}a:visited {color:orange;}a:hover {color:red;}a:active {color:green;}
…<a href="http://onet.pl/">onet.pl</a>…
![Page 38: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/38.jpg)
Pseudo-elementy (1)
p:first-letter {font-size:50px; color:red;
float:left; margin-right:10px;}
p:first-line {color:yellow;}
…
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Donec dignissim nulla eget neque pellentesque ut
vehicula massa blandit. Donec mattis condimentum
pharetra. Donec nec enim sit amet arcu pretium congue
eget eu neque. Donec metus enim, dignissim aliquet
tempus ac, rhoncus at elit. Vivamus in felis libero,
et semper elit. Quisque non orci ut sapien ultrices
consectetur non nec arcu. </p>
…
![Page 39: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/39.jpg)
Pseudo-elementy (2)
p.news:before {content:"Coś ważnego: ";}
p.news:after {content:"!!!";}
…
<p class="news">Jakiś paragraf 1</p>
…
![Page 40: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/40.jpg)
Jednostki i kolory w CSS
względnewzględnewzględnewzględne bezwzględnebezwzględnebezwzględnebezwzględne
em mm
ex cm
px in
pt
pc
Jednostki CSS
notacja heksadecymalna:color: #808000;
notacja dziesiętna:color: rgb(128,128,0);
słowa kluczowe:color:olive
Kolory CSS
![Page 41: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/41.jpg)
Podstawowe właściwości CSS (1)
font: <font-weight> <font-style> <font-variant><font-size>/<line-height> <font-family>
p {font: normal italic 2em/1.5em times,serif;}
Ustawienia czcionek
Wyrównanie tekstu w poziomie:
text-align:left; left|center|right|justify
![Page 42: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/42.jpg)
Podstawowe właściwości CSS (2)
Dekorowanie tekstu
text-decoration: underline;
none | line-through | underline | overline | blink
Kolor tekstu
color: #FF0000;
![Page 43: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/43.jpg)
Podstawowe właściwości CSS (3)
Tło
background: background-color background-imagebackground-repeat background-attachmentbackground-position
background: yellow url(tlo.jpg) repeat-x fixed 0 left;
![Page 44: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/44.jpg)
Model pudełkowy CSS (1)
ZawartośćZawartość
Dopełnienie (padding)Margines (margin)
Ramka (border) Linia zewnętrzna (outline)
![Page 45: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/45.jpg)
Model pudełkowy CSS (3)
Dopełnienie
Margines
padding:10px;
padding:10px 5px;
padding:10px 5px 10px;
padding:10px 5px 10px 5px;
margin:10px;
margin:10px 5px;
margin:10px 5px 10px;
margin:10px 5px 10px 5px;
![Page 46: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/46.jpg)
Model pudełkowy CSS (4)
Renderowanie elementu
Wyświetlanie elementu
display:block;none, inline, block,
list-item, inline-block,
visibility:hidden; visible, hidden
![Page 47: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/47.jpg)
Model pudełkowy CSS (5)
"Wystawanie" zawartości
overflow
overflow-x
overflow-y
• hidden
• visible
• scroll
• auto
![Page 48: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/48.jpg)
Model pudełkowy CSS (5)
Pływalność elementu
float:left; left, right, none
clear: left; left, right, both, none
![Page 49: Tworzenie stron internetowych 1 - Politechnika Częstochowskakik.pcz.pl/lb/szkolenie/Tworzenie stron internetowych 1.pdf · • Przegląd języka HTML • Wprowadzenie do kaskadowych](https://reader034.fdocument.pub/reader034/viewer/2022042317/5f05dd157e708231d41517a3/html5/thumbnails/49.jpg)
Model pudełkowy CSS (6)
Pozycja elementu
position:relative;static, relative,
absolute, fixed
top:12px;
left:12px;
bottom:12px;
right:12px;