<!DOCTYPE html> <html lang='pl-PL'> <head> <title>Styl CSS</title> <meta charset='utf-8'> </head> <body> <h1>Styl strony</h1> <p>To jest skromna prezentacja możliwości kaskadowych arkuszy stylów (CSS).</p> <p>Kaskadowe arkusze stylów – język służący do opisu formy prezentacji stron WWW. CSS został opracowany przez organizację W3C w 1996 r. Pierwszy szkic CSS zaproponował w 1994 r. Håkon Wium Lie (<i>Wikipedia</i>).</p> </body> </html>
<!DOCTYPE html> <html lang='pl-PL'> <head> <title>Inline CSS</title> <meta charset='utf-8'> </head> <body style='margin: 20px 50px;'> <h1 style='text-align: center; color: blue;'> Inline CSS - globalny atrybut <em>style</em> </h1> <p style='text-align: justify;'>Globalny atrybut <em>style</em> elementu (znacznika) HTML zawiera deklaracje stylów CSS, które mają być zastosowane do tego elementu.</p> <p style='font-size: 150%; background-color: #d1d1d1;'> <code><znacznik style='cecha: wartość; cecha: wartość; ...'></code> </p> <p style="color:red; padding: 5px; border: 1px solid red;"> Zaleca się, aby style były definiowane w osobnym pliku. Ten atrybut ma głównie na celu umożliwienie szybkiego stylizowania dokumentu, na przykład do celów testowych.</p> </body> </html>
<!DOCTYPE html> <html lang='pl-PL'> <head> <title>Internal CSS</title> <meta charset='utf-8'> <style> h1 { text-align: center; color: blue; } p { text-align: justify; } #kod { font-size: 150%; background-color: #d1d1d1; } </style> </head> <body style='margin: 20px 50px;'> <h1>Internal CSS - znacznik <em><style></em></h1> <p>Znacznik <em><style></em> umieszczony w sekcji <head> dokumentu HTML zawiera deklaracje stylów CSS, które mają być zastosowane w tym dokumencie.</p> <p id='kod'> <code>selektor { cecha: wartość; cecha: wartość; ...} </p> <p style="color:red; padding: 5px; border: 1px solid red;"> Zaleca się, aby style były definiowane w osobnym pliku. Ten znacznik ma głównie na celu umożliwienie szybkiego stylizowania dokumentu, na przykład do celów testowych.</p> </body> </html>
<!DOCTYPE html> <html lang='pl-PL'> <head> <title>Internal CSS</title> <meta charset='utf-8'> <style> h1 { text-align: center; color: blue; } p { text-align: justify; } #kod { font-size: 150%; background-color: #d1d1d1; } .ramka { color:red; padding: 5px; border: 1px solid red; } </style> </head> <body style='margin: 20px 50px;'> <h1>Internal CSS - znacznik <em><style></em></h1> <p>Znacznik <em><style></em> umieszczony w sekcji <head> dokumentu HTML zawiera deklaracje stylów CSS, które mają być zastosowane w tym dokumencie.</p> <p id='kod'> <code>selektor { cecha: wartość; cecha: wartość; ...}</code> </p> <p class='ramka'> Zaleca się, aby style były definiowane w osobnym pliku. Ten znacznik ma głównie na celu umożliwienie szybkiego stylizowania dokumentu, na przykład do celów testowych.</p> </body> </html>
<!DOCTYPE html> <html lang='pl-PL'> <head> <title>Internal CSS</title> <meta charset='utf-8'> <style> h1 { text-align: center; color: blue; } p { text-align: justify; } #kod { font-size: 150%; background-color: #d1d1d1; } .ramka { color:red; padding: 5px; border: 1px solid red; } </style> </head> <body style='margin: 20px 50px;'> <h1>Internal CSS - znacznik <em><style></em></h1> <p>Znacznik <em><style></em> umieszczony w sekcji <head> dokumentu HTML zawiera deklaracje stylów CSS, które mają być zastosowane w tym dokumencie.</p> <p id='kod'> <code>selektor { cecha: wartość; cecha: wartość; ...}</code> </p> <p class='ramka'> Zaleca się, aby style były definiowane w osobnym pliku. Ten znacznik ma głównie na celu umożliwienie szybkiego stylizowania dokumentu, na przykład do celów testowych.</p> <p class='ramka'>Identyfikator o ustalonej wartości (np. <code>id='kod'</code>) może wystąpić tylko w jednym znaczniku w dokumencie, natomiast styl zapisany w klasie (np. <code>class='ramka'</code> może być użyty w wielu znacznikach.</p> </body> </html>
<!DOCTYPE html> <html lang='pl-PL'> <head> <title>Internal CSS</title> <meta charset='utf-8'> <style> h1 { text-align: center; color: blue; } p { text-align: justify; } #kod { font-size: 150%; background-color: #d1d1d1; font-family: monospace;} .ramka { color:red; padding: 5px; border: 1px solid red; } </style> </head> <body style='margin: 20px 50px;'> <h1>Internal CSS - znacznik <em><style></em></h1> <p>Znacznik <em><style></em> umieszczony w sekcji <head> dokumentu HTML zawiera deklaracje stylów CSS, które mają być zastosowane w tym dokumencie.</p> <p id='kod'>selektor { cecha: wartość; cecha: wartość; ...}</p> <p class='ramka'> Zaleca się, aby style były definiowane w osobnym pliku. Ten znacznik ma głównie na celu umożliwienie szybkiego stylizowania dokumentu, na przykład do celów testowych.</p> <p class='ramka'>Identyfikator o ustalonej wartości (np. <code>id='kod'</code>) może wystąpić tylko w jednym znaczniku w dokumencie, natomiast styl zapisany w klasie (np. <code>class='ramka'</code> może być użyty w wielu znacznikach.</p> </body> </html>
<!DOCTYPE html> <html lang='pl-PL'> <head> <title>External CSS</title> <meta charset='utf-8'> <link rel='stylesheet' href='style.css'> </head> <body style=''> <h1>External CSS - znacznik <em><link ... ></em></h1> <p>Znacznik <em><style rel='stylesheet' href='...'></em> umieszczony w sekcji <head> dokumentu HTML włącza do dokumentu HTML z zewnętrznego pliku deklaracje stylów CSS, które mają być zastosowane w tym dokumencie.</p> <p id='kod'><link rel='stylesheet' href='style.css'></p> </body> </html>
<!DOCTYPE html> <html lang='pl-PL'> <head> <title>External CSS</title> <meta charset='utf-8'> <style>@import 'style.css';</style> </head> <body style=''> <h1>External CSS - importowanie stylu z pliku</h1> <p>Znacznik <em><style></em> umieszczony w sekcji <em><head></em> umożliwia importowanie stylu z zewnętrznego pliku.</p> <p id='kod'><style>@import 'style.css';</style></p> </body> </html>
<!DOCTYPE html> <html lang='pl-PL'> <head> <title>External CSS</title> <meta charset='utf-8'> <style>@import url('style.css');</style> </head> <body style=''> <h1>External CSS - importowanie stylu z pliku</h1> <p>Znacznik <em><style></em> umieszczony w sekcji <em><head></em> umożliwia importowanie stylu z zewnętrznego pliku.</p> <p id='kod'><style>@import url('style.css');</style></p> </body> </html>