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

Dziś będziemy rozmawiać o CSS lub Cascading Style Sheets. 

Więc co dokładnie jest CSS? Cóż, złamać pojęcia CSS dół na 2 części: I arkuszy stylów kaskadowych. Kaskadowe jest trochę bardziej skomplikowana, a to jest coś, zajmiemy się w innym filmie. Ale na początek, arkusze stylów bardzo wiele wskazuje na to, co CSS robi. Dodaje, style w kodzie HTML strony internetowej, zmiany, jak 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 dodawanie cieni do tekstu. Można nawet robić szalone rzeczy, jak robić rzeczy ożywić na ekranie. 

Więc jak używać CSS z HTML? Weź ten biedny wyglądającą witrynę właśnie pisałem. Jeśli Rob byli szukać w tym miejscu właśnie teraz, pewnie by powiedzieć coś w stylu: "Wow! Moja wprowadzenie wygląda okropnie. Joseph, jesteś okropna designer". "Korzystanie z czcionki Times domyślny? Helvetica jest o wiele lepiej." 

Więc co może być najprostszym sposobem, aby zastosować styl Rob chce? Najbardziej oczywiste wiele sposób ludzi początkowo napisał CSS było umieścić to, co nazywamy deklaracje styl w samego elementu za pomocą atrybutu stylu HTML. Deklaracja stylu po prostu składa się z elementu majątku HTML CSS chcemy zmienić następuje dwukropek, a następnie nowej wartości nieruchomości i średnik na końcu. Na przykład, powiedzmy, że Rob chce czarne obramowanie wokół jego wprowadzenia. Najpierw umieścić atrybut stylu 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łych odnosi się do stylu granicy i kolor na końcu decyduje jakie granicy za kolor. 

Jeśli chcemy, wiele stylów na element, pisać te deklaracje w sekwencji. Na przykład, jeśli Rob chce jego tekst nagłówka w Helvetica z 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 zwykle przechowywać go w imię spójności. 

Będziemy zapisywać wyjaśniając niektóre chłodniejsze i bardziej złożone właściwości CSS dla innego filmu. Jeśli masz coś na myśli, po prostu Googling żądany efekt następnie CSS zapewne daje dość dobre wyniki. Fajne jest to, że CSS jest dość szeroka, więc szanse są, czy jest coś chcesz zrobić - w granicach rozsądku - CSS można chyba zrobić. My nazywamy ten rodzaj stylizacji inline stylizacji. Style elementem jest dobrze, zgodnie z tagu początkowego. 

Dla ludzi, którzy naprawdę chcą być zorganizowane, możesz zacząć się trochę wkurzony, jak brudny to wszystko wygląda. Wyobraźcie sobie, że musiał to zrobić dla każdego elementu na stronie, Plus teraz twój HTML i CSS są przemieszane i zaśmiecone. Gross, prawda? Aby rozwiązać ten problem, ludzie w końcu zaczęli połowu na oddzielenie ich znaczników HTML od ich stylizacji CSS za pomocą czegoś, co nazywa selektorów CSS. Selektory CSS są stosowane do wyboru elementów, do których deklaracje są stosowane. Selektor połączone z listą zgłoszeń CSS jest często określane jako zasady CSS. Zasady te zostaną poddane między otwartych i zamkniętych znaczników HTML stylu, często w nagłówku dokumentu. 

Jest dużo łatwiej zobaczyć na przykładzie, więc zacznijmy od stworzenia prostej reguły CSS. Najpierw postawmy znaczniki stylów w sekcji head naszego HTML. Następnie przełącznik. Zaczniemy się za pomocą jednego z najprostszych selektorów, symbol, skrót które wybiera element HTML przez jego atrybutu ID. W tym przypadku będziemy wybierz div, który reprezentuje wprowadzenie Roba wpisując symbol krzyżyka następnie identyfikatora div Rob. Teraz deklaracje. Dodajmy, otworzyć i zamknąć szelki i przesunąć nasze wcześniejsze deklaracje dotyczące wbudowanych Roba div wewnątrz tych szelkach, odświeżanie, a, cool, Roba Intro nadal ma czarne obramowanie wokół niego minus niechlujny 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 innych sposobów co pozwala wybrać elementy za pomocą tego, co nazywamy kombinatorów mieszać prostych selektorów. Na przykład, biały znak może być stosowany jako combinator określić wszystkie instancje 1 selektor, które żyją wewnątrz innego wyboru. To brzmi dużo bardziej skomplikowane niż jest w rzeczywistości. Oto przykład. Będziemy wpisz # rob, dodaj spację, a następnie ją z h1, kolejny prosty selektor selektor nazwie tag który wybiera typy elementów jak div lub akapitów. Przestrzeń łączy nasze 2 selektorów prostych, stosując wszystkie deklaracje CSS i nawiasy, które znaczników h1, które żyją wewnątrz elementu z id = "rob". Wystarczy, aby przekonać się, że to działa, będę zmienić kolor czcionki na białym, odświeżania, a oto, header Roba jest teraz biały. 

Wszystkie te prace po to aby pokazać, że za pomocą zasad, zamiast stylów inline możemy uzyskać znacznie bardziej przejrzysty kod. W rzeczywistości, jeśli ten blok stylu zaczyna się trochę duży, Mogę nawet wyciągnąć te style się w innym pliku w ogóle. 

Aby włączyć ten nowy plik jako CSS w tym dokumencie będę po prostu użyć tagu HTML znajduje się na linku. 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 całkowicie odrębnych, która prawie zawsze jest sposób projektanci wolą pracować z HTML i CSS. 

W przypadku, gdy zastanawiasz się, proste przełączniki zawierają selektorów identyfikacyjnych i selektorów tag jak te po prostu widzieli oraz przełączniki klasy do wyboru elementów z danej klasy, selektorów atrybutu wyboru elementów przez inne atrybuty, takie jak typ = "radio" dla wejść przycisków radiowych i pseudoselectors jak unoszą się i skoncentrować do określenia styl, kiedy interakcje lubię najeżdżając myszką na elemencie występują. 

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

Dzięki połączeniu tych selektorów i kombinatorów, można rozszerzyć zakres stylizacji można osiągnąć na danej stronie internetowej i pisać CSS bardziej efektywnie. Z zaledwie kilku linii CSS widzisz mnie wpisywać tutaj, Mogę szybko zrobić coś jak to wygląda mniej więcej tak. 

Jestem Józef, a to jest CS50. 

[CS50.TV] 

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