 |
|
|||
Sezione del telaio dedicata alla realizzazione e |
||||
|
|
|||
..:: Basi css per una pagina web ::.. I css sono indicazioni che possiamo inserire in una pagina web affinché ciò chepubblichiamo abbia un determinato aspetto, ci permettono di personalizzare ogni singolo elemento, il colore o lo sfondo grafico della pagina, tipo, colore e misura del font per il testo dei contenuti e per il testo di titoli e paragrafi, i contenitori (div, table, celle), i link, le immagini, ecc., ecc., Possiamo scrivere i parametri per le indicazioni in linea cioè man mano in ogni elemento e/o testo che inseriamo o scrivere le classi css da richiamare dove e quando servono L'insieme di classi (style css) necessarie si può scrivere nella pagina o in un file esterno così da poterlo richiamare in tutte le pagine del sito
Soluzione veloce ma poco pratica perché occorrerà scriverlo così ogni volta e causerà confusione nel codice della pagina che man mano sarà piena di tag simili, quindi opzione sconsigliata
<head> e </head>e si racchiude tra i tag <style type="text/css"></style>Si possono scrivere classi generiche "class" da richiamare in qualunque elemento, ovviamente considerando l'elemento e i parametri inseriti o classi con identificatore unico "id" dedicate ad un singolo elemento e che si possono richiamare una sola volta nella pagina Per scrivere una classe generica si utilizza il punto e un nome .mia_classe e il tag di richiamo in un elemento nella pagina è: class="mia_classe" Per un identificatore unico id invece si utilizza il cancelletto e un nome #mia_classe e il tag di richiamo nell'elemento per cui è stata scritta è: id="mia_classe" In entrambi i casi si possono scrivere precedute dall'elemento che si vuole personalizzare table.mia_classe ma essendo una classe generica si può richiamare anche in un paragrafo, div#mia_classe sarà comunque possibile attribuire questa classe ad un unico elemento Per l'aspetto generale della pagina, colore/sfondo, testo, posizione e margini si scrive una classe apposita per il body e non occorrerà richiamarla, stessa cosa per i link a meno che non si facciano delle classi specifiche
background-color :#d6e8f4; è il parametro per impostare il colore di sfondo della pagina,per un'immagine grafica si utilizza background-image: url('url pagina immagine');* Proseguiamo con le classi per i titoli e i paragrafi I titoli scritti utilizzando questi tag hanno determinate regole, per maggiori infoleggete anche la guida dettagliata qui -> w3schools tag titoli In sostanza <h1> si può utilizzare una sola volta nella pagina, per intestazione/titolo e bisogna poi proseguire in ordine <h2>, <h3>, ecc., ecc.
Queste classi vanno richiamate dove occorre nella pagina - I titoli: <h1>Titolo </h1> - <h2>Titolo </h2> - <h3>Titolo </h3> - Un paragrafo: <p class="testo_piccolo">Testo </p> 
I font che si possono utilizzare in una pagina web che non creano problemi con i vari sistemioperativi sono relativamente pochi, spesso risultano "freddi" ma sono leggibili perché non hanno esagerazioni grafiche, in alcuni casi però occorre intervenire sullo spazio tra le linee di testo altrimenti risulta troppo fitto, ad esempio, il font per il testo del telaio è il Georgia, molto elegante e armonioso ma ho dovuto inserire il parametro line-height impostato a 1.5 (line-height: 1.5;) affinché le righe di testo non risultassero troppo appiccicate e faticose da leggere, con altri font invece è meglio impostare una misura più grande perché i caratteri risultano molto piccoli - Questi sono i font consigliati in rete: Arial - Brush Script MT - Comic Sans - Courier New - Garamond - Georgia - Helvetica - ImpactLucida Console - Palatino - Tahoma - Times New Roman - Trebuchet MS - Verdana C'è anche la possibilità di utilizzare dei font personalizzati, con il codice fornito da Google font o scaricati in rete, free o a pagamento e importati nel proprio spazio hosting da richiamare nei css se vi può interessare leggete il tutorial Font personalizzato * Aggiungiamo le classi per i link Come tutto il testo che scriveremo nella pagina anche i link si visualizzeranno con il font impostatoma di default sono di colore blu e sottolineati, caratteristica pensata probabilmente perché devono attirare l'attenzione e far capire che è un testo che permette di accedere ad altro contenuto Per renderli coordinati ai colori delle nostre pagine si può intervenire con una classe che funzionerà senza richiamo e come per il body scriviamo le personalizzazioni direttamente nel tag a, per il colore, eliminare la sottolineatura, il font e/o la misura, uno sfondo, il tipo di cursore che si deve visualizzare al passaggio del mouse, insomma si può aggiungere qualsiasi proprietà css
Oppure possiamo inserire queste 4 proprietà ognuna con la sua funzione specifica
- Esempio di classi per i link
Queste classi saranno attive in ogni link che si scrive nella pagina,per link particolari o comunque differenti se ne possono aggiungere altre impostando anche un font personalizzato, queste classi extra andranno richiamate nel codice - Esempio classi extra per i link
In questa pagina ho inserito in modo completo gli esempi delle classi css che ho descritto, Pagina css completo ricapitolando, abbiamo visto come si scrivono le classi per il body (pagina), i titoli e i paragrafi, ed infine per i link, e questi sono solo degli esempi che si possono arricchire, in base alle esigenze, con altri parametri ma sono le basi che ci servono per iniziare a scrivere i css, per lo meno in modo ordinato, così sarà sicuramente più semplice apportare modifiche e aggiornamenti futuri
Attenzione ai nomi che inserite nelle classi, se sono doppi verrà presain considerazione la prima classe scritta quindi vi potreste ritrovare una table che si visualizza con i parametri inseriti per un paragrafo Ora possiamo proseguire con i parametri per i contenitori dei vari spazi della pagina, per gli elementi grafici, menu di navigazione e via dicendo, si possono fare delle aggiunte e/o modifiche in qualsiasi momento per ottenere esattamente ciò che vogliamo in maniera semplice e veloce Nel menu html in colonna trovate i tutorial specifici per approfondire su questi elementi base e per aggiungere eventualmente gli altri elementi necessari in una pagina/sito web Spero di essere stata chiara in tutti i passaggi ^_^ Vi auguro buon lavoro ma sopratutto buon divertimento! Ciao alla prossima^^ Penelope ♥
|
Vediamo come scrivere le classi da richiamare nei vari elementi
|
.gif){kind=small}
Commentario...
|
Scrivi qui per lasciare un saluto, una richiesta di aiuto, un suggerimento o una critica ^_^ |
~ Pagina visitata da 3097 utenti
H:
Buon Autunno
!
Segui il telaio su Facebook
* Info sezione...
Mi farebbe molto piacere la condivisionedei miei tutorial ma vi sarei anche molto grata
se evitaste di fare copia e incolla su altri spazi
del mio lavoro, linkate le pagine, avvisatemi
ricambierò senza problemi. Grazie ♥
..:: Basi ::..
..:: html ::..
- Box effetto rilievo
- Basi css pagina web
- CSS elemento div
- CSS div struttura sito
- CSS sito responsive Flexbox
- CSS table
- CSS table struttura sito
- CSS file esterno
- Cbox - Chat per brevi messaggi
- Cbox - Theme editor
- Cursore
- Font personalizzato nel sito...
- Iframe per accessori e gadget
- Iframe per sito web
- Immagini
- Ipertesto - Link
- Link style
- Link ancora o interno
- Marquee
- Marquee speciali
- Marquee javascript
- Sfondo pagina
- Table basi e style
- Table sfondo
- Table scroll
- Table lavori
- Testo, font e personalizzazioni
- Textarea
..:: Script page ::..
..:: Script gadget ::..
Accessori e gadget del telaio...
- Adottini e mascottine
- Almanacco
- Bottoni top pagina
- Blogger Post e commenti
- Countdown Natale
- Calendari
- Datari con saluto
- Data e ora
- Decori pagine web
- Favicon
- Mini cursori
- Orologi
- Regala una rosa...
- Stagione attuale
- Settimanelli
- Settimanelli Natale
- Salutini in pixel
- Tag dell'umore
- Time e news
- Tag grafiche
Natale menuೡ Istruzioni per prelevare e postare
nel proprio spazio accessori e gadget del telaio
|
Sito o forum Blogger-Blogspot |
 |
Spazio web...
Realizzare e gestire un sito web
nell'hosting free più famoso...
Materiale grafico
Gif, mini gif, pixel, immagini, png...
Tutto il materiale grafico che ti serve,
raccolto e messo a tua disposizione!
I vostri messaggi...
|
|
♥♥
Bellísima! |
html & script Tutorial è online dal 2011 e dopo una lunga pausa ripartiamo da... 2 anno, 2 mesi, 17 giorni ೡ Copyright © Penelope 2008 - 2025 Tutti i diritti riservati www.iltelaiodipenelope.it |
|
|
 |