Definire i propri stili

Creeremo e definire uno stile adeguato al lavoro che vogliamo fare.

Abbiamo visto il tutorial precedente, come applicare uno stile a un certo etichette predefinite e si applicano a queste stesse etichette. Lo abbiamo fatto con i link e testo, ma potrebbe fare con tutti, ma naturalmente, abbiamo visto che in ogni paragrafo, avrebbe lo stesso stile, tutti i link hanno la stessa decorazione, testo, ecc ..

Così, mentre questa ha il vantaggio che verrà applicata automaticamente quando si inserisce il testo, o collegamenti, si consiglia di creare uno stile e definire come si vuole e applicare noi stessi.

Htm si apre un nuovo (tutto bianco) e salvate con un nome:

* Nota: In genere è così che inizierà la progettazione di un sito web, quindi questo documento manterrebbe 'plantilladisenio' il nome ad es. O chiunque altro che in seguito diventerà il modello Web vero.

Attivare la finestra riquadro stile / Stili CSS

Fare clic sull'icona per creare nuova regola:

1

Abbiamo segnato Avanzate e selezionare il tag body, td

* Nota: si possono mettere diversi stili per ogni regola, separati da virgole. Specificate nel presente articolo, il carattere, la dimensione, il colore .. e saranno applicate automaticamente a tutti i documenti che facciamo in questo stile.

Ricordate, che questo foglio di stile, abbiamo collegato con il documento che poi (in teoria, per costruire un sito web) farà il modello. ;)

Abbiamo iniziato in questo modo:

2

Qui stiamo andando a chiedere di mantenere:

3

Si può avere in un posto più di un foglio di stile, quanto basta per ricordare e sapere quali documenti è collegato con uno e con la quale gli altri, o altre ;)

Definiamo il font, il colore di questa, la dimensione .. etc:

4

Ora i margini del documento. E 'importante avere tutto lo spazio possibile per iniziare a progettare. Quindi 0 per tutti:

6

Accettiamo e tutti questi valori vengono applicati automaticamente ogni volta che, una volta convertito in un modello vero, apriamo un nuovo documento. Creare un'altra regola di stile, solo per il tag body:

corpo

Fondo di Categoria:

5

abbiamo impostato il colore di sfondo e accettate.

Per impostare gli stili di collegamento, si procede allo stesso modo come aveva fatto nel precedente tutorial.

* Nota: E io ti dico un trucco che faccio, e mi fa risparmiare tempo.

Io di solito definire tutti questi stili quando creo un nuovo documento dalla finestra di ispezione Proprietà, ti ricordi, questi stili sono inseriti nel codice stesso del documento. Quindi, copiare, eliminare le etichette:

<stylo> e </ Stylo>.

Creo un nuovo foglio di stile CSS, che non definisce alcun tipo, una volta colpito aprire il documento creato in htm, dalla finestra di ispezione Proprietà. Salvare il foglio di lavoro e lo trovo più comodo e veloce ;)

Ma questo è un trucco, cosa avrebbe fatto così anche come ho indicato prima. Fatto questo, inizieremo a creare stili che saremo inserimento e ci fa comodo.

Stile nuova regola:

7

notare che il nome dello stile è preceduto da un punto (.) e poi ho messo un nome a riconoscere in un secondo momento. Io definisco il colore di sfondo:

8

ed accettare.

el ancho, la alineación: Documento htm, creare una nuova tabella, in cui, come al solito abbiamo impostato il, allineamento larghezza:

9

Passa il mouse sul tavolo e fare clic sull'etichetta che appare appena sopra l'ispettore

10

stare bene è selezionata e si applicherà lo stile che abbiamo creato in precedenza:

11

vedere che il colore di sfondo della tabella abbiamo scelto di cambiare.

In questo modo si applicherà gli stili d'ora. Per rimuovere uno stile, si vede che la prima opzione sarà sempre 'No', come allo stesso modo che abbiamo usato prima, selezionare Nessuno e andare via adesso, o premendo qualsiasi altro cambiamento di stile per la parte inferiore della tabella.

Allo stesso modo si definisce il fondo di un td. In primo luogo, dalla finestra di ispezione, impostare l'allineamento della cellula, e la New Style regola / Categoria del fondo:

12

E dato un fondo per la cellula:

13

Per applicare uno stile di cella, fate clic sull'etichetta, come con la tabella:

14

Inserire un'immagine di sfondo:

y desde examinar, busco una imagen en la carpeta imágenes del Sitio en el cual estoy trabajando: Regola di stile. Novità: come ho messo il nome dello stile Fondotabla2 e da rivedere, trovo un quadro dalle immagini del sito su cui sto lavorando:

16

Creiamo ora lo stile Fondoimgtd e mettere questi valori.:

17

Vedi qui ad esempio

Possiamo fare diverse combinazioni con questi valori, così come di sperimentazione e ricerca per trovare ciò che ti piace vale di più? Un altro modo per applicare gli stili sono:

15

Mmm .... si trova la stessa cosa ora sarebbe più facile per creare il portale no? Inserendo i colori dei fondi delle tabelle e delle cellule, con stile, no?

Perché se chiquis, ma tutto abbiamo imparato allora .. anche se ci è costato ... avremmo perso ;) E ora tutto ciò che emergerà e ci sarà molto più facile

E perché si salta tutto direttamente dal codice sorgente eh? : P Manteniamo il foglio di stile e salì al server insieme ad altri documenti e immagini.

ni espacios en blanco . Ricordate che il nome degli stili, può essere qualsiasi cosa, ma deve essere un punto (.) All'inizio di loro, non hanno caratteri speciali o spazi.

Infine, nella colonna di pannelli che vengono lasciati vediamo riflessa la creiamo stili e nell'ordine che stiamo facendo:

stili

Per modificarle, selezionarne uno e fare clic sull'icona della matita, la finestra in cui è possibile modificare i valori. Automaticamente essere applicata, ad esempio possiamo cambiare i colori di sfondo delle tabelle, celle, la formattazione del testo, colore del testo, ecc ... per salvare gli stili del documento, caricare sul server e di tutte le pagine avranno i nuovi stili ;)

Risposta