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

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

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

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

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

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

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

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

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

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

За целата оваа работа оди да се покаже дека со користење на правила, наместо РЕГИСТРАЦИЈА стилови ние може да се добие многу почисти код. Всушност, ако овој стил блок почнува да добива малку голем, Јас дури и можат да ги повлечат овие стилови надвор во друга датотека заедно. 

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

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

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

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

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

[CS50.TV] 

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