20 полезных советов по CSS для начинающих

В старые времена мы очень зависим от разработчиков и программистов, которые могут помочь обновить сайт, даже если он незначительный. Благодаря CSS и его гибкости, стили могут быть извлечены независимо от кодов. Теперь, с некоторым базовым пониманием CSS, даже новичок может легко изменить стиль сайта.

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

1. использование reset.css

   Когда дело доходит до рендеринга стилей CSS, браузеры, такие как Firefox и Internet Explorer, по-разному обрабатывают их.. reset.css сбрасывает все основные стили, поэтому вы начинаете с совершенно новых таблиц стилей.

   Вот несколько часто используемых reset.css рамки - Yahoo Сброс CSS, CSS Reset Эрика Мейера, Триполи

2. Использовать стенографию CSS

   Сокращенное CSS дает вам более короткий способ написания ваших CSS-кодов, и самое главное - это делает код понятнее и проще для понимания.

   Вместо создания CSS, как это

   .header background-color: #fff; background-image: url (image.gif); повторение фона: без повтора; background-position: вверху слева; 

   Это может быть кратко в следующем:

   .header background: #fff url (image.gif) без повтора вверху слева

   Больше - Введение в CSS Сокращения, Полезные сокращенные свойства CSS

3. понимание Учебный класс а также Я БЫ

   Эти два селектора часто путают начинающих. В CSS, учебный класс обозначается точкой "." в то время как Я бы это хеш "#". В двух словах Я бы используется для стиля, который уникален и не повторяется, учебный класс с другой стороны, можно повторно использовать.

   Больше - Класс против идентификатора | Когда использовать Class, ID | Применение класса и ID вместе

4. Сила

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

   • забывать , пытаться

     Одним из величайших преимуществ CSS является использование

     добиться полной гибкости с точки зрения стиля.

     в отличие от

     , где содержимое «заблокировано» внутри

     клетка Можно с уверенностью сказать, что большинство макеты достижимы с использованием и правильный стиль, ну, может быть, за исключением массивного табличного содержимого. Больше - Столы мертвы, Столы Vs. CSS, CSS против таблиц Инструменты отладки CSS Всегда полезно получить мгновенный предварительный просмотр макета при настройке CSS, это помогает лучше понимать и отлаживать стили CSS. Вот некоторые бесплатные инструменты отладки CSS, которые вы можете установить в своем браузере: FireFox Web Developer, DOM Inspector, панель инструментов разработчика Internet Explorer и Firebug. Избегайте лишних селекторов Иногда ваше объявление CSS может быть проще, то есть если вы обнаружите, что кодируете следующее: ul li … ол ли … таблица tr td … Они могут быть сокращены до просто li … тд … Объяснение: будет существовать только внутри или же а также а также будет только внутри так что там действительно нет необходимости вставлять их заново. знание !важный Любой стиль отмечен !важный будет использоваться независимо, если под ним есть правило перезаписи. .страница цвет фона: синий! важный; фонового цвета: красный; В приведенном выше примере, цвет фона: синий будет адаптирован, потому что он помечен !важный, даже когда есть фон-цвет: красный; под этим. !важный используется в ситуации, когда вы хотите применить стиль, не перезаписывая его, однако он может не работать в Internet Explorer. Заменить текст на изображение Обычно это замена заглавие от текстового заголовка к изображению. Вот как ты это делаешь. h1 текстовый отступ: -9999px; background: url ("title.jpg") no-repeat; ширина: 100px; высота: 50px; Объяснение: Текст-отступов: -9999px; сбрасывает заголовок текста с экрана, заменяя изображение, объявленное фон: … с фиксированным ширина а также рост. Понимание CSS Позиционирование Следующая статья дает вам четкое представление об использовании позиционирования CSS - позиция: … Больше - Изучите позиционирование CSS за десять шагов CSS @Импортировать против Существует 2 способа вызова внешнего файла CSS - соответственно, используя @Импортировать а также . Если вы не уверены, какой метод использовать, вот несколько статей, которые помогут вам решить. Больше - Разница между @import и ссылкой Проектирование форм в CSS Веб-формы могут быть легко разработаны и настроены с помощью CSS. Эти следующие статьи покажут вам, как: Больше - Бестабличная форма, Форма Сад, Стилизация еще большего количества элементов управления формой Вдохновиться Если вы ищете что-то для красивого веб-сайта на основе CSS для вдохновения или просто просматриваете веб-сайт, чтобы найти хороший пользовательский интерфейс, вот несколько демонстрационных CSS-сайтов, которые мы рекомендуем: CSS Remix CSS Beauty CSS Elite CSS Mania CSS Leak Держите CSS-коды в чистоте Если ваши CSS-коды беспорядочные, вы в конечном итоге будете кодировать в замешательстве, и вам будет трудно сослаться на предыдущий код. Для начала, вы можете создать правильный отступ, прокомментировать их правильно. Больше - 12 принципов поддержания вашего кода в чистоте, Форматирование CSS-кодов онлайн Типография Измерение: ПВ против Эм Возникли проблемы с выбором, когда использовать единицу измерения ПВ или же Эм? Эти следующие статьи могут дать вам лучшее представление о типографских единицах. Таблица совместимости браузеров CSS Мы все знаем, что у каждого браузера есть разные способы рендеринга стилей CSS. Хорошо иметь ссылку, диаграмму или список, которые показывают полную совместимость CSS для каждого браузера.. Таблица поддержки CSS: # 1, # 2, # 3, # 4. Дизайн многоколонок в CSS Возникли проблемы с выравниванием левой, средней и правой колонок? Вот несколько статей, которые могут помочь: В поисках Святого Грааля Искусственные колонны Основные причины, по которым ваши CSS-столбцы испорчены Litte Boxes (примеры) Многостолбцовые макеты вылезают из коробки Абсолютные колонны Получите бесплатные редакторы CSS Выделенные редакторы всегда лучше, чем блокнот. Вот некоторые, которые мы рекомендуем: Больше - Простой CSS, Блокнот ++, CSS-редактор стиля Понимание типов медиа При объявлении CSS с помощью нескольких типов мультимедиа . печать, проекция и экран - некоторые из наиболее часто используемых типов. Понимание и правильное их использование обеспечивают лучшую доступность для пользователя. В следующей статье объясняется, как работать с типами CSS Media.. Больше - CSS и медиа типы, W3 Media Types, CSS Media Types, CSS2 Media Types 20 полезных приложений для iPhone для разработчиков и дизайнеров 20 полезных инструментов SVG для лучшей графики 20 сверхлегких и элегантных шрифтов для веб-дизайнеров Следующая статья 20 полезных дополнений Firefox для боковой панели Предыдущая статья 20 полезных приложений для максимально эффективного использования Instagram