[Powered by Google Translate] [CSS] [Joseph Ong - Harvard University] [Това е CS50. - CS50.TV] 

Днес ще говорим за CSS или Cascading Style Sheets. 

И така, какво точно е CSS? Ами, нека да прекъсне срока CSS надолу в две части: Cascading Style Sheets и. Cascading е малко по-сложно, и това е нещо, което ние ще разгледаме в друг видео. Но за начало, Style Sheets много много загатва какво CSS прави. Тя добавя, стилове на HTML на уеб страница, променя начина, по който уеб страница естетически изглежда. Това означава, че всичко, от шрифта на текста, за позициониране на съдържанието на страницата за други готини неща като вземане на ъглите на кръгла кутия или добавяне на сянка към текст. Можете дори да правя луди неща, като направим нещата анимирате на екрана. 

И как ще се използват CSS с HTML? Вземете този беден изглеждащ сайт просто е написал. Ако Rob са да погледнете този сайт, точно сега, сигурно щеше да каже нещо подобно, "Уау! My въвеждането изглежда ужасно. Joseph, ти си ужасно дизайнер." "Използване по подразбиране шрифт Times? Helvetica е много по-добре." 

И така, какво може да е най-простият начин да се приложи стил Роб иска? Най-очевидните обособените начин на хората първоначално пише CSS е да се сложи това, което наричаме стил декларации точно в самия елемент използвате HTML атрибут стил. A стил декларацията се състои само от имуществото на HTML елемент на CSS искаме да променим , следван от двоеточие, последвано от новата стойност на имота и точка и запетая в края. Например, нека кажем, Rob иска черна рамка около въвеждането му. Ние за първи път на стила атрибут на Разделения на Роб тук след това в кавички сложи декларация CSS: "Граница: 1px черни;" В един пиксел се отнася до ширината на границата, твърдото вещество се отнася до стила на границата, и цвят в края определя какъв цвят на границата е. 

Ако искаме няколко стила на един елемент, пиша тези декларации в последователност. Например, ако Роб иска отби текст на Helvetica със син фон и повече пространство около текста, можем да направим това: стил = "шрифт семейство: Helvetica; фон-цвят: син; подложка: 5px;" Последната точка и запетая е всъщност задължително, но хората обикновено я държи в заради последователността на. 

Ще спестите обяснява някои от по-хладните и по-сложни свойства CSS за друг видеоклип. Ако имате нещо предвид, просто Гугъл ефекта, който искате, последвано от CSS вероятно ще ви даде доста добри резултати. В готино нещо е, че CSS е доста широк, така че шансовете са, ако има нещо, което искате да направите - в разумни граници - CSS вероятно може да го направи. Ние наричаме този вид стайлинг инлайн стил. Елементът стил е, добре, в съответствие с начален маркер. 

За хора, които наистина искат да бъдат организирани, можете да започнете да получавате малко ядосани как разхвърлян всичко това изглежда. Представете си, ако трябваше да направим това за всеки елемент на страницата, плюс сега си HTML и CSS са смесени и затрупана. Gross, нали? За да се определи това, хората в крайна сметка започна приближават към отделяне им HTML маркиране от тяхното стил CSS, като използвате нещо, наречено CSS селектори. CSS селектори се използват, за да изберете елементи, до които се прилагат декларации. А избора комбинирани със списък на декларации CSS често се споменава като правило CSS. Тези правила ще бъдат поставени между отварят и затварят HTML тагове стил, често в главата на документа. 

Това е много по-лесно да се види с един пример, така че нека да започнем от създаването на едно просто правило CSS. Първо, нека да поставим стил тагове в главата на нашия HTML. На следващо място, за избор. Ще започнем с помощта на един от най-простите селектори, хеш символ, която избира HTML елемент от неговия ID атрибут. В този случай ние ще изберете дивизия, която представлява въвеждането на Роб чрез въвеждане на хеш символ последвано от ID на Разделения на Роб. Сега декларациите. Ние добавяме отварят и затварят скоби и измести предишните ни вградени декларации за Разделения на Роб вътрешността на тези скоби, обновяване, и, хладно, Роб интро все още има черна рамка около него минус разхвърлян грозотата редово. 

Сега, какво, ако искахме да изберете h1 вътрешността на интрото на Роб? Може би си мислите: "Нека да се сложи ID върху него и след това се премести нашите ранни стилове." Това работи, но CSS има други начини да ви позволява да изберете елементи чрез използване на това, което наричаме комбинатори да се смесват прости селектори. Например, един празен символ може да се използва като Combinator да се посочват всички случаи на един избор, които живеят във вътрешността на друг избор. Това звучи много по-сложно, отколкото е в действителност. Ето един пример. Ние ще въведете # ограби, добавете интервал, и да го следват с h1, друг прост селектор нарича таг селектора, който избира типа елементи като Divs или абзаци. Мястото съчетава нашите две прости селектори, прилагане на всички CSS декларации и фигурни скоби на h1 тагове, които живеят във вътрешността на елемента с идентификатор = "Роб". Само да ви убеди, че той работи, ще промените цвета на шрифта за бяла, обновяване, и, изглежда, удар с глава на Роб сега е бял. 

Всички от тази работа идва да покаже, че с помощта на правила, вместо инлайн стилове можем да получим много по-чист код. В действителност, ако този стил блок започва с удар с малко големи, Мога дори да дръпнете тези стилове навън в друг файл напълно. 

За да включите този нов файл като CSS в този документ, аз просто ще използвате HTML тагове за връзка. Тук аз съм го казвам, че аз съм свързване на външен стилов лист, на REL атрибут, и определяне на пътя към файла с моя HREF атрибут. Сега ми HTML маркиране и CSS са организирани добре в напълно отделни файлове, което е почти винаги начина дизайнери предпочитат работа с HTML и CSS. 

В случай, че се чудите, простите селектори включват ID селектори и тагове селектори като тези, току-що видяхме както и клас селектори за избор елементи с определен клас, атрибутни селектори за избор на елементи от други атрибути като тип = "радио" за входове радио бутона и pseudoselectors като мишката и да се съсредоточи за определяне стайлинг когато взаимодействия харесва преместите мишката над елемент се случи. 

Общите комбинатори включват празно за всички деца и запетаи, за да разграничи селектори. Други може да срещнете включват стрелката за директни деца само, тилда за всички братя и сестри, които се случват след елемент, и знак плюс за един брат или сестра, която идва веднага след елемент. 

Чрез комбиниране на тези селектори и комбинатори, можете да се разшири кръгът на стайлинг можете да постигнете по дадена уеб страница и пиша CSS по-ефективно. Само с няколко линии на CSS, които виждате ми пишете тук, Аз може бързо да направи нещо като това изглежда като нещо подобно. 

Аз съм Йосиф, и това е CS50. 

[CS50.TV] 

Ъ-ъ, къде да започна? Позволете ми да направя това без - [смее се] Добре. Добави - Позволете ми да се промени този текст. Ооо. Извинете.