CSS
WORLD OF CODERS
Cos'è CSS
CSS (Cascading Style Sheets) è un linguaggio markup popolare. è stato creato ufficialmente nel 1996. Usato per:
- sviluppo web (parte grafica della pagina “la parte facciale”)
CSS è utilizzato per definire l’aspetto e la presentazione di un sito web. Serve per separare la struttura e il contenuto della pagina web(HTML/la parte scheletro della pagina web) dalla sua presentazione di testo, colori, layout e altri elementi visivi di un sito web, ottenendo un design coerente e personalizzato. Quindi CSS si occupa di più nella parte grafica.
CSS QUICKSTART
Il progamma che vi consiglio di utilizare per inziare a progammare è VISUAL STUDIO CODE. Con Visual Studio è possibile creare app, giochi o pagine web estensioni usando il proprio linguaggio o linguaggi markup preferiti.
CSS è un linguaggio markup di programmazione interpretato, ciò significa che come sviluppatore per creare un file CSS su VS CODE devi creare un nome e il (.css) alla fine.
Per collegare un file HTML a un file CSS si deve scrivere nella sezione “head” del file HTML una stringa <link rel=”Stylesheet” href=”nomefile.css”> così le due pagine saranno collegate e potrai stilizzare Il file HTML tramite il file CSS.
FUNZIONI
Le proprietà dello sfondo CSS vengono utilizzate per aggiungere effetti di sfondo per gli elementi.
BACKGROUND-COLOR
variabile{
background-color:black;
}
Nei file CSS, un colore può essere specificato utilizzando un nome di colore predefinito come per esempio in questo codice si usa la variabile per non cambiare tutta la pagina:
COLOR
<p id=”color”>ciao</p>
<style>
#color{
color: red;
}
</style>
ciao
Nei file CSS ci sono quattro famiglie di caratteri generici:
-I caratteri Serif hanno un piccolo tratto ai bordi di ogni lettera. Creano un senso di formalità ed eleganza.
-I caratteri sans-serif hanno linee pulite (senza piccoli tratti allegati). Creano un look moderno minimalista.
-I caratteri corsivi imitano la scrittura umana.
-I caratteri fantasy sono caratteri decorativi/giocosi.
Tutti i diversi nomi di font appartengono a una delle famiglie di font generiche.
FONT-FAMILY
<p id=”font”>ciao</p>
<p id=”font2″>ciao</p>
<p id=”font3″>ciao</p>
#font{
font-family:Serif;
color: green;
}
#font2{
font-family: Sans-Serif;
color: blue;
}
#font3{
font-style:italic;
color: red;
}
ciao
ciao
ciao
Questa variabile serve per cambiare la misura del paragrafo o qualsiasi variabile dentro un paragrafo.
FONT-SIZE
<p id=”size”>ciao</p>
<p id=”size2″>ciao</p>
<p id=”size3″>ciao</p>
#size{
color: green;
font-size: 10px;
}
#size2{
color: blue;
font-size: 20px;
}
#size3{
color: red;
font-size: 30px;
}
ciao
ciao
ciao
Il riempimento viene utilizzato per creare spazio attorno al contenuto di un elemento, all’interno di eventuali bordi definiti.
PADDING
<p id=”padding”>ciao</p>
<p id=”padding2″>ciao</p>
<p id=”padding3″>ciao</p>
#padding{
color: white;
padding:30px;
}
#padding2{
color: pink;
padding:50px;
}
#padding3{
color: yellow;
padding:70px;
}
ciao
ciao
ciao
La proprietà display viene utilizzata per specificare come viene mostrato un elemento su una pagina web.
DISPLAY
variabile{
display: inline; *//cioè in linea//*
display: block; *//cioè come in lista//*
}
- ciao
- ciao
- ciao
- ciao
- ciao
- pasan
- markus
- piero
- roberto
- luca
I margini vengono utilizzati per creare spazio attorno agli elementi, al di fuori dei confini definiti.
MARGIN
#margin{
color: white;
margin:25px;
}
senza margin
con margin
I margini vengono utilizzati per creare spazio attorno agli elementi, al di fuori dei confini definiti.
BACKGROUND-IMAGE
#image{
background-image:url(https://www.wallpa
pertip.com/wmimgs/79-790281_get-free-high-quality-hd-wallpapers-victoria-secret.jpg);
height: 250px;
}
Questo è utilizzato per dare una lunghezza a una variabile, viene utilizzato nelle forme geometriche o sfondi del nav.
WIDTH
#width1{
width: 100%;
}
#width2{
width: 50%;
}
con width a 100%
con width a 50%
La proprietà text-decoration-line viene utilizzata per aggiungere una linea di decorazione al testo.
TEXT-DECORATION
#text{
text-decoration: underline;
}
ciao
Le proprietà del bordo nei file CSS ti consentono di specificare lo stile, la larghezza e il colore del bordo di un elemento.
Ne esistono molti:
border-width = permette di scegliere la lunghezza.
border-color = permette di scegliere il colore.
border-radius = permette di mettere dei bordi arrotondati.
BORDER
#border{
border-width: 5px;
border-color: red;
border-radius: 25px;
}