Ćwiczenia z informatyki

Podstawy

Rozwinięciem skrótu CSS (ang. Cascading Style Sheets) są kaskadowe arkusze stylów.
Słowo arkusz można traktować jako plik, w którym zapisujemy reguły formatowania.
Reguły formatowania przypisujemy do konkretnych elementów HTML.

Zależność pomiędzy językiem HTML, a CSS można zapisać następująco.
Język Html opisuje dane elementy na stronie, możemy powiedzieć, że służy do nazywania ich.
W języku HTML możemy określić nagłówek i paragraf.
Natomiast w języku CSS możemy określić jaki rozmiar i kolor czcionki mogą one posiadać.

Reguły CSS to inaczej zbiory zasad służące do formatowania treści.
Zbudowane są one z własności (ang. property) oraz jej wartości (ang. value).
Nazwa wartości musi być zawsze poprzedzona dwukropkiem : , a cała reguła zakończona średnikiem ;.
Przykład:

color:red;

Dodawanie CSS na stronę

Styl zapisany w języku CSS możemy dodać do strony na kilka sposobów.
Style możemy dodawać bezpośrednio do elementu używając atrybutu style="".
CSS możemy również zamieścić w specjalnie do tego przeznaczonym elemencie html <style>.
Trzecim sposobem jest utworzenie oddzielnego pliku, w którym będziemy przetrzymywać wszystkie nasze reguły CSS.

Sposoby dodawania CSS:

atrybut style=""
<p style="background-color: yellow;">Żółte Tło</p>

elementy <style> - dobrą praktyką jest umieszczanie elementu w sekcji <head>


					<style>
  p {
    font: 28px Arial;
    background-color: yellow;
  }
</style>

zewnętrzny plik CSS <link> - element ten zawsze umieszczamy w sekcji <head>
<head> <link rel="stylesheet" href="css/main.css"> </head>
import arkusza stylów
Do zewętrznego lub wewnętrznego arkusza stylu można zaimportować inny, zewnętrzny arkusz.

Polecenie importowania ma postać:
<style> &import url("adres importowanego pliku styl.css"); </style>

Niezależnie, który sposób dołączenia CSS wybierzemy, formatowanie będzie zupełnie takie samo, sposoby od siebie różnią się wygodą dodawania, utrzymaniem kodu oraz tzw. czystością kodu. Dobrą praktyką jest rozdzielanie kodu HTML od CSS, dlatego najbardziej preferowanym sposobem dodawania CSS na stronę jest zamieszczanie CSS w oddzielnych plikach.

atrybut style (style liniowe) – niepolecany, używany w ostateczności
element <style> – używany zazwyczaj do tzw. projektów na szybko, albo szkoleniowych, chcemy dodać formatowania, jednak nie chcemy, albo nie możemy mnożyć plików
zewnętrzny plik CSS – polecany, dobra praktyka, tak na prawdę jedyny właściwy sposób

plik stylu css

Zawiera opis stylu obiektów html.
Stosujemy składnię:


					  selektor {
    właściwość1: wartość1;
    właściwość2: wartość2;
	...
  }

gdzie selektorem może być:

znacznik html np. h1
klasa
w pliku css nazwę poprzedazmy kropką np. .main
wówczas w kodzie html stosujemy zapis:
<div class="container">...</div>
jednemu znacznikowi htm można przypisać kilka klas oddzielając nazwy spacją:
<div class="container main">...</div>
identyfikator
Jeśli znacznik html ma nadany identyfikator id można przypisać mu styl poprzedzając nazwę identyfikatora znakiem #.

Przykład:
dla
<div id="main">...</div>
styl definiujemy następująco:
#main { właściwość1: wartość1; właściwość2: wartość2; ... }