Css — Нужна помощь


Содержание

Заключение. Рекомендации по CSS

Заключительный урок нашего учебника по CSS мы хотели бы посвятить рекомендациям по организации работы с таблицами стилей. Вы уже хорошо знаете, как стилизовать элементы веб-страницы, однако профессионала отличает не только умение писать стили, но и навыки ведения и оформления самих CSS-файлов. Как быстро можно разобраться в вашей работе? Легко ли использовать и поддерживать ваш код? Давайте рассмотрим основные моменты, которых важно придерживаться веб-разработчикам.

Комментирование кода

Когда вам (или другому разработчику) приходится обращаться к CSS-таблице через продолжительное время (месяц, полгода, год и т. п.), то при взгляде на код может возникнуть вопрос: «К чему он относится? Каково его действие?». Чтобы таких вопросов не возникало либо возникало меньше, необходимо добавлять комментарии к коду. Конечно, не нужно комментировать, что делает каждое свойство. Однако описательный комментарий будет уместным, например, возле кода CSS-анимации, при взгляде на который можно не сразу понять, что он делает.

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

Понятные имена для селекторов

У профессионала должен быть развит такой навык как умение давать хорошие имена селекторам. Как правильно придумывать названия? Первый совет: не называйте селектор, исходя из цвета или местоположения элемента. Это те вещи, которые с высокой долей вероятности могут быть изменены в ходе доработки дизайна. Клиент может прислать правки, где попросит сделать кнопку не зеленой, а голубой, и если вы уже назвали класс .green-button , возникнут проблемы: придется либо везде менять .green-button на .blue-button , либо оставить всё как есть, но потом это будет вводить вас (или другого разработчика) в заблуждение. То же самое касается привязки к местоположению: элемент .left-block вскоре может стать элементом .right-block , потому что дизайнер или заказчик так захотел. И вновь вы столкнетесь с проблемой несоответствия имени.

Так как же называть селекторы? Более правильным будет давать такие имена, которые указывают на назначение элемента либо действие стиля. Например, кнопка отмены может называться .cancel-button , форма для обратного звонка — .callback-form , всплывающее окно — .popup-window и так далее. Если вы создаете класс для выравнивания текста по центру, то будет уместным назвать его как-то вроде .text-center :

Также не стоит давать селекторам бессмысленные имена вроде #b1 , .sb , .abc и т. п., поскольку потом ни вы, ни другие разработчики не сможете понять, что же означают эти загадочные названия.

Несколько классов для одного элемента

Может возникнуть ситуация, когда у вас есть набор элементов с почти одинаковыми стилями, которые отличаются лишь одной-двумя строками. К примеру, представьте, что вам нужно создать кнопку .button и использовать ее на странице три раза. Стиль всех кнопок идентичен:

Однако первая кнопка должна быть выровнена по левому краю, вторая — по центру, а третья — по правому краю. Как это сделать? Самое очевидное решение — создать дополнительные классы специально для выравнивания блочного элемента:

По сути, класс .block-left можно и не создавать, поскольку наша кнопка по умолчанию примыкает к левому краю. Итак, нужный класс теперь можно использовать в паре с классом .button :

К элементу будут применяться стили сразу от двух классов, и если вам вдруг понадобится изменить выравнивание кнопки, вы можете просто переписать класс на другой.

Группирование стилей

Если ваша таблица стилей содержит всего десяток правил, то проблем с ее восприятием не возникнет. Но в реальной жизни даже совсем небольшой проект может иметь более 500 строк CSS-кода. И если вы будете записывать все правила подряд, без разбивки на группы, вы очень скоро запутаетесь в своей же работе. Отыскать нужное правило будет сложно, поддержка такой CSS-таблицы превратится в мучение.

Если вы проходили практические уроки данного учебника, то помните, что мы делили таблицу стилей на разделы при помощи комментариев и говорили вам записывать стили в соответствующую группу.

Железных правил относительно организации групп в CSS-файле не существует. Однако есть несколько популярных приемов, которые помогут удобно сгруппировать стили:

Группируйте стили, которые относятся к определенной секции страницы. Например, стили для шапки сайта помещайте в одну группу, стили для футера — в другую, стили для навигации — в третью и т. д.

Группируйте стили, относящиеся к одной задаче. К примеру, стили для разметки размещайте в одной группе, стили для форматирования — в другой и т. д.

Для выделения групп используйте обычные CSS-комментарии. Это общепринятый способ создания разделов в таблицах стилей. Комментарии старайтесь оформлять так, чтобы они были хорошо заметны. Например:

Вы можете придумать другой удобный для себя вариант оформления комментариев, главное, следите за тем, чтобы комментарий начинался с символов /* и заканчивался символами */ , и между ними не было такой же комбинации символов (во избежание ошибок).

Несколько CSS-таблиц

Когда таблица стилей расширяется до огромных размеров, становится неудобно искать и редактировать в ней стили. В этом случае удобным решением может стать разделение одной CSS-таблицы на несколько файлов. Безусловно, здесь нужно иметь чувство меры: не стоит создавать 20-40 штук файлов со стилями для каждой секции сайта (это сильно загрузит веб-сервер), однако будет разумным разъединить большие группы стилей. Например, вы можете поместить код разметки в файл layout.css , основные стили — в main.css , медиа-запросы — в media.css и т. д.

Затем понадобится подключить все эти файлы к HTML. Можно добавить каждый файл по отдельности через тег
, но есть способ получше: создайте отдельную внешнюю таблицу стилей (скажем, styles.css ), внутри которой используйте правило @import для подключения всех остальных таблиц стилей:

В принципе, это весь код, который должна содержать таблица styles.css . Подключите ее к HTML-документу (другие таблицы подключать этим образом не нужно):

Теперь, когда веб-страница будет загружаться, браузер загрузит файл styles.css , который, в свою очередь, скажет браузеру загрузить три остальные таблицы стилей.

Препроцессоры CSS

Если вы стремитесь к быстрому и эффективному написанию CSS-кода, обратите внимание на препроцессоры CSS. Препроцессор позволяет писать CSS-стили по определенным облегченным правилам, после чего этот код преобразуется в обычный CSS, который вы разместите на сервере.

Среди преимуществ препроцессоров стоит выделить:

Переменные CSS. С помощью препроцессора вы можете определять CSS-переменные, которые хранят нужные значения. Например, если вам необходимо использовать определенный цвет для многих элементов сайта, вы указываете этот цвет в формате HEX каждый раз для каждого элемента. Если потом понадобится изменить этот цвет на другой, вам придется проходиться по всем стилям, где он используется. Переменная CSS позволяет указать этот цвет один раз, в начале таблицы стилей. Если затем вам придется менять этот цвет, вы просто поменяете значение в переменной.

Добавление префиксов. В нашем учебнике мы не раз упоминали о необходимости дописывать префиксы производителей к некоторым свойствам. Препроцессор CSS избавит вас от необходимости делать это и добавит все необходимые вендорные префиксы сам.

Объединение CSS-файлов. При разработке удобно хранить CSS-стили разного назначения в отдельных файлах. Но при загрузке нескольких таблиц стилей увеличивается количество обращений к веб-серверу. И когда идет борьба за каждую миллисекунду в скорости загрузки сайта, может понадобиться объединить все CSS-таблицы в один большой файл. Препроцессор позволяет держать ваш код CSS в разных файлах для удобства разработки, а в качестве финального файла, который будет размещен на сервере, объединить все стили в одну внешнюю таблицу. Он также уберет из конечного файла все лишнее, включая комментарии.

Самые распространенные препроцессоры

, а на другой — тег

Существуют и другие модели организации кода: BEM, SMACSS, Atomic CSS и т. д. У каждого из этих подходов есть свои преимущества и недостатки. Какой из них выбрать — решать вам как разработчику, опираясь на собственный опыт и предпочтения. Кроме того, ничто не мешает вам выработать свой способ организации CSS. Быть может, именно придуманный вами вариант позволит веб-разработке подняться на новый уровень!

Завершение

Итак, наш учебник подошел к своему завершению. Поздравляем вас с окончанием обучения и благодарим каждого нашего читателя за то, что выбрали нас в качестве отправной точки в изучении языка CSS. Вы всегда можете обратиться к учебнику за подсказками, а также воспользоваться поиском по сайту, чтобы быстро найти определенную информацию.

Нужна помощь по HTML(формы)

В форме, при наведении курсора на поля checkbox и radio, должна вокруг этих полей появляться прерывистая рамка.

2 ответа 2

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css checkbox html-form radio или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.13.35429

Что можно сделать с помощью CSS?

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

Прошу запомнить: некоторые из этих демонстрационных примеров реализованы только для того, чтобы показать, каким мощным стал CSS. Я еще расскажу, почему некоторые из этих демок стоило бы перенести на JavaScript.

Цукерберг рекомендует:  Java - Отличие POJO от обычного класса,Java

И еще: чтобы не усложнять, я предоставлю только необходимые фрагменты HTML и CSS. Не стоит ожидать, что при копировании материала из статьи возымеет такой же эффект, как и в нижеприведенных демках. Но если вы хотите посмотреть полный код примера — можно перейти на сайт CodePen, также в конце статьи я предоставлю ссылку на файлы с исходным кодом.

Пример простой формы

Ниже представлен вариант оповещения пользователя при заполнении формы.

Тут представлены три текстовых поля, в качестве меток используются заполнители. Конечно, это не очень хорошо сказывается на пользовательском взаимодействии, но я попадал во многие ситуации, когда главный дизайнер запрещал использование видимых меток.

Мое решение этой надуманной проблемы состоит в том, чтобы преобразовать метки в “всплывающие напоминания”, когда пользователь переводит фокус на поле ввода:

Как видно в этом участке HTML нет никакой магии. Единственная непривычная вещь заключается в том, что элемент размещается за полем ввода.

А вот этот кусок CSS заставит все это работать:

Первый блок CSS — это стили по умолчанию для полей ввода. Стиль .form-row удерживает абсолютно спозиционированный элемент .label-helper рядом с соответствующим полем ввода.

Элемент .input-text спозиционирован относительно, а z-index к нему применен потому, что мы не хотим, чтобы метка перекрывала поле ввода при переходе.

А вот и CSS, который обрабатывает показ метки при смене фокуса:

Важным моментом является использование псевдо-класса :focus в комбинации с селектором соседних элементов + (селекторы соседних элементов играют важную роль в наших демонстрационных примерах).

Поэтому нам и надо размещать метки после полей ввода, так как иначе не будет работать селектор соседних элементов.

Проще говоря, когда элемент попадает в фокус, соседний элемент (метка) становится видимым, и изменяет свое положение так, чтобы оказаться над полем ввода, и предоставляет пользователю подсказку, так как заполнитель поля более не отображается.

В качестве небольшого дополнения я подсвечиваю поле ввода email-а, если в нем ошибка. Так как поля ввода не поддерживают псевдо-элементы, ошибка ‘x’ применяется к метке.

Несколько более сложных вариантов использования

Приведенный выше пример обретает популярность. Как я знаю, я не первый и не последний, кто использовал эффект для отображения подсказки.

Переходы для одностраничных сайтов

Codrops опубликовал пример полноэкранных макетов с эффектами перехода в апреле 2013. Мне всегда казалось, что это очень круто, и я хотел попробовать воссоздать этот эффект, или же что-то похожее на него, но только без JavaScript.

Немного поигравшись, я таки сделал это:

Возможно, вы заметили использование элементов в начале каждого раздела. В CSS мы будем основываться на них, так как нам также нужно опираться на селекторе соседних элементов (+), чтобы заставить работать эффекты перехода.

Проще говоря, мы будем использовать состояние :checked переключателей, которые будут активироваться кликом по соответствующей метке, и с помощью селектора соседних элементов мы будем менять их размещение с помощью простого CSS.

А вот и сам CSS:

Вышеприведенный CSS обеспечивает стилизацию “кнопок”, а также скрывает переключатели, отключая их отображени и прямое взаимодействие.

Элементы .page-label и .page-label span используются для больших кнопок-панелей, тогда как класс .exit-label стилизует кнопку “закрытия” открытой панели (опять же, метки, стилизованные под кнопки).

Тут у нас настройка контейнеров панелей (разделов) и их содержимого. Контейнеры имеют размер 50% от общей высоты и ширины, что похоже на соответствующий пример с Codrops.

Разделы позиционируются с помощью transform: translate, вместо того, чтобы использовать позиционирование сверху/слева/снизу/справа. Это потому, что трансформации лучше сказываются на производительности, так как они не требуют интенсивной перерисовки, как это происходит в случае со сменой позиции элемента.

А вот и веселая часть, где мы проверяем, если переключатель был выбран, и если так, то:


  • .section-container изменяет свои размеры до полной высоты и ширины, и трансформируется в верхнее левое положение окна браузера
  • кнопка закрытия и содержимое раздела становятся видимыми
  • метка, на которую кликнули, становится невидимой, так что по ней больше нельзя кликнуть, и не перекрывает содержимое секции, которое только что было отображено
  • секциям, которые не были выбраны, проставляется граница, которая увеличивается до размера 40px, симулируя эффект “уменьшения” на фоне секции, которая разворачивается на весь экран.

Альтернативные эффекты перехода

На основе слегка переделанной разметки из предыдущего примера, я представляю еще два примера, которые следуют тем же концепциям, что и прошлый пример.

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

Они используют переключатели и метки для обхода необходимости использования семантически корректных кнопок, и JavaScript, необходимого для контроля этих кнопок. Для зрячих пользователей, которые просматривают страницы с помощью мыши и сенсорных экранов, не возникает каких-либо проблем с просмотром этих демонстрационных примеров. Но если мы хотим, чтобы и пользователи, использующие для навигации клавиатуру тоже не испытывали проблем с просмотром, необходимо будет вернуться к использованию JavaScript для написания семантически корректного кода и манипуляции разметки. Также нужно будет писать еще больше JavaScript кода для того, чтобы применять к элементам корректные ARIA атрибуты, и корректно обрабатывать клавиатурные команды, чтобы элементы нашей страницы корректно вели себя при использовании клавиатуры.

Честно говоря, мне было нелегко заставить работать эти примеры, и я не хотел браться за написание дополнительного JavaScript, который бы обеспечил соблюдение стандартов доступности — проще было бы использовать подходящие по семантике элементы и обрабатывать их с помощью JavaScript.

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

Смена макета с помощью :target

Немного изменив CSS и разметку, можно добиться такого же поведения, как в примерах с навигацией с помощью переключателей, но используя ID и псевдо-класс :target .

Давайте посмотрим на изменения в разметке:

вместо использования переключателей и селектора соседних элементов, теперь мы используем ID каждого из элементов-контейнеров. Вместо переключателей роль “кнопок” играют ссылки-якоря, что куда как более семантически правильно.

Вот CSS, который претерпел большее количество изменений:

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

Селекторы меток были заменены на использование атрибута href вместо атрибута for , и у нас получилось отказаться от использования переключателей.

Так как теперь мы используем :target для того, чтобы ссылаться на разные разделы, то селекторы :checked + были заменены на соответствующие селекторы :target . Если ранее можно было объявить один единственный селектор :checked + для всех вариантов, то использование селектора :target требует от дублировать его для каждого URI.

Необходимость писать такое количество селекторов, конечно, минус по сравнению с вариантом с переключателями. Но замечу: этот вариант более правильный с точки зрения семантики.

ПО правде говоря, если мы хотим сделать этот пример доступным всем пользователям, необходимо будет использовать дополнительные ARIA атрибуты для каждой из наших активных областей, которые мы сделали визуально похожими на кнопки, но которые на самом деле являются ссылками (что имеет значение по причинам доступности для людей с ограниченными возможностями). И простого добавления ARIA атрибутов недостаточно, так как при смене состояния, атрибуты вроде aria-hidden должны быть обновлены, а фокус должен быть смещен с предыдущего активного элемента на текущих, и это требует наличие JavaScript кода. В этом случае потребуется меньшее количество JavaScript кода, чем в оригинальной версии данного примера.

И дополнительным плюсом или минусом является тот факт, что если кто-то, переключившись на конкретный блок, запишет или добавит в закладки URI страницы, то при переходе по этой ссылке он проскочит нормальное состояние страницы. Опять же — это может быть как плюсом, так и минусом, в зависимости от преследуемых целей. Но об этом надо помнить.

В завершение

CSS — мощный инструмент, который позволяет делать множество вещей, для которых мы ранее использовали Javascript или jQuery. Но нужно избегать реализации решений, которые могут стать настоящим кошмаром в доступности для пользователей с ограниченными возможностями, если чересчур увлечься использованием CSS.

Напоследок напомню — убедитесь, что вашими экспериментами вы не добавили пользователям хлопот с использованием вашего приложения. И в случае с веб-приложениями, возможно, лучше сильно не мудрить, и использовать JavaScript для реализации переходов между состояниями. Но приведенные примеры больше служат для вдохновения, чем являются призывом к использованию.

Продвинутые CSS-селекторы, о которых вы не знали

В каскадных таблицах стилей элементам страницы присваиваются значения атрибутов id и CSS class для того, чтобы стилизовать их. Но что делать, если у вас нет доступа к коду, чтобы добавить эти? К счастью существуют динамические селекторы, которые являются единственным решением в этой ситуации.

Введение

Дальше я собираюсь рассказать о работе селекторов атрибутов, но рекомендую с самого начала применять идентификаторы и классы, так как использование селекторов не всегда полезно. В процессе поиска элемента ( CSS или JavaScript ) браузеру приходиться « обойти » весь DOM страницы, чтобы найти нужный.

При использовании селекторов атрибутов на поиск затрачивается больше ресурсов и времени. Поэтому не стоит злоупотреблять селекторами и применять вместо них CSS id или class . Их нужно использовать только в том случае, если нет другого выхода. Например, когда HTML-код генерируется динамически, и вы никак не можете добавить в него классы или идентификаторы.

Селекторы атрибутов

($=) – атрибут оканчивается определенным значением

Выбор элемента с помощью CSS , значение которого заканчивается определенным символом ( суффиксом ) выглядит следующим образом:

Атрибут id$ находится внутри скобок элемента div . Обратите внимание, что вместо тега div можно указать любой другой HTML-элемент от input до span и так далее. Этот пример идеально подойдет для выбора элемента, если суффикс внутри атрибутов формируется динамически.

Чтобы выбрать этот элемент div , нужно использовать следующий селектор:

Нам необходимо указать $ после id атрибута в скобках. Затем в кавычках добавить суффикс элемента, на который нацелились:

Этот селектор можно использовать для любых элементов ( div , span , img и т.д. ), а также любых их атрибутов ( id , name , value и class HTML CSS ).

(^=) — атрибут начинается с определенного значения

Можно выбирать элементы, значение атрибутов которых начинается с определенного префикса. Делается это по аналогии с описанным выше селектором ( $= ):

Селектор будет выглядеть следующим образом:

Единственное отличие двух описанных CSS class selector состоит в том, что перед знаком = (равно) указываются разные символы. В этом примере использован атрибут class , вместо id .

(* =) — атрибут содержит некоторое значение

Что делать, если и префикс и суффикс атрибутов генерируется динамически? В данном случае нужно найти элемент, значение атрибута которого содержит параметр:

Цукерберг рекомендует:  Access - СУБД Расписание MS ACCESS

Выбор этого элемента будет выглядеть следующим образом:

Таким образом, любой div , который содержит название класса “ logoutPanel ” будет выбран и к нему будут применены определенные стили.

(=) – атрибут со значением

Это еще один способ выбора элемента с определенным значением id , CSS class , name , value и т.д.:

Можно обратиться к элементу div , используя указанный выше атрибут = или через атрибут класса:

Краткий обзор селекторов атрибутов:

  • = значение атрибута эквивалентно определённым символам;
  • $= значение атрибута оканчивается определенными символами;
  • ^= значение атрибута начинается с определенных символов;
  • *= значение атрибута содержит определенные символы.

Псевдоклассы селекторов

Перед тем, как задать параметры class в CSS , нужно понимать, что псевдоклассы селекторов – это CSS селекторы с двоеточием перед ними. Многие из них часто используются для ссылок или интерактивных элементов:

Это удобно, когда необходимо получить доступ к каким-либо элементам, находящимся в определенном состоянии.

Псевдокласс :not(x)

Селектор псевдокласса :not(x) удаляет из набора определенные элементы на основе переданного параметра. Это полезно при стилизации всех элементов:

С его помощью можно выбрать все элементы за исключением элемента с классом highlight , как в этом примере:

Можно пойти дальше и выбирать любые атрибуты.

Псевдоэлемент ::first-letter

В CSS кроме псевдоклассов существуют и псевдоэлементы. К ним как раз относится псевдоэлемент ::first-letter . С его помощью можно стилизовать первую букву любого абзаца. Этот эффект часто применяется в печатных изданиях. Создать заглавную букву при помощи псевдоэлемента ::first-letter довольно просто:

Если не хотите стилизовать первые буквы в каждом абзаце, можно выбрать только первый абзац во всем тексте. Для этого нужно использовать вместе псевдокласс и псевдоэлемент ( :first-child и ::first-letter ):

Этот подход освобождает от необходимости использования JavaScript .

Псевдокласс :first-of-type

Этот псевдокласс я использую довольно часто. Он позволяет выбрать первый элемент определенного типа внутри родительского и применить к нему CSS class :

Псевдокласс :last-of-type

:first-of-type не бывает без :last-of-type . Как вы уже наверное догадались, этот селектор работает противоположно селектору :first-of-type :

Заключение

Вы познакомились с « продвинутыми » CSS class selector , о которых не слышали раньше или никогда не сталкивались с ними. В любом случае я рекомендую вам ознакомиться с ними поближе и, возможно, вы будете чаще использовать их для решения своих повседневных задач по верстке.

Данная публикация представляет собой перевод статьи « Advanced CSS Selectors you never knew about » , подготовленной дружной командой проекта Интернет-технологии.ру

Css — Нужна помощь

Верстаю два вложенных блока:

все вроде норм как на картинке слева.

Как только добавляю отступы в:

padding: 100px 10 px 10px 10px;
>

получается картинка справа. т.е. родительский блок вытягивается вниз примерно на величину этих отступов.
содержимое DIV2 при этом как ему и положено смещается внутри блока на указанные значения.

Причем получается в Опере и в Лисе, Осел нормально переваривает.

чего то не могу врубиться почему так.

07.09.2008, 15:50 #2

т.е. вот так на самом деле:


(сорри за невольный ап)

07.09.2008, 15:51 #3

Нет — они должны быть по определению.

Потом повторюсь:
эффект появляется только после добавления указанной строчки. Никаких других изменений.

position: absolute;
width: 984px;
height: auto;
background-image: url(img/fon.gif);

left: 50%;
margin-left: -492;
margin-bottom: 15px;
padding: 28px 0px 8px 0px;
>

width: 968px;
height: 199px;
background-image: url(img/image.jpg);
background-repeat: no-repeat;

left: 50%;
margin-left: 8px;

padding: 115px 10px 10px 15px;

font-size: 10pt;
>

07.09.2008, 15:51 #4
07.09.2008, 16:20 #5
07.09.2008, 16:30 #6
07.09.2008, 16:43 #7

sabotage так я верстаю не первый раз. и даже не сомневаюсь что у тебя все получается, т.к. разбуди меня ночью и спроси — скажу что так и должно быть. Я не понимаю почему у меня такой косяк вылезает (хотя и не должен). Хоть плачь!
Потому и спрашиваю. Может кто сталкивался с такой траблой. Причем от Осла всегда ждешь приколов, но тут, наоборот: Опера и Лиса.

Причем ладно бы только Опреа — я бы искал глюк, но когда и в Лисе то же самое — руки опускаются.

Вот полный код если что, вдруг мысли будут (жирным выделена эта собака):

30 лучших CSS техник для начинающих

Дата публикации: 2009-10-06

CSS — это язык, который использует почти каждый разработчик. Хотя это язык, который мы подчас воспринимаем как должное, он мощный и имеет множество нюансов, которые могут помочь (или повредить) Вашим проектам. Вот тридцать лучших техник, CSS, которые позволят вам корректно использовать CSS и избежать некоторых дорогостоящих ошибок.

1. Сделайте css код доступным для чтения

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

При написании CSS, большинство разработчиков, относятся к одной из двух групп.

Группа 1: Все на одной строке

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Группа 2: Каждый стиль получает свою собственную строчку

Обе эти практики являются вполне приемлемыми, хотя в целом считается, что вторая группа презирает первую! Просто помните — выбирайте метод, который выглядит лучше ДЛЯ ВАС. Это все, что имеет значение.

2. Держите свой css код в соответствии

Убедитесь, что CSS является последовательным. Вы должны начать разрабатывать собственный «суб-язык» CSS, что позволяет быстро давать имена. Есть определенные классы, которые я создаю почти в каждой теме, и использую то же имя каждый раз, при создании новой работы. Я, например, использую » .caption-right» Float изображения, которые содержат подпись с правой стороны.

Подумайте о таких вещах, как использовать или нет подчеркивания и тире в вашем ID и именах классов, и в каких случаях их использовать. Когда вы начнете создание своих собственных стандартов CSS, вы станете гораздо более опытными.

3. Начните с Framework

Некоторые дизайн — пуристы, решив поиздеваться, начали использовать Framework CSS в каждом дизайне, но я считаю, что если кто-то уже создал инструмент, который ускоряет производство, то зачем изобретать колесо? Я знаю, Framework, не должны использоваться в каждом конкретном случае, но в большинстве случаев они могут помочь.

Многие дизайнеры имеют свои собственные Framework’и, которые они создали с течением времени, и это тоже отличная идея. Это помогает сохранить последовательность в Framework проектах.

Я не согласен. CSS Framework — фантастический инструмент… для тех, кто умеет им пользоваться.
Это не вопрос изобретения колеса, а скорее вопрос понимания, как работает колесо.

Если вы только знакомитесь с CSS, я лично рекомендую, чтобы вы оставались в стороне от этих Framework по меньшей мере год. В противном случае, вы будете только путать себя. Учиться CSS … затем срезать углы!

4. Используйте Сброс

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

MeyerWeb является популярным сбросом вместе с разработчиком сбросов Yahoo. Или вы всегда можете создать собственный сброс.

5. Организуйте стиль с нисходящей структурой

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

Обобщенные классы (body, a, p, h1 и т.д.)

Не забывайте комментировать каждый раздел!

6. Смешивайте элементы

Элементы стиля иногда имеют одинаковые свойства. Вместо переписывания предыдущего кода, почему бы не объединить их? Например, ваш H1, H2 и Н3 элементы имеют одни и те же шрифт и цвет:

Мы могли бы добавить уникальные характеристики каждому из этих заголовков стилями, если мы хотим (т.е. h1 < size: 2.1em>) в конце таблицы стилей.

7. Создайте сначала HTML код макета

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

8. Используйте нескольких классов

Иногда бывает полезно добавить несколько классов для одного элемента. Давайте предположим, что у вас есть

Вы можете добавить сколько угодно классов (разделенных пробелами) в любой декларации.

Будьте очень осторожны при использовании имен классов «right» и «left». Я буду их использовать, но только для таких вещей, как блог. Как же так? Давайте представим, что дальше вы решите, что лучше видеть поле всплывающим слева. В этом случае, вам придется вернуться на HTML и изменить имя класса — все для того, чтобы изменить дизайн на этой странице. Это бессмысленно. Помните — HTML для разметки и содержания. CSS — для оформления.

Если вам необходимо вернуться к HTML, чтобы изменить дизайн на этой странице, то Вы делаете ошибку!

9. Используйте правильный тип документа

Декларация типа документа (doctype) имеет значение в вопросах наличия или отсутствия разметки и CSS. В самом деле, весь внешний вид вашего сайта может сильно измениться в зависимости от DOCTYPE, который вы заявляете.

Узнайте больше о том, какие типы документа используются на List Apart.

10. Используйте сокращения

Вы можете уменьшить ваш код с помощью Значительных сокращений. Для таких элементов, как padding, margin, font и некоторых других, вы можете сочетать стили в одной строке. Например, Div этих стилей:

Вы можете комбинировать эти стили в одной строке, например так:

Если вам нужна дополнительная помощь, вот всеобъемлющее руководство по свойствам CSS сокращений.

11. Оставляйте Ваши комментарии в CSS коде.

Как в любом другом языке, это замечательная идея комментировать свой код в секции. Чтобы добавить комментарий, просто добавьте / * комментарий, и * /, чтобы закрыть его, вот так:

12. Понимайте разницу между блочными и строчными элементами

Блочные элементы являются элементами, которые четко занимают каждую строку после их объявления, охватывают всю ширину свободного пространства. Строчные элементы занимают лишь столько места, сколько им нужно, и не перескакивают на новую строку после использования.

Вот списки элементов, которые могут быть строчными или блочными:

И блочные элементы:

13. Отсортируйте свойства в алфавитном порядке.

Хотя это скорее легкомысленный отзыв, он может пригодиться для быстрого сканирования.

Э-эх … жертвовать скоростью для лучшей читабельности? Я бы не стал- но решайте сами!

14. Используйте CSS Компрессоры

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

15. Исползуйте классы Generic

Вы обнаружите, что существуют определенные стили, которые Вы применяете снова и снова. Вместо того, чтобы добавлять особый стиль для каждого ID, Вы можете создать общие классы и добавить их идентификаторы или другие классы CSS (с использованием совета № 8).


Например, я считаю, что я использую Float: right и Float:left снова и снова в моей конструкции. Поэтому я просто добавляю классы .left и .right в мой стиль, и ссылаюсь на них в элементах.

Таким образом, вам не нужно постоянно добавлять «float: left», чтобы все элементы, которые необходимы, всплыли.

16. Используйте «Margin: 0 auto» для центрирования

Многие новички в CSS не могут понять, почему вы не можете просто использовать Float: center для достижения центра влияния на блочные элементы. Если бы все было так просто! К сожалению, вы должны будете использовать

для центровки Div-а абзацев и других элементов в макете.

17. Не всегда оборачивайте элементы в DIV

Когда вы начинаете, есть соблазн обернуть элемент в Div, создать для него стиль

Иногда может показаться, что легче просто создать уникальные стили элементов, как в примере выше, но вы начнете наводить беспорядок в вашем CSS. Это бы прекрасно работало:

Тогда вы сможете легко добавлять стиле h1, вместо родительского Div.

18. Используйте Firebug

Если вы еще не загрузили Firebug, то остановитесь и сделайте это. Серьезно. Это небольшой инструмент, который должен иметь любой веб-разработчик. Среди многих функций, которые поставляются с расширениями Firefox (отладки JavaScript, HTML проверить, найти ошибки), можно также визуально проверить, изменять и редактировать CSS в режиме реального времени. Вы можете узнать больше о том, что делает Firebug на официальном сайте Firebug.

19. Меньше Hack

Избегайте использования хаков, если это возможно. Конечно, дизайн должен выглядеть одинаково во всех браузерах, но использование только хаков делает ваши дизайны трудно поддерживаемыми в будущем. Кроме того, использование сброса файла (см. № 4) может устранить почти все неровности между браузерами.

20. Умеренно используйте абсолютное позиционирование

Абсолютное позиционирование является удобным аспектом CSS, который позволяет вам определить, где именно элемент должен быть расположен на странице в точном пикселе. Однако из-за игнорирования абсолютного позиционирования другими элементами на странице, макеты могут получить довольно “корявыми”, если есть несколько абсолютно позиционируемых бегающих элементов в макете.

21. Используйте Text-transform

Text-transform является весьма полезным свойством-CSS, что помогает «стандартизированно» форматировать текст на вашем сайте. Например, Вы желаете создать некоторые заголовки, которые прописываются только строчными буквами. Просто добавьте text-transform в заголовок стиля вот так:

Теперь все буквы в заголовке будут строчными по умолчанию. text-transform позволяет вам изменить ваш текст (первая буква заглавной, все буквы заглавной или строчными буквами).

22. Не используйте отрицательные поля, чтобы скрыть h1

Часто люди используют свое изображение для текста заголовка, а затем используют display:none или отрицательный margin для выравниванияh1 на странице. Matt Cutts, глава Webspam команды Google, официально заявил, что это плохая идея, Так как Google может подумать, что это спам.

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

23. Проверьте Ваш CSS и XHTML

Проверка Вашего CSS и XHTML поможет вам быстро найти место ошибки в коде. Если вы работаете над дизайном, и почему-то некоторые вещи не выглядят так, как нужно, попробуйте HTML и CSS валидатор и посмотрите, какие ошибки всплывают. Как правило, вы обнаружите, что вы забыли закрыть Div где-нибудь или пропустили запятую в свойстве CSS.

24. Ems против Пикселей

Всегда были упорные обсуждения, будет ли лучше использовать пиксели (px) или емы (em) при определении размеров шрифта. Пиксели — более статичный способ определения размеров шрифта, емы более масштабируемое, с различными размерами. С появлением различных типов просмотра веб-страниц (ноутбук, мобильный и т.д.), емы, все чаще становятся по умолчанию для измерения размера шрифта, поскольку они допускают наибольшую гибкость формы. Вы можете узнать больше о том, почему вы должны использовать em для размеров шрифта в этой ветке форума вдумчиво. About.com также имеет большую статью о различиях между измерениями размеров.

25. Не стоит недооценивать Список

Списки являются отличным способом представления данных в структурированном формате, в которых легко изменить стиль. Благодаря свойству дисплея, вы не должны просто использовать список в виде текстовых атрибутов. Списки также отлично подходят для создания навигационных меню и всего в этом роде.

Многие начинающие используют Div-ы, чтобы каждый элемент находился в списке, потому что они не понимают, как правильно их использовать.

Вы часто будете видеть навигационные ссылки так:

Форум

Справочник

07.09.2008, 18:13 #8
Поиск по форуму
Расширенный поиск
К странице.

Всем привет,
Есть стандартное вываливающееся menu на CSS,
сделанное на базе

    всё работает.

Меню большое, и когда оно раскрывается то под ним оказывается
большой квадратный

И вот когда пользователь перемещает мышку по меню и доходит до области

, то меню сворачивается, т.к. сквозь меню пробивает href и div и невозможно ничего выбрать в меню.

И href здесь ни причём. как выяснилось, пробивается div.
т.к. например если вместо div находится , то всё работает нормально.

Нужна помощь:
Как такое победить?,
Как временно отключить просвечивание div. (a href уже убрал)
Как сделать чтобы

    не просвечивал и не закрывался, когда под ним div?

Заранее благодарен всем и каждому за любую полезную информацию.

Нужна помощь в оформлении страницы с помощью CSS

Я сводил себя с ума, пытаясь выяснить это, казалось бы, простое размещение div с помощью CSS. У меня есть веб-страница, которая содержит одно изображение, определяемое CSS как background-image. Я хочу наложить div, который содержит кликабельную ссылку, как показано здесь:

Я использую Dreamweaver CS6 и Absolutely Positioned DIV, чтобы попытаться это сделать. но когда страница отображается, ссылка не центрируется. Я довольно новичок в CSS, поэтому некоторые рекомендации о том, как лучше размещать объекты с помощью CSS, будут высоко оценены. Я использовал AP DIVs раньше с успехом . не знаю, почему это не работает сейчас. Вот эта страница:

Большое спасибо заранее за вашу помощь. -Dean

HTML/CSS нужна помощь.

Создал кнопку, при нажатии появляется бордюр синего цвета, но я такой код не писал. Как от этого избавится??

Попробовал такие коды:

1.
.button:active <
border-style: none;
>

2.
input[type=»submit»]:active <
background: #b68250;
border: none;
>

Не помогли, но код 2 фон менял (но бордюр остался)

кстати это только происходит на google, a в мозилле все хорошо,
происходит еще тогда, когда пишу что-то на строке

сложный макет CSS . нужна помощь

November 2020

385 раз

UPDATE 2

Я нашел предварительное решение , которое в настоящее время работает для меня в Chrome на Mac OS X. Вы можете проверить мой ответ ниже подробно . Для тех из вас , кто все еще пытается придумать CSS только решения или решения JavaScript, пожалуйста , продолжайте идти и дайте мне знать , что вы придумали! Пожалуйста :)

ОБНОВИТЬ

Ответ ниже очень близко к все CSS решения, поэтому я буду стараться, чтобы заставить его работать. В то же время, я открываю этот вопрос к решениям JavaScript, а также. Как бы вы сделать это с помощью JavaScript? Все решения теперь приветствуются :)

Эй, ребята, давайте посмотрим, сможем ли мы решить эту одну вместе!

Я пытаюсь создать макет, проверьте изображение .

Я использую технику «липкий колонтитула», который прекрасно работает, и я поставил его так , что всякий раз , когда один из двух столбцов становится выше, другие будут также соответствовать его высоте, как описано в этой статье . Проблема, однако, заключается в том , что эти две колонны не достигают нижнего колонтитула , естественно . Я принуждая высоту через JavaScript.

Во всяком случае, все соответствующий код можно увидеть в скрипку .

ВОПРОСЫ

Первая большая проблема : как я могу настроить его так , что высота этих колонок достигает колонтитул ниже? Я хочу , чтобы это так , чтобы при загрузке страницы, как розовые и синие столбцы автоматически достигают дна.

Как я могу получить его так, что, когда розовый столбец растет за пределами его текущей высоты, появляется локальная полоса прокрутки, но когда синий столбец растет за пределами его текущей высоты, появляется общая страница прокрутка и сноска выталкивается вниз?

  • в принципе, я хочу, высота розовыми и голубыми колоннами, чтобы всегда быть на той же высоте, но высота определяется только синей колонке; синий является доминирующим, поэтому он может расширить высоту обеих колонн; розовый не может расширить высоту, просто быть на той же высоте, синий

Может ли эта функциональность достигается с помощью только CSS?

Дайте мне знать, если мне нужно уточнить что-нибудь.

4 ответы

Было много вопросов, поэтому я переписал его. Я создал именно то, что вы хотите. Наслаждаться. знак равно

Хитрость заключается в том, чтобы иметь ваш главный регион иметь запас донизу такую ​​же высоту, как и футер (который вы абсолютно позицию). Таким образом, как ваша синяя вещь становится больше, он начнет толкая нижнюю часть страницы, немного раньше, чем обычно.

(Редактирование: эта версия перемещает нижние колонтитулы, что более трудно сделать, но вопрос задал, что синяя области инициализироваться быть настолько большими, насколько это возможно, см ниже один из способов сделать это)

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

абсолютно-позиционируемые элементы, кажется, есть некоторые проблемы автоматически прокрутки, как страница становится больше, поэтому я создал фиктивный #main DIV так же, как вы сделали, и был это заполнить всю область просмотра, то внутри, что является одновременно #footer и #content (вашим синий и красный материал). #Footer абсолютно позиционирован так не занимает мест / документ не заботится об этом. По мере расширения #content, контейнер #main расширяется с ним, перемещая вдоль нижнего колонтитула. Использование маржинального дна необходимо, чтобы предотвратить колонтитул от прятать текст.

Фактическое количество CSS требуется, чтобы сделать это, если вы удалите демонстрационный материал, только около 5 строк и фиктивный элемент.

Цукерберг рекомендует:  Мы улучшили профессии!
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих
2020-12-21, 22:17 #1