[Powered by Google Translate] [CSS] [Joseph Ong - Harvard University] [Questa è CS50. - CS50.TV] 

Oggi parleremo di CSS o Cascading Style Sheets. 

Così che cosa esattamente sono i CSS? Bene, rompiamo il termine CSS giù in 2 parti: Cascading Style Sheets e. Cascading è un po 'più complessa, ed è qualcosa che vedremo in un altro video. Ma per cominciare, Fogli di stile molto molto accenni a quello che i CSS fa. Si aggiunge stili per il codice HTML di una pagina web, cambiando come la pagina web appare esteticamente. Questo significa che tutto dal carattere del testo per il posizionamento del contenuto della pagina ad altre cose interessanti come fare gli angoli di una scatola rotonda o l'aggiunta di ombre al testo. Si può anche fare cose folli come fanno le cose animate sullo schermo. 

Quindi, come possiamo usare i CSS con HTML? Prendete questo sito povero di aspetto che ho appena scritto. Se Rob dovesse guardare a questo sito in questo momento, probabilmente avrebbe detto qualcosa di simile, "Wow! Mia introduzione sembra terribile. Joseph, sei un designer terribile." "Usare il carattere predefinito tempi? Helvetica è molto meglio." 

Così che cosa potrebbe essere il modo più semplice per applicare lo stile Rob vuole? Il modo più ovvio molte persone inizialmente scritto CSS è stato quello di mettere ciò che chiamiamo dichiarazioni di stile giusto in dell'elemento stesso utilizzando l'attributo di stile HTML. Una dichiarazione di stile consiste semplicemente proprietà CSS dell'elemento HTML che vuole cambiare seguito da due punti seguito dal nuovo valore della proprietà e un punto e virgola alla fine. Per esempio, diciamo che Rob vuole un bordo nero intorno alla sua introduzione. In primo luogo abbiamo messo l'attributo di stile div di Rob qui poi all'interno di doppie virgolette mettere una dichiarazione CSS: "Border: 1px solid nero;" Il 1 pixel si riferisce alla larghezza del bordo, il solido si riferisce allo stile del bordo, e il colore alla fine determina il colore del bordo è. 

Se vogliamo più stili su un elemento, scrivere queste dichiarazioni in sequenza. Per esempio, se Rob vuole che il suo testo dell'intestazione in Helvetica con uno sfondo blu e più spazio attorno al testo, si può fare questo: style = "font-family: Helvetica; background-color: blue; padding: 5px;" L'ultimo punto e virgola in realtà è facoltativo, ma la gente di solito tenerlo dentro per ragioni di coerenza. 

Salveremo spiegare alcune delle proprietà CSS più fresche e più complesse per un altro video. Se avete qualcosa in mente, basta usare Google l'effetto desiderato seguito da CSS probabilmente vi darà buoni risultati. La cosa interessante è che i CSS è piuttosto ampio, quindi le probabilità sono se c'è qualcosa che vuoi fare - a ragione - CSS probabilmente può farlo. Noi chiamiamo questo tipo di styling styling inline. Lo stile elemento è, beh, in linea con il tag iniziale. 

Per la gente che piace molto ad essere organizzato, si potrebbe iniziare a ricevere un po 'irritata a come disordinato tutto questo sembra. Immaginate di avere a che fare questo per ogni elemento della pagina, più ora il tuo codice HTML e CSS sono tutti mescolati e ingombra. Gross, giusto? Per risolvere questo problema, la gente finalmente ha iniziato prendendo piede a separare il loro markup HTML dal loro stile CSS utilizzando qualcosa chiamato selettori CSS. Selettori CSS sono utilizzati per scegliere gli elementi a cui si applicano le dichiarazioni. Un selettore combinato con un elenco di dichiarazioni CSS viene spesso definito come una regola CSS. Queste regole dovrebbero essere messi tra i tag di stile HTML di apertura e chiusura, spesso nella testa del documento. 

E 'molto più facile da vedere con un esempio, Quindi partiamo con la creazione di una semplice regola CSS. In primo luogo, cerchiamo di mettere i tag style nella sezione head del nostro HTML. Successivamente, il selettore. Cominceremo utilizzando uno dei selettori semplici, il simbolo cancelletto, che seleziona un elemento HTML con il suo attributo ID. In questo caso ci selezionare il div che rappresenta l'introduzione di Rob digitando il simbolo cancelletto seguito dal ID del div, rob. Ora le dichiarazioni. Aggiungiamo parentesi graffe di apertura e chiusura e spostiamo le nostre dichiarazioni in linea anteriori sui div di Rob all'interno di queste parentesi, di aggiornamento, e, fresco, intro di Rob ha ancora un bordo nero intorno ad esso meno la linea bruttezza disordinato. 

Ora, che cosa se volessimo selezionare l'h1 all'interno della intro di Rob? Si potrebbe pensare, "Mettiamo un ID su di esso e poi spostare i nostri precedenti modelli." Che funziona, ma i CSS ha altri modi di farvi selezionare elementi utilizzando ciò che noi chiamiamo combinatori per mescolare selettori semplici. Per esempio, uno spazio bianco può essere utilizzato come un combinatore per specificare tutte le istanze di 1 selettore che vivono all'interno di un altro selettore. Che suona molto più complicato di quanto non sia in realtà. Ecco un esempio. Noi digitare # rapinare, aggiungere uno spazio, e seguirlo con un h1, un'altra selettore semplice chiamato un selettore di tag che seleziona tipi di elementi come div o paragrafi. Lo spazio unisce i nostri due selettori semplici, l'applicazione di tutte le dichiarazioni CSS e le parentesi graffe per i tag h1 che vivono all'interno dell'elemento con id = "rob". Proprio per convincervi che funziona, cambierò il colore del carattere di bianco, di aggiornamento, ed ecco, colpo di testa di Rob è ora bianco. 

Tutto questo lavoro va a dimostrare che utilizzando le regole invece di stili in linea possiamo ottenere il codice molto più pulito. Infatti, se questo blocco di stile comincia ottenendo un po 'grande, Posso anche tirare fuori questi stili in un file diverso. 

Per includere questo nuovo file come CSS in questo documento mi limiterò a usare link tag di HTML. Qui ti sto dicendo è che sto collegando in un foglio di stile esterno, l'attributo rel, e specificando il percorso del file con il mio attributo href. Ora il mio markup HTML e CSS sono organizzati bene in file completamente separati, che è quasi sempre il modo in cui i progettisti preferiscono lavorare con HTML e CSS. 

Nel caso vi stiate chiedendo, i selettori semplici comprendono selettori ID e selettori di tag, come quelli che abbiamo appena visto nonché selettori di classe per la selezione di elementi con una certa classe, selettori di attributo per la selezione di elementi da altri attributi come type = "radio" per gli ingressi per pulsanti di selezione, e pseudoselectors come librarsi e concentrarsi per specificare lo stile quando interazioni gradicono mouse sopra un elemento verificarsi. 

I combinatori comuni includono spazi per tutti i bambini e le virgole per distinguere selettori. Altri che si possono incontrare sono la freccia solo per i figli diretti, la tilde per tutti i fratelli e sorelle che si verificano dopo l'elemento, e il segno più per il 1 fratello che viene subito dopo l'elemento. 

Combinando questi selettori e combinatori, è possibile ampliare la gamma di styling che potete ottenere su una determinata pagina web e scrivere i CSS in modo più efficiente. Con solo un paio di righe di CSS mi vedete Scrivi qui, Posso fare rapidamente qualcosa come questo sguardo come qualcosa di simile a questo. 

Io sono Giuseppe, e questo è CS50. 

[CS50.TV] 

Uh, da dove comincio? Lascia fare a me che senza - [ride] Ok. Aggiungere un - Vorrei cambiare questa formulazione. Ooh. Mi dispiace.