[MUZYKI] 

DOUG LLOYD: Więc weźmy jeden więcej wideo mówić o jeszcze jednym języku. Tym razem będziemy rozmawiać o CSS. Więc CSS, co jest skrótem od Kaskadowe arkusze stylów, jest inny język używamy przy konstruowaniu stron internetowych. Pomyśl o tym w ten sposób. Jeżeli HTML jest to, co możemy wykorzystać, aby zorganizować Zawartość chcemy umieścić na naszej stronie, CSS jest narzędzie, które na ogół korzystania dostosować, jak wyglądają nasze strony internetowe, i jak doświadczenie użytkownika naprawdę jest, interakcji z naszej strony internetowej. 

Podobny do HTML, CSS nie język programowania. Nie ma logiki. To nie ma zmiennych. To nie ma żadnego rodzaju, że przepływu związanych z rzeczy, że C ma. Jest to język stylizacji. I jego składnia jest dość proste, i po prostu opisuje w jaki sposób elementy naszego Strona posiada pewną HTML elementy powinny być zmienione. W tym celu, jeśli nie ma jeszcze obserwował nasz film w formacie HTML, lub nie znają HTML ogólnie cię może chcesz przyjrzeć się, że po pierwsze, dlatego ta dyskusja CSS będzie zależeć od niektóre znajomości HTML. 

Więc tutaj jest naprawdę Prosty Arkusz stylów CSS. Nawet jeśli nigdy wcześniej nie zaprogramowany z CSS wcześniej, Jestem prawie pewien, że można dowiedzieć się, dokładnie to, co robi arkusz stylów. Co to robi? Oraz zastosowany do ciała naszego sieci Strona, wszystko między tagami ciała na naszej HTML i ustawia Kolor tła tej strony na niebiesko. Cóż, jest to bardzo prosty arkusz stylów. To rzeczywiście bardzo ludzkie język przyjazny, CSS. Więc nawet jeśli nigdy wcześniej nie używał go wcześniej, prawdopodobnie mógł odgadnąć, co to było. W rzeczywistości, jeśli załadowany stronę, gdzie arkusz stylów został osadzony w jakiś sposób, tło na naszej stronie będzie być niebieskie, a nie średnia białe. 

Jak więc budować arkusze stylów? Cóż po pierwsze, musimy określić selektor. W ostatnim przykładzie, że selektor było ciało. Następnie mamy otwarte nawias klamrowy, i jesteśmy zamierza rozpocząć definiowaniu arkusz stylów dla tego wyboru. W między nawiasy, że Wystarczy listę par wartości kluczowych. Para poprzednia wartość była Kolor błękitny średnik, ale możemy zrobić więcej i więcej z nich. Można mieć wiele rzeczy stosowania do tego tagu, organ wyboru. Każdy z nich jest oddzielony średnik i nazywamy każdy z nich deklaracji, deklaracji CSS. Kiedy skończymy z całą my stylizacji Aby zastosować się do danej zmiennej, po prostu mają zamknięcia kręcone klamra do końca arkusza stylów, i gotowe definiowania stylów dla danego przełącznika. 

Jakie są pewne wspólne właściwości CSS? No, może chcesz umieścić obramowanie wokół czegoś. Więc można powiedzieć, granica, że będzie kluczem, a następnie byłyby Twoje wartości, jaki styl, kolor i szerokość chcesz go mieć. Więc styl może być stały linia przerywana linia, linia przerywana, linia grzbietu, która byłaby linia falista. Może chcesz go mieć być niebieski lub czarny lub zielony. Być może ma to być 1 lub 2 lub 10 pikseli szerokości. Możesz określić wszystkie z tych rzeczy. Może chcesz ustawić tło Kolor strony w sposób szczególny. Widzieliśmy już, że ustawienie tła ciała być niebieskie. 

Następnie można użyć słów kluczowych, tak CSS ma pewne kolory które są wbudowane w niego, niebieski, zielony, czarny, bardzo proste kolory, które znamy. Ale można też podać dowolny szesnastkowy koloru, który chcesz. Przypomnijmy, że można zidentyfikować kolory przez zestaw trzech liczb sześciokątnych od 0 do 255, RG i B, czerwony, zielony i niebieski komponent. I tak możemy określić dowolny kolor chcemy przez, zamiast używać niebieski lub zielony lub czarny, przy użyciu funta, a następnie sześć cyfr hex, i że da nam kolor sześciu cyfr. Więc to jest kolor tła. 

Mamy też nową wiedzę Kolor, który jest zwykle będzie tekst swojej stronie. I można podobnie zrobić ze słowem kluczowym i czy sześć cyfr hex. Tak można określić dowolny kolor chcą w treści strony przeciwko konkretnemu kolor tła, nawet powyżej. Można również zmienić i radzić sobie czcionką, a sposób tekstu jest wyświetlana na stronie. 

Więc można zmienić rozmiar czcionki. Można użyć słów kluczowych, takich jak dodatkowe, dodatkowa mała, lub xx małe lub średnie, duże, i tak dalej. Możesz użyć stałe punkty, 10 pkt, 12 pkt, i tak dalej. Możesz użyć procentów, 80%, 20%, gdzie 100% jest domyślna czcionka Wielkość, co zazwyczaj będzie coś jak 11 lub 12 punktów. Lub można nawet oprzeć się najnowszego rozmiaru czcionki. Jeśli po prostu napisał coś i wiesz, to, co chcesz, aby była ona mniejsza, ale nie wiem dokładnie jaki rozmiar ma to być, no, może tylko powiedzieć, rozmiar czcionki mniejsze. I będzie opierać się z, po prostu się wyżej, jest to wielkość czcionki. I można dostać mniejszy lub większy. Więc nie wiele różni się sposoby, aby określić rozmiar czcionki. 

Można również określić, co czcionki rodzina chcesz. Jeśli masz szczególności nazwa, jest to sposób, w CSS-- nie będziemy o tym mówić here-- zdefiniować bardzo konkretnej czcionki i umieścić go na swojej stronie. Można również użyć nazwy rodzajowe. Istnieje wiele bezpiecznych czcionek internetowych które są wstępnie zdefiniowane w CSS. A jeśli jesteś użytkownikiem od firmy Microsoft Biuro w ciągu ostatnich 20 lat, jesteś prawdopodobnie zna wiele z tych bezpiecznych czcionek internetowych już, Times New Roman, Arial, Courier New, Gruzję, Tahoma, Verdana, i tak dalej. Tych wszystkich, są uważane za bezpieczne internetowej czcionek. I rzeczywiście, część Powodem znaleźli się miał być używany do web-- każdą stronę miał dostęp do tej domyślnie ustawiony czcionek z różnymi szeryfów i to wszystko czcionki rzeczy nie dostaniemy się, ale zwykle są one dostępne w CSS, nawet jeśli tego nie zrobisz inaczej zdefiniować czcionki. Wreszcie, można wyrównać tekst, Zamiast tego jest domyślnie ustawione w lewo, można dopasuj go w prawo, lub można dostosować go na środku, lub uzasadnione, tak aby trafić zarówno marże. To są wszystkie opcje można wykorzystać aby zmienić to, co tekst wygląda, i jak jest wyświetlana na stronie. 

Twoje selektorów nie być tylko tagi. Wcześniej widział tag ciała Przełącznik i selektor tag wygląda właśnie tak. To nazwę znacznika, a następnie definiowania stylów dla tego tagu. Ale można też zrobić coś nazywany selektor identyfikatora. Selektor ID wygląda dość podobnie. Ale zauważ, że teraz nie używam znacznik HTML, używam, w tym przypadku, #unique lub hash wyjątkowy. Jeśli pamiętacie z naszym wideo w formacie HTML, rozmawialiśmy o tym, jak znaczniki mogą mieć atrybuty. 

I jeden atrybut, który dotyczy prawie wszystkie znaczników HTML, ale nie o tym mówić, jest coś, co nazywa znacznik ID. Więc to zwłaszcza CSS będzie stosuje się tylko do tagu HTML, który ma bardzo specyficzny ID, które zostały nazwane. Więc jeśli masz gdzieś w kodzie, gdzieś w pliku HTML, tag i Ciebie określić jako atrybut tego znacznika, ID równa wyjątkowy, to szczególności arkusz stylów tutaj będą miały zastosowanie tylko w między że tag identyfikator unikalny. 

Możesz też zrobić coś nazywa selektor klasy. Tak więc oprócz posiadania ID atrybutów, można również dodać atrybut klasy znaczników HTML. A kiedy użyć atrybutu class, można stosować wiele znaczników. Więc jeśli masz kilka rzeczy, które są podobne, może chcesz powiedzieć, otwarte tag bla, bla, bla, bla, klasa równa studentów. A potem ten szczególny arkusz stylów ma zastosowania do każdej zmiennej, której klasa jest studentów. W tym przypadku chcemy ustawić kolor tła na żółty, i chcemy ustawić krycie, które to znacznik nie mówić, ale po prostu zajmuje się, jak przezroczyste coś jest do 70%, w tym przypadku. 

Są dwa warianty pisanie arkusze stylów. Można je pisać bezpośrednio w kodzie HTML poprzez umieszczenie arkuszy stylów pomiędzy znacznikami stylu. A te tagi stylu przejść wewnątrz tagi czele swojej stronie internetowej. Może bardziej preferowany sposób to zrobić to napisać osobny plik .css, a następnie połączyć go do udokumentować za pomocą znaczników łącza. Tagi linków, znowu, są różni się od hiperłączy, Jeśli pamiętacie z naszego wideo HTML. Link i tagi są jak ciągnąć w oddzielnych plikach. To coś w rodzaju odpowiednika #include do programowania stron internetowych. 

Warto więc przyjrzeć się table.HTML. Jeśli pamiętacie z naszym Wideo HTML, pokazałem Przykładem bardzo proste mnożenie stół, który wyglądał dość brzydkie, a może nie ma sposób, aby lepiej CSS, aby rzeczywiście wyglądają bardziej jak mnożenie Stół, czy coś że nie tylko sklejone bez faktycznego podziału pomiędzy rzędami i kolumnami. Warto więc udać się do CS50 IDE, i spojrzeć w jaki sposób CSS może, w pewnym sensie, dostosować to, co zaczęło się wcześniej, i sprawiają, że coś o wiele lepiej. 

Więc jesteśmy w CS50 IDE teraz, a jeśli nie znają, my otwieramy w tym Stół, że strona HTML. Table.HTML zasadzie po prostu określa zawartość tematyce multiple-- miało to być cztery przez cztery tabliczka mnożenia. To całkiem proste. I nie myślimy, że będzie wyglądają bardzo dobrze zorganizowane. Ale w rzeczywistości, kiedy przeglądać tę stronę, widzimy, że jest to rodzaj brzydki, prawda? Oczywiście mamy tu rzędy i kolumny. Istnieje jakiś separacji. Ale to nie jest sensowne oddzielenie. Nie jesteśmy rzeczywiście coraz zbyt wiele informacji tutaj. I nie ma rozdziału między wiersze i kolumny w kategoriach zasad poziomych lub pionowych. Możemy chyba zrobić to wygląda trochę lepiej. Więc spróbujmy. Więc mam zamiar zamknąć tę kartę tutaj. I mam zamiar zamknąć mój table.HTML, a ja mam inną wersję tutaj nazywa table2.HTML. Będziemy otwarcie, że się. Ciało stronie Właściwie to samo, ale ja się zmienił nieco w górę. A ja przewijać się tutaj. Zauważ, że tym razem, jestem przy użyciu wbudowanych tagów stylu. Mam otwarte tag styl, a ja jestem teraz definiowania stylów CSS tylko wewnątrz niego. Mam arkusz stylów, który mówi, stolik. To mój selektor znacznik. Nie używam kropki lub mieszania, co chciałbym robić, gdybym był przy użyciu identyfikatora lub selektora klasy. Mam wyboru tag here-- tabeli. Ten styl będzie stosuje się do każdego tagu tabeli. Najwyraźniej chcę umieścić jeden piksel, stałe niebieskie obramowanie, w moim stole. Brzmi to prawdopodobnie pomóc w sytuacji, prawda? My będziemy mieć wszystko wygląda o wiele lepiej. Tak to jest w porządku. Stylistycznie, właśnie osadzone mojego arkusza stylów tutaj. To z pewnością dopuszczalny sposób to zrobić. Zobaczmy, jak to wygląda. Więc wrócę tu, i Będę się podejrzeć mój table2.HTML. Dobrze, że nie jest całkiem to, co chciałem, ale to jest dokładnie to, o co prosiliśmy. Powiedzieliśmy, że ten styl jest zamiar zastosować do naszego stolika. Nasz stół ma teraz jeden piksel szeroki, solidny niebieskie obramowanie wokół niego. Nie jesteśmy rzeczywiście coraz w komórkach tabeli. My tylko się przy stole. Więc CSS pracował. To zastosowała arkusz stylów do naszego stolika. Ale nie dość zrobić co chcieliśmy to zrobić. Jak mamy to zrobić co chcemy to zrobić? 

Cóż, rzućmy okiem na jeden więcej wersja to w table3.HTML. Więc jestem po prostu się zamknąć te karty. Mam zamiar wrócić tu do mojego złożyć drzewo i otworzyć table3.HTML. Ponownie, to będzie ładnie wyglądać Podobny tu na początku. Ale uwaga, tym razem, zamiast korzystania arkusz stylów osadzone bezpośrednio w tam, Zamierzam link w arkusz stylów za pomocą znacznika łącza. Więc jestem podobno łącząc w sposób arkusz stylów nazywa tables.CSS, i to również jest równa arkusz stylów tylko means-- dobrze, co to jest plik w stosunku do tego, co Jestem doing-- jest arkusz stylów, że jestem stosując na mojej stronie. Więc jeśli naprawdę chcę zobaczyć, co Robię z CSS tutaj, Muszę iść otwarta, że table.CSS złożyć również. Więc wrócimy tutaj ponownie do naszego drzewa plików. Jest table.CSS. Będziemy je otwierają. Teraz widzimy trochę CSS. Widocznie mam kilka rzeczy się tu dzieje. I najwyraźniej chce postawić pięć piksel, stałe czerwone obramowanie, wokół mojego stolika. Wiemy już, że to się dzieje po prostu pójść na obwodzie. Widzieliśmy, że w table2.HTML. Z każdym rzędzie, ja najwyraźniej chce, aby określić że wysokość wiersza jest 50 pikseli wysokości. Tak więc dla każdego wiersza, należy pamiętać, że to, co robi znacznika tr, Robię to 50 pikseli wysokości. 

Wreszcie, mam ten komentarz. I w ten sposób mamy uwag na CSS. Jest bardzo podobny do przejęcia bloku komentarze składnia gwiazdowe ukośnik. Cały tekst chcesz. Nie ma ukośnik ukośnik choć w CSS. W przypadku krótkich inline komentarze, mamy użyć tutaj tego konkretnego formatu. Wygląda na to robię Wiele rzeczy w moim td tagów. Pamiętaj td tagów lub stole Dane, które tak naprawdę są po prostu kolumny wewnątrz nasze wiersze i najwyraźniej Dla każdego elementu danych w moim stole, chcę aby ustawić kolor tła być czarny kolor będzie biały, kolor to kolor pierwszego planu. Więc to będzie tekst mojej stronie. Chcę duże czcionki, 22 wskazują czcionkę, i chcę, że jest z rodziny fontów, Georgia. Więc nie będę się mają domyślną czcionkę. Zamierzam podać Gruzję, która jest jednym z tych bezpiecznych czcionek internetowych które widzieliśmy wcześniej. Chcę, aby mój tekst ma być wyrównany centralnie, w środku pudełka, Nie chcę go zostawić wyrównane lub w prawo wyrównane. A ja chcę moje szerokość kolumny być 50 pikseli szerokości, jak również. Rzućmy okiem na jak to wygląda, i sprawdzić, czy jest to może poprawa. Więc mam zamiar iść do table3.HTML, które Przypomnijmy, obejmuje table.CSS jako link, a my go obejrzeć. To dużo lepiej, prawda? To jest rzeczywiście zaczynają wyglądać Dużo bardziej jak tabliczka mnożenia. Mam tę czerwoną ramkę wokół mojej tabeli, ale teraz Ja też określić, że każdy wiersz jest 50 pikseli szerokości, lub jest to 50 pikseli tall-- usprawiedliwienia me-- każda kolumna ma 50 pikseli szerokości. Dane w każdej kolumnie, a dopiero dane, ma czarne tło. To dlatego ci, białe linie są tam. Ponieważ przestrzeń pomiędzy wszystkimi tymi komórkami nie jest to granica w sama w sobie, to tylko Jestem wypełnienie tylko w komórki, które właściwie sprawia, że ​​granice tabeli, które najwyraźniej nie istniał cały czas, to tylko cienkie białe linie. Teraz są widoczne. Teraz pojawiają się na ekranie. A więc jest to bardzo proste arkusz stylów, że już stosowane, a teraz moja tabela wygląda dużo bardziej stół cztery czterech mnożenie, zamiast po prostu pomieszane bałagan, gdzie wszystko jest wyraźnie wiersze i kolumny, ale nie bardzo dobrze zorganizowane. Jesteśmy naprawdę tylko zarysowania powierzchni z tego, co można zrobić z CSS tutaj. Na szczęście dokumentacja CSS jest bardzo proste. Będziesz korzystać z kilku z jego atrybuty, dość często. Te, z którymi rozmawialiśmy na temat wcześniej w tym filmie. Istnieje kilka, które Ciebie prawdopodobnie nie będzie korzystać ze wszystkich. I to jest w porządku, zbyt. Ale po prostu wiem, że istnieje Wiele dokumentacji tam. Więc nawet jeśli nie obejmuje wszystko, Z pewnością nie jesteś w lewo na własną rękę. Ale CSS jest naprawdę zabawne eksperymentować z. I chciałbym gorąco zachęcamy się bawić z stron internetowych, i zobacz, jak możesz je wygląd i poprawić użytkownika doświadczenie odwiedzając stronę. Jestem Doug Lloyd. To CS50.