[RIPRODUZIONE DI BRANI MUSICALI] 

DOUG LLOYD: Allora diamo un altro il video per parlare di un altro linguaggio. Questa volta parleremo di CSS. Così CSS, che è l'abbreviazione di Cascading Style Sheets, è un altro linguaggio che usiamo nella costruzione di siti web. Pensateci come questo. Se l'HTML è quello che usiamo per organizzare la contenuti vogliamo mettere sulla nostra pagina, CSS è lo strumento che generalmente usiamo per personalizzare i nostri siti web aspetto, e come l'esperienza utente davvero è, interagendo con il nostro sito web. 

Simile a HTML, CSS è non un linguaggio di programmazione. Non ha logica. Non ha variabili. Essa non ha alcun tipo di quella flusso che le cose relative C fa. E 'un linguaggio stile. E la sua sintassi è abbastanza semplice, e basta descrive come gli elementi della nostra pagina hanno certo HTML elementi dovrebbero essere modificati. A tal fine, se non si dispone di ancora visto il nostro video su HTML, o non hanno familiarità con HTML in generale, si potrebbe voler dare un'occhiata a che prima, perché questa discussione CSS sta per dipendere da qualche conoscenza di HTML. 

Quindi, ecco un davvero semplice foglio di stile CSS. Anche se non avete mai programmato con i CSS prima, Sono abbastanza sicuro che si può capire esattamente ciò che questo foglio di stile fa. Che cosa fa? Ebbene, applicato al corpo del nostro web pagina, tutto tra i tag body sul nostro HTML, e imposta la colore di sfondo della pagina di blu. Beh, è ​​molto semplice foglio di stile. In realtà è molto umano lingua amichevole, CSS. Quindi, anche se non hai mai usato prima, probabilmente potrebbe indovinare che cosa che ha fatto. Infatti, se abbiamo caricato una pagina, dove questo foglio di stile è stato incorporato in qualche modo, il colore della nostra pagina di fondo sarebbe essere blu, e non il bianco standard. 

Quindi, come possiamo costruire fogli di stile? Ben prima, dobbiamo identificare un selettore. Nell'ultimo esempio, selettore che era il corpo. Poi abbiamo un open parentesi graffa, e siamo andare per iniziare a definire il foglio di stile per questo selettore. Tra le parentesi graffe, abbiamo basta avere una lista di coppie di valori chiave. La coppia valore precedente era colore di sfondo blu e virgola, ma potremmo fare di più e più di questi. Si potrebbe avere più cose applicazione a quel tag, quel corpo selettore. Ciascuno di essi è separato da una virgola, e noi chiamiamo ognuno di loro una dichiarazione, una dichiarazione CSS. Quando abbiamo finito con tutte le abbiamo styling voler applicare a quel particolare etichetta, non ci resta che una graffa di chiusura preparatevi per terminare il foglio di stile, e abbiamo finito la definizione del foglio di stile per quel particolare selettore. 

Quali sono alcune proprietà comuni CSS? Beh, forse si vuole mettere un bordo intorno a qualcosa. Così si può dire, di confine, che sarebbe la chiave, e poi i valori sarebbero, ciò che lo stile, il colore, e la larghezza si vuole che sia. Quindi lo stile potrebbe essere un solido linea, una linea tratteggiata, una linea tratteggiata, una linea di cresta, che sarebbe linea ondulata. Forse si vuole avere essere blu o nero o verde. Forse si vuole che sia 1 o 2 o 10 pixel di larghezza. È possibile specificare tutte quelle cose. Forse si vuole impostare lo sfondo colore della tua pagina in un modo particolare. Abbiamo già visto che, l'impostazione del sfondo del corpo per essere blu. 

Quindi è possibile utilizzare una parola chiave, così CSS ha determinati colori che sono costruiti in esso, blu, verde, nero, a colori molto semplici che conosciamo. Ma si può anche specificare qualsiasi colore esadecimale che desideri. Ricordiamo che i colori possono essere identificati da un insieme di tre numeri esadecimali da 0 a 255, e rg b, la componente rossa, verde e blu. E così possiamo specificare qualsiasi colore che vogliamo da, invece di utilizzare blu o verde o nero, utilizzando sterlina e poi sei cifre esadecimale, e che ci darebbe il colore sei cifre. Ecco, questo è il colore di sfondo. 

Abbiamo anche il primo piano colore, che è di solito sarà il testo della pagina. E allo stesso modo si potrebbe farlo con la parola chiave e o sei cifre esadecimale. Così si può specificare qualsiasi colore desiderare per il testo della pagina contro una particolare colore di sfondo, in alto. È inoltre possibile modificare e trattare con carattere, e il testo strada è reso sulla pagina. 

Quindi è possibile modificare la dimensione dei caratteri. È possibile utilizzare parole chiave, come in più, extra small, o xx piccole, o media, grande, e così via. È possibile utilizzare punti fissi, 10 punto, punto 12, e così via. È possibile utilizzare le percentuali, 80%, 20%, dove 100% è il carattere predefinito dimensioni, che di solito è andando essere qualcosa come 11 o 12 punti. Oppure si può anche basare fuori della dimensione del font più recente. Se hai appena scritto qualcosa e si sa quello che vuoi è per essere più piccolo, ma non si sa esattamente che misura vi Voglio che sia, beh, si può solo dire, dimensione del carattere più piccolo. E baserà largo della, appena sopra, è la dimensione del carattere. E si può ottenere piccole o più grandi. Quindi c'è un sacco di diverso modi per specificare la dimensione del carattere. 

È inoltre possibile specificare cosa carattere familiare che si desidera. Se si dispone di un particolare nome, c'è un modo in CSS-- non stiamo andando a parlarne qui-- per definire un carattere molto specifico e incorporare nella propria pagina. È inoltre possibile utilizzare nomi generici. C'è un sacco di web font sicuri che sono pre-definiti nei CSS. E se sei un utente di Microsoft Ufficio negli ultimi 20 anni, siete probabilmente familiarità con molti di questi font web sicuri già, Times New Roman, Arial, Courier New, Georgia, Tahoma, Verdana, Eccetera. Questi sono tutti considerati web font sicuri. E in realtà, parte della ragione per cui è venuto per essere doveva essere usato per fare web-- ogni pagina aveva accesso a questo set predefinito dei font con varie terminazioni, e tutto questo roba tipo di carattere che non entreremo in, ma queste sono di solito accessibile nel CSS, anche se non lo fai altrimenti definire i font. Infine, è possibile allineare il testo, invece di essere, per impostazione predefinita, in linea verso sinistra, si potrebbe allinearlo a destra, o si potrebbe allinearlo centrato, o giustificata in modo che entrambi i margini colpito. Così quelli sono tutte le opzioni che è possibile utilizzare di cambiare ciò che il testo sembra, e come è visualizzato sulla tua pagina. 

I vostri selettori non lo fanno devono essere solo i tag. Abbiamo già visto un tag body selettore, e selettore di tag ha un aspetto proprio così. È il nome di un tag, e poi si definire un foglio di stile per il tag. Ma si può anche fare qualcosa chiamato un selettore ID. Un selettore ID sembra piuttosto simile. A meno di notare, che ora non sto usando un tag HTML, sto usando, in questo caso, #unique o hash univoco. Se vi ricordate dal nostro video su HTML, abbiamo parlato su come tag possono avere attributi. 

E un attributo che si applica a praticamente tutti i tag HTML, ma non abbiamo parlato a questo proposito, è qualcosa che si chiama un tag ID. Così questo particolare CSS sarebbe si applicano solo alle tag HTML che ha un ID molto specifico, che hai chiamato. Quindi, se avete qualche parte nel codice, da qualche parte nel file HTML, un tag e si specificare come attributo a quel tag, ID è uguale unico, questo particolare foglio di stile qui si applica solo in mezzo che etichetta con l'ID di unico. 

È anche possibile fare qualcosa chiamato un selettore di classe. Così oltre ad avere ID attributi, è anche possibile aggiungere un attributo di classe per i tag HTML. E quando si utilizza un attributo di classe, può essere applicato a più tag. Quindi, se avete parecchie cose che sono simili, forse si vuole dire, tag aperto bla, bla, bla, bla, di classe uguale studenti. E poi questo particolare foglio di stile si applica per ogni tag cui classe è studenti. In questo caso, avremmo impostato il colore di sfondo giallo, e ci piacerebbe impostare l'opacità, che è una variabile non abbiamo parlato, ma si occupa solo con il grado di trasparenza qualcosa è, al 70%, in questo caso. 

Ci sono due opzioni per scrittura fogli di stile. Si possono scrivere direttamente nel codice HTML mettendo i fogli di stile tra tag di stile. E quei tag di stile vanno all'interno di i tag head della pagina web. Il modo forse più preferito da fare è quello di scrivere un file css separato, e poi collegarlo nel vostro documentare utilizzando i tag di collegamento. Collega variabile, ancora una volta, sono diverso da collegamenti ipertestuali, se vi ricordate da nostro video di HTML. E tag di collegamento sono il modo in cui tirare in file separati. E 'un po' come l'equivalente di la # include per la programmazione web. 

Quindi, diamo uno sguardo a table.HTML. Se vi ricordate dal nostro Video HTML, ho mostrato un esempio di un semplice moltiplicazione tabella che sembrava piuttosto brutto, e forse c'è un modo per rendere meglio con CSS, per farlo apparire effettivamente più una moltiplicazione tavolo, o qualcosa del genere che non è solo bloccato insieme senza divisione reale tra le righe e le colonne. Quindi cerchiamo di testa verso CS50 IDE, e dare un'occhiata il modo in cui i CSS può, una sorta di, modificare quello che abbiamo iniziato con prima, e ne fanno qualcosa di molto meglio. 

Quindi siamo in CS50 IDE ora, e se non familiare, ci fermiamo a questo tabella pagina HTML. Table.HTML fondamentalmente solo definisce i contenuti di un multiple-- doveva essere un tavolo quattro per quattro moltiplicazione. E 'piuttosto semplice. E si potrebbe pensare che sarebbe guardare piuttosto ben organizzato. Ma in realtà, quando prevediamo questa pagina, si vede che è una specie di brutto, giusto? Chiaramente abbiamo righe e colonne qui. C'è una sorta di separazione. Ma non è una separazione significativa. Non stiamo in realtà sempre troppe informazioni qui. E non c'è separazione tra le righe e le colonne in termini delle regole orizzontali o verticali. Potremmo probabilmente fare questo guardare un po 'meglio. Così proviamo. Quindi ho intenzione di chiudere questa scheda qui. E ho intenzione di chiudere la mia table.HTML, e ho un'altra versione qui chiamato table2.HTML. Apriremo che fino. Il corpo della pagina è praticamente lo stesso, ma ho cambiato un po 'in alto. E farò scorrere qui. Si noti che questa volta, io sono utilizzando tag di stile incorporati. Ho aperto un tag di stile, e sono ora la definizione di un foglio di stile CSS appena dentro di esso. Ho un foglio di stile che dice, tavolo. Questo è il mio selettore di tag. Non sto usando punti o hash, che io farei se io era utilizzando un ID o un selettore di classe. Ho un selettore di tag tavolo qui--. Questo stile sta per si applicano a tutti i tag table. A quanto pare voglio mettere uno pixel di larghezza, bordo blu solido, dentro il mio tavolo. Che suona come sarebbe probabilmente aiutare la situazione, giusto? Stiamo per avere le cose sembrano molto meglio. Quindi questo è bene. Stilisticamente, ho appena incorporato il mio foglio di stile qui. E 'certamente un modo accettabile per farlo. Vediamo cosa questo assomiglia. Quindi io tornerò qui, e Io voglio vedere in anteprima il mio table2.HTML. Beh, questo non è proprio quello che volevo, ma è esattamente quello che abbiamo chiesto. Abbiamo detto che questo stile è andando a rivolgersi al nostro tavolo. Il nostro tavolo ha ora un un pixel ampia solido confine, blu intorno ad esso. Non stiamo in realtà sempre le celle della tabella. Siamo appena al tavolo. Così CSS ha funzionato. Esso ha applicato un foglio di stile al nostro tavolo. Ma non riusciva a fare quello che volevamo che facesse. Come si arriva a fare quello che vogliamo fare? 

Bene, diamo un'occhiata a un altro versione di questo in table3.HTML. Quindi Sto solo andando a chiudere queste schede. Ho intenzione di tornare qui per la mia file di albero, e di aprire table3.HTML. Anche in questo caso, sta andando a guardare piuttosto simile qui all'inizio. Ma notate, questa volta, invece di utilizzare un foglio di stile incorporato proprio lì, Ho intenzione di collegare in un foglio di stile utilizzando il tag link. Quindi sono a quanto pare il collegamento in un foglio di stile chiamato tables.CSS, e questo bene è uguale foglio di stile solo means-- bene, che cosa è questo file rispetto a quanto Sono doing-- è un foglio di stile che sono usando per la mia pagina. Quindi, se voglio davvero vedere cosa Che sto facendo con il CSS qui, Ho bisogno di andare aperto che table.CSS il file come bene. Quindi ci torneremo qui di nuovo al nostro albero di file. C'è table.CSS. Ti pop aperto. Ora stiamo vedendo un po 'di CSS. A quanto pare, ho un paio di cose succedendo qui. Mi pare voglio mettere un cinque pixel di larghezza, bordo rosso solido, intorno al mio tavolo. Sappiamo già che quello che sta succedendo andare solo sul perimetro. Abbiamo visto che in table2.HTML. Con ogni fila, io a quanto pare voler specificare che l'altezza della riga è alto 50 pixel. Così, per ogni riga, ricordare questo è ciò che il tag TR fa, Io sto facendo alta 50 pixel. 

Infine, ho questo commento. E questo è il modo in cui facciamo i commenti nei CSS. E 'molto simile a cogliere blocco commenti sintassi della barra stella. Tutto il testo desiderato. Non c'è barra barra se in CSS. Per brevi commenti in linea, abbiamo Per utilizzare questo particolare formato qui. Sembra che sto facendo un molte cose nei miei tag td. Ricordate tag td, o tavolo dati, che in realtà sono solo le colonne all'interno di i nostri file, e apparentemente per ciascun dato nel mio tavolo, voglio per impostare il colore di sfondo essere nero, il colore ad essere bianco, il colore è colore di primo piano. Quindi questo sarà il testo della mia pagina. Voglio grande fonte, 22 punto di carattere, e voglio che sia della famiglia di font, Georgia. Quindi io non ho intenzione di sono disponibili i font di default. Io vado a specificare Georgia, che è uno di quei web font sicuri che abbiamo visto prima. Voglio che il mio testo da allineare centralmente, nel mezzo della scatola, Io non voglio che sia lasciato allineato o allineato a destra. E voglio la mia larghezza della colonna per essere di 50 pixel di larghezza pure. Diamo uno sguardo a ciò che questo sembra, e vedere se questo è forse un miglioramento. Quindi ho intenzione di andare a table3.HTML, che richiamo, comprende table.CSS come un link, e noi Anteprima esso. Questo è molto meglio, giusto? Questo è in realtà cominciando a guardare un molto più simile a una tavola pitagorica. Ho bordo rosso che intorno al mio tavolo, ma ora Ho anche precisato che ogni riga è largo 50 pixel, o è 50 pixel tall-- scusa me-- ogni colonna è larga 50 pixel. I dati in ogni colonna, e solo i dati, ha uno sfondo nero. Ecco perché quelli linee bianche ci sono. Poiché lo spazio tra tutte quelle cellule, non è un confine di per sé, è solo Sto compilando solo in cellule, che effettivamente rende i bordi della tabella, che a quanto pare non esisteva da sempre, è era solo linee bianche sottili. Ora sono visibili. Ora essi pop fuori sullo schermo. E quindi questo è molto semplice foglio di stile che ho applicato, e ora la mia tabella è molto più simile un tavolo quattro per quattro moltiplicazione, invece di un pasticcio solo confuso, dove tutto è chiaramente righe e colonne, ma non super ben organizzato. Siamo davvero solo l'inizio di cosa si può fare con i CSS qui. Fortunatamente la documentazione CSS è abbastanza semplice. Userete molte delle sue attributi, abbastanza di frequente. Quelli di cui abbiamo parlato in precedenza in questo video. Ci sono molti che si probabilmente non userà tutti. E va bene, anche. Ma è sufficiente sapere, che c'è un molta documentazione là fuori. Quindi, anche se non abbiamo fatto coprire tutto, non sei certo lasciato da solo. Ma CSS è davvero divertente a sperimentare. E vorrei caldamente incoraggiarvi di giocare con le tue pagine web, e vedere come si può fare guardare e sentire per migliorare l'utente esperienza di visitare la vostra pagina. Sono Doug Lloyd. Questo è CS50.