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

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

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

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

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

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

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

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

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

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