[Музички] 

Даг LLOYD: Значи, да се земе уште еден видео да се зборува за уште еден јазик. Овој пат ние ќе зборуваме за CSS. Значи, CSS, која е краток за Cascading Style Sheets, е уште еден јазик што го користиме при изградба на веб-сајтови. Се размислува за тоа како оваа. Ако HTML-от е она што го користат за да се организира содржина сакаме да го стави на нашата страница, CSS е алатка која ние обично го користат да изберете како изгледа нашата веб-сајтови, и како на корисникот искуство навистина е, во интеракција со веб-сајт. 

Сличен со HTML, CSS е не е програмски јазик. Таа нема логика. Тоа не мора променливи. Тоа не било кој вид на кои проток поврзани нешта што C е така. Тоа е јазикот стил. И неговата синтакса е прилично едноставно, и само се опишува како елементи на нашата страница имаат одредени HTML елементи треба да бидат изменети. За таа цел, ако не сте уште гледав нашата видео на HTML, или не се запознаени со HTML генерално, ќе Можеби ќе сакате да се погледне во тоа Прво, затоа што оваа дискусија на CSS ќе зависи од некои познавање на HTML. 

Значи тука е навистина едноставни CSS интерфејс. Дури и ако никогаш не сум програмирани со CSS и досега, Јас сум прилично сигурен можете да дознаам токму она што овој интерфејс го прави тоа. Што прави? Па, се применува на телото на нашата веб- страница, сè помеѓу таговите тело на нашата HTML, и го поставува боја на позадината на оваа страница во сино. Па, тоа е еден многу едноставен интерфејс. Тоа е всушност многу човечки пријателски јазик, CSS. Па дури и ако никогаш не сте го користеле порано, што веројатно може да се погоди она што го сторија тоа. Всушност, ако се вчита страница, каде што овој интерфејс беше вграден некако, боја на позадината на нашата страница ќе да биде сина, а не на стандардна бела. 

Па, како да се изгради адаптери? Па прво, ние треба да идентификуваат со менувачот. Во последниот пример, кој беше селектор тело. Тогаш имаме отворена кадрава голема заграда, и ние сме ќе започне дефинирање на интерфејс за тоа копче. Помеѓу големи загради, ние само да има листа на клучните вредност парови. Претходниот пар вредност беше Позадинска боја сина точка и запирка, но би можеле да направат повеќе и повеќе од нив. Вие би можеле да имаат повеќе нешта примена за таа ознака, дека селекторот тело. Секој еден од нив е одвоена од страна на запирка, а ние го нарекуваме секоја една од нив декларација, декларација и CSS. Кога ќе завршиш со стил сите ние на сакате да аплицирате за таа одредена ознака, ние само имаат затворање кадрава се подготвуваат да се стави крај на интерфејс, и ние сме направиле дефинирање на интерфејс за тоа особено менувачот. 

Кои се некои од заедничките CSS особини? Па, можеби сакате да се стави на границата околу нешто. За да може да се каже, граница, што ќе биде вашиот клуч, а потоа вашите вредности ќе биде, она што стил, боја, и ширина што сакате да биде. Па стилот може да биде солидна линија, испрекината линија, испрекината линија, гребен линија, која ќе биде брановидна линија. Можеби сакате да го имаат биде сина или црна или зелена боја. Можеби сакате да се биде 1 или 2 или 10 пиксели. Можете да наведете сите тие работи. Можеби сакате да го поставите позадина Бојата на вашата страница, на одреден начин. Ние веќе видовме дека, поставување на позадината на телото да биде сина. 

Потоа можете да го користите клучниот збор па CSS има одредени бои кои се вградени во него, сина, зелена, црн, многу едноставни бои што знаеме. Но исто така можете да внесувате хексадецимален боја, кои би сакале. Потсетиме дека бои може да се идентификува од страна на група од три хексадецимален број 0-255, rg и б, црвена, зелена и сина компонента. И така ние може да се определи било која боја што сакаме од страна, наместо користење на сина или зелена или црна боја, користење фунти, а потоа шест цифри канаста, и дека ќе ни даде бојата шестоцифрен. Значи тоа е боја на позадината. 

Ние исто така имаме во преден план боја, која обично е ќе биде текстот на вашата страница. И можете да го направите тоа на сличен начин со клучен збор и или шест цифрен хексадецимален. За да можете да наведете било која боја сакате за текстот на вашата страница против одредена позадина во боја, со погоре. Исто така можете да го промените и да се справат со фонтот, и текст на патот е изречена на оваа страница. 

За да можете да ја смените вашата големина на фонтот. Можете да го користите клучни зборови, како што се екстра, екстра мал, или xx мали или средни, голем, и така натаму. Можете да го користите фиксните точки, 10 точка, точка 12, и така натаму. Можете да го користите процент, 80%, 20%, каде што 100% е стандардниот фонт големина, што обично се случува да се да биде нешто како 11 или 12 поени. Или дури и да го базираме исклучување од најновите големина на фонтот. Ако само напишал нешто и знаеш она што го сакате е за тоа да бидат помали, но вие не знаете што точно ви големина сакате да биде, добро, вие само може да се каже, големина на фонтот. И тоа ќе база надвор од, само до горе, тоа е големината на фонтот. И може да се добијат помали или поголеми. Значи има многу различни начини да ја одберете големината на фонтот. 

Можете исто така да се определи што фонт семејството што го сакате. Ако имате одредена име, има начин во CSS-- ние нема да зборуваме за тоа here-- да се дефинира многу специфичен фонт и да го вградите во вашата страница. Можете да ги користите генерички имиња. Има многу на веб безбедно фонтови кои се пре-дефинирани во CSS. И ако сте корисник на Microsoft Канцеларија во последните 20 години, сте веројатно запознаени со многу од овие веб безбедно фонтови веќе, Times New Roman, Arial, Courier New, Грузија, Tahoma, Verdana, и така натаму. Сите оние кои се сметаат за безбедни веб фонтови. И всушност, дел од причината поради која тие се случи да биде беше да се користат да се направи секоја страница web-- имаат пристап до овој стандарден комплет на фонтови со разни serifs, а сето тоа фонт работи кои нема да влезе, но тие се обично достапни во вашиот CSS, дури и ако не се направи на друг начин ги дефинираат фонтови. И на крај, можете да се усогласат вашите текст, наместо тоа да биде, по дифолт, усогласена на лево, ќе можев усогласување на правото, или можете да ги усогласат тоа центрирани, или оправдани така што ќе се удри двете маргини. Значи тоа се сите опции можете да го користите да се промени она што вашиот текст како изгледа, и како таа се прикажува на вашата страница. 

Вашиот селектори не мора да биде само ознаки. Ние претходно видел телото таг селектор, а таг селектор изгледа исто како што. Можете името на ознаката, и тогаш ќе се дефинира интерфејс за таа ознака. Но вие исто така може да се направи нешто нарекува селектор проект. На менувачот проект изгледа прилично слични. Но се забележи, дека сега јас не сум со користење на една HTML таг, јас сум со користење, во овој случај, #unique, или хаш уникатен. Ако се сеќавате од нашите видео на HTML, ние разговаравме за тоа како тагови може да има атрибути. 

И еден атрибут, кој се однесува до доста на сите HTML тагови, но ние не се зборува за тоа, нешто што се нарекува таг проект. Па ова особено CSS би се применуваат само на HTML таг, кој има многу специфичен проект, дека сте именуван. Значи, ако имате некаде во вашиот код, некаде во HTML датотеката, ознака и ти одредите како атрибут на таа ознака, Проект еднаква уникатен, овој особено со дизајни тука ќе се однесува само помеѓу таа ознака со проект на уникатен. 

Можете исто така да се направи нешто наречен селектор класа. Така што во прилог на постоењето Проект атрибути, можете исто така да додадете атрибут класа да HTML тагови. И кога користите атрибут класа, тоа може да се примени на неколку тагови. Значи, ако имаш неколку работи кои се слични, можеби сакате да се каже, отворена таг бла, бла, бла, бла, класа еднаква студенти. А потоа овој конкретен интерфејс ќе се применуваат до секој таг чија класа е студенти. Во овој случај, ние ќе се постави на боја на позадината на жолта, и ние би го поставите непроѕирноста, која е таг ние не се зборува за, туку само се занимава со тоа како транспарентни нешто не е, до 70%, во овој случај. 

Има две опции за пишување адаптери. Можете да ги пишувам директно во вашата HTML со поставување на адаптери помеѓу стил тагови. И оние кои се во стил-тагови оди во внатрешноста на тагови главата на вашиот веб-страница. Можеби повеќе склопот на начин да се направи е да се напише посебна .css датотека, а потоа ја врската во вашиот документ користејќи линк ознаки. Линк ознаки, повторно, се различен од хиперлинкови, ако се потсетиме на нашите видео на HTML. И линк како ние се користат тагови кои се повлече во посебни документи. Тоа вид на како еквивалент на на # Include за веб програмирање. 

Па ајде да ги разгледаме во table.HTML. Ако се сеќавате од нашите HTML видео, јас покажа пример за многу едноставно множење маса која изгледаше прилично грдо, и можеби има еден начин да се направи тоа подобро со CSS, за да може да се погледне повеќе како множење маса, или нешто Тоа не е само залепени без вистинската поделба меѓу редови и колони. Па ајде да минете во текот на CS50 IDE, и да погледнам колку CSS може, на некој начин, tweak она што го започнавме со пред, и тоа нешто многу подобро да се направи. 

Па ние сме во CS50 ИРО сега и ако непознат, ние ќе се повлече до овој маса која HTML страница. Table.HTML основа само ја утврдува содржината на multiple-- тоа требаше да биде а четири од четири таблицата за множење. Тоа е прилично јасна. И ние би помислил дека би изгледа прилично добро организирана. Но, всушност, кога ќе ги видиш оваа страница, ќе видиме дека тоа е вид на грдото, нели? Јасно имаме редови и колони тука. Има некој вид на поделба. Но тоа не е смислен сепарација. Ние не сме всушност добивање премногу информации тука. И не постои поделба помеѓу на редови и колони во смисла на хоризонтални или вертикални правила. Ние веројатно може да се направи ова изгледа малку подобро. Па ајде да се обидеме. Па јас ќе одам да се затвори ова јазиче се овде. А јас ќе одам да се затвори мојот table.HTML, и имам уште една верзија тука наречен table2.HTML. Ќе се отвори дека до. Телото на страницата е прилично многу исти, но јас сум смени малку на врвот. А јас ќе дојдете до тука. Забележете дека овој пат, јас сум користење на вграден тагови стил. Ја отворам таг стил, и јас сум сега дефинирање на CSS интерфејс само внатре од неа. Имам интерфејс кој вели, маса. Тоа е мојот таг селектор. Јас не сум со користење на точка или хаш, кој јас ќе се прави, ако јас бил со користење на проект или селектор класа. Имам таг селектор here-- табелата. Овој стил ќе важат за секој таг маса. Очигледно Сакам да се стави една пиксел широк, солидна сината граница, внатре во мојата маса. Што звучи како тоа ќе веројатно помогне на ситуацијата, нели? Ние ќе треба да имаат работите изгледаат многу подобро. Па тоа е во ред. Стилски, јас сум само вградени мојот интерфејс во тука. Тоа е сигурно прифатлив начин да го направи тоа. Ајде да видиме што тоа изгледа. Па јас ќе се врати долу тука, и Ќе ќе прегледам table2.HTML. Па, тоа не е сосема она што сакав, но тоа е токму она што го бараше. Рековме дека овој стил е ќе се применуваат на нашата маса. Нашата маса сега има еден пиксел широк, солидна сината граница околу неа. Ние не сме всушност добивање во ќелиите. Ние сме само добивање на масата. Па CSS работел. Тоа ги применил на интерфејс на нашата маса. Но не сосема се направи она што го сакаше тоа да се направи. Како да се добие за да се направи она што го сакате тоа да се направи? 

Па, ајде да ги разгледаме во уште еден верзија на ова во table3.HTML. Па јас сум само ќе ги затвори овие јазичиња. Одам да се вратиш овде во мојата поднесе дрво, и се отвори table3.HTML. Повторно, тоа се случува да изгледа убаво слични тука на почетокот. Но, огласот, овој пат, наместо да се користат А интерфејс вградени во право таму, Одам да се поврзат во една интерфејс со користење на ознака на врската. Па јас сум очигледно поврзување во интерфејс наречен tables.CSS, и ова и е еднаква на интерфејс само means-- добро, она што е оваа датотека однос на она што Јас сум doing-- е интерфејс дека сум користење на мојата страница. Значи, ако јас навистина сакате да се види она што Јас го правам со CSS тука, Јас треба да се оди со отворен кои table.CSS поднесе, како и. Па ние ќе се вратам овде повторно за нашите датотека дрво. Има table.CSS. Ние ќе го отворат. Сега сме сведоци на малку на CSS. Очигледно, имам неколку работи се случува тука. Јас очигледно сакате да се стави пет пиксел широк, солидна црвена граница, околу мојата маса. Ние веќе знаеме дека што се случува да се оди само на периметарот. Видовме дека во table2.HTML. Со секој ред, јас очигледно сакаат да се определи дека висината на ред е 50 пиксели висока. Значи за секој ред, се сеќавам тоа е она што на ознаки tr прави, Јас сум што го прави 50 пиксели висока. 

И на крај, имам овој коментар. И ова е како да се направи коментари во CSS. Тоа е многу сличен да ги искористи блок коментари синтакса коса црта ѕвезда. Целиот текст што сакате. Нема коса црта црта иако во CSS. За краток РЕГИСТРАЦИЈА коментари, имаме да го користите овој особено формат овде. Тоа изгледа како јас го правам на многу работи во мојот TD таговите. Се сеќавам ТД тагови, или на маса податоци, кои, навистина, се само колоните во внатрешноста на нашите редови, а очигледно за секое парче на податоци во мојата маса, сакам да го поставите бојата на позадина за да се да биде црна, бојата да биде бела, боја е боја на буквите. Така што ова ќе биде текстот на мојата страница. Сакам голем фонт, 22 укажуваат на фонт, и сакам тоа да биде на фонтот, Грузија. Па јас не одам да се имаат стандардниот фонт. Одам да се определи Грузија, која е еден од оние веб безбедно фонтови дека ние не сум видел. Сакам мојот текст, за да биде усогласена централно, во средината на полето, Не сакам тоа да се остави усогласени или десно подредени. И сакам моите ширина колона да биде 50 пиксели, како и. Ајде да ги разгледаме во она што изгледа како овој, и види дали ова е можеби и подобрување. Па јас ќе одам да се оди на table3.HTML, која Потсетиме, вклучува table.CSS како линк, и ние ќе го видиш. Тоа е многу подобро, нели? Ова е, всушност, почнуваат да се погледне многу повеќе како маса множење. Имам што црвената граница околу мојата маса, но сега Јас, исто така се наведува дека секој ред е 50 пиксели, или тоа е повеќе од 50 пиксели tall-- изговор me-- секоја колона е 50 пиксели. На податоци во секоја колона, а само податоците, има црна позадина. Па тоа е зошто тие бели линии се таму. Бидејќи просторот во помеѓу сите тие клетки, тоа не е граница во себе и за себе, тоа е само Јас сум само за пополнување на клетки, кои, всушност, прави границите на маса, што очигледно постоеше сите заедно, тоа беше само тенки бели линии. Сега тие се видливи. Сега што се појави надвор од екранот. Па така ова е многу едноставен интерфејс што сум ги применуваат, и сега мојата маса изгледа многу повеќе како маса со четири од четири множење, наместо само измешани хаос, каде што сè е јасно редови и колони, но не и супер добро организирана. Ние сме навистина само гребење по површината на она што можете да направите со CSS тука. За среќа документација CSS е прилично јасна. Што ќе го користите неколку од нејзините атрибути, прилично често. Оние што зборуваше за порано во ова видео. Постојат неколку кои ви веројатно нема да ги користат сите. И тоа е во ред, исто така. Но, само знам дека има многу на документацијата таму. Па дури и ако ние не ги покрие сè, сигурно не си замина на своја. Но CSS е навистина забавно да експериментира. И јас силно ќе ве охрабри да се позанимавам со вашите веб страни, и да видиме како може да ги направи изгледаат и се чувствуваат за подобрување на корисник искуство од посетата на вашата страница. Јас сум Даг Лојд. Ова е CS50.