[Powered by Google Translate] [CSS] [Џозеф Ong - Универзитетот Харвард] [Ова е CS50. - CS50.TV] 

Денес ние ќе се зборува за CSS или Cascading Style Sheets. 

Значи, што точно е CSS? Па, ајде да се скрши терминот CSS долу во 2 дела: Каскадни и стилски листови. Каскадни е малку посложена, а тоа е нешто што ние ќе ги покрие во друг видео. Но, за почеток, Style Sheets многу загатки на она CSS прави. Таа додава стилови на HTML кодот на веб страница, менување на начинот на веб-страница естетски изглед. Ова значи сè, од фонтот на текстот на позиционирање на содржината на оваа страница на други кул работи како што аглите на кутија заоблени или додавање сенки на текст. Можете дури и може да направи луди работи како направат работите анимирање на екранот. 

Така како ние да го користите CSS со HTML? Земете оваа сиромашна изглед на сајт јас само напишав. Ако Rob требаше да се погледне на овој сајт, токму сега, тој веројатно би рекол нешто како: "Леле! Моето запознавање изгледа страшно. Џозеф, ти си страшна дизајнер." "Користењето на стандардната Times фонт? Хелветика е толку многу подобро." 

Значи она што може да биде наједноставен начин да се примени стил Роб сака? Најочигледниот начин многу луѓе првично напиша CSS беше да се стави она што го нарекуваме стил декларации право во елемент сам по себе со користење на HTML стил атрибут. Стил декларација едноставно се состои од CSS сопственост на елемент HTML е што сакате да го промените проследено со две точки проследено со нова вредност на имотот и запирка на крајот. На пример, да речеме Роб сака црна границата околу неговото воведување. Ние прво стави стил атрибут на div на Rob тука потоа внатре двојни наводници стави декларација CSS: "Border: 1px солидна црно"; На 1 пиксел однесува на ширина на границата, цврстиот се однесува на стилот на границата, и бојата на крајот ја одредува каква боја на границата е. 

Ако сакаме повеќе стилови на елементот, пишуваат овие декларации во низа. На пример, ако Роб сака неговиот удар со глава текст во Хелветика со сина позадина и повеќе простор околу текстот, можеме да го направите ова: style = "font-family: Helvetica; позадина во боја: сина; Соочи: 5px;" Последната запирка всушност е опционален, но луѓето најчесто се задржи во заради конзистентност е. 

Ние ќе заштедите објаснувајќи некои од ладилникот и посложени CSS особини за друг видео. Ако имате нешто на ум, само Googling на ефектот што сакате проследено со CSS веројатно ќе ви даде прилично добри резултати. Кул работа е дека CSS е прилично широка, па шансите се ако постои нешто што сакате да го направите - во рамките на разумот - CSS веројатно може да го направи тоа. Ние го нарекуваме овој вид на стил РЕГИСТРАЦИЈА стил. Елементот стил е, добро, во согласност со почетниот таг. 

За луѓе кои навистина ми се допаѓа да се организираат, може да започне да добива малку вознемирен од тоа како неуредна, сето тоа изгледа. Замислете ако сте имале да го стори тоа за секој елемент на страницата, плус сега вашиот HTML и CSS се сите меѓусебно и преполни. Бруто, нели? Да го надминете овој, луѓето конечно почна фаќање на одвојување нивните HTML маркап од нивните CSS стил со користење на нешто што се нарекува CSS селектори. CSS селектори се користи за да изберете елементи на кои декларации се применуваат. А селектор комбинација со листа на CSS декларации е често нарекуван како правило CSS. Овие правила ќе се стави меѓу отвораат и затвораат HTML стил тагови, често во главата на документот. 

Тоа е многу полесно да се види со пример, па да почнеме со креирање на едноставен CSS правило. Прво, да се стави стил тагови во главата дел од нашите HTML. Следно, селектор. Ќе започнете со користење на еден од наједноставните селектори, хаш симбол, кој избира HTML елемент од својата лична особина. Во овој случај ние ќе го изберете div кој претставува вовед на Rob со впишување на хаш симбол проследено со број на div, Роб. Сега декларации. Ние додаваме отвораат и затвораат загради и промена нашето претходно вметнати декларации за div на Rob внатрешноста на овие загради, освежи, и, ладно, на Rob интро уште има црна границата околу тоа минус неуредна РЕГИСТРАЦИЈА грдоста. 

Сега, што ако сакавме да го изберете h1 внатрешноста на интро на Rob? Што мислат, "Да се ​​стави ID на неа, а потоа се движи нашето претходно стилови." Што работи, но CSS, има и други начини да го изберете елементи со користење на она што ние го нарекуваме combinators да се меша едноставен селектори. На пример, карактер празни места може да се користи како Combinator да се утврдат сите случаи од 1 селектор кои живеат во внатрешноста на друг селектор. Тоа звучи многу покомплицирано отколку што навистина е. Еве еден пример. Ние ќе напишеш # одземат, да додадете празно место, и следете го со H1, уште една едноставна селектор нарекува таг селектор кој го избира видови на елементи како divs или ставовите. Просторот комбинира нашите 2 едноставни селектори, со примена на сите CSS декларации и тркалезните загради да H1 тагови кои живеат во внатрешноста на елементот со ид = "Роб". Само за да ви убедат дека тоа функционира, јас ќе се промени бојата на фонтот на бело, освежи, и, изгледа, насловот на Rob сега е бело. 

Целата оваа работа оди да се покаже дека со користење на правила, наместо на внатрешно стилови ние може да се добие многу почисти код. Всушност, ако овој стил блок почнува да добива малку голем, Јас дури и можат да ги повлечат овие стилови надвор во друга датотека заедно. 

За да го вклучите оваа нова датотека CSS во овој документ јас само ќе го користите линкот таг ентитети. Еве јас сум го кажувам дека јас сум поврзување во надворешен стил лист, rel атрибут, и специфицирање на патека до датотеката со мојот href атрибут. Сега, мојот HTML маркап и CSS се организирани убаво во целосно одвоени датотеки, што е речиси секогаш начин дизајнери претпочитаат работа со HTML и CSS. 

Во случај да се прашувате, од едноставна селектори вклучуваат ID селектори и ознака селектори како оние што само видов како и класа селектори за избор елементи со одредена класа, атрибут селектори за избор на елементи од други атрибути како тип = "радио" за радио копчето влезови, и pseudoselectors како лебди и се фокусира за специфицирање стајлинг кога интеракции се допаѓа mousing над елемент случи. 

Заеднички combinators вклучуваат празни места за сите деца и запирки да се направи разлика селектори. Другите може да се судрите вклучуваат стрелките за директна деца само, тилда за сите браќа и сестри кои се јавуваат по елемент, и плус знак за 1 брат кој доаѓа веднаш по елемент. 

Со комбинирање на овие селектори и combinators, може да се прошири опсегот на стил може да се постигне на дадена веб страница и да пишува CSS поефикасно. Со само неколку линии на CSS ќе ме види пишување тука, Јас брзо да се направи нешто како ова изгледа нешто како ова. 

Јас сум Јосиф, и ова е CS50. 

[CS50.TV] 

Ух, каде да започнам? Дозволете ми да го направи тоа без - [се смее] Во ред. Додадете - Дозволете ми да го промени тоа текстот. Ooh. Жал ми е.