Css для новачків практичне заняття
Уміння правильно оформляти CSS код важливо для кожного веб дизайнера. Цей урок розрахований на новачків, які роблять тільки перші кроки.
При роботі з CSS необхідно бути гранично уважним. При написанні коду слід дотримуватися граничної концентрацію.
В даному уроці буде показаний приклад, як створити просту HTML сторінку використовуючи блокову верстку (без використання таблиць). А також навчимося виносити стилі в окрему таблицю стилів.
Крок №1 - Розмітка і використання тегів
Розмітка HTML завжди йде перед стилями. Немає сенсу приступати до CSS без повністю готового HTML.
HTML - гіпертекстова мова розмітки, іншими словами HTML описує структуру текстової інформації сторінки. Перш ніж ми почнемо застосовувати стилі CSS, нам необхідно навчитися застосовувати елементи структури.
При будівництві розмітки ми використовуємо "теги", які оточені кутовими дужками. Теги використовуються для визначення чого-небудь на сторінці. CSS застосовується пізніше для визначення місця (в браузері) виведення змісту того чи іншого тега.
Найпростішими тегами на сторінці є:
Найбільше тегів і контенту використовується всередині тега
.
Код для даного шаблону повинен виглядати так:
Як Ви бачите, у тегів div є ID. Це знадобиться нам для оформлення кожного осередку. ID використовується для маркування тега і надання йому унікального стилю. У той час як "class" використовується для повторюваних елементів дизайну.
Також, в прикладі використовується ще один div "wrapper", які як би "обгортає" всі інші теги. Це нам стане в нагоді пізніше для позиціонування нашої сторінки.
У таблиці стилів ми визначаємо елементи дизайну сторінки. Можна створити як внутрішню таблицю стилів, так і зовнішню. В даному уроці буде використана зовнішня.
Додайте наступний код між
:Синтаксис CSS складається з селектора, властивості і значення. Селектор - це тег, який необхідно оформити в дизайні, властивість - тип атрибута, який Ви хочете додати, значення - кількісний вимір властивості.
Селектор, крім тега body, записується в CSS починаючи з "#" або ".". "#" Визначає ID, а "." (Точка) визначає class селектора. Усередині селектора може перебувати безліч властивостей і всі вони повинні бути обрамлені <>.
Властивості і можливі значення в CSS:
Властивість "background" (фонове зображення) може задавати зображення або колір, або і те й інше. Для виведення зображення, значення має складатися з шляху до зображення. Для визначення кольору використовується шістнадцятковий код.
Властивість "color" використовується для визначення кольору селектора. Значення записуються у вигляді шістнадцятирічного коду (приклад: #FFFFFF для білого).
Властивість "font-family" дозволяє визначити шрифт, який буде використовуватися. Нормою є включення як мінімум 3-х типів шрифтів. Це робиться на випадок, якщо браузер не може відобразити перший шрифт, буде використовуватися другий і т.д. (Приклад: Trebuchet MS, Arial, Times New Roman)
Властивість "font-size" визначає розмір шрифту і має значення в пікселях.
Властивість "margin" використовується для визначення позиції селектора. Значення задають відстань сторін селектора до краю вікна браузера в наступному порядку: top, left, bottom, right. Якщо нам необхідно розмістити сторінку по центру, ми пишемо "0px auto 0px". Вказівка всіх чотирьох сторін не є обов'язковою.
Властивість "width" задає бажану ширину в пікселях будь-якого селектора.
Властивість "height" - висота в пікселях.
Властивість "float" дозволяє нам позиціонувати елементи всередині селектор, в більшості випадків справа або зліва.
Ви пройшли школу молодого бійця CSS і оформили всі селектори з допомогою вищевказаних властивостей.
Сподіваюся, урок Вам сподобався! Чекаю відгуків і побажань.
у мене спочатку все в table було, а потім поміняв на div блоки. Довго парився з правильним розташуванням, теж некоректно відображалася, але потім розібрався весь код оновив тепер ваще помилок немає навіть кнопку дали на validator.w3.org, в самому низу поставив якщо потрібні книги заходите на for-read.info
А як змусити при тому ж розташуванні блоків, код виглядати ось таким чином?
даєш цим id стилі clear і float а взагалі краще зайди на цей сайт css.manual.ru там все в подробицях пояснюється!
Потрібно взагалі заносити menu і content в новий div і там content позиціонувати по лівому краю. А в прикладі ясно видно що йде блоки чередеюще до того ж Гиріна у хедера і контенту одно у обох 900 пх. Так що нічого дивного. Взагалі всім початківцям (принаймні я так робив) вивчати блочну верстку на прикладі шаблонів які тут щодня оновлюються. Розберете 10-15 різних шаблонів, і будете верстати будь-які за складністю сайти з ПСД.
aleksey спасибі. Обов'язково подивлюся.
Спасибо) ну я по-старому, в фотошопі звик) темболее різні браузери по різному сприймають чудові сайти) а для
темболее стільки мороки з табліцаді чудовими) а в
Security а дописати щоб все працювало недоля
Прочитав, проверіл.Народ перш ніж коментувати перевірте грунтовно, а потім пишіть. Євген, спосибо за статтю.
Прочитав. Спробував сам. Так як більшість користувачів користуються IE, то побачать повну хрень. Шановна команда ruseller.com, якщо ви пишете уроки для навичков (таких як я), може відразу пояснювати, як прописувати код для коректного відображення в браузерах? Або це складно?
В HTML після
додаємо В CSS #content повинен виглядати так #contentУ цьому рядку ніяких слешів бути не повинно. Буква c просто в лапках
Контент відображається нижче, тому що в розрахунках косяк)) він повинен бути по ширині 700px, тобто wrapper-menu = content, а тому ширину контенту встановили 900, тобто рівній ширині wrapper, то він і становися нижче, а не правіше меню, тому що чисто фізично не влазіет в місце, що залишилося в 700 пікселів :)
Хлопців я поки що новачок! але і в цьому відношенні помилка контент потрібно поставити 700 пх і ще особисто у мене відступи не відображалися як це на малюнку я додав 2 рядки незнаю коректно так
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!