Как учить css

Изучаем CSS за час!

Изучаем CSS за час!

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

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

Синтаксис CSS.

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

Селектор (от англ. select — выбирать) – это формальное правило, которое применяется к одному элементу или набору элементов.

CSS могут быть написаны как в самом HTML с помощью тегов , inline – способом, с помощью атрибута style у HTML – тега и могут быть подключены как внешний файл. Чтобы не было беспорядка и хаоса, лучше CSS подключать к HTML как отдельный файл. Подключается он следующей конструкцией:

Размещается данная конструкция обычно в разделе head HTML-документа.

Основные селекторы CSS.

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

Селектор HTML-тега.

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

Селектор класса.

Чтобы выбрать на странице все элементы с определенным классом, нужно написать класс элементов с точкой впереди. Например, чтобы все элементы с классом red сделать красными, мы напишем:

Селектор идентификатора.

Также у нас на странице может встретиться элемент с определенным идентификатором, чтобы нам его получить, необходимо написать идентификатор с символом # впереди. Например, сделать фон у элемента с идентификатором ident черным:

Мультиселектор.

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

Селектор потомка.

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

Селектор первых потомков.

Обычно данный селектор пригождается, когда у нас есть многоуровневая вложенность однотипных элементов, например, многоуровневое меню. Пишется данный селектор как селектор потомка, только между элементами добавляется символ >. Например, нам нужно выбрать все элементы li первого уровня и сделать им кегль 18px:

Селектор правого соседа.

Данный тип селекторов тоже помогает при работе со списками. Например, вам необходимо добавить слева отступ 10px у всех элементов кроме первого:

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

Допустим, вам необходимо выбрать все элементы input с атрибутом type равным text:

Составные селекторы.

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

Отлично! Мы прошли с вами основные селекторы CSS.

Каскадность.

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

Например, селектор идентификатора имеет приоритет над селектором класса, а более точно заданный селектор будет иметь приоритет над селектором более общим.

Псевдоклассы.

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

  • :not(селектор) – все, кроме подходящих под селектор.
  • :focus – в фокусе.
  • :hover – под мышью.
  • :empty – без детей (даже без текстовых).
  • :checked, :disabled, :enabled – состояния INPUT.
  • :target – этот фильтр сработает для элемента, ID которого совпадает с анкором #… текущего URL.

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

Также есть еще следующие псевдоклассы:

  • :first-child – первый потомок своего родителя.
  • :last-child – последний потомок своего родителя.
  • :only-child – единственный потомок своего родителя, соседних элементов нет.
  • :nth-child(a) – потомок номер a своего родителя, например :nth-child(2) – второй потомок. Нумерация начинается с 1.
  • :nth-child(an+b) – расширение предыдущего селектора через указание номера потомка формулой, где a,b – константы, а под n подразумевается любое целое число.
  • Этот псевдокласс будет фильтровать все элементы, которые попадают под формулу при каком-либо n. Например: -:nth-child(2n) даст элементы номер 2, 4, 6…, то есть чётные.
  • :nth-child(2n+1) даст элементы номер 1, 3…, то есть нечётные.
  • :nth-child(3n+2) даст элементы номер 2, 5, 8 и так далее.

Псевдоэлементы.

Также мы можем использовать вспомогательные элементы, которые называются “псевдоэлементы”. При помощи них мы можем добавлять содержимое в конец и начало элемента при помощи конструкции ::before и ::after.

Например, таким образом можно добавить кавычки ссылке, которые не будут подчеркнуты:

Блочные и строчные элементы.

В CSS существуют два основных типа элементов:

  • Блочные – это элементы высшего уровня, которые форматируются как блоки и генерируют новые блоки контента. Примеры блочных элементов: div, p, h1-h6, header, section и так далее.
  • Строчные – это элементы, которые генерируют внутристрочные контейнеры. Они не создают новых блоков контента. Примеры строчных элементов: a, em, strong, label, small, span и так далее.

Блочная модель.

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

  • Расстояние от потолка, стен и пола до рамки картины – это внешние отступы (margin).
  • Расстояние от рамки до изображения – это внутренние отступы (padding).
  • Само изображение это содержимое, которое имеет высоту (height) и ширину (width).
  • Рамка и ее толщина – это границы блока (border).

Позиционирование.

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

Как выучить CSS

Здравствуйте ребята! Вот наконец-то я пишу свой первый пост на блоге, в котором хочу рассказать как я изучал языки программирования html и CSS. Сперва я хочу рассказать для чего я вообще решил изучать эти языки, и как они мне пригодились в итоге. Все началось с того, что я хотел узнать как правильно технически оптимизировать сайты. Я много изучал эту тему, читал статьи, спрашивал на форумах, на которых по большей степени умалчивали по данной теме. В результате плотного изучения данной темы, я пришел к выводу что большую роль процентов 50% в технической оптимизации сайта играет важную роль именно шаблон.

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

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

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

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

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

Многие просто записывают лижбы записать, и закончить урок. А другие наоборот рассказывают про каждый элементы и говорят почему они так делают. Смотрел я помню курс один по PHP где автор практически не чего не рассказывал а просто писал код и записывал на видео без объяснений. Как так можно обучать и чего то научиться я не знаю, по этому я тот курс так и не досмотрел. Но как я говорил есть и хорошие курсы где автора хорошо рассказывают и показывают что нужно делать. Первый видеокурс который мне попался это — «Создание успешного шаблона на Joomla 2.5» от Александра Куртеева.

Данный курс мне очень понравился, автор все хорошо и понятно преподнес в результате чего я сверстал первый свой шаблон для Joomla 2.5. Хоть курс был и хорошим, но мне этого было мало особенно в плане работы с CSS. Дальше мне попался видеокурс «WordPress мастер с нуля до премиум шаблона. В этом курсе автор с объяснениями полностью сверстал 3 шаблона на html, где использовал много элементов CSS, а также показал как верстать шаблоны под мобильные устройства.

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

Вот в принципе и все что хотел рассказать как я изучал CSS и HTML. Но помимо своего опыта я хочу дать рекомендации для тех кто решит изучать данный язык. Итак первое что я рекомендую вам сделать, это просмотреть видеокурсы о которых я написал выше, так как в них вы получите не только знания языка, но и научитесь создавать шаблоны и интегрировать их на CMS. Вторая рекомендация — посмотрите дополнительно видеокурсы от студии «WebForMySelf» «Практика резиновой верстки» и Практика адаптивной верстки (Под мобильные устройства).

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

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

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

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

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

Что такое HTML и CSS и зачем нужно их знать?

HTML – это язык разметки, который указывает браузерам (Google Chrome, Яндекс.Браузер и другим подобным программам), где и какие элементы выводить на странице сайта. Например, где находится заголовок, основной текст, ссылки на другие страницы, меню, списки, таблицы и так далее.

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

С чего начать самостоятельное изучение HTML?

Язык разметки HTML состоит из тегов. Условно теги – это элементы, которые указывают браузеру, что должно выводиться на странице. Например, есть теги, которые обозначают вставку картинки или фотографии, видео, таблицы. Есть теги, которые обозначают начало и завершение абзаца.

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

Чтобы самостоятельно выучить язык HTML, необходимо:

  • Изучить основные теги, которые размечают заголовки (h1-h6), текст и его деление на абзацы, формируют нумерованные и ненумерованные списки (p, br, ul, ol, li), выставляют ссылки (a), изображения и другие объекты (img, object), выделяют фрагменты жирным или курсивом (strong, b, i), размечают таблицы (table, tr, td), вставляют формы (form, input, textarea, select, option), структурные теги (div, span), а также – основные теги (html, head, title, body). Кажется, что команд очень много, но на самом деле их можно выучить самостоятельно за 2-3 дня.
  • Выучить атрибуты для популярных тегов. Не обязательно знать все атрибуты наизусть. Есть бесплатные справочники, в которых можно искать эту информацию во время работы.
  • Изучить структуру HTML-кода, чтобы понять, как создаются страницы сайтов.
  • Прочитать о табличной верстке – это устаревший вид верстки, который на современных сайтах не используется. Однако вам нужно знать, что это такое, чтобы не теряться, если придется работать с версткой старого сайта.
  • Научиться блочной верстке при помощи дивов (div). Это современный тип верстки, который нужно хорошо знать.
  • Прочитать про валидную верстку. Есть организация, которая определяет стандарты HTML. Она называется W3C. Валидной называется верстка, которая полностью отвечает стандартам W3C. На практике их часто нарушают и не каждая верстка может быть валидной. Но в любом случае про этот стандарт нужно знать.

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

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

Как выучить CSS с нуля?

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

  1. Основы синтаксиса: основные селекторы, их свойства и значения. На словах кажется сложно, но на деле – просто. Например, в CSS вы можете задать оформление заголовка, указав, какой у него должен быть шрифт, размер шрифта, отступы от других элементов на странице, цвет и другие параметры. Чтобы знать CSS, вам нужно изучить, какие параметры вы можете задавать у разных элементов на страницах.
  2. Изучить, как при помощи CSS задавать позиционирование разных элементов на странице.
  3. Узнать, что такое псевдоклассы и комбинаторы.

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

Дополнительно рекомендуется выучить:

  1. Препроцессоры.
  2. Фреймворки, особенно Bootstrap. Фреймворк – это готовое решение, на базе которого можно быстро создать верстку нового сайта.
  3. Управление преобразованием, переходами и анимацией.

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

На каких сайтах можно освоить HTML и CSS?

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

Следуйте этим советам, чтобы стать суперзвездой CSS после его изучения

Дата публикации: 2019-04-30

От автора: CSS (Cascading Style Sheets) — одна из основных технологий, используемых для создания веб-страниц. Поскольку это ЕДИНСТВЕННЫЙ язык таблиц стилей, который могут понять браузеры, очень важным является глубокое изучение CSS.

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

Почему важно изучать CSS правильно

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

Вы начнете гуглить основные вещи, такие как «как центрировать два элемента div » или «как выровнять элемент div и текст по вертикали», и каждый раз копировать и вставлять код со StackOverflow или codePen. В те времена, когда flexbox не стал так популярен, «как выровнять div на странице как по вертикали, так и по горизонтали?» был классическим вопросом на собеседовании по CSS. Многие новички могли справиться правильно с горизонтальной частью, но только некоторые могли правильно сделать это по вертикали.

Дорожная карта

1. Основы

Если вы только начинаете веб-разработку, изучите некоторые основы HTML, прежде чем приступать к CSS. В CSS сначала прочитайте теорию о том, что такое CSS, как он работает в браузере, а также его основной синтаксис и использование.
Подробнее о различных доступных видах стилей, их различиях, селекторах и основных стилях, таких как font-size, width, height и т.д. Вы можете начать с руководства MDN.

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

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

2. Блочная модель CSS

Источник изображения: https://developer.mozilla.org

Изучите основы блочной модели CSS и связанные с нею свойства, такие как margin, border, padding и т. д.

3. Изображения и фон

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

Что такое CSS?

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

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

Ну и что? Спросите Вы.. Зачем мне этот пресловутый CSS? Я и HTML-ом в чистом виде неплохо обходился!

Приведу ряд доводов в пользу использования CSS:

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

Предположим, Вы написали сайт в нем 100 страниц.. хороший сайт, информативный, люди на него ходят.. И вдруг по каким либо причинам Вам понадобилось изменить его дизайн, ну не знаю, мода изменилась, Вы нашли более лучшее дизайнерское решение, заказчику пришлось не по душе.. да мало ли еще почему.. Сколько времени и сил у Вас уйдёт на то что бы полностью переделать все 100 страниц сайта? CSS предлагает разумное решение этой задачи. А что если один раз в отдельном файле полностью описать весь дизайн сайта? Допустим: все заголовки <h1> делать красным цветом, параграфы <p> писать курсивам, ссылки <a> не подчёркивать 🙂 фон на всех страницах залить зелёным, и т. д. … а потом просто заставить эти 100 страниц HTML обращаться к файлу CSS и черпать из него нужную информацию? Теперь когда Вам вздумается, к примеру, перекрасить все заголовки из красного в зеленый, Вам ненужно открывать все 100 страниц находить в них теги <h1> и указывать в каждом что ты теперь не красный а зелёный! Вам нужно всего лишь открыть файл описание и изменить в нем цвет элемента <h1> на зелёный и всё!! Все заголовки на всех страницах сайта как по взмаху волшебной палочки станут зелеными.

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *