[Грає музика] 

ДАГ Lloyd: Так що давайте ще один відео, щоб говорити про більш однієї мови. На цей раз ми поговоримо про CSS. Так CSS, що є абревіатурою Каскадні таблиці стилів, ще одну мову ми використовуємо при побудові веб-сайтів. Подумайте про це, як це. Якщо ж 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. Ідентифікатор селектора виглядає досить схожі. Але відзначають, що в даний час я не використовую HTML-теги, я використовую, в цьому випадку, #unique або хешування. Якщо ви пам'ятаєте з нашого відео на HTML, ми говорили про те, як мітки можуть мати атрибути. 

І один атрибут, який застосовується в майже всіх HTML-теги, але ми не говоримо про це, те, що називається ідентифікатор тега. Таким чином, це буде особливо CSS застосовуються тільки до HTML тега, який має дуже специфічна ID, що Ви назвали. Так що, якщо у вас є десь в коді, де в HTML файл, тег і ви вказати в якості атрибута цього тега, ID дорівнює унікальним, це Зокрема стилів тут буде застосовуватися тільки між що тег з ідентифікатором унікальні. 

Ви також можете зробити щось називається селектором класу. Таким чином, на додаток до наявності ID атрибути, ви також можете додати атрибут класу, щоб HTML-теги. І коли ви використовуєте атрибут класу, вона може бути застосована до декількох тегам. Так що, якщо у вас є кілька речей, які аналогічні, може бути, ви хочете сказати відкритий тег бла, бла, бла, бла, клас дорівнює студентів. І тоді цей конкретний стилів буде застосовуватися до кожного тегу, чий клас студентів. У цьому випадку, ми встановіть Колір фону на жовтий, і ми встановлюємо непрозорість, яка це тег, який нам не про що поговорити, але тільки має справу з прозорою, як щось, до 70%, в цьому випадку. 

Там же два варіанти Написання стилів. Ви можете написати їх безпосередньо в HTML шляхом розміщення стилів в між тегами стилі. І ці мітки в стилі піти всередині головні теги веб-сторінки. , Можливо, більш кращий спосіб зробити це написати окремий файл .css, а потім зв'язати його в свій документ, використовуючи посилання міток. Теги Link, знову ж, є відрізняється від гіперпосилань, якщо ви пам'ятаєте з нашого відео в HTML. І посилання теги, як ми тягнути в окремих файлах. Це ніби як еквівалент допомогою #include для веб-програмування. 

Отже, давайте поглянемо на table.HTML. Якщо ви пам'ятаєте з нашого HTML-відео, я показав приклад дуже просте множення таблиця, виглядав досить негарно, і, можливо, є спосіб зробити це краще з CSS, щоб зробити це насправді виглядають більше як множення стіл, або щось Це не просто склеєні з не фактичний поділ між рядами і колонами. Отже, давайте над головою CS50 IDE, і поглянути на те, як CSS може, начебто, настройки те, що ми почали з раніше, і зробити щось набагато краще. 

Таким чином, ми знаходимося в CS50 IDE Тепер, якщо не знайомі, ми підтягнути в цьому таблиця, HTML-сторінки. Table.HTML основному просто визначає вміст в А multiple-- він повинен був бути чотири на чотири таблиця множення. Це досить просто. І ми будемо думати, що це було б виглядають досить добре організовані. Але насправді, коли ми переглядати цю сторінку, ми бачимо, що це свого роду потворний, правда? Очевидно, ми маємо рядків і стовпців тут. Там якась поділу. Але це не має сенсу поділ. Ми насправді не отримати занадто багато інформації тут. І немає ніякого поділу між рядків і стовпців у вираженні з горизонтальних або вертикальних правил. Ми могли б зробити це шукати трохи краще. Так давайте спробуємо. Так що я збираюся закрити цю вкладку тут. І я збираюся закрити мій table.HTML, і в мене є ще один варіант тут називається table2.HTML. Ми відкриємо, що до. Тіло сторінці в значній мірі те ж саме, але я змінився трохи зверху. І я буду прокручувати тут. Зверніть увагу, що на цей раз, я за допомогою вбудованих тегів в стилі. Я відкрив тег стиль, і тепер я визначення CSS стилів тільки всередині від нього. У мене є таблиці стилів, що говорить, таблицю. Це мій селектор тегів. Я не використовую точку або хеш, які я буду робити, якщо я був за допомогою ID або селектор класу. У мене є селектор тегів here-- таблицю. Цей стиль буде застосовуються до кожного таблицю тегів. Мабуть, я хочу, щоб покласти один піксел, суцільний синій кордону, в моїй таблиці. Це звучить, як він, ймовірно, зарадити ситуації, вірно? Ми збираємося, щоб мати речі виглядають набагато краще. Так що це нормально. Стилістично, я тільки що вбудовані мій стилів тут. Це, звичайно, прийнятний спосіб зробити це. Давайте подивимося, як це виглядає. Так що я повернуся сюди, і Я буде попередній перегляд table2.HTML. Ну, це не зовсім те, що я хотів, але це саме те, що ми просили. Ми сказали, що цей стиль збирається звернутися до нашого столу. Наш стіл тепер має один піксель Широкий, твердий синій межа навколо нього. Ми насправді не отримати в елементах таблиці. Ми просто отримувати до столу. Так CSS працював. Він прикладається стилів до нашого столу. Але не зовсім робити що ми хотіли це робити. Як ми можемо отримати, щоб зробити те, що ми хочемо це робити? 

Ну, давайте поглянемо на ще одного версія цього в table3.HTML. Так що я просто закрию ці вкладки. Я збираюся повернутися сюди, щоб мій дерево файл, і відкрити table3.HTML. Знову ж таки, це буде виглядати досить схоже тут на початку. Але зауважте, на цей раз, замість використання таблиця стилів вбудований прямо там, Я збираюся зв'язати в стилів за допомогою тега посилання. Так що я, мабуть, пов'язуючи в стилів називається tables.CSS, і це добре одно стилів просто означає: добре, Що це за файл щодо того, що Я 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.