|
|
Kierunek Informatyka
|
|||
|
|
||||
Instrukcja do ćwiczeń
laboratoryjnych nr:
|
2
|
Nazwa
przedmiotu:
|
||
Temat
Arkusze stylów CSS
|
Tryb
studiów: stacjonarny |
|||
|
Czas trwanie ćw. 2x45 min |
||||
|
Autor materiałów: dr Marcin Skuba |
||||
1.
Treści programowe:
Arkusz stylów CSS, grafika, strona www, html.
2. Cel zajęć:
Celem zajęć jest opanowanie podstawowych
umiejętność definiowania stylów dla strony WWW
3. Materiały dydaktyczne
Arkusz stylów CSS opisuje,
w jaki sposób elementy HTML mają być wyświetlane na ekranie, papierze lub na
innych nośnikach. CSS oszczędza dużo pracy. Może kontrolować układ wielu stron
jednocześnie. Zewnętrzne arkusze stylów są przechowywane w plikach CSS
Lind do pełnej dokumentacji
https://www.w3schools.com/css/css_intro.asp
Wytyczne
dla dostępności treści internetowych (WCAG) 2.1
Implementacja arkusza
stylów na stronie WWW:
- implementacja w
oddzielnym pliku, przykład:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
</body>
</html>
- implementacja w pliku html, przykład:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
</body>
</html>
- Składnia:
Selektor
wskazuje element HTML, który chcesz stylizować. Blok deklaracji zawiera jedną
lub więcej deklaracji oddzielonych średnikami. Każda deklaracja zawiera nazwę
właściwości CSS i wartość oddzielone dwukropkiem. Deklaracja CSS zawsze kończy
się
W
tym przykładzie wszystkie elementy p zostaną wyrównane do środka, z czerwonym
kolorem tekstu:
- Selektor elementów (znaczników – tagów):
p {
text-align: center;
color: red;
}
Selektor id używa atrybutu id elementu HTML,
aby wybrać określony element. Identyfikator elementu jest unikalny na stronie,
więc selektor id służy do wybrania jednego unikalnego elementu.
Aby wybrać element o określonym identyfikatorze, napisz znak krzyżyka (#), a
następnie identyfikator elementu.
#para1 {
text-align: center;
color: red;
}
Przykład:
Selektor klas wybiera
elementy HTML z określonym atrybutem klasy.Aby wybrać
elementy z określoną klasą, wpisz kropkę (.), A następnie nazwę klasy.
W tym przykładzie wszystkie elementy HTML z class 'center' będą czerwone
i wyśrodkowane:
.center {
text-align: center;
color: red;
}
Przykład:
- wyśrodkowanie obiektu img:
img{
display: block;
margin-left:
auto;
margin-right: auto;
width: 40%;
}
-
Kolory:
<p style="color:Blue;">Przykładowy
tekst …. </p> -
kolor czcionki
<p style="
background-color:Blue;">
Przykładowy tekst … </p> -
kolor tła
<p style="border: 2px
solid #00ff00;">
Przykładowy tekst … </p> -
kolor i grubość ramki tekstu
Przykład definicji kolorów:
<h1 style="background-color:rgb(255, 99,
71;">
tekst …</h1> - funkcja rgb
<h1 style="background-color:#ff6347;">
tekst …</h1> - kolor rgb z liczby hexa
<h1 style="background-color:hsl(9, 100%,
64;">
tekst …</h1> - funkcja hsl
<h1 style="background-color:red;">
tekst …</h1> - stała koloru
<h1 style="background-color:rgba(255, 99,
71, 0.5);">...</h1> - funkcjaj rgba z przeźroczystością
<h1 style="background-color:hsla(9, 100%,
64%, 0.5);">...</h1> -
funkcjaj hsla z przeźroczystością
===========================================================================================================
- Link (odsyłacze):
<a href="https://www.skuba.cba.pl">Link
do strony www.skuba.cba.pl </a> otwiera
podaną stronę w tym samym oknie
<a href="https://www.skuba.cba.pl"
target="_blank">Link do strony www.skuba.cba.pl </a> otwiera
podaną stronę w nowym oknie
<a href="strona2.htm">link do strony2.htm</a> otwiera
stronę zapisaną w tym samym katalogu o nazwie strona2.htm
<a href="zdjecie.jpg" target="_blank"> link
do zdjęcia</a> otwiera zdjęcie w nowym oknie
- Stylizowanie linków (odsyłaczy)
<a href="strona.html">
Tekst odsyłacza
</a>
/* normalny nieodwiedzony link */
a:link {
color: red;
}
/* odwierdzony link
*/
a:visited {
color: green;
}
/* link, gdy użytkownik najedzie
myszką na niego*/
a:hover {
color: hotpink;
}
/* link w momencie kliknięcia */
a:active {
color: blue;
}
/*K olory dwóch
atrybutów jednocześnie z wyłączeniem podkreślenia (text-decoration: none)*/
a:link, a:visited, a:hover,
a:active {
color: #red;
text-decoration: none;
}
/*Kolory wszystkich atrybutów
linku a*/
a{
color:
#00ff00;
}
<div> -
jest pustym kontenerem przeznaczonym do przechowywania innych obiketów html.
===========================================================================================================
Przykład ukazujący tworzenie przycisku :
<a href="strona1.html">
<div class="przycisk">
strona 1
</div>
</a>
.przycisk{
font-size: 20px; /*rozmiar czcionki */
border-style:
solid; /*styl lini obramowania – linia ciągła */
border-color:
blue; /* kolor obramowania */
width: 90px; /* szerokość obiektu */
height: 25px; /* wysokość obiektu */
background-color:
blue; /* kolor tła obiektu*/
color: white;
text-align: center; /* wyśrodkowanie tekstu wewnątrz obiektu */
border-radius: 10px; /* zaokrąglenie rogów ramki */
}
/*Ustawienia obiektu w momencie najechania kursorem myszy */
.przycisk:hover{
background-color: yellow; /* kolor ramki*/
color: blue;
cursor: pointer; /* ustawienie kursora myszy na “łapkę”
*/
}
a{
text-decoration: none; /*usunięcie podkreślenia */
}
- Wyśrodkowanie tekstu w divie:
.przycisk{
display: flex;
justify-content:
center;
align-items:
center;
}
Przykład ukazujący wykorzystanie przycisków do stworzenia menu,
ustawione obok siebie na środku strony:
<div id="menu">
<a href="strona1.html">
<div
class="przycisk">
strona 1
</div>
</a>
<a href="strona2.html">
<div
class="przycisk">
strona 2
</div>
</a>
</div>
#menu{
text-align:
center; /*wyśrodkowanie zawartości menu
*/
}
.przycisk{
display:
inline-block; /*zapis zmienia zachowanie diva i sprawia, że kolejne div-y ustawiają się obok siebie */
}
===========================================================================================================
-
Obrazy jako tło:
Przykład implementacji:
body {
background-image: url("obraz.png"); - ładowanie pliku “obraz.png”
background-repeat: no-repeat; - brak powtarzania obrazu, lub background-repeat: repeat-x; -
powtarzanie w poziomie
background-position: right
top; - pozycja obrazu – prawy górny
róg
background-attachment: fixed; - sprawia, że obraz nie będzie
przewijany z resztą strony
}
-
Szerokości i wysokości:
Właściwości wysokości i szerokości mogą mieć
następujące wartości:
Auto - jest to ustawienie domyślne. Przeglądarka oblicza wysokość i
szerokość.
px, cm -
określa wartość w pikselach, cm itp.
% - określa wysokość / szerokość w
procentach zawierającego bloku
initial - ustawia wysokość / szerokość na wartość domyślną
inherit - wysokość / szerokość zostanie odziedziczona po wartości
nadrzędnej
Przykład:
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
Parametry dla wysokości i
szerokości:
height - Ustawia wysokość elementu
max-height - Ustawia maksymalną
wysokość elementu
max-width
- Ustawia maksymalną szerokość elementu
min-height -
Ustawia minimalną wysokość elementu
min-width
- Ustawia minimalną szerokość elementu
width - Ustawia szerokość elementu
Marginesy
zewnętrzne:
p {
margin-top: 100px; - górny
margin-bottom: 100px; - dolny
margin-right: 150px; - prawy
margin-left: 80px; - lewy
}
lub
p {
margin: 25px
50px 75px 100px; - górny, dolny, prawy, lewy
}
Marginesy
wewnętrzne:
div {
padding-top: 50px; - górny
padding-right: 30px; - prawy
padding-bottom: 50px; - dolny
padding-left: 80px; - lewy
}
===========================================================================================================
- Czcionka
· Ustawienie
czcionki w arkuszu stylów font-family:
p{
font-family: "Lucida Console", "Courier New", monospace;
}
Inne
czcionki: Arial, "Times
New Roman", "Courier New", Verdana, Tahoma
· Styl czionki font-style:
normal -
tekst jest wyświetlany normalnie
italic -
tekst zaznaczono kursywą
oblique -
tekst jest „pochylony” (ukośny jest bardzo podobny do kursywy, ale jest mniej
obsługiwany)
p{
font-style: italic;
}
· Grubość
czcionki font-weight:
bold -
pogrubiona
normal -
normalna
p {
font-weight: bold;
}
· Rozmiar
czcionki font-size:
Jednostki: px – piksele, em – 1 em jest równy
standardowemu rozmiarowi czcionki (16px), % - .
p {
font-size: 16px;
}
Ustawienie czcionki podłączonej z serwera Google.
- Ze
strony https://fonts.google.com/ wybrać
odpowiednią czcionkę klikając na nią kursorem myszy,
- w
kolejnym kroku wybieramy opcję “select this style” (niebieska strzałka) przy danym stylu
czcionki,
- kopiujemy
wygenerowany tekst w polu tekstowym (czerwona strzałka) i wklejamy do dokumentu
HTML w sekcji HEAD,
- kopiujemy
wygenerowaną właściwość z wartością (zielona strzałka) i wklejamy do danego
selektora.
Przykład użycia czcionki z przykładu powyżej.
Wybrane właściwości i wartości dotyczące ustawień czcionki i tekstu:
.menu{
text-align:
center; /* wyśrodkowanie tekstu, możliwe wartości to:
left, right, justify (justowanie)*/
font-size:
25px; /* ustawienie rozmiaru czcionki na 25 pikseli*/
color: rgb(180,180,180); /* ustawienie koloru tekstu poprzez funkcje rgb*/
font-variant:
small-caps; /* zamienia tekst na duże litery */
font-weight: bold; /*
wytłuszczenie czcionki*/
font-weight:
900; /*wytłuszczenie
czcionki – wartość od 100 do 900, wartość 700 to grubość równa bold*/
text-decoration: underline; /*
linia pod tekstem, możliwe wartości: overline, line-through, underline overline, none*/
text-decoration-color:
red; /* kolor linii*/
text-decoration-style: wavy; /* styl linii pofalowany, możliwe style:
solid, double */
text-shadow: 2px 2px black; /* ustawienie cienia liter*/
}
===========================================================================================================
- Odsyłacze do miejsc na pojedynczej stronie
- Przykład przedstawia wykorzystanie linków nawigujących na jednej
stronie. Pierwszy link z tekstem „Skocz na koniec strony” odsyła do nagłówka o
identyfikatorze „koniec”. Drugi link na końcu strony z tekstem „Skocz na
początek strony” odsyła na początek strony, do nagłówka o identyfikatorze
„początek”. Należy pamiętać aby w atrybucie href jako
argument wpisać nazwę identyfikatora obiektu, do którego się odnosimy
poprzedzając znakiem #.
<body>
<h1 id="poczatek" >Początek</h1>
<a href="#koniec">Skocz na koniec strony</a>
<p> Tekst
akapitu 1</p>
<p> Tekst
akapitu 2</p>
<h1 id="koniec">Koniec</h1>
<a href="#poczatek">Skocz
na początek strony</a>
</body>
===========================================================================================================
Strukturę strony możemy
definiować używając znaczników html-a o nazwie DIV.
Div to znacznik html, który traktujemy
jako „pojemniki”, do którego wrzucamy inne obiekty html-a.
Za pomocą właściwości CSS-a określamy ich wygląd np. szerokość, wysokość,
sposób ułożenia, kolor i wiele innych.
Przykład 1.
Poniższy przykład przedstawia rozmieszczenie i właściwości trzech
obiektów DIV. Na górze strony występuje pojemnik o nazwie logo i wysokości 50
pikseli bez określania jego szerokości. Szerokość jest ustawiona jako domyślna
i zawiera tyle miejsca ile sama strona.
Drugi pojemnik o nazwie menu umieszczono poniżej logo o stałej
szerokości 200 pikseli.
Ostatni div nie ma określonych wymiarów wyświetlania, jedynie
określono minimalną wysokość 300 pikseli.
<!doctype html>
<html lang="pl">
<head>
<style>
#logo{
height:
50px; /*wysokość pola logo*/
background-color: yellow;
}
#menu{
width:
200px; /*czerokość menu*/
background-color: red;
float:
left; /*ustawienie obiektów do lewej strony */
}
#tresc{
text-align:
center;
background-color: green;
min-height:
300px; /*minimalna wysokość pola tresc */
}
</style>
</head>
<body>
<div
id="logo"> Logo strony
</div>
<div
id="menu"> Menu <br />
opcja 1<br />
opcja 2<br />
opcja 3<br />
opcja 4<br />
opcja 5<br />
</div>
<div
id="tresc"> Główna treść strony </div>
</body>
</html>
Przykład 2.
W drugim przykładzie przedstawiono podział strony na cztery części
z dodatkowym div-em stopki. Nagłówek umieszczony jest poniżej dwóch kontenerów:
menu i tresc. Aby div ustawić poniżej innego obiektu,
który wcześniej był ustawiony do lewej strony float: left musimy użyć zapisu clear: both.
Dodatkowo należy zwrócić uwagę na zagnieżdżenie div-ów. Wszystkie
opisane powyżej pojemniki umieszczono w divie „kontener”, który pozwoli np.
wyśrodkować całą jego zawartość na środek strony.
<!doctype html>
<html lang="pl">
<head>
<style>
#kontener{
width:
1000px; /*szerokość kontenera*/
margin-left:
auto;
margin-right:
auto;
background-color:
gray;
}
#logo{
height:
50px; /*wysokość pola logo*/
background-color:
yellow;
}
#menu{
width:
200px; /*czerokość menu*/
background-color: red;
float:
left; /*ustawienie obiektu obok poprzedniego z ustawionym float: left*/
}
#tresc{
background-color: green;
width:800px;
min-height:
300px; /*minimalna wysokość pola tresc */
float:
left; /*ustawienie obiektu obok poprzedniego z ustawionym float: left*/
}
#stopka{
background-color: blue;
clear:
both; /*koniec usawiania obiektów obok siebie*/
}
</style>
</head>
<body>
<div id="kontener">
<div id="logo">
Logo strony </div>
<div id="menu">
Menu </div>
<div id="tresc"> Główna treść strony</div>
<div id="stopka"> Stopka </div>
</div>
</body>
</html>
Ograniczenie wysokości pojemnika (diva) oraz ustawienie
automatyczne ustawianie suwaka.
#tresc{
width:800px;
float:
left; /*ustawienie obiektu obok poprzedniego z ustawionym float: left*/
height:
300px; /*wysokość kontenera*/
overflow: auto; /*automatyczne dołączanie skroli */
/*overflow-y: auto;*/ /*automatyczne dołączenie skrola pionowego */
}
Zadania
Zadanie
1.
Zaprojektuj
i zbuduj stronę wg. wzoru jak na obrazku poniżej. Temat strony powinien być
związany z twoimi zainteresowaniami.
Na
stronie powinny znaleźć się obrazki, odsyłacze nawigacyjne, artykuły zgrupowane
w sekcje, czcionki dostępna w google fonts, itd…
