[За възпроизвеждане на музика] 

Дъг 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 и В, червено, зелено и синьо компонент. И така можем да укажете всеки цвят, което искаме от, вместо да се използва син или зелен или черен, използване на паунд и след шест цифри на шестнадесетичен, и това ще ни даде цвета шестцифрен. Така че това е цвета на фона. 

Ние също имаме на преден план цвят, който е обикновено Ще бъде текста на страницата ви. И вие може да направите това по подобен начин с ключова дума и или шестцифрен шестнадесетичен. Така че можете да определите кой да е цвят искам за текста на страницата си срещу конкретен цвят на фона, до горе. Можете също така да се промени и да се справят с шрифта, и текста на пътя се оказва на страницата. 

Така че можете да промените размера на шрифта. Можете да използвате ключови думи, като допълнително, особено малък, или хх малка или средна, голям, и така нататък. Можете да използвате неподвижни точки, 10 Точка, точка 12, и така нататък. Можете да използвате проценти, 80%, 20%, където 100% е по подразбиране шрифт размер, който обикновено се случва да да бъде нещо като 11 или 12 точки. Или можете да дори да го основе разстояние на най-новия размер на шрифта. Ако просто е написал нещо, а вие знаете, това, което искате, е тя да бъде по-малък, но вие не знаете точно какво размер искам тя да бъде, добре, може просто да се каже, размер на шрифта по-малък. И това ще се базира на разстояние от, само до по-горе, това е големината на шрифта. И вие можете да получите по-малък или по-голям. Така че има много различни начина за определяне на размера на шрифта. 

Можете също така да се уточни какво шрифт семейство, което искате. Ако имате конкретен име, има начин в CSS-- ние няма да говорим за това here-- да се определят много специфичен шрифт и да го вградите в страницата. Можете да използвате и родови имена. Има много уеб безопасни шрифтове които са предварително дефинирани в CSS. И ако сте потребител на Microsoft Офис в последните 20 години, вие вероятно сте запознати с много от тези уеб безопасни шрифтове вече, Times New Roman, Arial, Courier New, Грузия, Tahoma, Verdana, и така нататък. Всички онези, се считат за безопасни уеб шрифтове. И всъщност, част от причина те дойдоха да бъде е да се използва за направата на web-- всяка страница бе достъп до тази подразбиране, определена от шрифтове с различни серифи и всичко това шрифта неща, които няма да влязат в, но това са обикновено достъпни във вашия CSS, дори и ако не го направите в противен случай се определят шрифтовете. На последно място, можете да се приведе в съответствие вашия текст, вместо да е, по подразбиране, подравнен наляво, бихте могли привеждането му в съответствие с правото, или бихте могли да приведат това центрира, или оправдани, така че да удари двете маржове. Така че тези, които са всички опции можете да използвате, да се промени това, което си текст прилича, и как се показва на страницата си. 

Вашите селектори не го правят трябва да бъде само ключовите думи. Ние преди това видях един таг тялото селектор, и селектор таг изглежда просто ей така. Можете назовем маркер, а след това ви дефинират стилове за този етикет. Но можете да направите нещо наречено селектор ID. Един селектор ID изглежда доста сходни. Но забележете, че сега аз не съм с на HTML тагове, аз съм с помощта, в този случай, #unique или хеш уникален. Ако си спомняте от нашия видео на HTML, ние говорихме за това как могат да имат етикети атрибути. 

И един признак, че се прилага до почти всичко, HTML тагове, но ние не говорим за това, е нещо, наречено маркер ID. Така че този конкретен CSS би прилага само за HTML таг, който има много специфичен ID, че сте на име. Така че, ако имате някъде в кода си, някъде в HTML файл, етикет и вие зададени като атрибут на този етикет, ID равнява уникален, този специално стилове тук ще се прилага само между този етикет с идентификацията на уникален. 

Можете също така да се направи нещо наречено селектор клас. Така в допълнение към като ID атрибути, можете също добавите атрибут клас да HTML тагове. И когато използвате атрибута клас, може да се прилага към множество маркери. Така че, ако имате няколко неща, които са сходни, може би искате да кажете, отворен таг дрън, дрън, дрън, дрън, клас се равнява на учениците. И тогава този конкретен стилове ще се прилага на всеки етикет, чийто клас е студентите. В този случай, ние бихме настройте Цвят на фона на жълто, и ние бихме зададете непрозрачност, които е маркер ние не говорим за, но просто се занимава с това как прозрачен нещо е, до 70%, в този случай. 

Има два варианта за писането на стилове. Можете да ги напиша директно в HTML чрез поставяне на стиловите между стил тагове. И тези тагове в стил отиват във вътрешността на маркерите за глава на вашата уеб страница. The може би още по-предпочитан начин да се направи тя е да се напише отделен .css файл, и след това го свържете към вашия документира с помощта на линия за предаване на тагове. Link тагове, отново са различен от хипервръзки, ако си спомняте от нашите видео на HTML. И линк таговете са как издърпайте в отделни файлове. Това нещо като еквивалент на на #include за уеб програмиране. 

Така че нека да разгледаме най-table.HTML. Ако си спомняте от нашия HTML видео, показах пример на много просто умножение маса, която изглеждаше доста грозно, и може би има начин да се направи това по-добре с CSS, за да стане действително изглеждат по-скоро като умножение маса, или нещо че не е просто залепени един за друг с действителното разделение не между редовете и колоните. Така че нека да се над главата CS50 IDE, и да погледнем как CSS може, нещо, ощипвам това, което ние започнахме с преди, и нещо много по-добре да направи. 

Така че ние сме в CS50 IDE сега, и ако непозната, ние ще спра в тази таблица, която HTML страница. Table.HTML основно просто определя съдържанието на multiple-- тя е трябвало да бъде четири от четири таблица за умножение. Това е доста ясен. И ние ще мисля, че ще изглежда доста добре организирани. Но в действителност, когато визуализирате тази страница, ние виждаме, че това е вид грозна, нали? Очевидно имаме редове и колони тук. Има някаква раздяла. Но това не е смислен раздяла. Ние не сме всъщност да е твърде много информация тук. И няма разделение между редовете и колоните, от гледна точка на хоризонтални или вертикални правила. Вероятно можем да направим това изглежда малко по-добре. Така че нека да се опитаме. Така че аз отивам да затворите този раздел тук. И аз отивам да затворите ми table.HTML, и аз имам друга версия тук наречено table2.HTML. Ще се отвори, че до. Тялото на страницата е почти една и съща, но съм променил малко в горната част. И аз ще се придвижите нагоре тук. Забележете, че този път, аз съм използване на вградени тагове стил. Аз съм отворен таг стил, и аз съм сега дефиниране на CSS стилове само вътре от него. Имам стилове, която казва, маса. Това е моето селектор маркер. Аз не съм с точка или хашиш, което аз ще се прави, ако I беше използване на ID или селектор клас. Имам селектор таг here-- маса. Този стил ще прилага за всеки таг маса. Очевидно искам да се сложи една пиксел широка, твърда синя граница, вътре моята маса. Това звучи като то вероятно ще помогне на ситуацията, нали? Отиваме да имат нещата изглеждат много по-добре. Така че това е добре. Стилово, аз току-що вградени ми стилове тук. Със сигурност това е една приемлив начин да го направя. Нека да видим как изглежда това. Така че аз ще се върна тук, и Ще ще прегледам table2.HTML. Е, това не е съвсем това, което исках, но това е точно това, което поиска. Ние казахме, че този стил е ще се прилага към нашата маса. Нашата маса вече има един пиксел широка, твърда синя рамка около него. Ние не сме всъщност да е в клетките на таблицата. Сега вече имаме на масата. Така CSS работил. Той е подал молба за стилове на нашата маса. Но не съвсем направя това, което искахме да направите. Как да стигнем до направя това, което искаме да направим? 

Е, нека да разгледаме още един версия на тази в table3.HTML. Така че аз съм просто ще затворят тези раздели. Отивам да се върна тук, за да ми подаде дърво, и да се отворят table3.HTML. Отново, това ще изглежда доста подобно тук в началото. Но предизвестие, този път, вместо да се използва стилове вградени полето там, Отивам да се свържат в една стилове използвайки маркер връзка. Така че аз съм очевидно, свързваща в стилове, наречена tables.CSS, и това добре се равнява стилове просто means-- добре, какъв е този файл в сравнение с това, което Аз съм doing-- е стилове, че аз съм използвайки за моята страница. Така че, ако наистина искате да видите какво Правя с CSS тук, Аз трябва да отида, че отворена table.CSS подаде, както добре. Така че ние ще се върнем тук отново, за да ни файл дърво. Има table.CSS. Ще го поп отворен. Сега ние виждаме малко на СГО. Очевидно е, имам няколко на нещата става тук. Аз очевидно искате да сложите пет пиксел широка, твърда червена рамка, около масата ми. Ние вече знаем, че това се случва просто да отида на периметъра. Видяхме, че в table2.HTML. С всеки ред I Очевидно искате да зададете че височината на реда е 50 пиксела. Така че за всеки ред, не забравяйте, това е, което тага TR прави, Правя го 50 пиксела. 

На последно място, аз имам този коментар. И това е начина, по който да направи коментари в CSS. Това е много подобен на конфискува блок коментари синтаксис наклонена черта звезда. Целият текст, който искате. Няма по-наклонена черта черта макар и в CSS. За кратки редово коментари, имаме да използва този конкретен формат тук. Тя изглежда като Правя много неща в моя TD тагове. Запомни TD тагове, или маса данни, които наистина са само колоните вътре в нашите редове, и очевидно за всяка част от данните, в масата ми, искам да зададете цвета на фона, за да да бъде черен, цветът да бъде бяла, цвят е цвета нови знания. Така че това ще бъде текста на страницата ми. Искам голям шрифт, 22 точка на шрифта, и аз искам че е от семейството на шрифта, Грузия. Така че аз няма да Трябва шрифта по подразбиране. Отивам да се уточни Грузия, която е една от тези уеб безопасни шрифтове които сме виждали преди. Искам си текст, за да бъдат приведени в съответствие централно, в средата на кутията, Аз не искам тя да бъде оставен подравнен или дясно подравнен. И аз искам ширина моята колона да бъде 50 пиксела, както добре. Нека да разгледаме най- това, което изглежда като този, и да видим дали това е може би един от подобрение. Така че аз ще отида да table3.HTML, които изземване, включва table.CSS като връзка, и ние ще го прегледате. Това е много по-добре, нали? Това е действително започва да изглежда по- много повече като таблица за умножение. Имам че червена рамка около масата ми, но сега Аз също уточни, че всеки ред е на 50 пиксела, или това е 50 пиксела tall-- извинение me-- всяка колона е 50 пиксела. Данните във всяка колона, и само данните, има черен фон. Така че това е защо тези, бели линии са там. Тъй като пространството между всички тези клетки, това не е граница в и на себе си, че това е просто Аз съм само попълване на клетки, които всъщност прави границите на таблицата, които очевидно е съществувала през цялото време, той беше само тънки бели линии. Сега те са видими. Сега те гърмя на екрана. И така, това е много проста стилове, че съм се прилага, и сега масата ми изглежда много повече като маса с четири от четири умножение, вместо просто объркан бъркотия, в която всичко е ясно редове и колони, но не и супер добре организирано. Ние сме наистина само чесане на повърхността от това, което можете да направите с CSS тук. За щастие документацията CSS е доста ясен. Ще използвате няколко от своя атрибути, доста често. Тези, за които говорихме по-рано в това видео. Има няколко, които можете вероятно няма да използва всички. И това е добре, също. Но просто знам, че има много документация там. Така че дори и да не покрива всичко, вие със сигурност не сте останали по своему. Но CSS е наистина забавно да се експериментира с. И аз силно ще ви насърча да си поиграете с вашите уеб страници, и да видим как можете да ги направите изглеждат и се чувстват подобряване на потребителя опит за посещение на вашия сайт. Аз съм Дъг Лойд. Това е CS50.