Основы CSS и HTML
Логика работы CSS и HTML, а также синтаксис этих языков
В этой части мы обсудим и подробно разберем основы CSS и HTML кодов, которые нужно понимать и знать каждому дизайнеру. Зная эти основы, вы сможете самостоятельно писать код без использования чужих готовых шаблонов.
Зачем нужен дизайн CSS
Что, по сути, есть изменение дизайна? Это изменение графической составляющей форума и интерфейса.
Любые форумы и сайты - это таблицы или блоки с текстом и ссылками. А дизайн CSS позволяет этим таблицам принять удобный вид для чтения и восприятия информации.
Например, на форумах визуально разделены разные элементы - страница тем отделена от общего фона сраницы каким-нибудь фоном или рамочкой, разные посты отделяются друг от друга визуальными границами, а информация об авторе стоит справа/слева от сообщений - все это заслуга CSS.
На этих скриншотах вы можете увидеть как выглядит сайт вообще БЕЗ любых кодов CSS и сравнить их с одним из стандартных стилей движка:
Форум без дизайна
Главная страница | Форум со стандартным дизайном
Главная страница |
Форум без дизайна
Страница топика (темы) | Форум со стандартным дизайном
Страница топика (темы) |
Как вы видите, без CSS контент на страницах вообще не возможно адекватно воспринимать, а с самым стандартным простеньким дизайном движка всё становится понятно и компактно - меню выстраиваются в ряд, таблички имеют отступы и разделители, лишние надписи убраны, заголовки подкрашены и т.д.
Таким образом, основная задача дизайна не просто наведение красоты, но и самое главное - улучшение интерфейса. И об этом никогда не стоит забывать в разработке своих стилей. Главное - не то, какого цвета рамочки и какая сисястая красавица будет в шапке, а главное - чтоб у вас не "слиплись" элементы интерфейса друг с другом в нечитаемую кашу, где одно невозможно отличить от другого.
Наверх к оглавлению
Как работает HTML
Что такое HTML и чем он отличается от CSS.
HTML - это специальные теги, которые содержат внутри контент вашей страницы.
На примере выше можно увидеть, что если удалить CSS код, HTML коды никуда не делись, просто у них обнулился дизайн до такого, который есть в браузерах по умолчанию: белый фон, черный текст Times New Roman, синие ссылки, гигантский размер шрифта у заголовков и т.д.
В разных движках форумов или сайтов HTML код страницы формируется по-разному. В хороших движках у администратора есть доступ в шаблоны страниц и вы можете сами втыкать контент между выбранных ВАМИ тегов. Во всяких сайтах-конструкторах и бесплатных форумных хостингов доступ к HTML-коду страниц часто отсутствует: они предоставляют некий "стандартизированный" код и менять его можно только скриптами.
Важно понимать: CSS код не меняет HTML элементы. Он заставляет их выглядеть и отображаться по-другому, это только визуальная часть. Например, можно с помощью CSS заставить меню "прилипнуть" к верху окна браузера, но "физически" меню остается в коде страницы там же, где и было - оно не перемещается в самый верх. Зная это, вы можете понимать, какие проблемы решает CSS, а где нужно искать скрипты, либо (если есть такая возможность) лезть в шаблоны страниц.
Структура HTML
Основа HTML кода любого сайта будет такой:
Внутри body будут располагаться все элементы страницы.
Теги вложены друг в друга и идут такой вот "лесенкой":
Тег, который вложен внутрь, называется дочерним элементом.
А тег, внутрь которого вложен дочерний элемент, называется родительским элементом
На примере выше:
Дочерние элементы
<p></p> является дочерним элементом для <div></div>
<span></span> является дочерним элементом для <p></p> | Родительские элементы
<div></div> является родительским элементом для <p></p>
<p></p> является родительским элементом для <span></span> |
Понимать эти термины и структуру HTML нужно для дизайна, т.к. все эти теги отвечают за "слои" нашего дизайна.
Например, когда мы ставим фон для дочернего элемента, он будет отображаться поверх фона родительского элемента.
Или, например, мы можем позиционировать элементы относительно друг друга - и в этом случае важно понимать, где родитель, а где внутренний элемент.
Подробнее об этом мы поговорим в главе, посвященной погружению в верстку CSS.
Синтаксис HTML
У всех HTML-тегов (как и у CSS или любого языка программирования) есть синтаксис - правила их написания:
Первый тег называется "открывающий тег": название тега пишется латинскими буквами без пробелов внутри скобочек <>
Второй тег называется "закрывающий тег": название тега пишется латинскими буквами без пробелов внутри скобочек со слешем </>, и естественно название должно быть таким же, как и закрывающий тег.
Например:
Такой тег сделает текст по умолчанию жирным - даже без использования CSS. А вот если вы не хотите, чтоб текст внутри этого тега был жирным, придется писать CSS-стили, которые заставят теги отображаться по-другому.
ВАЖНО! Надо соблюдать синстаксис HTML, иначе вы "сломаете" код страницы. Например, если не поставить закрывающий тег </b> (или пропустите слеш в закрывающем теге), то весь текст на странице станет жирным. Такая ошибка часто допускается случайно при написании своих HTML кодов. Однако, когда вы понимаете синтаксис, вы знаете, где искать ошибку.
Какие бывают HTML теги.
Стандартных HTML-тегов для контента существует огромное количество, при желании подобрать нужный можно загуглить, например, "HTML как создать таблицу/заголовок/строчный текст/блок/что_там_еще_вам_надо".
У всех стандартных тегов есть определенная связь с стилями по умолчанию. Как в примере выше, текст внутри тегов <b></b> по умолчанию жирный. Теги таблицы позволяет сортировать контент в ячейки, которые расставят их по умолчанию в ряд. Блоки по умолчанию растягиваются на всю ширину страницы и т.д.
Некоторые теги - особые и не имеют закрывающего тега. Например, тег картинки:
Также никто вам не запрещает дописывать СВОИ кастомные теги. Они не будут никак связаны с стандартизированными стилями, зато под них можно прописать свои собственные. Например:
Такой текст вполне можно вставить в любую HTML-форму, теги отображаться не будут, а контент - будет. И потом с помощью стилей CSS можно будет такому тегу задать какое-то особое отображение.
Атрибуты HTML тегов и их синтексис.
Еще у HTML-тегов существуют атрибуты. Это такие специальные надстройки, которые вписываются в открывающие теги и придают им особые свойства.
Синтаксис у атрибутов такой:
Как вы видите атрибуты вставляются в открывающий тег через пробел от названия тега.
После названия атрибута ставится знак равенства и кавычки ="".
В кавычках пишется значение. У разных атрибутов бывают разные значения.
Бывает несколько атрибутов. В этом случае они также пишутся через пробел друг от друга. В конце открывающего тега пробел не нужен.
Примеры:
Код HTML | Демо | Описание атрибута и значения |
| [html]<p title="всплывающий текст">Текст</p>[/html] | title - это атрибут, который добавляет подсказку (которая появляется при наведении курсора)
значением этого атрибута является всплывающий текст - именно он появится при наведении курсора |
| [html]<a href="https://forumd.ru/" target="_blank">Текст ссылки</a>[/html] | href - это атрибут, который определяет адрес ссылки, а адрес ссылки в этом случае является значением.
target - это атрибут, который определяет, где будет открываться ссылка. В данном случае _blank - это значение, которое откроет ссылку в новой вкладке. |
| [html]<img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" style="border:5px solid;">[/html] | Атрибут src устанавливает ссылку на файл, в данном случае его значение - это ссылка на картинку.
Атрибут border устанавливает рамочку вокруг элемента, а значение (цифра 5) - это ширина рамочки. |
Для начинающего дизайнера нет никакой необходимости зубрить все возможные HTML теги и их атрибуты.
Если вы сталкиваетесь с каким-то тегом или атрибутом, который вы не знаете, то можно загуглить, что это такое. А если вы хотите сами дописать какой-то тег, то также можно спрашивать на техподдержке или искать в интернете оптимальные теги для вашей задачи.
Самое главное - понимать синтаксис HTML, этого достаточно для создание первого хорошего дизайна.
HTML атрибуты для дизайна: style, id и class
Теперь поговорим о атрибутах и тегах, которые напрямую влияют на дизайн.
Как уже говорилось выше, у всех стандартных тегов есть некоторые стили по умолчанию, например:
<span>текст</span> - это строчный текст, он по умолчанию встает рядом с другими элементами.
<p>текст</p> - это абзац, он ведет себя как блок: любые элементы после него по умолчанию перенесутся на новую строчку.
<div>текст</div> - это блок, по умолчанию растягивается на всю ширину, и любые элементы после него перенесутся на новую строчку.
"Поведение" любых тегов по умолчанию можно менять с помощью CSS кодов (а также дополнять другими свойствами и стилями). Однако чаще всего мы НЕ хотим, чтобы менялись абсолютно все теги данного типа, а хотим, чтоб какой-то конкретный имел другой стиль.
Один из методов это сделать - атрибут style:
Этот метод - ректальный и пользоваться им не советую: разных стилей для разных тегов может быть много - не удобно пользоваться и редактировать, приходится повторять одни и те же свойства на разных тегах и т.д.
Я упоминаю этот метод только затем, что вы можете найти подобный метод в различных шаблонах по умолчанию, и вам надо понимать, как это исправить. Имея доступ в HTML-код, вы можете убрать этот атрибут, либо заменить на следующий метод стилизации.
Другой метод прописать стили для элементов - это атрибуты id и class.
id - это уникальный идентификатор элемента. В свойства этого атрибута можно вписать только один идентификатор.
ВАЖНО! По правилам "хорошего кода" идентификаторы предназначены для обозначения одного элемента, т.е. один и тот же идентификатор никогда не должен использоваться дважды. Конечно, вы можете расположить на странице разные блоки с одним и тем же ID - это будет работать, но тем самым вы рискуете устроить кашу в коде и лишить себя некоторых возможностей. Для посторяющихся по стилю элементов гораздо лучше использовать классы.
class - это класс элемента. Можно прописать один, а можно сразу несколько.
Также могут быть ситуации, когда для элемента можно присвоить одновременно и идентификатор, и класс одновременно:
Значением атрибутов id и class является любой текст, состоящий из латинских букв и циферок. Также можно использовать символы - или _. Не рискуйте использовать что-либо другое, т.к. не все браузеры реагируют на необычные символы или кириллицу.
Имея в коде атрибуты id и class, мы можем писать любые стили для них в CSS. Например:
Подробнее о том, как это делает написано в следующей части: Как работает CSS - там мы разберем синтаксис CSS и куда вставлять такие коды.
Подробнее о использовании классов и идентификаторов можно почитать тут: Правильное использование классов и идентификаторов.
Наверх к оглавлению
Как работает CSS
Что такое CSS, чем он отличается от HTML и как работать с CSS кодами
CSS (Cascading Style Sheets, каскадные таблицы стилей) — язык описания внешнего вида HTML-тегов.
HTML и CSS действуют в единой связке, но выполняют разные задачи. HTML создает структуру (разметку) страницы: тут сделать табличку, тут добавить блок, здесь вставить заголовок и т.д. А CSS описывает как должна выглядеть структура: пусть табличка растягивается на всю ширину страницы, пусть блок прилипнет к краю экрана, пусть заголовок будет красного цвета и т.д.
В любом движке есть возможность вставлять CSS коды различными методами.
Во-первых, можно вставлять коды через HTML.
В виде ссылки:
<link rel="stylesheet" type="text/css" href="файл.css">
Или с помощью тегов:
<style>
тут ваши коды
</style>
Такие ссылки и теги лучше всего вставлять между тегов <head> - так они будут быстрее обрабатываться.
Но если это не основные стили или платформа не дает возможности редактировать <head>, то можно вставить в другое место, где работает HTML. Основное правило: чем "выше", тем лучше, например, если стиль относится к скрипту - ставьте стиль выше скрипта, чтобы при срабатывании скрипта дизайн не подвисал.
Во-вторых вы можете ссылаться внутри самих CSS стилей на другие css-файлы кодом:
ВАЖНО! такая ссылка должна стоять в самом начале CSS-стиля, иначе она работать не будет.
Пример:
В зависимости от платформы есть разные способы редактировать и добавлять стили. Некоторые движки сильно ограничивают доступ в код, но в большинстве адекватных движков вы можете найти где-то в админке окно для вставки своего стиля: "Свой стиль", "Custom Style", "CSS", "Styles" - что-то в этом роде.
Такое окно обычно движок привязывает к файлу с стилями css и засовывет в HTML между тегами <head>.
Синтаксис CSS: Общее
Любой css код состоит из СЕЛЕКТОРА, СВОЙСТВА и ЗНАЧЕНИЯ.
СЕЛЕКТОР (от англ. select - выбирать; selector - "отборщик") - это "имя" элемента, который меняется. Мы указываем (выбираем), что будет изменено. (например: категории форума, форма ответа, поля профиля и т.п.)
СВОЙСТВО - это параметр элемента, который мы будем менять. Мы указываем, что в выбранном элементе надо поменять (например: фон, размер, границы и т.п.)
ЗНАЧЕНИЕ - это уточнение, каким должно быть свойство. Мы указываем, какие именно изменения произойдут. (например: указываем конкретный цвет, ссылку на фон, размер в пикселях или процентах и т.п.)
Синтаксис написания CSS кода достаточно прост, однако требует внимательности, т.к. пропущенные скобки, точки, запятые и другие знаки, разделяющие все элементы кода приводят к "поломке". Давайте разберем синтаксис поэтапно, чтобы понимать его и не допускать ошибок (либо находить эти ошибки при возникновении).
После селектора ставятся фигурные скобки, внутри которых должны быть коды стиля (свойства и значения):
селектор {тут коды стиля}
Если вы хотите придать одинаковый вид сразу двум или более элементам, т.е. прописать для них одинаковые свойства, названия этих элементов пишутся через запятую перед фигурной скобкой:
селектор, селектор, селектор {тут коды стиля}
ВНИМАНИЕ! После последнего селектора запятая НЕ СТАВИТСЯ!
Также не допускайте пробела перед запятой, иначе код не будет работать! Пробел после запятой можно не ставить, но рекомендую все же его сохранять - так будет визуально проще работать с кодом.
Свойства и значения пишутся внутри фигурных скобок. После свойства ставится двоеточие.
селектор {свойство: значение}
ВНИМАНИЕ! не допускайте пробела перед двоеточием, иначе код не будет работать! Пробел после двоеточия можно не ставить, но рекомендую все же его сохранять - так будет визуально проще работать с кодом.
Свойств у селектора может быть много, нам не нужно для каждого изменения заново указывать один и тот же селектор.
Однако нам нужно разделять парочки свойство + значение точкой с запятой:
селектор {свойство: значение; свойство: значение; свойство: значение;}
После последней парочки (или если внутри фигурных скобок только одна парочка) можно не ставить точку с запятой. Однако рекомендую ставить ее ВСЕГДА - таким образом не будет никаких ошибок, если будете в будущем дописывать новые свойства, т.к., если пропустить точку с запятой, то не будут работать свойства, оставшиеся без этого разделителя.
Также не обязательно писать CSS код в одну строку. CSS коды толерантны к переносу на следующую строчку через enter.
Например:
селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}
| селектор,
селектор,
селектор {
свойство: значение;
свойство: значение;
}
|
В принципе, перенос строки можно организовать вообще где угодно, кроме как в середине слов (селекторов, свойств и значений), однако рекомендую придерживаться только приведенных в пример переносов, опять же, для того, чтобы можно было визуально найти любые ошибки.
Синтаксис CSS: СЕЛЕКТОРЫ
Селектор ссылается на конкретный HTML-код и выбирать селекторы можно разными способами.
Базовые правила написания селекторов таковы:
HTML код |
CSS код | Пояснение |
| Серектором могут быть просто HTML теги, такие как span, div, p и т.д. В этом случае коды применяются на ВСЕ HTML-теги этого типа на страницах сайта.
Например, если вы пропишите, что span должен быть красного цвета, то весь контент внутри любых тегов span окрасятся в красный. |
| Селектор можно взять по классу элемента. Если HTML-код содержит атрибут class="my-class", то в CSS можно сослаться на него поставив точку и название класса: .my-class.
В этом случае коды применятся на ВСЕ HTML-элементы, у которых есть класс с таким названием. В отличие от предыдущего примера, такой способ позволяет применять стили выборочно только к тем элементам, которые помечены определенным классом, а не ко всем тегам данного типа. |
| Селектор можно взять по ID элемента. Если HTML-код содержит атрибут id="my-id", то в CSS можно сослаться на него поставив решеточку и название ID: #my-id.
В этом случае коды применятся на HTML-элемент, у которого есть ID с таким названием. И, как описано выше (см. HTML атрибуты для дизайна), по правилам "хорошего кода" идентификаторы предназначены для обозначения одного элемента, т.е. один и тот же идентификатор никогда не должен использоваться дважды. Соответственно, такие стили будут затрагивать только один конкретный элемент, если в вашем HTML-коде все сделано верно. |
Селектор может быть "многосоставным", т.е. захватывать сразу несколько классов и ID.
Такие селекторы нужны в тех случаях, когда требуется сделать специфичный стиль для конкретного элемента.
HTML код | CSS код | Пояснение |
| | Синтаксис: Если вы хотите выбрать элемент, который имеет одновременно класс и идентификатор, вам необходимо написать селектор без пробела, как в указанном примере.
Применение: Если у нас в коде есть много кнопок с классом class="primary", то конкретно кнопку "Отправить" можно видоизменнить, добавив идентификатор к селектору. |
| | Синтаксис: Если вы хотите выбрать дочерний элемент внутри другого элемента, то селекторы разделяются пробелом, как в этом примере.
ВАЖНО! В этом случае важно следить, что сначала мы указываем селектор родительского элемента, а потом дочернего. Всегда начинаем с элемента, ближайшего к "корню" HTML разметки.
Применение: Если у нас уже прописан стиль для всех элементов с классом class="my-class", то мы можем видоизменить стиль для этого блока, обратившись к родителю с ID id="my-id". |
Селектор можно прописать не по классу или ID, а по другим атрибутам. Например:
| Этот код воздействует на все ссылки (<a>), которые открывают ссылки в новой вкладке (т.е. у которых есть атрибут target со значением _blank) |
| Такой код воздействует на все ссылки (<a>), которые содержат кусочек ссылки /profile.php? (на примере нашего форума - такие ссылки связаны с профилями любых пользователей). |
Как вы видите, селекторы атрибутов могут быть со всякими трюками: не только топорно брать все элементы, содержащие конкретный атрибут, но и реагировать на начало атрибута, конец атрибута, какое-либо слово и т.д. Подробнее о том, как пользоваться селекторами атрибутов можно почитать здесь: CSS селекторы атрибутов
Также существуют селекторы псевдоклассов и псевдоэлементов. Они нужны для того, чтобы не применять классы и скрипты к странице, не лазить в HTML разметку, а решить задачи через CSS.
Псевдокласс — это селектор, который выбирает элементы, находящиеся в специфическом состоянии.
Самый простой пример псевдокласса, с которым вы столкнетесь - это :hover - он позволяет осуществлять какие-либо изменения при наведении курсора.
Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент.
Самые распостраненные примеры псевдоэлементов - это :before и :after - они позволяют добавить контент до или после какого-то элемента, как если бы вы залезли в разметку страницы.
Псевдоклассы и псевдоэлементы - это какбы "надбавки" к селекторам, они пишутся слитно через двоеточие после выбранного селектора. Также вы можете объединять псевдоклассы и псевдоэлементы.
Примеры:
HTML и CSS код | Результат | Пояснение |
<a href="/">Cсылка меняет свое состояние</a>
| [html]<div id="css-exmpl-1"><a href="#css-exmpl-1">Cсылка меняет свое состояние</a></div>
<style>
#css-exmpl-1 a {
display: inline-block;
padding: 10px;
border-radius: 10px;
color: #fff;
background: #0080b7;
}
#css-exmpl-1 a:hover {background: #e63737;}
#css-exmpl-1 a:active {background: #26af33;}
</style>
[/html] | Эта ссылка с помощью CSS превращена в кнопку с синим фоном.
С помощью псевдокласса :hover та же самая ссылка будет иметь крассный фон при наведении на нее курсора.
С помощью псевдокласса :active фон ссылки окрасится в зеленый, если на нее кликнуть. |
<span class="name">
<a href="/profile.php?id=2">Вася</a>
</span>
| [html]
<div id="css-exmpl-2"><span class="name"><a href="#css-exmpl-2">Вася</a></span></div>
<style>#css-exmpl-2 .name:before {content: 'Автор статьи: ';}</style>
[/html] | По умолчанию мы имеем только ссылку на профиль некого Васи.
С помощью псевдоэлемента :before мы вставляем перед ссылкой пояснение, что Вася - это Автор статьи, при этом нам не пришлось лезть в HTML код и дописывать там это пояснение. Такой css-код работает так, как если бы у нас был следующий HTML: |
<div class="my-class">
<div>Первый элемент</div>
<div>Второй элемент</div>
<div>Третий элемент</div>
<div>Последний элемент</div>
</div>
| [html]<div id="css-exmpl-3">
<div>Первый элемент</div>
<div>Второй элемент</div>
<div>Третий элемент</div>
<div>Последний элемент</div>
</div>
<style>
#css-exmpl-3 div:first-child {color: #e63737}
#css-exmpl-3 div:nth-child(2) {color: #f7941d}
#css-exmpl-3 div:nth-child(3) {color: #0481d9}
#css-exmpl-3 div:last-child {color: #26af33}
</style>[/html] | В этом примере у нас есть родительский элемент с классом my-class, но нет селекторов для внутренних блоков.
Если мы хотим применить к ним разные стили, то на выручку приходят порядковые псевдоклассы:
:first-child позволит выбрать ПЕРВЫЙ элемент в списке.
:last-child позволит выбрать ПОСЛЕДНИЙ элемент в списке.
:nth-child(N) позволяет выбрать элемент по порядковому номеру, где N - это цифра, каким по счету стоит элемент внутри родителя.
ВНИМАНИЕ! все эти псевдоклассы применяются по ТИПУ элемента. В нашем случае это div. Если внутри родителя будет еще стоять несколько html-кодов разного типа (div, span, a и т.д.), CSS-код будет игнорировать их и считать порядковый номер элемента div, а не других из того же ряда. |
Синтаксис CSS: СВОЙСТВА и ЗНАЧЕНИЯ
Свойств в CSS великое множество и принимать они могут самые разные значения. Причем, порой, некоторые свойства надо прописать несколько раз для разных браузеров.
Нужно ли их учить как таблицу умножения? Нет, не нужно. Они сами будут потихоньку оседать у вас в голове с практикой. Если вбить в гугл "CSS как сделать текст синеньким" вы найдете нужные свойства.
В этой статье мы разберем в следующей части основные свойства, в которые необходимо углубиться и которые необходимо понимать и осозновать, чтобы избежать ошибок или ситуаций, когда гугл предложит вам далеко не самый рациональный вариант решения проблемы.
Что касается синтаксиса, то можно вас отослать обратно к части Синтаксис CSS: Общее и призвать вас внимательно следить за тем, чтобы они имели правильные разделители:
селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}
Наверх к оглавлению
контент в разработке:
. Возможно, дизайны, где названия и описания разделов в красивой окантовке, а все остальные данные висят в круговерти пустоты, именно так и появились.
Во-вторых, уроков, которые я смогу из себя выдавить, все равно не хватит для специфического дизайна - невозможно предусмотреть все дизайнерские изыскания. Зато мы поговорим о работе в ФШ конкретно со спецификой макетов, а не красивых картинок.
, и весит вообще не много, однако переключаясь на темную тему форума, вы увидите неровные белые края смайла. Так что, использовать прозрачность можно, но нужно делать это с умом.
