20 Корисні поради CSS для початківців

У старі часи, ми багато залежить від розробників і програмістів, щоб допомогти оновити веб-сайт, навіть якщо він лише незначний. Завдяки CSS і його гнучкості, стилі можуть бути вилучені незалежно від кодів. Тепер, з деяким базовим розумінням CSS, навіть новачок може легко змінити стиль веб-сайту.

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

1. Використовуйте reset.css

   Коли йдеться про перегляд стилів CSS, браузери, такі як Firefox і Internet Explorer, мають різні способи їх обробки. reset.css скидає всі основні стилі, тому ви починаєте з реальних порожніх таблиць стилів.

   Ось кілька загальноприйнятих reset.css рамки - Yahoo Reset CSS, CSS Reset Еріка Мейєра, Триполі

2. Скористайтеся коротким CSS

   Стислий CSS дає вам коротший спосіб написання кодів CSS, а найголовніше - це робить код більш прозорим і легшим для розуміння.

   Замість створення CSS подібного

   .header background-color: #fff; background-image: url (image.gif); фон-повтор: без повтору; фонове положення: зверху ліворуч; 

   Його можна коротко ввести в наступне:

   .header background: #fff url (image.gif) no-repeat ліворуч

   Більше - Вступ до скорочення CSS, Корисні властивості скорочення CSS

3. Розуміння Клас і ID

   Ці дві селектори часто плутають початківців. У CSS, клас представлена ​​крапкою "." час id це хеш "#" id використовується в унікальному стилі і не повторюється, клас з іншого боку, може бути повторне використання.

   Більше - Клас проти ідентифікатора | Коли використовувати клас, ідентифікатор | Застосування класу та ідентифікатора разом

4. потужність

5. a.k.a список посилань, дуже корисний, коли вони використовуються правильно
   або
   , особливо для стилю навігаційного меню.

   • Забудьте , спробуйте

     Однією з найбільших переваг CSS є використання

     досягти повної гнучкості в плані стилю.

     на відміну від

     , де вміст "заблоковано" в межах

     клітина. Можна з упевненістю сказати макети досяжні з використанням та правильний styling, добре можливо можливо крім масивного вмісту таблиці. Більше - Таблиці мертві, Таблиці Vs. CSS, CSS проти таблиць Інструменти для налагодження CSS Це завжди добре, щоб отримати миттєвий перегляд макета під час налаштування CSS, він допомагає краще розуміти та налагоджувати стилі CSS. Ось деякі безкоштовні засоби налагодження CSS, які можна встановити у вашому браузері: FireFox Web Developer, DOM Inspector, панель інструментів розробника Internet Explorer і Firebug. Уникайте зайвих селекторів Іноді ваша декларація CSS може бути простішою, тобто, якщо ви виявите, що кодуєте наступне: ul li … ol li … table tr td … Їх можна скоротити до простого li … td … Пояснення: буде існувати лише всередині або і і буде тільки всередині так що дійсно не потрібно повторно вставляти їх. Знаючи !важливо Будь-який стиль з позначкою !важливо буде використано незалежно, якщо під ним буде правило перезапису. .page background-color: blue! колір фону: червоний; У наведеному вище прикладі, фоновий колір: синій буде адаптована, оскільки вона позначена символом !важливо, навіть коли є фоновий колір: червоний; нижче. !важливо використовується в ситуації, коли потрібно застосувати стиль без перезапису, однак він може не працювати в Internet Explorer. Замініть текст на зображення Це звичайна практика замінити назва з текстового назви на зображення. Ось як ви це робите. h1 text-indent: -9999px; фон: url ("title.jpg") не повторюється; ширина: 100px; висота: 50px; Пояснення: text-indent: -9999px; викидає заголовок тексту за межі екрана, замінений зображенням, оголошеним фон: … з фіксованим ширина і висота. Розуміння позиціонування CSS Наступна стаття дає вам чітке розуміння використання CSS-позиціонування - позиція: … Більше - Дізнайтеся про розташування CSS за десять кроків CSS @import проти Є 2 способи викликати зовнішній CSS-файл - відповідно, використовуючи @import і . Якщо ви не впевнені, який метод використовувати, ось кілька статей, які допоможуть вам вирішити. Більше - Різниця між @import і посиланням Проектування форм у CSS Веб-форми можна легко розробляти і налаштовувати за допомогою CSS. Наступні статті показують, як: Більше - Форма без столу, Форма сад, Стайлінг ще більше форм управління НадихАтись Якщо ви дивитеся навколо красиво розробленого веб-сайту на основі CSS для натхнення, або просто переглядаєте, щоб знайти хороший інтерфейс користувача, ось деякі сайти CSS-вітрини, які ми рекомендуємо: CSS Remix CSS Beauty CSS Elite CSS Mania CSS Leak Зберігайте коди CSS чистими Якщо ваші коди CSS є брудними, ви збираєтеся в кінцевому підсумку кодувати в плутанині і з працею рецензування попереднього коду. Для початку, ви можете створити правильний відступ, прокоментувати їх належним чином. Більше - 12 принципів збереження вашого коду, Формат коду CSS Online Вимірювання типографії: px проти em Виникає проблема вибору, коли потрібно використовувати одиницю вимірювання px або em? У наступних статтях можна краще зрозуміти типографічні одиниці. Таблиця сумісності браузерів CSS Ми всі знаємо, що кожен браузер має різні способи надання стилів CSS. Добре мати посилання, діаграму або список, який показує всю сумісність CSS для кожного браузера. Таблиця підтримки CSS: # 1, # 2, # 3, # 4. Дизайн мультиколонок в CSS Виникли проблеми з вирівнюванням лівого, середнього та правого стовпців? Нижче наведено кілька статей, які можуть допомогти: У пошуках Святого Грааля Faux стовпці Основні причини, через які стовпці CSS переплутані Литтеві коробки (приклади) Багатоколонні макети піднятися з коробки Абсолютні стовпці Отримайте безкоштовні редактори CSS Виділені редактори завжди краще, ніж блокнот. Ось деякі з них ми рекомендуємо: Більше - Простий CSS, Блокнот ++, Редактор стилів CSS Розуміння типів носіїв Під час оголошення CSS з декількома типами засобів масової інформації . друк, проекція і екран є декількома типово використовуваними типами. Розуміння та їх використання належним чином дозволяють підвищити доступність для користувачів. У наступній статті пояснюється, як мати справу з типами CSS Media. Більше - CSS і типи носіїв, Типи носіїв W3, Типи носіїв CSS, Типи носіїв CSS2 20 Корисні програми iPhone для розробників і дизайнерів 20 Корисні інструменти SVG для кращої графіки 20 Ультра легких і елегантних шрифтів для веб-дизайнерів Наступна стаття 20 Корисні додатки Firefox Sidebar Попередня стаття 20 Корисні програми для отримання максимальної віддачі від Instagram