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

Oggi saremo a parlare 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. Cascata è un po 'più complesso, ed è qualcosa che tratteremo in un altro video. Ma per cominciare, i fogli di stile accenno molto a quello che i CSS fa. Si aggiunge stili per il codice HTML di una pagina web, modificare l'aspetto della pagina web appare esteticamente. Questo significa che tutto ciò che dal tipo di carattere del testo per il posizionamento del contenuto della pagina ad altre cose interessanti come fare gli angoli di una casella arrotondata o l'aggiunta di ombre al testo. Si può anche fare cose folli come fare le cose animate sullo schermo. 

Quindi, come possiamo usare i CSS con HTML? Prendete questo povero dall'aspetto sito che ho appena scritto. Se Rob fosse di guardare a questo sito in questo momento, avrebbe probabilmente detto qualcosa di simile, "Wow! Mia introduzione aspetto terribile. Giuseppe, tu sei un designer terribile." "Utilizzo del tipo di carattere predefinito Times? Helvetica è molto meglio." 

Quindi, quello che potrebbe essere il modo più semplice per applicare lo stile Rob vuole? I lotti modo più evidenti di persone inizialmente scritto CSS era di mettere ciò che noi chiamiamo dichiarazioni di stile in pieno l'elemento stesso utilizzando l'attributo HTML style. Una dichiarazione di stile consiste semplicemente proprietà CSS dell'elemento HTML vogliamo 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. Per prima cosa inserire l'attributo di stile div Rob qui poi dentro 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. Ad esempio, se Rob vuole il suo colpo di testa testo 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 sono opzionali, ma la gente di solito tenerlo dentro per ragioni di coerenza. 

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

Per la gente che piace molto a essere organizzati, si potrebbe iniziare a ricevere un po 'irritato il modo in cui tutto questo sembra disordinato. Immaginate se si aveva a che fare questo per ogni elemento della pagina, più ora il tuo codice HTML e CSS sono tutti mescolati e ingombro. Gross, giusto? Per risolvere questo problema, la gente alla fine ha iniziato prendendo piede a separare il loro codice HTML dal loro stile CSS utilizzando qualcosa chiamato selettori CSS. Selettori CSS vengono utilizzati per scegliere gli elementi a cui si applicano le dichiarazioni. Un selettore combinato con una lista di dichiarazioni CSS viene spesso indicato come una regola CSS. Queste regole sarebbe stato messo tra i tag di apertura e chiusura in stile HTML, spesso nella testa del documento. 

E 'molto più facile vedere con un esempio, quindi cerchiamo di iniziare con la creazione di una semplice regola CSS. Per prima cosa, mettere tag style nella sezione head del nostro HTML. Successivamente, il selettore. Cominceremo utilizzando uno dei più semplici selettori, il cancelletto, che seleziona un elemento HTML con il suo attributo ID. In questo caso selezioneremo il div che rappresenta l'introduzione di Rob digitando il cancelletto seguito da ID del div, rob. Ora le dichiarazioni. Aggiungiamo parentesi graffe di apertura e chiusura e spostare le nostre precedenti dichiarazioni in linea sul div Rob all'interno di queste parentesi graffe, rinfrescare, e, fresco, di Rob intro ha ancora un bordo nero intorno ad esso meno la bruttezza in linea disordinato. 

Ora, se volessimo per selezionare l'interno h1 di intro di Rob? Si potrebbe pensare, "Mettiamo un ID su di esso e quindi spostare i nostri stili precedenti." Che funziona, ma CSS ha altri modi di che ti permette di selezionare gli elementi utilizzando ciò che noi chiamiamo combinatori di mescolare selettori semplici. Ad esempio, uno spazio vuoto può essere usato come un combinatore per specificare tutte le istanze di 1 selettore che vivono all'interno di un altro selettore. Sembra molto più complicato di quanto non sia in realtà. Ecco un esempio. Noi digitare # rubare, aggiungere uno spazio, e seguirlo con un h1, un altro selettore semplice chiamato selettore di tag che consente di selezionare i tipi di elementi come div o paragrafi. Lo spazio unisce le nostre 2 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". Solo per convincervi che funziona, cambierò il colore del carattere bianco, rinfrescare, ed ecco, colpo di testa di Rob è ora bianco. 

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

Per includere questo nuovo file CSS, come in questo documento mi limiterò a utilizzare link tag HTML. Qui 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 codice 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 di ID e selettori di tag, come quelle che abbiamo appena visto così come 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 pulsanti di opzione, e pseudoselectors come hover e mettere a fuoco per specificare lo stile, quando le interazioni piace passaggio del mouse su un elemento si verificano. 

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

Combinando questi selettori e combinatori, è possibile ampliare la gamma di stile che potete ottenere su una determinata pagina web CSS e scrivere in modo più efficiente. Con solo un paio di righe di CSS che vedi me Scrivi qui, Posso rapidamente fare qualcosa come questo aspetto come una cosa del genere. 

Io sono Giuseppe, e questo è CS50. 

[CS50.TV] 

Uh, da dove si comincia? Lascia fare a me che senza - [ride] Ok. Aggiungere un - Fammi cambiare questa formulazione. Ooh. Scusi.