[Powered by Google Translate] [CSS] [Джоузеф Ong - Харвардския университет] [Това е CS50. - CS50.TV] 

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

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

Е, как да използваме CSS с HTML? Вземете този беден сайт Току-що написах. Ако Роб да погледнете този сайт, той вероятно ще каже нещо като: "Уау! Моят въвеждане изглежда ужасно Джоузеф, ти си ужасно дизайнер". "Използване Times шрифта по подразбиране? Helvetica е толкова по-добре." 

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

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

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

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

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

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

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

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

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

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

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

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

[CS50.TV] 

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