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


Содержание материала:

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

В данном уроке мы рассмотрим CSS свойства, которые позволят работать непосредственно с web-документом и с его элементами — создавать, изменять, убирать определённые свойства, придающие внешний вид.

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

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

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

Бесплатные уроки CSS для начинающих

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

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Основы CSS для начинающих

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

Для начала давайте разберемся, что же такое CSS. Как Вы знаете HTML — это язык разметки гипертекста. А CSS в свою очередь язык визуального оформления этой самой разметки.

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

CSS кстати используется не только для визуального оформления страниц размеченных на HTML, но и тех страниц написанных с помощью языка разметки XHTML, также отлично подходит для оформления XML документов.

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

Ну что переходим к практике, и начнем мы с Вами с простого синтаксиса. Выглядит он примерно так:

Элемент оформления принято называть селектор, но для простоты я указал его именно так.

Чтобы был понятен синтаксис, приведем простейший пример:

  • p – это тег абзаца;
  • color – это свойство, т.е. в нашем случае это цвет;
  • red – это значение, в нашем случае это красный.

И в итоге у Вас текст во всех абзацах станет красным цветом.

С синтаксисом немного разобрались, перейдем к тому моменту, где это все писать, т.е. подключать CSS к нашему HTML документу.

Способы подключения CSS

1. Непосредственно в самом элементе документа по средствам атрибута style, например, если перевести вышеуказанный пример в сам документ и описать его в самом элементе, то это будет выглядеть так:

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

2. Немного по удобней способ — это применение CSS, когда таблица стилей описана в самом документе. В разделе head применяется элемент style, в котором и описывается сама таблица стилей. Например, снова задействуем вышеуказанный пример, но уже с использованием этого способа:

Получится то же самое, что и было выше. Этот способ иногда используют, но он все равно не идеален.

3. В третьем способе используется импорт CSS документа, я редко встречал применение этого способа, может им и никто и не пользуется, но знать о нем нужно. Здесь таблица стилей уже описана в отдельном документе.

css-file.css – это файл CSS, где и описана таблица стилей, если он лежит в другой папке, то нужно писать путь к этому файлу.

4. Самый распространенный способ применений каскадной таблицы стилей — это подключение CSS файла к Вашему документу. Этим способом пользуются практически все, так как он самый удобный. Подключается CSS по средствам тега link в элементе head.

css-file.css – это файл, в котором описана таблица стилей, снова если файл лежит в папке отличной от расположения самого документа, то необходимо писать путь к нему.

Виды селекторов в CSS

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

С селекторами элементов (тегов) мы уже познакомились вышеперечисленные примеры, применялись ко всем тегам:

p – это и есть селектор элемента, здесь могут быть практически любые теги HTML документа, такие как body, div, table, tr, td, h1 и много, много других.

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

Текст CSS будет таким:

Текст документа будет таким:

Для практики подключите сами любым из способов каскадную таблицу стилей к Вашему документу.

Наверное, Вы уже поняли, что идентификаторы в CSS обозначаются с помощью символа # (#idred), а классы с помощью точки и названия класса (.black).

В HTML документе они обозначаются с помощью соответствующих тегов: id для идентификатора и class для классов.

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

Текст HTML документа:

Как Вы видите у нужной нам ссылки, шрифт стал 20 пикселей.

Теперь рассмотрим тоже популярный вид селекторов это — селекторы потомков. Другими словами, Вы указываете, что этот элемент, идентификатор или класс имеет вот таких потомков, т.е. он находится в том или ином элементе который, например, имеет тот или иной id или class. Пример:

Текст HTML документа:

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

Нужно отметить, что выделять потомков нужно с права налево, например, у нас сначала идет потомок (div), потом идет наш нужный элемент (p).

Как Вы видите, сегодня мы использовали всего два свойства: это font-size и color. На самом деле их очень много поэтому на сегодня я думаю достаточно, в следующих уроках продолжим рассмотрение других свойств и много чего еще! А пока рекомендую почитать книгу по CSS для начинающих, где более подробно описаны все возможности CSS и как их применять на практике.

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

Топ-пост этого месяца:  Как вставить в HTML ссылку и картинку (фото) — теги IMG и A

Урок 110. Основы CSS | Учимся управлять внешним видом сайта

В далеком 2011 году, когда я заканчивал 8 класс, учитель информатики и мой классный руководитель в одном лице, собрала 4-х заядлых геймеров, в числе которых был и Ваш покорный слуга. Собрала она нас для того, чтобы научить созданию сайтов, вот тогда-то я впервые познакомился и с основами HTML (прошлый урок), и с основами CSS, о которых Вы узнаете прямо сейчас.

CSS (Cascading Style Sheets, в переводе “каскадные таблицы стилей”) – язык управления внешним видом HTML-документов (страниц сайтов). То, что Вы видите каждый день в окне браузера создано таблицами каскадных стилей: цвет фона, различных элементов сайта задан специальными свойствами CSS; каким шрифтом написан текст задано специальными свойствами CSS; все, что Вы видите сейчас, читая этот урок, задано свойствами CSS.

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

Селекторы CSS

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

В блок объявления входят: свойство и значение свойства, но об этом чуть позже.

Сейчас же подробнее остановимся на селекторах. Существует несколько видов:

  • Селектор тегов. В качестве селектора служит HTML-тег, к которому должно быть применено стилевое правило;
  • Селектор классов. В качестве селектора служит класс элемента, который указывается в HTML-документе. Перед именем класса ставится точка;
  • Селектор идентификаторов. В качестве селектора указывается идентификатор элемента, указанный в HTML-документе. Перед именем идентификатора ставится знак “решетка” (#).

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

Об оформлении правил CSS говорить не буду, все скажет картинка выше.

Все стилевые правила CSS находятся в файле style.css. Поищите его.

Свойства и значения CSS

В одном CSS-правиле может быть указано несколько свойств и их значений. Перечисляются они через знак “точка с запятой” (;):

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

Для управления фоном сайта или отдельного элемента существует несколько свойств

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

  • background-image – устанавливает фоновое изображение сайт или элемента. Значения: url (путь к файлу) | none (отмена фонового изображения) | inherit (наследование родительского значения). Пример:
  • background-repeat – управление повторением фонового изображения сайта или элемента. Значения:
    • no-repeat (без повторений фонового изображения);
    • repeat (повтор изображения);
    • repeat-x (повтор изображения по горизонтали);
    • repeat-y (повтор изображения по вертикали);
    • inherit (наследование родительского изображения).
  • background-position – управление позицией фонового изображения. Значения:
    • left (лево);
    • right (право);
    • center (центр);
    • top (вверх);
    • bottom (вниз).


  • background-color – управление цветом фона сайта или отдельного элемента. Значение: кодовое значение определенного цвета. Найти его можно с помощью специальных онлайн-сервисов (ColorScheme).

Первое основное свойство CSS разобрали.

Шрифт

Для управления внешним видом текста, как и фоном, существует несколько свойств.

  • font – основное свойство шрифта. Может объединить в себе несколько характеристик;
  • font-size – размер шрифта. Задается в процентах, пикселях (более привычно), пункты (pt);
  • font-weight – толщина шрифта. Значения:
    • bold – полужирный;
    • normal – нормальное начертание.
  • font-family – указывается семейство шрифтов. В качестве значения выступает название семейства шрифта;
  • font-style – данное свойство задает начертание шрифта. Значения: normal (обычное начертание) и italic (курсив);

Свойства текста

Одной из основ CSS является управление свойствами текста: выравнивание, цвет, высота строки, расстояние между буквами.

  • text-align – горизонтальное выравнивание текста. Значение: justify (по ширине), center (по центру), left (по левому краю), right (по правому краю)
  • color – цвет текста. В качестве значения используется кодовое значение цвета, также можно использовать английские значение текстов (red, white, black)
  • line-height – высота строки. В качестве значения можно использовать как пиксели (px) и проценты (%), так и специальные множитель (1.5 – полуторный межстрочный интервал)
  • letter-spacing – интервал между символами. Значение можно выставить пикселями и прописать normal (нормальный интервал)

Выравнивание элемента

Выравнять по правому или левому краю любой элемент сайта можно с помощью одного стилевого свойства – float. Значения: left (по левому краю), right (по правому краю).

Обрамление элемента

С помощью стилевого свойства “border” можно задать обрамление, видимые границы. Можно указать несколько значений: толщину границы (px, %), цвет границы (кодовое значение цвета), стиль границы. Значения стилей границы определяют ее внешний вид:

Также можно задать границы для отдельной стороны элемента следующими свойствами:

  • border-bottom – нижняя граница элемента;
  • border-top – верхняя граница элемента;
  • border-right – граница с правой стороны элемента;
  • border-left – граница с левой стороны элемента.

Значения для вышеперечисленных задаются точно также, как и для основного свойства.

Отступы

Отступы между элементами задаются свойством “margin”.

  • margin – задает отступы элемента с каждой стороны. Может содержать несколько значений, которые указываются пикселями или процентами;
  • margin-left – отступ с левой стороны;
  • margin-right – отступ с правой стороны;
  • margin-top – отступ сверху;
  • margin-bottom – отступ снизу.

Поля вокруг элемента

Поля вокруг элемента устанавливаются свойством “padding“. Указывается точно так же, как и отступы (margin) и имеет свойства, устанавливающие поля по одной одной стороне: padding-left, padding-right, padding-top, padding-bottom.

Размер элемента

Можно установить высоту и ширину элемента свойствами “width” – ширина и “height” – высота. В качестве значений выступают числовые значения в пикселях или процентах. Также можно установить максимально и минимально возможные значения ширины и высоты элемента с помощью свойств: max-width, min-width, max-height, min-height.

Вот и разобрали основы CSS. Я сам знаю только то, что перечислил выше, поэтому строго не судите.

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

Надеюсь, что я не зря сидел несколько часов над написанием данного материала.

Завтра мы попрактикуемся в редакторе Notepad++, будьте готовы.

Урок 1. Что такое CSS?

Здравствуй, уважаемый читатель.

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

Перед изучением CSS обязательно необходимо знать и понимать что такое html. Без знания html в css не о чем разговаривать. Поэтому ОБЯЗАТЕЛЬНО пройдите уроки по html:

Теория и практика

Что же такое CSS? CSS используется для задания цветов, шрифтов, расположения блоков и других аспектов представления внешнего вида веб-страниц. Как и в уроках HTML в CSS мы изучим только основные свойства. Потому что свойств очень много. Но для редактирования шаблонов, а также создания сайтов нет необходимости держать в памяти все свойства и тем более их значения. Мы рассмотрим только основные. Начнем с подключения CSS файла в HTML страницу:

Как вы заметили файл со стилями подключается с помощью тега
, который находится между тегами . Атрибут rel=»stylesheet» определяет отношения между текущим документом и документом, на который ведет ссылка, заданная атрибутом href. Атрибут href=»style.css» определяет где находится файл с таблицей стилей. Ну и атрибут type=»text/css» определяет тип данных.

Также в той же директории с html страницей создайте файл с расширением CSS. Рекомендую также для редактирования CSS использовать редактор Notepad++. Скачать его можно по ссылке Скачать Notepad++

Создайте эти два файла. Они будут необходимы для следующих уроков. Пробуйте всё прописать руками. Тогда вы лучше запомните материал.

CSS для начинающих

Это руководство (самоучитель) познакомит вас с базовыми возможностями и языком (синтаксом) Каскадных таблиц стилей (CSS). CSS используется для изменения внешнего вида структурированного документа, такого как веб-страница. Руководство также включает простые упражнения, которые вы сможете выполнить на своем компьютере и увидеть, как работает CSS, а также его возможности в современных браузерах.

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

Что вам нужно для того, чтобы начать

  • Текстовый редактор
  • Современный браузер
  • Опыт работы с текстовым редактором и браузером

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

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

Как пользоваться руководством

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

Часть I: Основы CSS

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

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

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

Часть II: Возможности CSS

Вторая часть руководства содержит примеры, которые продемонстрируют вам возможности CSS применительно к другим web-технологиям и технологиям Mozilla.

Курс HTML / CSS

Интерактивный онлайн курс HTML и CSS программирования и верстки сайтов для начинающих — Обучение HTML с нуля

В видеокурсе Вы изучите основы языков HTML и CSS, научитесь создавать адаптивные HTML страницы Вашего сайта. В процессе обучения Вы создадите портал КиноМонстр — сайт о кино, адаптированный для работы одновременно на компьютерах и мобильных устройствах.
Изучите онлайн уроки по основам верстки и программирования Html и Css с нуля и Вы сможете эффективно создавать верстку любых собственных сайтов!

Онлайн курс HTML / CSS программирования и верстки сайтов с нуля

Поделитесь страницей с друзьями


О курсе — Чему Вы научитесь?

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

В процессе обучения Вы получите знания и навыки:

  • Основы HTML и CSS
  • Полноценная верстка страниц сайтов, на примере сайта о кино
  • Работа в редакторе кода SublimeText
  • Практическое применение основных тегов HTML
  • CSS-верстка текста: цвет и размер шрифта
  • Позиционирование блоков на сайте
  • Работа с изображениями
  • Правильная HTML-разметка для SEO
  • Адаптивная верстка под мобильные устройства
  • Специальные классы для адаптивности
  • Полезные инструменты для frontend-разработчика

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

План курса

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

Основы CSS

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

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

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

Более подробно о том, что такое Cascading Style Sheet (CSS) и для чего она используется читайте ниже.

Что такое CSS?

Как вы знаете, при создании сайта мы формируем его содержимое при помощи языка гипертекстовой разметки — HTML(Hypretext Markup Language). С помощью него мы создаем навигационные блоки, наполняем веб-страницу текстовым, аудио/видео-контентом. В общем, создаем структуру сайта.

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

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

Наглядный пример

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

Содержание будущей картины

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

Подобная ситуация обстоит с HTML, при помощи которого мы формируем содержание веб-страницы.

Сайт на голом HTML, без CSS

Далее, при помощи CSS мы определяем цвета, размеры и расположение элементов на веб-странице, то есть занимаемся внешним оформлением сайта.

Тот же сайт с подключенными таблицами стилей

Для большей наглядности, давайте перейдем на какой-нибудь веб-сайт, например, facebook.com. Следующим шагом нам потребуется установить расширение для браузера под названием WEbDeveloper. Я его уже установил, ну а вам будет достаточно ввести в поисковике фразу WEbDeveloper, перейти по ссылке и в открывшемся окне кликнуть по кнопке «Установить».

У меня это расширение установлено и управляется при помощи иконки с шестеренкой в правой верхней части экрана. Я предлагаю на сайте faceboook.com отключить таблицы стилей и посмотреть только на ее содержимое. Для этого мы переходим в раздел CSS и нажимаем на Disable All Styles. Стили отключаются и мы видим как невзрачно выглядит содержимое данной веб-страницы без оформления.

Внешний вид социальной сети без подключенных CSS файлов

То есть сейчас мы видим сайт на голом HTML. Чтобы включить css файлы этой страницы мы возвращаемся к WEbDeveloper и снимаем галочку с Disable All Styles.

Таблица стилей снова подключилась и мы видим содержимое веб-страницы с оформлением.

Соц. сеть с подключенными CSS файлами

Как работает CSS?

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

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

Например, через селектор ‘p’ мы задаем тип, размер и цвета шрифтов в абзацах. Для настройки шрифтов заголовка первого уровня мы используем селектор ‘h1’.

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

Зачем изучать CSS?

Не думаю что в наше время можно найти хоть один более или менее «приличный» сайт без использования CSS. Данная технология очень хорошо зарекомендовала себя и на сегодняшний день очень трудно представить себе верстку сайта без использования каскадных таблиц стилей.

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

Плюсы CSS

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

Как быстро научиться основам CSS

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

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

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

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

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

CSS Учебник

CSS — это язык, описывающий стиль HTML-документа.

CSS описывает, как должны отображаться HTML-элементы.

Этот учебник научит вас CSS от базового до продвинутого.

Примеры в каждой главе

Этот учебник CSS содержит сотни примеров CSS.

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

Пример CSS

body <
background-color: lightblue;
>

h1 <
color: white;
text-align: center;
>

p <
font-family: verdana;
font-size: 20px;
>

Нажмите на кнопку «Просмотр демо в редакторе», чтобы увидеть, как она работает.

Примеры CSS

Узнайте более 300 примеров! С нашим редактором, вы можете редактировать CSS, и нажмите на для просмотра результата.

Шаблоны CSS

Мы создали некоторые адаптивные w3.CSS шаблоны для использования.

Вы можете изменять, сохранять, делиться и использовать их во всех ваших проектах.

CSS ссылки


На HTML5CSS вы найдете полное описание CSS, всех свойств и селекторов с синтаксисом, примерами, поддержкой браузера и многое другое.

H Хорошие и плохие CSS практики для начинающих в черновиках

.collapse»>Содержание

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

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

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

Начнем:

Плохие CSS практики

Повторное использование правил

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

К примеру, не используйте правило color: blue на каждом элементе или идентификаторе отдельно:

Лучше занесите его в класс:

Присвоение селектора ID нескольким элементам

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

К примеру, так делать нельзя:

Необходимо делать так:

Повсеместное использование правила !important

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

В примере выше цвет хедера красный, кроме хедера с классом intro и еще одного хедера с идентификатором capture. В нашем случае важность свойств color и font-size определяется специфичностью селекторов.

Правило !important работает на уровне свойств, а не селекторов, а значит, свойство color важнее свойства font-size. Кроме того, свойство color с правилом !important важнее свойства color в селекторе header#capture.

Совет: Используйте правило !important только при переписывании пользовательских стилей, стороннего кода, инлайновых стилей и вспомогательных классов.

Правило !important часто считается плохим стилем, так как оно может внести неразбериху в один из основных механизмов CSS – специфичность.

Неэффективное использование CSS селекторов

Чем длиннее селектор, тем больше его специфичность, что может негативно отразиться на стилях вашего сайта.

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

К примеру, эти длинные селекторы:

Можно сжать до второго или третьего уровня:

Большое количество веб-шрифтов

Понятно, что типографика является основой хорошего дизайна, бренда и залог хорошей читаемости текста.

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

Оптимизация веб-шрифта и время его загрузки могут повлиять на размер страницы и время рендеринга.

Рекомендуется использовать не более одного или двух веб-шрифтов (максимум 3), а также прописывать резервные шрифты по умолчанию для старых браузеров в целях оптимизации.

Использование инлайновых стилей

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

Хорошей привычкой считается разделение CSS и HTML. Инлайновые стили затрудняют изменение дизайна сайта, а также усложняют работу с кодом.

Но из-за отсутствия поддержки множества правил в email клиентах, инлайновые стили можно использовать в HTML версиях электронных сообщений.

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

Хорошие CSS практики

Мы закончили говорить о плохих практиках в CSS, теперь перейдем к хорошим.

Комментирование CSS

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

Взгляните на пример ниже:

Поддерживайте читаемость CSS

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

Повысить читаемость кода можно двумя способами.

1. Запись в одну строку

2. Обычная форма записи

Отделяйте стили плагинов JQuery

Если у вас в проекте используются плагины jQuery, вам нужно поместить их стили в отдельный файл и дать файлу легко запоминающееся название наподобие JS-plugin.css. Это поможет разграничить все CSS стили. Особенно полезно, когда вам понадобится добавить код или изменить стили какого-либо плагина JQuery.

Сбрасывайте стили с помощью CSS Reset

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

Самым популярным способом является сайт MeyerWeb. Есть и другие способы, к примеру, normalize.css Николаса Галлахера – современный способ сброса, поддерживающий HTML5. Сбросить стили можно, как подключив файл в HTML документе, так и скопировав код в свои стили.

Размещайте CSS3 анимацию в конце файла

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

Объединяйте элементы

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

К примеру, у ваших заголовков h1, h2 и h3 есть одинаковые свойства font-family и color.

Используйте сокращенные свойства

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

К примеру, свойства margin-top, margin-right, margin-bottom, margin-left можно объединить в одну строку.

Всегда используйте комментарии

Одна из лучших практик в CSS – комментировать группы кода. Так вы сможете легко находить нужный участок кода.

Используйте вендорные префиксы

Для отслеживания изменений в поведении браузеров крайне рекомендуется добавлять префиксы к нестандартным CSS свойствам.

Основная задача вендорных префиксов – это не поломать код во время его выполнения.

Вендорные префиксы бывают:

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

Вот что у вас получится.

Сжимайте CSS файлы

Еще один способ повысить эффективность кода – уменьшить размер файла с помощью сервисов типа CSS compressor или Minify CSS. Это должно уменьшить время загрузки файлов. Сервисы по сжатию файлов стилей убирают все пробелы, переводы на новые строки и повторяющиеся стили.

Задавайте цвета в шестнадцатеричной системе счисления

Мнения в сети разделились по поводу того, что лучше, использовать Hex обозначение цвета или все-таки ключевые слова. Отдельные браузеры могут не понимать некоторых названий цветов. С помощью шестнадцатеричной формы можно записать все 16,777,216 цветов, а вот с помощью HTML и CSS всего 140. В CSS нет имен для всех 16 миллионов 24-битных цветов, так что лучше использовать шестнадцатеричную форму записи.

Более подробно об этом можно прочитать в спецификации CSS Color Module Level 3.

Валидация

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

Что дальше?

Мы обсудили хорошие и плохие CSS практики, теперь пора применить полученные знания.

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

А что вы думаете? Какие хорошие и плохие привычки в CSS знаете вы? Пожалуйста, пишите об этом в комментариях.

В заключении статьи хотел сообщить новость от нашей команды. Буквально на днях мы записали совсем свежий пошаговый курс по основам адаптивной верстки с полного нуля на HTML5 и CSS3.

В данном мини-курсе мы с вами из PSD-макета Adobe Photoshop сверстаем полноценную HTML- страницу. При верстке страницы будем использовать новые теги и новые возможности HTML5 и CSS3.

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

Топ-пост этого месяца:  Сервисы Яндекса для вебмастеров считаются лучшими среди SEO-специалистов
Добавить комментарий