HTML, CSS, PHP e MYSQL sono i quattro linguaggi fondamentali per generare un sito web dinamico dove l’utente può interagire con un database. Questa guida si occupa della grafica CSS.
Dove inserire il codice CSS?
Il codice CSS va inserito all’interno dei tag <head></head> prima del contenuto rappresentato dai tag <body> e </body>.
Come abbiamo visto nella guida Creare File PHP per Connettersi al Database anche in questo caso non è necessario riportare il codice in ogni pagina bensì richiamare il file tramite una specifica istruzione.
Se in PHP richiamiamo il database tramite l’istruzione require, il file CSS viene richiamato mediante il tag <link rel=”stylesheet” href=”nomefile.css”>.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La mia pagina</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Contenuto della tua pagina -->
</body>
</html>
Esempio di file CSS semplice
Nella sua versione basica il file CSS non fa altro che richiamare i tag, utilizzati nel linguaggio html, racchiudendo tra parentesi graffe le varie istruzioni.
Se desiderate modificare un intestazione <h1>…<h6> basterà richiamarlo e in questo modo tutte le intestazioni di quel tipo avranno lo stesso stile come il colore.
/* Questo è un commento CSS */
/* Definizione dello stile per il body */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
/* Definizione dello stile per un titolo */
h1 {
color: #333333;
}
/* Definizione dello stile per i paragrafi */
p {
font-size: 16px;
line-height: 1.5;
color: #666666;
}
/* Definizione dello stile per un link */
a {
color: #0066cc;
text-decoration: none;
}
/* Stile per il link al passaggio del mouse */
a:hover {
text-decoration: underline;
}Le classi e gli ID
Diversamente se lo stile non dev’essere applicato a tutti i tag ma solamente ad alcuni si possono utilizzare le classi.
Una classe può essere applicata su più tag, definendola di volta in volta ed è sempre preceduta dal .
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La mia pagina</title>
<link rel="stylesheet" href="styles.css">
<style>
/* Stile per la classe */
.mio-stile {
color: blue;
}
/* Stile per l'ID */
#header {
background-color: gray;
}
</style>
</head>
<body>
<!-- Esempio di utilizzo della classe -->
<p class="mio-stile">Questo testo sarà blu grazie alla classe "mio-stile".</p>
<!-- Esempio di utilizzo dell'ID -->
<div id="header">
<h1>Questo è l'intestazione della pagina</h1>
</div>
</body>
</html>
Un ID, come si può facilmente dedurre è associato a un singolo tag. Viene dichiarato precedendolo dal cancelletto #.
Il nuovo buono Premium è sottoscrivibile dal 14 novembre, la nuova liquidità che concorre, invece, inizia dall'8 novembre. Ulteriori dettagli…
Sono venuto a conoscenza il 13/11/2024 del 3% tramite posta elettronica ma la scadenza indicata è del 14/11/2024 . Quale…
Ho lo stesso problema con una sim poste mobile: tracker non abilitato. Sarò costretto a fare il reso.
L'ho ricaricato completamente, ma non sono mai riuscita ad accenderlo.
grazi delle vostre informazioni mi son state utili, visto che nel mio caso sono vent'anni che non adopero il computer…