Xhack

Un forum dedicato all'hacking
 
IndiceIndice  PortalePortale  CalendarioCalendario  FAQFAQ  CercaCerca  RegistratiRegistrati  Lista UtentiLista Utenti  GruppiGruppi  Accedi  

Condividi | 
 

 Css (cascading style sheet)

Andare in basso 
AutoreMessaggio
abe93
membro importante
membro importante
avatar

Numero di messaggi : 205
Età : 25
Localizzazione : Piacenza
Data d'iscrizione : 18.08.07

MessaggioTitolo: Css (cascading style sheet)   Sab Nov 03, 2007 3:18 pm

Tutorial 1

Il linguaggio css serve a gestire il layout di un sito web quindi la grafica.
Invece di cambiare gli stili (i colori, le immagini di background ecc.) di ogni singola pagina del vostro sito web è possibile usare un solo foglio di stile.css e metterci dentro tutte le regole comuni a tutte le pagine web del vostro sitozzo.

esistono due metodi per inserire regole css all'interno di pagine web:

    il collegamento ad una pagina esterna
    regole interne al documento web

Collegamento a pagine esterne

è il metodo più utilizzato Tuttavia in tutte le pagine del vostro sito deve essere presente il collegamento al foglio di stile css come sotto indicato...

Codice:

<html>
<head>
<title>stili</title>
<link rel="stylesheet" type="text/css" href="stile.css">  [QUI INSERIRE IL COLLEGAMENTO AL FOGLIO DI STILE]
</head>
<body>...

QUESTO era un esempio di pagina web con collegamento ad uno stile css.
analizziamo ora gli elementi dell' <head> della nostra pagina web:

l'elemento <link> ha molti attributi molto importanti spiegati di seguito:

    1.l'elemento rel che descrive il rapporto tra la pagina web e foglio di stile css esso può essere stylesheet o alternate stylesheet ma sicuramente il più usato (unicamente usato) è lo stylesheet.
    2.l'attributo type che può avere solo il valore text/css
    3.l'elemento href che propone il link alla pagina di stile css


tuttavia questo metodo potrebbe causare problemi con browser vecchi (anche se è la più usata).

per limitare i danni con i browser vecchi si dovrebbe usare @import all'interno del tag <style>
es.
Codice:

<style>
@import url(stile.css);
</style>

l'unica cosa da notare è che all'interno di url va inserito il collegamento completo alla pagina di stile css.

regole interne al documento web


questo metodo è meno utilizzato tuttavia è utile se hai bisogno di inserire regole diverse all'interno di una pagina rispetto ad un'altra.
ecco un esempio.

Codice:

<html>
<head>
<title>tutorial stili css</title>
<style type="text/css">
body {
background: #000000;
}
</style>
</head>
<body>...

da notare bene:

Codice:
<style type="text/css">
body {
background: #000000;
}

in questo codice è contenuta una regola

Codice:
body {
background: #000000;
}

che dice che nel <body> è presente uno sfondo di colore #000000.

e con questo concludo il primo pezzo di tutorial.


tutorial 2

le regole all'interno di un foglio di stile css


Commenti

Per inserire parti di commento (cioè non visibili se non si guarda il foglio di stile) in un CSS racchiudetelo tra questi segni:

    /* come segno di apertura
    */ come segno di chiusura


regole:

Codice:
h2 {color background: black;}

h2 viene chiamato selettore invece quello che sta all'interno delle parentesi graffe viene chiamato blocco di dichiarazione in cui vengono scritte le proprietà che devono avere i selettori.


alcuni esempi di selettori:

selettori messi in ordine semplice:

Codice:
h1 {color: #000000;}
p {background: white; font: 12px Verdana, arial, sans-serif;}
table {width: 200px;}

selettori raggruppati:

se più selettori devono avere le stesse caratteristiche è possibile separarli dalla virgola senza ripetere sempre gli stessi blocchi di dichiarazioni:

se per esempio dovessimo avere :

Codice:
h1 {background: white;}
h2 {background: white;}
h3 {background: white;}

è possibile scriverlo così:

Codice:
h1, h2, h3 {background: white;}


tuttavia se tutti i selettori di una pagina devono avere la stessa caratteristica è possibile usare il selettore * che li comprende tutti...

Codice:
* { color: black; }


fine tutorial 2


tutorial 3

CSS proprietà di base


Proprietà del color


per sapere i colori e le loro proprietà fondamentali vi rimando al tutorial di darkjoker

però nei fogli css sono presenti alcune altre proprietà del colore che si riferiscono al "div" a cui devono essere applicate...

ecco vari esempi:


    1. il colore di primo piano (foreground color)
    2. il colore di sfondo (background color)
    3. il colore del bordo (border color)


esempi:

Codice:
#div { background color: black; foreground color: black; border color: black}


proprietà dello sfondo:

    1. background-color
    2. background-image
    3. background-repeat
    4. background-attachment
    5. background-position


esempi

background color
Codice:

#div{background-color: <valore>;}

background image
Codice:

#div { background-image: url(<valore>); }
notare che nell'url fra le parentesi bisogna inserire il collegamento all'immagine


background-repeat

Con questa proprietà iniziano le novità. Essa consente di definire la direzione in cui l'immagine di sfondo viene ripetuta.

Codice:
#div {background-repeat: <valore>;}

i valori di repeat:

Codice:
  *  repeat. L'immagine viene ripetuta in orizzontale e verticale. E' il comportamento standard.
    * repeat-x. L'immagine viene ripetuta solo in orizzontale.
    * repeat-y. L'immagine viene ripetuta solo in verticale.
    * no-repeat. L'immagine non viene ripetuta.


esempio:

Codice:
body { background-image: url(sfondo.gif); background-repeat: repeat; }
div { background-image: url(sfondo.gif); background-repeat: repeat-x; }


background-attachment

Con questa proprietà si imposta il comportamento dell'immagine di sfondo rispetto all'elemento cui è applicata e all'intera finestra del browser. Si decide, in pratica, se essa deve scorrere insieme al contenuto o se deve invece rimanere fissa.

Codice:
#div {background-attachment: <valore>;}

Valori

Codice:
  * scroll. L'immagine scorre con il resto del documento quando si fa lo scrolling della pagina
    * fixed. L'immagine rimane fissa mentre il documento scorre

Questa proprietà consente risultati estetici di grande impatto ed è consigliabile, per ottenerne il meglio, usarla sia in combinazione con le altre proprietà sia con immagini grandi.


background-position

Proprietà un pò complessa. Definisce il punto in cui verrà piazzata un'immagine di sfondo non ripetuta o da dove inizierà la ripetizione di una ripetuta. Si applica solo agli elementi blocco o rimpiazzati. Attenzione alla compatibilità e alla resa, non omogeena, tra i vari browser.

Codice:
#div {background-position: <valore> o <valori>;}

Valori

I valori possibili sono diversi. Tutti però definiscono le coordinate di un punto sull'asse verticale e su quello orizzontale. Ciò può avvenire nei seguenti modi:

* con valori in percentuale
* con valori espressi con unità di misura
* con le parole chiave top, left, bottom, right

esempio:

Codice:
body {
background-image: url(back_400.gif);
background-repeat: no-repeat;
background-position: 50px 50px;
}



proprietà dei font:

font-family

La proprietà font-family serve a impostare il tipo di carattere di una qualunque porzione di testo.

Codice:
p {font-family: arial, Verdana, sans-serif;}

i valori delle famiglie

    * serif (Times New Roman)
    * sans-serif (arial)
    * cursive (Comic Sans)
    * fantasy (Allegro BT)
    * monospace (Courier)



font-size

Insieme a font-family è la proprietà considerata essenziale nella definizione dell'aspetto del testo, di cui definisce le dimensioni.


Codice:
selettore { font-size: <valore>; }

i valori della size:
Codice:

    *  le sette parole chiave xx-small, x-small, small, medium, large, x-large, xx-large
    * quelli espressi con le seguenti unità di misura: pixel (px), centimetri (cm), millimetri (mm), punti (pt), picas (pc), pollici (in), x-height(ex). Di tutte queste unità le uniche proponibili per il testo sono punti e pixel. Si consiglia di usare la prima solo per CSS destinati alla stampa.


font-weight

Serve a definire la consistenza o "peso" visivo del testo.

Codice:
selettore {font-weight: <valore>;}

Valori

Il "peso" visivo di un carattere può essere espresso con una scala numerica o con parole chiave:

* valori numerici 100 - 200 - 300 - 400 - 500 - 600 - 700 - 800 - 900 ordinati in senso crescente (dal leggero al pesante)
* normal. Valore di default. E' l'aspetto normale del font ed equivale al valore 400
* bold. Il carattere acquista l'aspetto che definiamo in genere grassetto. Equivale a 700
* bolder. Misura relativa. Serve a specificare che una determinata porzione di testo dovrà apparire più pesante rispetto al testo dell'elemento parente
* lighter. Misura relativa. Il testo sarà più leggero di quello dell'elemento parente


Text-align

La proprietà serve a impostare l'allineamento del testo.

Codice:
selettore { text-align: <valore>; }

Valori

    * left. Allinea il testo a sinistra
    * right. Allinea il testo a destra
    * center. Centra il testo
    * justify. Giustifica il testo


spero che il tutorial vi sia servito lol!

poi ne scriverò uno sui layout di pagine web a più colonne What a Face

se avete domande chiedete( questo è il mio primo tutorial non so se mi sono spiegato bene...) comunque commentate!!!! cyclops
Torna in alto Andare in basso
Visualizza il profilo http://www.abe93.altervista.org
darkjoker
Admin
Admin
avatar

Numero di messaggi : 813
Data d'iscrizione : 30.07.07

MessaggioTitolo: Re: Css (cascading style sheet)   Lun Nov 05, 2007 6:11 pm

grazie Very Happy Very Happy questo mi serviva!

_________________
L'unico computer sicuro, è un computer spento.

Nel software esiste sempre almeno un bug, generalmente è localizzabile tra la tastiera e la sedia

Torna in alto Andare in basso
Visualizza il profilo
certaindeath
Admin
Admin
avatar

Numero di messaggi : 343
Data d'iscrizione : 30.07.07

MessaggioTitolo: Re: Css (cascading style sheet)   Lun Nov 05, 2007 6:13 pm

grazie anche da parte mia;
a quanto pare di applicazioni web(se così si possono chiamare) te ne intedi
Torna in alto Andare in basso
Visualizza il profilo
abe93
membro importante
membro importante
avatar

Numero di messaggi : 205
Età : 25
Localizzazione : Piacenza
Data d'iscrizione : 18.08.07

MessaggioTitolo: Re: Css (cascading style sheet)   Lun Nov 05, 2007 6:36 pm

si abbastanza da quando mi avete aiutato per il form di google ci ho dedicato quasi tutti i giorni almeno un'ora (anche a scuola...)
Torna in alto Andare in basso
Visualizza il profilo http://www.abe93.altervista.org
certaindeath
Admin
Admin
avatar

Numero di messaggi : 343
Data d'iscrizione : 30.07.07

MessaggioTitolo: Re: Css (cascading style sheet)   Lun Nov 05, 2007 6:42 pm

azz!
fare il webmaster richiede tempo(ai tuoi livelli Very Happy )
Torna in alto Andare in basso
Visualizza il profilo
abe93
membro importante
membro importante
avatar

Numero di messaggi : 205
Età : 25
Localizzazione : Piacenza
Data d'iscrizione : 18.08.07

MessaggioTitolo: Re: Css (cascading style sheet)   Lun Nov 05, 2007 6:47 pm

cavolo io sono un pivello però cerco di imparare tutto e più in fretta che posso (aggiorno la homepage del mio sito almeno una volta ogni 2 giorni farà schifo ma almeno tutte le volte che lo aggiorno c'è sempre qualcosa che lo fa diventare migliore della volta precedente...)
Torna in alto Andare in basso
Visualizza il profilo http://www.abe93.altervista.org
certaindeath
Admin
Admin
avatar

Numero di messaggi : 343
Data d'iscrizione : 30.07.07

MessaggioTitolo: Re: Css (cascading style sheet)   Lun Nov 05, 2007 6:49 pm

era un complimento!
Torna in alto Andare in basso
Visualizza il profilo
darkjoker
Admin
Admin
avatar

Numero di messaggi : 813
Data d'iscrizione : 30.07.07

MessaggioTitolo: Re: Css (cascading style sheet)   Lun Nov 05, 2007 6:50 pm

mah.. lascia perdere certain.. ha un concetto strano di complimenti...

_________________
L'unico computer sicuro, è un computer spento.

Nel software esiste sempre almeno un bug, generalmente è localizzabile tra la tastiera e la sedia

Torna in alto Andare in basso
Visualizza il profilo
abe93
membro importante
membro importante
avatar

Numero di messaggi : 205
Età : 25
Localizzazione : Piacenza
Data d'iscrizione : 18.08.07

MessaggioTitolo: Re: Css (cascading style sheet)   Lun Nov 05, 2007 6:52 pm

nono io l'ho preso per un complimento ma ho cercato di fare il modesto... mi sa che avete letto la mia risposta con un tono errato lol!
Torna in alto Andare in basso
Visualizza il profilo http://www.abe93.altervista.org
Contenuto sponsorizzato




MessaggioTitolo: Re: Css (cascading style sheet)   

Torna in alto Andare in basso
 
Css (cascading style sheet)
Torna in alto 
Pagina 1 di 1

Permessi di questa sezione del forum:Non puoi rispondere agli argomenti in questo forum
Xhack :: Programmazione :: HTML/PHP/Javascript-
Vai verso: