Cascading Style Sheets


CSS nie jest językiem programowania.
Jest to język arkuszy stylów.

Czyli inaczej:

Jest to kod służący do nadawania wyglądu strony.
Pozwala on selektywnie stosować style do elementów w dokumentach HTML.

Zapisuje się go w formacie.css

 

3 RODZAJE UMIESZCZANIA STYLÓW W DOKUMENCIE

METODA 'inline'

Polega na bezpośrednim przypisaniu stylu do elementu
HTML poprzez atrybut style.

	<!DOCTYPE html>
	<html>
 	<head>
	<title>"Tytuł naszej strony"</title>"
	<meta charset="utf-8">
 	</head>
	<body>
	<p style="color:red;">Akapit jest czerwony</p>
	</body>
	</html>

 

ARKUSZ ZAGNIEŻDŻONY

Jest to arkusz umieszczony wewnątrz znacznika style
w części nagłówkowej strony (wewnątrz znacznika <head>).

	<!DOCTYPE html>
	<html>
 	<head>
	<title>"Tytuł naszej strony"</title>"
	<meta charset="utf-8">
		<style type="text/css">
		p {
		   color:red;
		}
	</style>
 	</head>
	<body>
	<p>Paragraf jest czerwony</p>
	</body>
	</html>

 

ARKUSZ ZEWNĘTRZNY

Polega na umieszczeniu definicji stylów w oddzielnym pliku o rozszerzeniu .css,
a w dokumencie go używającym umieszczeniu instrukcji importującej w części nagłówkowej strony.

W HTML arkusz zewnętrzny jest dołączany przez element <link>. Posiada on trzy atrybuty: rel informuje przeglądarkę
o rodzaju linkowanego zasobu, type wskazuje rodzaj arkusza stylu. Atrybut href zawiera adres URL arkusza.
Ten sposób jest najbardziej polecany - najwygodniejsza opcja.

	<!DOCTYPE html>
	<html>
 	<head>
	<title>"Tytuł naszej strony"</title>"
	 <meta charset="utf-8">
          <link rel="stylesheet" type="text/css" href="style.css"/>
         </head>
	<body>
	Zielony napis, różowe tło
	</body>
	</html>
	
    //KOD W CSS//
        body {
	    font-size: 20px;
	    color: #00FF11;
	    background-color: #FFBCF8;
        }

 

PRZYKŁADOWA STRONA Z OPISEM

	<!DOCTYPE html>
	<html>
 	<head>
	<title>Tytuł naszej strony</title>"
	 <meta charset="utf-8">
         <link rel="stylesheet" type="text/css" href="style.css"/>
        </head>
	<body>
	<div class="zawartosc-strony"> <!--dodanie klasy (tyczy się wielu elementów)-->

<h1>FORTRAN</h1>

<div id="pierwszy-paragraf"> <!--dodanie identyfikatora (tyczy się jednego elementu)-->
<p>czyli o pierwszym języku programistycznym</p>
</div> <!--zamknięcie identyfikatora-->

<h2>Formula Translation</h2>

<p> Został on stworzony w latach 1954–1957 przez pracownika IBM, Johna Backusa i jego zespół.<br>
Służył on do przeprowadzania obliczeń statystycznych i matematycznych.</p>

<p>To pierwszy język wysokiego poziomu - w którym kod i składnia są bardzo przystępne dla człowieka,<br>
a „niezrozumiałe” dla komputera, który potrzebuje dłuższego i bardziej skomplikowanego procesu kompilacji,<br>
 aby wykonać program. Charakteryzują się one wysokim poziomem abstrakcji.</p>

<h3>Fortran jest wciąż używany! Jest on najpopularniejszym językiem do obliczeń numerycznych.</h3>

<img src="fortran.jpg" alt="ENIAC" height="auto" width="500">

<p><a href="https://pl.wikipedia.org/wiki/Fortran">Więcej na temat tego języka!</a></p>

</div> <!--zamknięcie klasy-->
	</body>
	</html>
	
    //KOD W CSS//

body {
	background-color: #EEEDE4;
	font-family: arial, helvetica, verdana, sans-serif; 
} /*przydzielenie wyglądu całemu elementowi body*/

.zawartosc-strony { 
	position: center;
    text-align: center;
} /*przydzielenie wyglądu klasie (class) o nazwie "zawartosc-strony"*/

#pierwszy-paragraf {
	font-size:10px;
} /*przydzielenie wyglądu całemu identyfikatorowi o nazwie "pierwszy-paragraf"*/

h1 {
	color:#670000;
} /*przydzielenie wyglądu całemu nagłówkowi h1*/

h2 {
	color:#4B0000;
} /*przydzielenie wyglądu całemu nagłówkowi h2*/

h3 {
	color:#310000;
} /*przydzielenie wyglądu całemu nagłówkowi h3*/

p {
	font-size:18px;
	color:rgba(67,67,67,1.00);
} /*przydzielenie wyglądu wszystkim paragrafom*/

Aby samemu uruchomić stronę, wystarczy skopiować kody
do wybranego, osobnego, dokumentu tekstowego (np.: Notatnik), zapisać w formacie .html,
oraz .css, a następnie uruchomić przez przeglądarkę. Tu pobierz zdjęcie do strony.

Po wykonaniu wszystkich czynności poprawnie, powinniśmy zobaczyć to:

strona html z css