[Powered by Google Translate] [CSS] [Józef Ong - Harvard University] [To jest CS50. - CS50.TV] 

Dzisiaj będziemy rozmawiać o CSS i kaskadowych arkuszy stylów. 

Więc co dokładnie jest CSS? Cóż, złamać słowo CSS w dół do 2 części: Kaskadowe arkusze stylów i. Kaskadowy jest trochę bardziej skomplikowane, a to jest coś, zajmiemy się w innym filmie. Ale na początek, arkusze stylów bardzo dużo podpowiedzi w CSS, co robi. Dodaje, style w kodzie HTML strony internetowej, zmienia sposób strona estetycznie wygląda. Oznacza to, że wszystko z czcionką tekstu do pozycjonowania treści na stronie do innych fajnych rzeczy, jak co narożniki zaokrąglone polu lub dodawania cieni do tekstu. Można nawet robić szalone rzeczy, jak by wszystko ożywić na ekranie. 

Więc jak używać CSS z HTML? Weź ten biedny wyglądającą witrynę właśnie napisał. Jeśli Rob mieli patrzeć na tej stronie już teraz, że on chyba powiedzieć coś w stylu: "Wow! Wstępie wygląda okropnie. Joseph, jesteś okropna designer". "Korzystanie z czcionki Times domyślną? Helvetica jest o wiele lepiej." 

Więc co może być najprostszym sposobem, aby zastosować styl Rob chce? Najbardziej oczywistym sposobem wiele osób początkowo napisał CSS było umieścić co nazywamy deklaracje stylu w samym samego elementu pomocą atrybutu stylu HTML. Deklaracja stylu polega tylko elementu html właściwości CSS chcemy zmienić dwukropkiem następnie nową wartość właściwości i średnika na końcu. Na przykład, powiedzmy, że Rob chce czarne obramowanie wokół jego wprowadzenia. Najpierw umieścić atrybut stylu na div Roba tutaj następnie wewnątrz cudzysłowów umieścić deklarację CSS: "Border: 1px solid black;" 1 piksela odnosi się do szerokości granicy, stały odnosi się do stylu granicy, i kolor na końcu decyduje jakie granicy jego kolor. 

Jeśli chcemy, wiele stylów na element, pisać te deklaracje w sekwencji. Na przykład, jeśli chce, aby jego tekst Rob nagłówka w Helvetica na niebieskim tle więcej miejsca wokół tekstu, możemy to zrobić: style = "font-family: Helvetica, background-color: blue; padding: 5px;" Ostatni średnik nie jest tak naprawdę, ale ludzie zazwyczaj utrzymać go w w imię spójności. 

Uratujemy wyjaśniając niektóre chłodniejsze i bardziej złożone właściwości CSS dla innego filmu. Jeśli masz coś w głowie, po prostu Googling żądany efekt następnie CSS prawdopodobnie daje dość dobre rezultaty. Fajne jest to, że CSS jest dość szeroka, więc szanse są, jeśli jest coś chcesz robić - w granicach rozsądku - CSS można prawdopodobnie zrobić. Nazywamy ten rodzaj stylizacji inline stylizacji. Styl elementem jest dobrze, w zgodzie z etykietą start. 

Dla ludzi, którzy naprawdę chcą być zorganizowane, możesz zacząć się trochę peeved, jak to wszystko wygląda niechlujnie. Wyobraź sobie, że masz to zrobić dla każdego elementu na stronie, , a teraz twój HTML i CSS są przemieszane i zagracone. Gross, prawda? Aby to naprawić, ludzie w końcu zaczęli łowienie na oddzielenie ich znaczników HTML od ich stylu CSS za pomocą czegoś, co nazywa selektory CSS. Selektory CSS służą do wyboru elementów, do których deklaracje są stosowane. Selektor połączeniu z listy deklaracji CSS jest często określane jako reguły CSS. Zasady te mają być umieszczone między otwartymi i blisko tagów HTML stylów, często w nagłówku dokumentu. 

Jest o wiele łatwiej zobaczyć na przykładzie, więc zacznijmy od stworzenia prostej reguły CSS. Najpierw postawmy znaczniki stylów w sekcji head naszego HTML. Dalej, selektor. Zaczniemy za pomocą jednego z najprostszych selektorów, hash symbol, które wybiera element HTML przez jego atrybut ID. W tym przypadku będziemy wybierać div reprezentującą wprowadzenie Roba wpisując symbol krzyżyka następnie div identyfikatora, Rob. Teraz deklaracje. Dodajmy, otwieranie i zamykanie szelki i przestawić nasze wcześniejsze deklaracje dotyczące wbudowanych div Roba wewnątrz tych szelkach, odświeżanie a, cool, Roba Intro nadal ma czarne obramowanie wokół niego minus bałaganiarski brzydotę inline. 

Teraz, co jeśli chcemy wybrać wnętrze H1 intra Roba? Można by pomyśleć, "Postawmy identyfikator na nim, a następnie przenieść nasze wcześniejsze style". To działa, ale CSS ma inne sposoby pozwalając wybrać elementy za pomocą tego, co nazywamy combinators mieszać prostych selektorów. Na przykład, może być biały znak jako Combinator określić wszystkie instancje 1 selektor, które żyją wewnątrz innego selektora. To brzmi dużo bardziej skomplikowana, niż jest w rzeczywistości. Oto przykład. Będziemy wpisz # rob, spację, a następnie ją z h1, kolejny prosty selektor zwany selektor znacznika, który wybiera typy elementów jak DIV akapitów. Przestrzeń łączy nasze 2 selektorów prostych, stosując wszystkie deklaracje CSS i nawiasy klamrowe do znaczników h1, które żyją wewnątrz elementu o id = "rob". Wystarczy, aby przekonać się, że to działa, ja zmienić kolor czcionki na biały, odświeżanie i oto, header Roba jest teraz biały. 

Wszystkie z tej pracy pokazuje, że przy użyciu reguł, a nie style wbudowane możemy uzyskać znacznie czystsze kod. W rzeczywistości, w tym przypadku zaczyna się blok stylu nieco duża, Mogę nawet wyciągnąć te style się w innym pliku w ogóle. 

Aby dołączyć ten nowy plik jako CSS w tym dokumencie będzie po prostu użyć tagu HTML znajduje się link. Tutaj mówię to że jestem łącząc w zewnętrznym arkuszu stylów, atrybut rel, i określając ścieżkę do pliku z mojego atrybutu href. Teraz moje znaczniki HTML i CSS są organizowane ładnie w plikach zupełnie odrębnych, która prawie zawsze jest sposób projektanci preferują pracę z HTML i CSS. 

W przypadku, gdy zastanawiasz się, proste selektory zawierają selektory ID i selektory tag jak te właśnie widziałem jak również selektory klasowe wyboru elementów z danej klasy, Selektory atrybutów wyboru elementów przez inne atrybuty takie jak type = "radio" dla wejść przycisk opcji, a pseudoselectors jak unoszą się i skoncentrować do określenia styl kiedy interakcje lubię mousing nad elementem wystąpienia. 

Wspólne combinators zawierać odstępy dla wszystkich dzieci i przecinki odróżnić selektorów. Inni mogą napotkać m.in. strzałkę dla bezpośrednich dzieci tylko, tylda dla rodzeństwa, które występują po elemencie, i znak plus na 1 rodzeństwo, które pochodzi bezpośrednio po elemencie. 

Łącząc te selektory i combinators, można rozszerzyć zakres stylizacji można osiągnąć na danej stronie internetowej, CSS i napisać bardziej efektywnie. Z zaledwie kilku linii CSS widzisz mnie wpisywać tutaj, Można szybko zrobić coś jak to wygląda na coś takiego. 

Jestem Józef, a to CS50. 

[CS50.TV] 

Uh, nie wiem od czego zacząć? Pozwól mi to zrobić bez - [śmiech] Okay. Dodaj - Pozwól mi zmienić to sformułowanie. Ooh. Przepraszam.