CSS Назад к основам терминологии
CSS или каскадные таблицы стилей дополняют определяющий язык правил дизайна для нашей сети. Художники во всем мире ежедневно используют CSS для создания, организации и кодирования наборов правил для основных макетов веб-сайтов. Это стало самым популярным языком для дизайна интерфейса и предоставляет удивительные возможности с недавним выпуском CSS3. Но что на самом деле означает весь этот код?
Сам язык был полностью разработан в течение нескольких лет. Путаница может возникнуть в основном из-за недопонимания и неправильного использования подобных терминов. CSS приносит много новых концепций. Мы рассмотрим некоторые из самых популярных терминов для освоения в качестве гуру CSS.
Зачем специализироваться с CSS?
Этот вопрос был задан ранее, и даже в 2011 году мы можем увидеть те же результаты. CSS - надежный язык, не похожий на сценарии или программирование. Это язык стилей, а точнее код, используемый для описания поведения веб-страницы..
Используя CSS, мы можем напрямую манипулировать атрибутами из отдельных элементов HTML. Все блоки, абзацы, ссылки и изображения могут быть затронуты с помощью правил CSS. Уточнение семантики презентации для Интернета всегда было огромным шагом. Это главная причина, почему CSS по-прежнему является ведущим игроком для дизайнеров - никто не создал ничего лучше!
Свойства и ценности
Это самый простой способ взломать CSS. Весь код делится на два действия: выбор элемента для применения дизайна и что применять. Последний создается через пары свойство / значение.
В качестве примера красный цвет; это очень простая пара свойство / значение. Мы использовали свойство цвет что позволяет нам перейти на любой приемлемый значение изменить цвет текста. Это также может быть шестнадцатеричный код или данные цвета RGB (красный-зеленый-синий). Часто дизайнеры не упоминают идею ценностей, потому что это может ввести в заблуждение.
Свойства и значения действительно единая идея. Каждое объявление свойства требует значения, а значения сами по себе не имеют смысла. В Интернете есть много документации, в которой рассматриваются различные свойства и их влияние на элементы HTML. Я бы порекомендовал приобрести справочник по CSS в любом близлежащем книжном магазине. Они довольно дешевые и содержат большую часть всей необходимой вам информации..
Значения селектора
Селекторы необходимы для завершения всей строки кода CSS. Это то, что мы объявляем, чтобы установить, на какой тип элемента мы нацеливаемся. Есть много селекторов, и многие настолько запутаны, что среднему дизайнеру не понадобятся навыки. Проверьте документацию по выбору W3, если вы хотите узнать больше.
Самый простой способ начать определения стиля - использовать голые элементы в качестве селекторов свойств. Это означает манипулирование корневым кодом, таким как п для абзацев, ДИВ для подразделений, и даже тело а также HTML может использоваться для манипулирования всем документом веб-страницы. Ниже приведен краткий пример оформления всех элементов абзаца.
p font-family: Arial, без засечек; цвет: # 222; вес шрифта: полужирный;
Реальный вес CSS дает то, насколько точным может быть отстрел снайпера. Лучший способ достичь целевых стилей - это 2 метода, известных как классы а также идентификаторы. Это обычные идеи в HTML, где вы можете установить любой элемент, чтобы иметь идентификатор и значение класса через атрибуты. Затем с помощью CSS легко применить стили к этому конкретному блоку.
p # firstpar font-size: 14px; / * стиль абзаца с идентификатором «firstpar» * / p.comment font-size: 1.0em; высота линии: 1,3em; / * стиль абзаца (-ов) с классом "comment" * /
Единицы длины и значения
Часто эти термины смешиваются, что не является большой неожиданностью. Значения были объяснены ранее как место размещения, которое мы используем для описания свойства. Единицы длины также являются значениями в том смысле, что они используются для описания свойства.
Разница заключается в том, что эти значения требуют числовых данных и, следовательно, должны возвращать некоторую форму единиц. Пиксели (px) являются наиболее распространенными и могут использоваться для чего угодно: ширины / высоты, размера шрифта, отступов / полей, чтобы назвать несколько.
Помимо этого, вы можете увидеть процент (%), часто используемый в макетах жидкости. При установке значений ширины в процентах компилятор примет 100% всей ширины веб-браузера. Это дает дизайнерам большую точность при применении стилей к структурам макета и даже к типографии страниц..
Блок декларации
Теперь, после объединения всех этих терминов, мы наконец можем обсудить основную идею таблиц стилей. Блоки кода используются для разграничения тематических областей и определения детализации элементов. Например, ниже приведена строка кода для простого контейнера навигации:
div # nav display: block; ширина: 100%; обивка: 3px 6px; нижнее поле: 20 пикселей;
Самый простой способ отобразить этот код - выстроить свойства один за другим. Разработчики CSS использовали блоки кода, чтобы разбить каждое свойство на собственную строку. Эта повестка дня не только занимает гораздо больше места, но и снижает способность “обезжиренное” ваш лист, чтобы найти именно то, что вам нужно.
Лучший способ разбить блоки кода - разделить извилистые элементы на отдельные после достижения ими порога. Этот номер является личным и будет отличаться между разработчиками. Это переломный момент, когда логика диктует глупо держать все в одной строке, в основном из-за читабельности.
Ниже я написал пример блока навигационных свойств вместе. Эта практика хранит более глубокие элементы в одном месте, поэтому редактирование всех элементов навигации намного проще.
div # nav display: block; ширина: 100%; обивка: 3px 6px; нижнее поле: 20 пикселей; div # nav ul list-style: none; дисплей: блок; div # nav ul li float: left; поле справа: 10 пикселей; размер шрифта: 12 пикселей; div # nav ul li a color: # 0f0f0f; текстовое оформление: нет; дисплей: встроенный блок; обивка: 2px 5px;
Возможные улучшения от CSS2 / CSS3
В новостях в последнее время был непрерывный разговор об удивительных преимуществах CSS3. Но что на самом деле изменено на языке? Очевидно, старый код все равно будет работать нормально. Это по крайней мере показывает полную обратную совместимость между компиляторами (всегда хорошо).
Основные различия в основном связаны с новыми свойствами. Они учитывают закругленные углы и эффекты тени в браузере. CSS3 также предлагает новые инструменты для описания цветов в документе. HSL (Hue-Saturation-Lightness) является новейшим в дополнение к HSLA, который включает альфа-канал для уменьшения непрозрачности.
Селекторы атрибутов - огромный шаг вперед в отношении стиля разметки. С помощью этого стиля кода вы можете выбрать конкретное имя элемента, которое содержит атрибуты с определенными значениями. Они в основном полезны при работе с разметкой, такой как XML, где нет стандартных принципов проектирования для управления узлами. Пример ниже является относительно простой идеей:
div [attrib ^ = "1"] / * стили здесь * /
Приведенный выше код является частью библиотеки селекторов CSS. Это повлияет на все элементы div с атрибутом “Attrib” который также имеет значение “1”. Если это все еще сбивает с толку, обратитесь к приведенному ниже примеру, чтобы уточнить. Теоретически эти два селектора должны выполнять одинаковые действия.
p [id ^ = "primary"] / * styles * / p # primary / * styles * /
Заключение
Разобрав несколько наиболее запутанных терминов, CSS выглядит как прогулка по парку. Язык очень интуитивно понятен, и начинающие могут начать разработку в течение первых нескольких часов. Это то, что делает CSS таким популярным среди веб-разработчиков.
Преимущества CSS3 только начали действовать. В течение нескольких лет развивающиеся веб-тенденции покажут нам, насколько мы действительно контролируем дизайн веб-страниц. В настоящее время CSS гордится как доминирующий язык для оформления веб-сайтов. Практика даже в элементарных навыках среднего уровня может дать обильный опыт проектирования и дополнительные знания.
