Centro div orizzontalmente e verticalmente con galleggiante e chiaro

La ricerca come centrare un div, ho trovato questo post molto interessante su CSS per il pranzo .

Nell'esempio, viene utilizzato un div con il "contenitore" id, questo è l'elemento che centro volontà da pagina. Osservate il seguente codice HTML:

  A
 2
 3
 4
 5
 6
 7
 8
 9
 10

  <div id="distance"> </ div>
 <div id="container">

     Centro <h1> div orizzontalmente e verticalmente con galleggiante e chiaro - i browsers </ h1>
     <p>
         Questa casella si trova al centro del browser in relazione al vostro punto di vista. <br />
         Il contenuto non scompare quando il punto di vista è ridimensionata ed è inferiore della scatola.
     </ P>

 </ Div> 

Leggi tutto ...

Tags: css

L'utilizzo di qualsiasi fonte (compreso il vostro) sul tuo sito

Molte volte abbiamo ricevuto un layout curvy e tipi di carattere e voglia di ben oltre il campo di applicazione i font web standard e poi pensare "Wow, come possiamo costruire questo?! Dovrò creare un'immagine per ciascun titolo in possesso di questa fonte benedetta? "

Quindi Emanuel persona mi ha mostrato una soluzione molto interessante nel sito Font Squirrel . Oltre ad avere fonti diverse dà comunque la possibilità di inviare la propria fonte e di adattarsi a lavorare su qualsiasi sito.

Leggi tutto ...

Tags: browser , css

Guadagni visivi con CSS3

Chris Coyier, web designer che gestisce il blog CSS Tricks , ha scritto sul suo profilo Twitter che "CSS è come gli scacchi. Si possono imparare le basi in un giorno, e trascorrere una vita specializzata. " In realtà, CSS è il linguaggio più facile da imparare, avere una sintassi molto semplice. Ma la creazione di ben progettati layout di pagina utilizzando i CSS, e conoscere tutti i loro trucchi, ci vuole tempo ed esperienza.

Il modo corretto per sviluppare pagine web per la struttura è divisa in tre strati: il contenuto (HTML), il comportamento (JavaScript) e presentazione (CSS). Lavorare la CSS in uno strato separato di struttura rimanente, abbiamo ottenuto una maggiore coerenza visiva, in quanto i layout di tutte le pagine sarà basato su un foglio di stile simile. Abbiamo anche guadagnare tempo e la facilità quando si effettua un restyling visivo o di manutenzione, perché la modifica di un singolo file avrà un impatto in tutto il sito. Con i CSS in un file separato, possiamo anche fornire una maggiore accessibilità per creare fogli di stile specifici per diversi dispositivi come sintetizzatori vocali e le periferiche audio e stampanti braille, telefoni e altri dispositivi mobili, ecc. Il caricamento delle pagine sarà anche più veloce, dal momento che dopo il primo accesso al sito, il file CSS viene caricato nella cache.

Un buon esempio di come CSS può essere potente se usato bene è la CSS Zen Garden . Il sito offre una pagina HTML template da scaricare, e molti designer creare fogli di stile per quella pagina. Il risultato si può vedere nella galleria: solo cambiando il foglio di stile, i diversi layout vengono applicate nella stessa pagina HTML.

Leggi tutto ...

Tags: CSS3

Tutti (o quasi tutto) è necessario sapere per iniziare con i CSS

Ho deciso di rilanciare questo post preso dal mio vecchio blog e metterlo qui. E 'sempre bene avere una guida ogni volta che si dimentica qualcosa nei fogli di stile ufficiali.

Quindi cerchiamo di mettersi al lavoro!

I fogli di stile può essere collegato a un documento in tre modi:

1. Collegato o importato;
2. Incorporated;
3. Inline.

Foglio di stile esterno

Un foglio di stile si dice che sia esterno, quando le regole CSS sono dichiarati in un documento che parte del documento HTML. Il foglio di stile è un file separato e file html ha l'estensione. Css

Un foglio di stile esterno è ideale per essere applicato a più pagine. Con un foglio di stile esterno, è possibile modificare l'aspetto di un intero sito modificando solo un file (il file del foglio di stile).

Il file CSS dal foglio di stile esterno deve essere collegato o importato documento HTML all'interno del tag <> del documento. La sintassi generale per Lincar un foglio di stile chiamato estilo.css è la seguente:

Leggi tutto ...

Tags: css