[Powered by Google Translate] [CSS] [Джозеф Ong - Гарвардський університет] [Це CS50. - CS50.TV] 

Сьогодні ми будемо говорити про CSS або каскадні таблиці стилів. 

Так що ж таке CSS? Ну, давайте розберемо термін CSS вниз на 2 частини: Каскадна і стилів. Каскадні трохи більш складним, і це те, що ми розповімо в іншому відео. Але для початку, стилів дуже багато натяків на те, що CSS робить. Він додає стилі в HTML веб-сторінки, змінити те, як веб-сторінки естетично виглядає. Це означає, що всі, починаючи від шрифту тексту для позиціонування контенту на сторінці інші цікаві речі, як зробити кутах коробки округлої або додавання тіней до тексту. Ви навіть можете робити божевільні речі, як зробити речі оживити на екрані. 

Так як ми використовуємо CSS з HTML? Візьміть це поганий вигляд сайту я тільки що написав. Якщо Роб були дивитися на цей сайт прямо зараз, він би, ймовірно, сказати щось на кшталт: "Wow! Моє знайомство виглядає жахливо. Йосип, ти страшенно дизайнер". "Використання шрифтів Times? Helvetica набагато краще". 

Так що може бути найпростіший спосіб, щоб застосувати стиль Роб хоче? Найбільш очевидний спосіб багатьох людей спочатку писав CSS було поставити те, що ми називаємо стилем декларації прав в самому елементі використанням HTML атрибут стилю. Оголошення стилю, просто складається з CSS властивості елемента HTML, ми хочемо змінити двокрапка і новий вартості майна і крапка з комою в кінці. Наприклад, припустимо, що Роб хоче чорною рамкою навколо його введення. Ми спочатку поставити атрибут стилю справ на Роба тут Потім в подвійні лапки ставити декларації CSS: "Кордони: 1px твердих чорних"; 1 піксель відноситься до ширини кордону, твердий відноситься до стилю кордон, і колір в кінці визначає, який колір кордону є. 

Якщо ми хочемо кілька стилів на елемент, писати ці заяви в певній послідовності. Наприклад, якщо Роб хоче, щоб його текст заголовка в Helvetica з синім фоном і більше простору навколо тексту, ми можемо зробити це: стиль = "сімейство шрифтів: Helvetica; фонового кольору: синій; оббивка: 5px;" Остання крапка з комою є фактично обов'язковим, але люди зазвичай зберігайте його в заради узгодженості в. 

Ми врятуємо пояснити деякі з кулера і більш складних властивостей CSS для іншого відео. Якщо у вас є щось в розумі, просто погуглити ефекту ви хочете слід CSS ймовірно, дасть вам дуже гарні результати. Саме чудове в тому, що CSS є досить широким, так що шанси, якщо є все, що ви хочете зробити - в розумних межах - CSS, ймовірно, може зробити це. Ми називаємо такий стиль вбудованого стилю. Елемент стилю, а, відповідно до початку тега. 

Для людей, які дійсно хотіли б бути організовані, Ви можете почати отримувати трохи роздратований тим, як брудно все це виглядає. Уявіть собі, що ви повинні були зробити це для кожного елемента на сторінці, плюс тепер ваш HTML і CSS всі перемішані і метушню. Валова, вірно? Щоб виправити це, люди поступово почали ловити на їхній поділ HTML розмітку від їх стилю CSS, використовуючи те, що називається CSS селектори. CSS селектори використовуються для вибору елементів, до яких застосовуються декларацій. Селектор в поєднанні з переліком декларацій CSS часто називають, як правило CSS. Ці правила будуть введені між відкриттям і закриттям HTML теги стилю, Часто в голові документа. 

Це набагато легше бачити на прикладі, так що давайте почнемо з створення простого правила CSS. По-перше, давайте стилі теги в голову розділі нашого HTML. Далі, селекторі. Почнемо з допомогою однієї з найпростіших селекторів, хеш-символу, який вибирає HTML елемент по його ID атрибуту. У цьому випадку ми виберемо справ, яке представляє введення Роба , Ввівши хеш-символу слідують ID справ, Роб. Тепер декларацій. Додамо, відкривати і закривати дужки і змінити наші раніше вбудовані декларацій про DIV Роба Усередині цих дужок, поновлення, і, прохолодному, введення Роб все ще є чорна рамка навколо нього мінус брудний потворність лінію. 

Тепер, що якщо б ми хотіли, щоб вибрати h1 всередині інтро Роба? Ви можете подумати: "Давайте поставимо ID на ньому, а потім перемістити наші попередні стилі". Це працює, але CSS є й інші способи дозволяючи вам вибирати елементи за допомогою того, що ми називаємо комбінатори змішувати простих селектор. Наприклад, символ пробілу може бути використаний як комбінатора вказати всі випадки з 1 селектора, які живуть всередині іншого вибору. Це звучить набагато складніше, ніж є насправді. Ось приклад. Ми будемо вводити # грабувати, додати простору, і слідувати йому з h1, ще один простий селектор називається міткою селектор, який вибирає типи елементів як діви або пунктах. Простір об'єднує наші 2 простих селекторів, застосовуючи всі CSS декларацій і фігурні дужки тегів h1, які живуть всередині елемента з ID = "грабувати". Просто, щоб переконати вас, що це працює, я змінити колір шрифту на білий, поновлення, і, дивіться, заголовок Роба тепер білий. 

Вся ця робота йде, щоб показати, що за допомогою правил, а не вбудованих стилів ми можемо отримати набагато чистіше код. У самому справі, якщо цей стиль блоку починає отримувати трохи вищу, Я навіть можу витягнути з цих стилів в інший файл взагалі. 

Щоб включити цей новий файл CSS в цьому документі я буду використовувати посилання тегів HTML. Ось я кажу, що я зв'язків у зовнішній таблиці стилів, отн атрибуту, і вказати шлях до файлу з моєї HREF атрибуту. Тепер мій HTML розмітка і CSS організовані добре в абсолютно окремих файлів, яка майже завжди спосіб дизайнери воліють працювати з HTML і CSS. 

У випадку, якщо вам цікаво, простих селекторів включають ID селектори і селектори тегів, як ті, які ми тільки що бачили а також клас селекторів для вибору елементів з певним класом, селектори атрибутів для вибору елементів за іншими ознаками, як тип = "радіо" для радіо-кнопки входу, і pseudoselectors як парити і зосередити для визначення стилю, коли взаємодія люблю мишею на елементі відбувається. 

Загальні комбінатори включати прогалини для всіх дітей і коми відрізнити селектори. Інші ви можете зіткнутися включають стрілки для прямого дітей тільки, тильди для всіх братів і сестер, які відбуваються після елементів, і плюс за 1 брат, який приходить відразу після елемента. 

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

Я Йосип, і це CS50. 

[CS50.TV] 

Ну, з чого ж почати? Дозвольте мені зробити це без - [сміється] Добре. Додати - Дозвольте мені змінити це формулювання. Ох. Вибачте.