Użytkowanie komputerów i podstawy systemów operacyjnych - laboratorium 08
Post

Użytkowanie komputerów i podstawy systemów operacyjnych - laboratorium 08

16/01/2023
Paweł Lelental
6

Wprowadzenie do CSS

Co to jest CSS?

CSS (ang. Cascading Style Sheets) to język służący do stylizacji stron internetowych. Dzięki CSS możesz kontrolować kolor, czcionkę, rozmiar tekstu, odstępy między elementami, sposób pozycjonowania i układania elementów oraz wiele innych aspektów wyglądu strony.

Składnia

Reguła CSS składa się z selektora oraz bloku deklaracji.

Składnia CSS

  • Selektor wskazuje na element HTML, który ma zostać poddany stylizacji.
  • Blok deklaracji zawiera jedną lub więcej deklaracji oddzielonych średnikami.
  • Każda deklaracja składa się z nazwy właściwości CSS i wartości, oddzielonych dwukropkiem.
  • Wiele deklaracji CSS jest oddzielanych średnikami, a cały blok deklaracji jest otoczony nawiasami klamrowymi { }.

Integracja CSS z HTML

Podczas renderowania strony przeglądarka odczytuje arkusz stylów i formatuje dokument HTML zgodnie z zawartymi w nim regułami. Istnieją trzy sposoby użycia arkusza stylów w HTML:

Arkusz zewnętrzny (External)

Dzięki zewnętrznemu arkuszowi stylów możesz zmienić wygląd całej witryny, modyfikując tylko jeden plik .css. Każda strona HTML powinna zawierać odniesienie do zewnętrznego arkusza stylów za pomocą elementu <link> umieszczonego w sekcji <head>.

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Zewnętrzny plik CSS:

  • Może być stworzony w dowolnym edytorze tekstu.
  • Musi być zapisany z rozszerzeniem .css.
  • Nie powinien zawierać żadnych znaczników HTML.

Przykład zewnętrznego pliku CSS (styles.css):

1
2
3
4
5
6
7
8

body {
  background-color: red;
}

h4 {
  color: green;
  float: left;
}

Arkusz wewnętrzny (Internal)

Wewnętrzny arkusz stylów stosujemy, gdy jedna strona HTML ma mieć unikalny styl. Definiujemy go wewnątrz elementu <style> umieszczonego w sekcji <head>.

Przykład:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: red;
    }

    p {
      color: green;
      float: left;
    }
  </style>
</head>
<body>

<p>To jest przykładowy akapit.</p>

</body>
</html>

Stylowanie inline (Inline)

Stylowanie inline stosujemy, gdy chcemy nadać unikalny styl pojedynczemu elementowi HTML. W tym celu dodajemy atrybut style bezpośrednio do znacznika elementu. Atrybut style może zawierać dowolne właściwości CSS.

Przykład:

1
2
3
4
5
6
7
8
9

<!DOCTYPE html>
<html>
<body>

<h1 style="color: blue; text-align: center;">Stylizacja nagłówka</h1>
<p style="color: red;">Stylizacja akapitu</p>

</body>
</html>

Selektory CSS

Selektory CSS służą do “znajdowania” (wybierania) elementów HTML, które chcemy stylizować. Dzielimy je na pięć kategorii:

  1. Selektory proste – wybierają elementy na podstawie nazwy, identyfikatora (id) lub klasy.
  2. Selektory kombinatoryczne – wybierają elementy na podstawie relacji między nimi.
  3. Selektory pseudoklasowe – wybierają elementy na podstawie określonego stanu.
  4. Selektory pseudoelementów – wybierają i stylizują określoną część elementu.
  5. Selektory atrybutów – wybierają elementy na podstawie atrybutu lub wartości atrybutu.

Poniżej omówiono najważniejsze selektory używane w arkuszach stylów.

Selektor elementu (Element Selector)

Selektor elementu wybiera wszystkie elementy HTML danego typu na podstawie nazwy znacznika.

Przykład:

1
2
3
4

p {
  text-align: center;
  color: red;
}

Powyższy kod stylizuje wszystkie elementy <p> na stronie, centrował tekst i zmieniając jego kolor na czerwony.

Selektor identyfikatora (ID Selector)

Selektor identyfikatora używa atrybutu id elementu HTML do wybrania konkretnego elementu. Identyfikator elementu jest unikalny w obrębie strony, więc selektor id służy do wyboru tylko jednego, konkretnego elementu.

Aby użyć selektora id, poprzedzamy nazwę identyfikatora znakiem hash (#).

Przykład:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>
<head>
  <style>
    #para1 {
      text-align: center;
      color: red;
    }
  </style>
</head>
<body>

<p id="para1">Witaj, świecie!</p>
<p>Ten akapit nie jest objęty stylizacją.</p>

</body>
</html>

Selektor klasy (Class Selector)

Selektor klasy wybiera elementy HTML z określonym atrybutem class. Aby użyć selektora klasy, poprzedzamy nazwę klasy kropką (.).

Przykład:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>
<head>
  <style>
    .center {
      text-align: center;
      color: red;
    }
  </style>
</head>
<body>

<h1 class="center">Czerwony, wyśrodkowany nagłówek</h1>
<p class="center">Czerwony, wyśrodkowany akapit.</p>

</body>
</html>

Selektor grupujący (Grouping Selector)

Selektor grupujący pozwala na zastosowanie tych samych deklaracji stylu do wielu elementów jednocześnie. Wymieniamy selektory elementów, oddzielając je przecinkami.

Przykład:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html>
<head>
  <style>
    h1, h2, p {
      text-align: center;
      color: red;
    }
  </style>
</head>
<body>

<h1>Witaj, świecie!</h1>
<h2>Mniejszy nagłówek</h2>
<p>To jest akapit.</p>

</body>
</html>

Model pudełkowy (Box Model)

W CSS termin “box model” odnosi się do konceptu, w którym każdy element HTML jest traktowany jako prostokątne pudełko, składające się z następujących obszarów:

  • Content (zawartość) – treść elementu, np. tekst lub obrazy.
  • Padding (dopełnienie) – przestrzeń między zawartością a obramowaniem; wypełnienie jest przezroczyste.
  • Border (obramowanie) – otacza padding i zawartość.
  • Margin (margines) – przestrzeń na zewnątrz obramowania; margines jest przezroczysty.

Model pudełkowy CSS

Model pudełkowy pozwala nam dodawać obramowania wokół elementów oraz definiować odstępy między nimi.

Przykładowe właściwości CSS

background-color

Właściwość background-color ustawia kolor tła wskazanego elementu HTML.

Przykład:

1
2
3

body {
  background-color: red;
}

border-style

Właściwość border-style definiuje styl obramowania elementu.

Przykład:

1
2
3

div {
  border-style: dotted;
}

margin

Właściwość margin ustawia marginesy wokół elementu.

Przykład:

1
2
3

p {
  margin: 35px;
}

padding

Właściwość padding ustala przestrzeń między zawartością elementu a jego obramowaniem.

Przykład:

1
2
3

p {
  padding: 35px;
}

height

Właściwość height określa wysokość elementu.

Przykład:

1
2
3
4
5
6
7

p {
  height: auto;
}

h1 {
  height: 50px;
}

width

Właściwość width określa szerokość elementu.

Przykład:

1
2
3
4
5
6
7

p {
  width: auto;
}

h1 {
  width: 50px;
}

float

Właściwość float określa, czy element ma być umieszczony po lewej, po prawej stronie czy ma pozostać w normalnym przepływie dokumentu.

Przykład:

1
2
3

img {
  float: right;
}

Element <div>

Element <div> jest ogólnym kontenerem dla zawartości HTML. Pozwala na zgrupowanie dowolnej liczby elementów HTML i nadanie im wspólnych stylów.

Przykład:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      background-color: lightgrey;
      width: 300px;
      border: 15px solid green;
      padding: 50px;
      margin: 20px;
    }
  </style>
</head>
<body>

<h2>Prezentacja modelu pudełkowego</h2>

<p>Model pudełkowy CSS to w zasadzie pudełko, które otacza każdy element HTML. Składa się z: obramowań, dopełnienia, marginesów oraz właściwej zawartości.</p>

<div>To jest tekst wewnątrz pudełka. Dodaliśmy 50px dopełnienia, 20px marginesu oraz 15px zielonego obramowania.</div>

</body>
</html>

Zadanie

Do wykonania zadania potrzebny będzie plik index.html, który został stworzony podczas poprzednich zajęć. Twoim zadaniem jest:

  1. Wystylizować nagłówek używając stylów inline.
  2. Stworzyć plik styles.css i zaimportować go do pliku index.html.
  3. Wystylizować pozostałe elementy pliku index.html, używając co najmniej jednego selektora id oraz jednego selektora klasy. Style powinny zostać zdefiniowane w pliku styles.css.

Wytyczne do stylizacji elementów:

  • Strona powinna mieć tło koloru szarego.
  • Krótka notatka o sobie Dodaj krótka notatkę o sobie. Oowinna być umieszczona wewnątrz elementu <div>, którego style zostaną zdefiniowane według następujących reguł:
    • Kolor tła: czerwony.
    • Tekst: pogrubiony i pochylony.
    • Margines z lewej strony: 2px.
    • Dopełnienie (padding) od dołu: 2px.
    • Element powinien być wyrównany do lewej strony.
  • Tabela z przedmiotami i ocenami:
    • Dodaj tabelę z przykładowymi przedmiotami i ocenami
    • Każdy wiersz tabeli powinien mieć inny kolor.
    • Należy wystylizować obramowanie tabeli.
    • Ustawić szerokość tabeli na 50% szerokości strony.
  • Lista Przekształć liste nie-uporzadkowaną na listę uporządkowaną. Powinna być wystylizowana według stylu numeracji upper-roman (wielkie cyfry rzymskie).
  • Przycisk formularza do wysyłania e-maila powinien mieć kolor #0066ff oraz posiadać obramowanie.

Dokument oparty na ogólnodostępnych materiałach dostępnych na platformie W3Schools.

PJATK, Użytkowanie komputerów i podstawy systemów operacyjnych
pjatk ukos css