Рекомендації по css, з чого почати (авторські)

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

інструкції:
Для того, щоб каскадні таблиці стилів (css) знаходилися в окремому файлі (тим самим вони завантажуються один раз і кешуються) необхідно створити файл стилів з розширенням * .css, наприклад /style.css (відносний шлях із слеша це важливо, і правильно !)
між тегами вставляємо тег link таким чином:

  • рекомендації
    1. На початку css коду приберіть все відступи * (margin: 0; padding: 0; font-size: 100.01%;) - останній рядок необхідна, так як всі браузери шрифти обробляю по різному (розміри)
    2. Обов'язково вказуйте за замовчуванням колір тексту і фону body, а так само розміри шрифту і використовуваний шрифт - колір фону і тексту необхідний, якщо наприклад використовується не ОС win xp або в браузері у користувача використовуються за замовчуванням свої кольори.
      На замітку: У кодуванні utf-8 шрифт 'Verdana' в IE6 не підтримує і краще рішення - не використовувати шрифт, так як вилікувати можна ie тільки через реєстр.
    3. Продовжимо по відступами, мало використовувати * краще перераховувати все, приклад:
      body, td, th, input, select, textarea (в разі, якщо використовується), тим самим ми доб'ємося однакового відображення у всіх браузерах.
      На замітку: Кожен браузер кнопки input submit, форми відображає по своєму, це важливо, коли використовується графічна частина і форми можуть спотворювати сторінку.
    4. Параметри в css зручно розташовувати в алфавітному порядку, це дозволяє працювати з великою кількістю рядків і при цьому швидко знаходити всі параметри.
    5. Коли призначаєте id, class вказуйте, для чого він використовується, наприклад:

      css: table # s-all <>

      css: div # s-body <>
    6. Назви div повинні відповідати їх логічного використання, наприклад якщо у нас є меню зліва (блок), це - sidebar, є шапка - header, head, top. Таким чином будь-який фахівець, і ви через довгий час зможете знову повернутися до коду і без праці змінити швидко, що вам потрібно.
    7. Під час верстки я раджу відкривати відразу всі необхідні браузери (я ісп. Ie6, ie7, ff, opera), щоб не допустити помилки і не втратити час на їх рішення.
      8. Це не правила, це рекомендації, якщо комусь вони показ актуальними, і ви плануєте це використовувати, я готовий розібрати і інші деталі (пишіть про них).
      Якщо допомогло, натисніть "Спасибі".

      // Сайт під ключ і інше klenovnn

      Перші етапи css. Стандартне оформлення в css

      На прохання одного з учасників форуму додаю основи по css, тут лише мала частина, яка може стати в нагоді на стадії. У повідомлення немає ніяких правил, для цього є в мережі підручники. я лише покажу як застосовуються css на практиці.

      Як підключати css ми навчилися в першому уроці, продовжимо.
      1) Вказуємо для всього документа стандартний фон, параметри тексту (розмір, колір, шрифт, відступ між рядків):
      Для цього в css пишемо:
    8. Для фону можна так само вказати зображення (а так само і фон в кольорі, якщо наприклад користувач відкриє ваш сайт без підтримки зображень):
    9. 2) Оформлення посилань
    10. 3) Основні моменти оформлення таблиць
      Відразу скажу перше - при створення таблиці, вставляємо тільки cellspacing = "0" щоб позбутися від відступів (через css метод не работет для ie, тому поки існує осів ми навіть не будемо його розглядати), значить пишемо:
    11. І основне, css код:
    12. 3) Використання класів (class) і id
      Відмінності між ними в тому, що id застосовується в документі один раз (унікальний id), тобто наприклад

      Ми вивчаємо css

      спрацює, а ось

      А ось тут Внетренняя тег p нічого не отримає.

      і для нього використовується class.

      Я віддаю перевагу id використовувати для елементів каркаса, таких як шапка, основний документ, меню, дно, а класи для їх внутрішніх документів, розглянемо один приклад:

    13. Розділ оновлюється і доопрацьовується. Пишіть тут, або в приват (бажаніше) свої заявки.

      // Сайт під ключ і інше klenovnn

      Різниця між ID і CLASS

      Різниця між id і class
      ID
      - використовується тільки один раз
      - може використовуватися один id на декількох сторінках
      CLASS
      - може застосовуватися для кількох елементів
      - може містити в собі інші класи

      Як ви помітили, id і class мають велике значення і ми постійно використовуємо їх для створення необхідного візуального оформлення. Однак робити це потрібно з розумом.

      Також уникайте наступного:
    14. Використовуючи таке значення у id, важко зрозуміти що міститься в цій секції. В даному випадку відповідним значенням було б sidebar або addcontent. Значення цих атрибутів повинні передавати інформацію про вміст елемента, а не про візуальних параметрах.

      Матеріал переведений на блозі www.alexilin.ru і взятий як ідеальне опис.

      // Сайт під ключ і інше klenovnn

      Схожі статті

      15. Copyright © 2024