Меню
ГлавнаяИнтернет

Основы css. Основы CSS за три минуты – легко и доступно каждому. Изменение цвета страницы

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

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

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

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

Видеоверсия:

Что такое CSS?

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

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

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

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

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


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


Сайт на голом HTML, без 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 - Каскадных таблиц стилей (C ascading S tyle S heets).

Класснуть

Запинить

Часть 1. Основы CSS

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

Обращаю ваше внимание, что в данном руководстве мы будем рассматривать CSS только в контексте использования с HTML документами в веб-браузере. С помощью CSS можно стилизовать и другие документы, использующие различные языки разметки. Например, стилизовать XML в Android приложениях, SVG или различные Desktop Environment в Unix-подобных операционных системах.

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

1.1 Использование CSS в HTML документах

CSS довольно просто использовать в HTML документах. Его можно:


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


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

Просто, не правда ли?

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

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

//HTML:

//CSS: .my-class { background-color: #999; }

Здесь селектором выступает класс my-class тега div, который получает необходимое оформление в CSS файле. В данном случае фоновый цвет - серый. Соответственно, если на странице есть несколько тегов (не только div) с классом my-class , все эти элементы получат одинаковое оформление - серый фон цвета #999.

1.3 Каскадирование, наследование и приоритет

Понять принцип каскадирования несложно. Давайте взглянем на пример:

//HTML

Далеко-далеко за словесными горами в стране.
Далеко-далеко за словесными горами.
//CSS .parent .children { color: #666; } .parent { padding: 10px; color: #999; }

Из примера мы видим, что в CSS написан каскад, в котором класс .parent стоит на первом месте, после него через пробел указан дочерний класс .children , который отвечает уже за стилизацию только дочернего элемента. Дочерний тег обязательно должен быть вложен в тег с классом .parent . Если в HTML документе мы вынесем тег .children из тега div с классом .parent , он потеряет свое оформление, так как каскад уже не будет работать, структура нарушена.

Что мы получим в результате нашего примера. Тег с классом.children получит цвет текста #666, так как имеет более длинный каскад, а.parent покрасится в цвет #999. Родительский класс будет иметь внутренние отступы 10px, в то время, как дочерний этих отступов иметь не будет, так как свойство padding не распространяется на дочерние элементы. Однако если мы уберем color: #666; у селектора .parent .children , то его текст покрасится в цвет родителя color: #999;


Каскадирование и наследование позволяют стилизовать конкретные элементы на странице и определять приоритет применяемых стилей. Давайте рассмотрим иерархию приоритетов.

  1. Самым высоким приоритетом обладают свойства, в конце объявления которых указана конструкция !important . Не важно, какую вложенность имеет селектор, каким образом используются стили - инлайново или подключением внешнего файла, у них будет наибольший приоритет. Я крайне не рекомендую использовать !important при стилизации, так как в процессе поддержки или даже в процессе разработки в дальнейшем обязательно возникнет путаница, которую спасет только рефакторинг стилей. Как показывает практика, всегда есть способ не использовать!important .
    Пример использования!important: .my-class { background-color: #999!important; }
  2. Следующим по значимости приоритетом обладают инлайновые стили, прописанные в самом теге через атрибут style , которые мы рассмотрели ранее:
  3. Стили, заданные в теге style в самом документе имеют меньший приоритет;
  4. Ещё меньшим приоритетом обладают стили, подключенные к документу как внешний CSS файл посредством тега
  5. Самый низкий приоритет, окромя стандартных стилей браузера имеют стили родительских селекторов перед дочерними, например:
    //HTML

    Далеко-далеко за словесными горами.

    //CSS .my-class { margin: 10px; } будет иметь меньший приоритет для дочернего p , чем: .my-class p { margin: 15px; } В результате тег

    Находящийся в теге с классом.my-class получит значение свойства margin: 15px.

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

My-class.class-2 { margin: 10px; } будет иметь больший приоритет, чем: .my-class { margin: 15px; }

И т.д. по логической цепочке.

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

My-class { margin: 10px; } будет иметь меньший приоритет, чем идущий после него точно такой-же селектор: .my-class { margin: 15px; }

В результате последний селектор в потоке документа получит значение свойства margin: 15px, так как является наиболее приоритетным. Однако если бы селектор первого объявления был длиннее, значния его свойств несомненно бы превалировали.

Что касается наследования, здесь всё просто. Все дочерние элементы наследуют некоторые свойства родителя. Какие именно свойства наследуются предстоит выяснить вам в процессе изучения различных свойств и применении их на практике. Например, цвет текста всегда наследуется потомками, а отступы - нет.

Часть 2. CSS свойства

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

Однако рассмотрим 10 самых используемых CSS свойств в верстке. Я взял 10 больших CSS файлов из своих проектов и отсортировал свойства по частоте использования.

CSS Свойство

Частота использования

Описание
color 960 раз Цвет текста элемента:
background-color 755 раз Цвет фона элемента:
font-size 524 раза Размер шрифта:
opacity 435 раз Уровень прозрачности элемента:
padding 372 раза Размер полей внутри элемента:
width 356 раз Ширина блочного элемента, не включая размеры границ и полей:
margin 311 раз Внешние отступы элемента:
height 305 раз Высота блочного элемента, не включая размеры границ и полей:
font-weight 280 раз Насыщенность шрифта:
text-align 245 раз Горизонтальное выравнивание текста:

Часть 3. Медиа-запросы

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

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

Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media . Структура медиа запроса довольно проста:


Условием может выступать либо устройство - all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.

Наиболее часто используемые медиа-функции определяют именно максимальное и минимальное разрешение экрана устройства:


Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом.my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.

Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И) , not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы) . Нет логического оператора or (ИЛИ) , его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.

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

  1. Старайтесь использовать только внешние подключаемые CSS файлы . Внутреннюю стилизацию применяйте только если это необходимо для корректного функционирования веб-сайта;
  2. Старайтесь стилизовать только классы . Не стилизуйте идентификаторы (задаются через id="решетку" и пишутся через #решетку). Старайтесь меньше стилизовать теги без классов. Например, если вы стилизуете тег h3, а в дальнейшем SEO специалист решит, что заголовок здесь не уместен, обычный div должен иметь такие-же свойства с классом заголовка и отображаться также. Как вариант можно сделать дубликаты HTML тегов в классы, например, .h1, .h2, .h3, .footer, .header, .aside и стилизовать их соответствующим образом;
  3. Старайтесь стилизовать элементы максимально автономно, сокращайте цепочку каскада до одного блока, чтобы было меньше зависимостей от родительских элементов. Это необходимо для максимально эффективного повторного использования блоков на странице и их модификации в других местах верстки. Но без фанатизма. Не стоит задавать отдельные классы каждому тегу в блоке, если не предполагается его автономное использование. Если вы перенесете блок в другое место страницы, он должен отображаться также и не зависеть от родителя. В этом вам поможет использование какой-либо методологии именования классов. Не важно, будет это БЭМ, методология, либо разработанная на основе вашего личного опыта или простые правила, предложенные мной - это лучше, чем называть классы как попало и строить нелогичные и длинные цепочки классов;
  4. Старайтесь называть классы тегов в зависимости от того, какую функцию выполняет блок, а не от того, какое в нем будет содержание. Например, если у вас есть секция с отзывами в виде карусели, не стоит называть селекторы, используя слова reviews , otzivy и т.д. Лучше назвать carousel-once , если планируется выводит по одному пункту карусели на странице. В дальнейшем, возможно вы будете использовать эту карусель не только для оформления отзывов, а задействуете этот код например, для вывода списка коллег компании. В таком случае наименование класса reviews будет несколько неуместным;
  5. Используйте CSS препроцессоры, в этом нет ничего сложного. Мой выбор пал на препроцессор Sass уже довольно давно и я его рекомендую к использованию. У нас есть неплохой урок, в котором я рассказываю как легко пользоваться препроцессором и как он упрощает жизнь: ;
  6. Используйте сброс стандартных стилей браузера или нормализацию, которая приводит стандартные стили к общему для всех браузеров знаменателю. Я использую в своих проектах Normalize.css , который входит в состав CSS фреймворка Bootstrap;
  7. Когда почувствуете, что выполняете слишком много однообразной работы в процессе верстки - переходите к использованию какого-либо CSS фреймворка или разработайте свой с наиболее часто используемыми элементами, это ускорит вашу работу. Я использую в работе только сетку Bootstrap без стилистического оформления кнопок, панелей и прочих элементов. Этого вполне достаточно для эффективной работы. Хорошая адаптивность Bootstrap сетки по-умолчанию также радует;
  8. Самостоятельно экспериментируйте со свойствами. Открывайте 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; }

  • 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 { color: red; }

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

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

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

#idred { color: red; } .black { color: black; }

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

Пример красного абзаца

Пример черного абзаца

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

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

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

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

Текст CSS:

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

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

Текст CSS:

P { color: red; } div p { color: green; }

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

Пример красного абзаца

Пример абзаца, который имеет потомка элемент div

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

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

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

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

Технология CSS используется в первую очередь дизайнерами, ведь именно они создают дизайн сайта. Однако, ошибочно полагать, что Web-мастерам CSS знать не обязательно. Достаточно вспомнить хотя бы пример из описания раздела по . Помимо мобильности своего сайта, таблицы стилей позволяют создавать различные классические дизайнерские решения (например, выпадающее меню). А вместе с позволяют создавать динамические HTML-страницы (DHTML ), красота и удобство которых, порой, просто поражают.

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

Полный курс по HTML, CSS и по вёрстке сайтов :

Прочитав статьи по основам CSS, Вы узнаете:

1) Синтаксис CSS .

2) Способы и их приоритеты задания CSS-стиля .

3) Типы селекторов в CSS .

4) CSS хаки для браузеров.

5) Правила написания CSS .

6) Как создать всплывающую подсказку на CSS .

7) Как изменить внешний вид первой буквы через CSS .

8) Как задать вид курсора через CSS .

9) Как изменить вид курсора при наведении мыши с помощью CSS .

10) Как сделать подменю на CSS .

11) О замене свойства min-width в IE6 .

12) О валидности CSS .

13) Как задать цвет посещённых ссылок.

14) Как задать отступ абзаца через CSS .

15) Как сделать закруглённые углы через CSS .

16) Как вместо маркера списка поставить своё изображение через CSS .

17) Как сделать фон картинкой.

18) Как сделать затемнение фона на CSS .

19) Что такое дочерние селекторы в CSS .

20) Какие единицы измерения имеются в CSS .

21) Как сделать всплывающее окно с затемнением.

22) Как сделать анимированный фон.

23) Как сделать красивое текстовое поле.

24) Как менять изображение при наведении на него курсора мыши.

25) Что такое псевдоэлементы в CSS .

26) Что такое CSS спрайты .

27) Как прижать футер (подвал) к низу через CSS .

28) Как запретить изменение размеров textarea через CSS .

29) Как нарисовать треугольник через CSS .

30) Как обработать событие click через CSS .

31) Как задать свой курсор через CSS .

32) Как сделать горизонтальное выпадающее меню на CSS .

33) Как использовать нестандартный шрифт на сайте.

34) Как изменить фон у радиокнопки через CSS .

35) Можно ли использовать CSS3 .

36) Как сделать тень на CSS .

37) Как задать атрибуты cellpadding и cellspacing на CSS .

38) Как сделать div со 100% height .

39) О совместимости z-index и плеера Youtube .

40) Почему плохо использовать -moz , -ms , -webkit и прочие свойства.

41) Стоит ли использовать CSS Reset .

42) Как вертикально выравнять маркер списка.

43) Как сделать версию для печати.

44) Как сделать кроссбраузерную прозрачность на CSS .

45) Что такое clearfix .

46) Как частично отменить float .

47) Как сделать двухколоночную вёрстку с одинаковой высотой колонок.

48) Что такое адаптивная вёрстка.

49) Что такое медиа-запросы в CSS .

50) Что такое less .

51) Как сделать эффект загнутого уголка на CSS .

52) Как сделать отзывчивый "липкий" подвал сайта .

53) Как использовать Google Fonts API .

54) Как использовать сервис Livetools .

55) Как разрешить или запретить выделение текста на CSS .

56) Как изменить внешний вид элемента на стандартный с помощью свойства appearance в CSS .

57) Зачем нужно свойство page-break-inside в CSS .

58) Как выравнять по центру блок переменной ширины на CSS .

59) Как сделать треугольники на чистом CSS .

60) Сервис по генерации CSS треугольников .

61) Как прижать футер к нижней грани страницы (позиционирование).

62) Как прижать футер к низу страницы (табличный способ).

63) Изучаем Sass . Установка и настройка.

64) Как скрыть элемент на странице на CSS .

65) Изучаем Sass . Основы.

66) Когда использовать reset.css и normalize.css .

67) Сервис по работе с изображениями с мощным API .

68) Как сделать эффект увеличения картинки на CSS .

69) Koala - быстрая компиляция sass файлов.

70) Как добавить фильтры к фотографиям на CSS .

71) Изучаем Sass . Миксины.

72) Изучаем Sass . Математические операции.

73) Анимированная иконка меню на Sass .

74) Изучаем Sass . Функции.

75) Что такое PostCSS .

76) Как установить и настроить PostCSS .

77) Как сделать возможность оценивания на CSS .

78) Изучаем Sass . Стиль написания кода.

79) Изучаем Sass . Расширение родительского селектора.

80) 10 полезных SASS миксинов .

81) Как сделать интро в стиле "Звёздных Войн" на CSS .

82) Bootstrap 4 . Введение.

83) Bootstrap 4 . Установка.

84) Bootstrap 4 . Reboot.

85) Bootstrap 4 . Контейнеры и ключевые точки.

86) Bootstrap 4 . Система сеток.

87) Bootstrap 4 . Flex-свойства сетки.

88) Какие 5 нововведений появятся в CSS4 .

89) Bootstrap 4 . Что такое Jumbotrons.

90) Bootstrap 4 . Утилиты и типография.

91) Bootstrap 4 . Компонент Cards.

92) Разницу между class и id на примере тега div .

93) Неудачные элементы веб-дизайна , которые не стоит использовать.

94) Bootstrap 4 . Модальные окна.

95) О приоритете и наследовании в CSS на практике

96) Как верстать PSD макет по Bootstrap сетке . Часть 1.

97) Как верстать PSD макет по Bootstrap сетке . Часть 2.

98) Как использовать псевдоэлементы after и before в CSS .

99) Об особенностях ширины и высоты блока в CSS .

100) Псевдоэлемене after и псевдоклассе last-child .

101) Как показать сайт на различных девайсах.

102) Верстка по сетке Bootstrap (часть 1)

103) Верстка по сетке Bootstrap (часть 2)

104) Верстка по сетке Bootstrap (часть 3)

105) Верстка по сетке Bootstrap (часть 4)

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

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

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

Селекторы CSS

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

  1. Селектора;
  2. Блока объявления.

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

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

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

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

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

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

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

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

Block{width:100px; height:100px; background:#fff}

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

Начнем с фона.

Фон

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

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

background : url(images/hand.png ) repeat-y #fc0 ; /* Цвет фона, путь к фоновому изображению, повторение фона по вертикали */
  • background-image – устанавливает фоновое изображение сайт или элемента. Значения: url (путь к файлу) | none (отмена фонового изображения) | inherit (наследование родительского значения). Пример: backround-image: url(images/hand.png);
  • background-repeat – управление повторением фонового изображения сайта или элемента. Значения:
    • no-repeat (без повторений фонового изображения);
    • repeat (повтор изображения);
    • repeat-x (повтор изображения по горизонтали);
    • repeat-y (повтор изображения по вертикали);
    • inherit (наследование родительского изображения). backround-repeat: no-repeat;
  • background-position – управление позицией фонового изображения. Значения:
    • left (лево);
    • right (право);
    • center (центр);
    • top (вверх);
    • bottom (вниз). backround-position: left;
  • background-color – управление цветом фона сайта или отдельного элемента. Значение: кодовое значение определенного цвета. Найти его можно с помощью специальных онлайн-сервисов (ColorScheme). backround-color: #fff; /*Белый цвет фона*/

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

Шрифт

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

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

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

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

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

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

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

Float: left;

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

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

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

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

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

Border: 1px solid #000;

Отступы

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

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

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

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

Padding: 10px 10px 10px 10px;

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

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

Width:100px; height:200px;

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

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

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

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

До завтра!

Предыдущая статья
Следующая статья