Tip:
Highlight text to annotate it
X
>> СПІКЕР: Так що це насправді не найкращий дизайн змішуватися CSS з HTML.
Швидше, краще винести за ваш CSS, покласти його де-небудь центральний, і
якось застосувати його до теги у вашій веб-сторінці.
Щоб добитися цього, ми можемо насправді зупинити за допомогою атрибуту стилю і замість
використовувати стиль тег, який належить в Глава веб-сторінки поряд, для
Примірник, ваша назва.
>> Давайте дамо цьому спробу і повторно реалізувати Домашня сторінка для Джона Гарварда
з використанням стилю тег.
Я вже отримав нас почали тут з трьома діви для
Домашня сторінка Джона Гарварда.
Але давайте спочатку тепер підійти до цієї першої справ і додати новий атрибут,
а саме ID, і вказати, що це унікальний ідентифікатор для цього конкретного DIV
має бути, наприклад, цитата кінець цитати "Кращих", це довільне ім'я, але
описовий, що це справ є дійсно у верхній частині моєї сторінці.
>> Протягом наступного DIV, давайте дамо йому відрізняється Ідентифікатор цитатою Unquote
"Середній", і давайте дамо третій DIV Ідентифікатор цитатою кінець цитати "дна". Ми
Тепер є три унікальний ідентифікатор , До якого ми можемо застосувати деякі CSS
властивості, але спочатку давайте повернення глави цій сторінці.
Прямо над назвою тут, я буду йти вперед і визначають стиль
а потім закрийте стиль.
>> Всередині це зараз, я збираюся визначити деякі властивості CSS, а саме
ті самі, я раніше була в стилі атрибути, але тут вони будуть
централізовано визначені.
Щоб зробити це, я збираюся вказати фунт символ з наступним вершині, тим самим
уточнивши, що наступне CSS властивості повинні застосувати до будь-якої
HTML елемент має унікальний ідентифікатор вершини.
Я тоді буде мати деякі відкриті і закриті фігурні дужки, і я збираюся
вказати, скажімо, розмір шрифту повинен бути 36 пікселів, вага шрифту повинен бути сміливим.
>> Щоб усе було чисто, я ставлю кожен з цих властивостей тепер сама по собі
лінія, але це тільки стилістична умовність.
Нижче цього, давайте визначимо інший Селектор, так сказати.
Це один для HTML тега, який має унікальний ідентифікатор середині.
І тут, давайте вказати розмір шрифту з 24 пікселів, нижче, що інший
Селектор для нижньої, а всередині про це, давайте уточнимо
Розмір шрифту 12 пікселів.
>> Давайте тепер зберегти, змінити права доступу на, і завантажити цю сторінку в браузері,
CHMOD плюс г CSS-1.html.
Давайте відкрити Chrome і відвідати http://localhost/css-1.html.
Не погано.
Точно так, як я передбачав, але я хотів би, щоб приймати речі на один крок далі тепер і
Текст центру Джона Гарварда.
Тепер, щоб зробити це, я міг обернути вся сторінка в DIV, як я
зробив більш ранній приклад.
Або я можу бути розумнішими і розуміти, що всі ці діви знаходяться всередині
Тіло моїй сторінці, так чому б просто не застосовуються один або кілька CSS властивості для організму
помітити себе?
>> Щоб зробити це, давайте зробимо це.
Давайте повернемося до Gedit тут.
Давайте прокрутки назад до Style тега, і давайте вказати селектор просто
За допомогою цього тега ім'я, тіло.
Нижче цього, давайте поставимо наші фігурні дужки потім вирівнювання тексту центру.
Давайте тепер зберегти сторінку і перезавантажте це усередині цього браузера.
Перезавантаження в Chrome, і вуаля.
Тепер у нас є сторінка Джона Гарварда в центрі, як ми мали намір.