Основы CSS
Аббревиатура CSS расшифровывается как Cascading Style Sheets, что в переводе означает «каскадные таблицы стилей». Это язык разметки, используемый для визуального оформления веб-сайтов.
Объекты, расположенные на странице, размещаются с помощью HTML. А вот CSS отвечает за то, как эти объекты выглядят. Их размер, цвет, фоновое изображение, степень прозрачности, расположение относительно других элементов, поведение при наведении курсора, визуальное изменение кнопок при нажатии и т.п.
Вот сайт, сделанный с помощью одного лишь HTML:
А вот как выглядит та же страница после добавления CSS-разметки и оформления блоков с помощью каскадных таблиц стилей:
Практически любые «внешние проявления» сайта создаются с помощью CSS. Это стиль ваших страниц.
Синтаксис разметки
Язык CSS быстро стал стандартом в веб-разработке, потому что он позволяет быстро изменить визуальное оформление сайта, не прибегая к использованию более сложных языков программирования.
Достаточно ознакомиться с простейшими правилами CSS, и можно легко собрать вполне симпатичный сайт со всем необходимым контентом. «Простота» обеспечивается за счет понятного синтаксиса.
Синтаксис CSS в отдельном файле в соответствующем формате (.css) выглядит так:
селектор {
свойство: значение;
}
-
Селектор – это ссылка на элемент в HTML, над которым будет вестись работа (оформление).
-
Свойство – определенная характеристика элемента, которую нужно изменить. Например, размер или цвет.
-
Значение – цифровое или текстовое обозначение для выбранного свойства.
Попробуем поменять цвет текста в блоке section на красный:
section {
color: red;
}
Как видите, все понятно даже без знания разметки. Даже далекий от программирования человек поймет, что происходит в вышеописанном коде. Это самое лучшее в CSS. Все логично.
Медиазапросы и тег <style>
Выше был продемонстрирован базовый синтаксис, но он может быть куда более замысловатым. Например, для создания стилей под различные разрешения экранов используются запросы @media. Они выглядят так:
@media (max-width: 768px) {
section: {
color: red;
}
}
Такой код изменит цвет текста на красный в разделе section только для экранов с разрешением меньше 768 пикселей.
А еще CSS-разметку можно использовать прямо в HTML-файлах для тестирования стилей и внесения мелких изменений.
<html>
<body>
<section style= "color: red;"></section>
</body>
</html
С другими примерами оформления CSS можно ознакомиться в официальном руководстве MDN.
Что еще может CSS
Выше я уже сказал, что CSS используется для всего визуального оформления документов. Но чтобы стало яснее, посмотрим на примеры использования разметки в коде. Так вы поймете, что возможностей у CSS куда больше, чем кажется.
Например, с помощью CSS можно задать параметры для SVG-изображения:
svg {
width: 120px;
height: 68px;
fill: green;
}
Или создать блоки div любых размеров с SVG-изображением в качестве фона:
.block {
width: 220px;
height: 192px;
background-image: url("../path-to-image/image.svg");
}
Или же вовсе добавить в блок информацию, которой изначально нет в HTML-документе:
.block:after {
content: "kakoy-to-text ";
}
Также можно добавлять контент или CSS-разметку на новые объекты, созданные вне HTML. Для этого в CSS есть псевдоселекторы :after и :before (они позволяют разместить новые элементы до или после выбранного объекта).
И даже это мелочи. С помощью CSS можно рисовать, создавать объекты любых форм, анимировать их и т.п.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Подписаться
ШАГ 1: написание HTML кода
Для этой статьи я предлагаю использовать простейшие утилиты,
например Блокнот от Windows, TextEdit на Mac или KEdit под KDE
вполне подойдут под задачу. Как только Вы поймете основные
принципы, вы можете переключиться на использование более
продвинутых инструментов разработки, например на такие коммерческие
программы как Style Master или DreamWeaver. Но для создания первого
CSS файла не стоит отвлекаться на множество расширенных
возможностей.
Не используйте текстовый редактор наподобие Microsoft Word или
OpenOffice. Эти программы обычно создают файлы, которые не могут
быть прочитаны браузерами. Для HTML и CSS файлов нам нужны обычные
текстовые файлы без какого-либо формата.
Первый шаг заключается в открытии пустого окна текстового
редактора (Notepad, TextEdit, KEdit или любого Вашего любимого) и
наборе в нем следующего текста:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>My first styled page</title> </head> <body> <!-- Site navigation menu --> <ul class="navbar"> <li><a href="index.html">Home page</a> <li><a href="musings.html">Musings</a> <li><a href="town.html">My town</a> <li><a href="links.html">Links</a> </ul> <!-- Main content --> <h1>My first styled page</h1> <p>Welcome to my styled page! <p>It lacks images, but at least it has style. And it has links, even if they don't go anywhere… <p>There should be more here, but I don't know what yet. <!-- Sign and date the page, it's only polite! --> <address>Made 5 April 2004<br> by myself.</address> </body> </html>
Вам не обязательно это перенабирать — вы можете просто
скопировать и вставить текст с этой страницы в редактор.
(Если вы используете TextEdit на Макинтоше, не забудьте указать
TextEdit’у, что это действительно простой текстовый файл, открыв
меню Format и выбрав опцию “Make plain text”.)
Первая строчка нашего HTML файла говорит браузеру
о типе документа (DOCTYPE обозначает DOCument TYPE). В нашем
случае — это HTML версии 4.01.
Слова между < и > называются тэгами и как вы
можете видеть, документ содержится между <html> и
</html> тэгами. Между <head> and </head>
находится различная информация, которая не отображается в самом
документе. Например там содержится заголовок документа. Позже мы
добавим туда и связь с CSS файлом.
Тэг <body> это место содержимого документа. В принципе,
все что находится внутри этого тэга за исключением текста между
<!— и —>, являющегося комментариями, будлет выведено на
экран. Комментарий браузером игнорируется.
Тэг <ul> в нашем примере задает отображение
“неупорядоченного списка” (Unordered List), т.е. списка, элементы
которого непронумерованы. Тэги <li> начинают “элементы
списка” (List Item). Тэг <p> является “параграфом”. А тэг
<a> — “якорь” (Anchor), с помощью которого создаются
гиперссылки.
Код HTML в редактор KEdit.
Давайте предположим, что данная страница будет одной из страниц
Веб сайта, состоящего из нескольких похожих страниц. Как мы и
договорились, эта страница будет содержать ссылки на другие
страницы нашего гипотетического сайта, уникальное содержимое и
подпись.
Выберите “Сохранить как…” или “Save As…” из выпадающего меню
Файл или File, укажите каталог для сохранения файла (например
Рабочий Стол) и сохраните данный файл как “mypage.html”. Не
закрывайте редактор, он нам еще потребуется.
(Если вы используете TextEdit для Mac OS X версии меньше чем
10.4, вы увидите опцию «Don’t append the .txt extension» в
диалоговом окне «Save as». Выберите эту опцию, потому что имя файла
“mypage.html” уже включает в себя расширение. Более новые версии
TextEdit заметят .html расширение автоматически.)
Далее, откройте файл в браузере. Вы можете сделать это следующим
образом: найдите файл вашим файловым менеджером (Проводник, Windows
Explorer, Finder or Konqueror) и щелкните (единожды или дважды) на
нем. Если вы делали все как описано то имя файла будет
“mypage.html”. У вас должен открыться файл в браузере,
установленном по умолчанию. (Если нет, то откройте браузер и
перетащите файл в его окно.)
ШАГ 6: добавляем горизонтальные линии
Последним добавлением к нашей таблице стилей станет
горизонтальная полоса для разделения текста и подписи снизу. Мы
используем свойство ‘border-top’ для того чтобы добавить
прерывистую линию над элементом <address>
(строки 34-37):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
</style>
</head>
<body>
Что нужно знать о комментариях в CSS
В CSS вы можете добавлять комментарии, чтобы объяснить или организовать различные разделы таблицы стилей. Это может показаться лишним шагом в процессе кодирования, но комментарии могут быть чрезвычайно полезны при отладке или редизайне вашего сайта.
Почему? Потому что они рассказывают читателю, какова цель конкретных строк CSS. Эти идеи особенно полезны, если над веб-сайтом работают несколько разработчиков или если вы унаследовали сайт от другого владельца.
Если вы раньше просматривали таблицу стилей или читали достаточно сообщений в блоге с фрагментами кода, возможно, вы уже видели комментарии. Их можно узнать по знакам / /, которые их окружают.
В этом посте мы рассмотрим, как создавать собственные комментарии. Затем мы рассмотрим, что значит «закомментировать» в CSS и как это сделать. Давайте начнем.
Взаимодействие подключений
В спецификации css прописана определенная иерархия для перечисленных способов подключения стилей. Так, разберем вначале первые 3.
Если структурировать по приоритетам, то выше стоят встроенные стили, а далее глобальные и внешние. При этом их можно миксовать, т.е. в одном веб-сервисе использовать одновременно несколько вариантов стилевого описания.
Что касается импорта, то он функционирует только с внешним и глобальным подключением стилевых таблиц.
Надеюсь, вам была полезной эта публикация. Делитесь впечатлениями о моем блоге с друзьями и подписывайтесь на обновления. Пока-пока!
Прочитано: 1194 раз
Псевдо-классы
В отличие от классов, псевдо-классы не нужно указывать в HTML разметке, они сами вычисляются браузером. У нас есть 4 статических псевдо-класса и 3 динамических псевдо-класса, без учёта CSS 3, о нём ближе к концу. К статическим относятся ( :first-child, :link, :visited, : lang() ):
<style>
p:first-child {color: green;} /* сработает, если p является первым ребёнком своего родителя */
</style>
<div>
<p>Прямой наследник (первый уровень)</p>
<span>
<span>
<p>Третий уровень</p>
</span>
</span>
<p>Прямой наследник (первый уровень)</p>
<span>
<p>Второй уровень</p>
</span>
<p>Прямой наследник (первый уровень)</p>
</div>
Результат:
Естественно можно комбинировать селекторы как захотим, например:
div>span p:first-child {color: green;} /*сработает, если p является первым ребёнком своего родителя и находится внутри тега span, который является прямым потомком тега div */
Название представленного выше псевдо-класса говорит само за себя first-child — первый ребёнок.
Следующие два статических псевдо-класса применяются только к тегу гиперссылки (:link, :visited), они применяют CSS свойства в зависимости от того, посещалась данная ссылка конкретным пользователем или нет:
a:link {color: blue;} /* у не посещённых ссылок задаём синий цвет, и по умолчанию они подчёркнуты */
a:visited {color: green; text-decoration: none;} /* у посещённых ссылок текст будет зелёным, убираем подчёркивание */
Псевдо-класс :lang() используется для задания разного стиля оформления в зависимости от языка. В скобочках указывается язык, к которому нужно применить оформление. Это можно использовать, например, для задания разных стилей кавычек в цитатах:
q:lang(de) {quotes: "\201E" "\201C";} /* кавычки для немецкого языка */
q:lang(en) {quotes: "\201C" "\201D";} /* кавычки для английского языка */
q:lang(ru) {quotes: "\00AB" "\00BB";} /* кавычки для русского языка */
Это, пожалуй, единственный из всех возможных видов селекторов, который я никогда не использовал.
Внутренняя таблица стилей
Данный стиль определяется в самом HTML-документе и обычно располагается в заголовке веб-страницы HEAD. По своей гибкости и возможностям этот способ подключения стилей уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, стили разполагаются прямо в теле HTML-документа. Вы можете включить правила CSS в НТМL-страницу, поместив их внутри элемента <style>, который обычно находится в элементе <head>, но фактически может быть помещен в любом месте документа. Этих тегов на странице может быть несколько.
Тег <style> позволяет записывать внутри себя код в формате CSS:
Пример: Внутренняя таблица стилей
- Результат
- HTML-код
- Попробуй сам »
В данном примере мы с помощью CSS установили цвет фона для элемента <body>: background-color:palegreen, цвет и тип шрифта для заголовков <h1>: color: blue; font-family:verdana, а также размер шрифта, цвет и выравнивание текста по центру для параграфов <p>: font-size:20px; color:red; text-align:center.
Включение комментариев в ваш CSS-код полезно и настоятельно рекомендуется
Каждый веб-сайт состоит из структурных (которые определяются HTML), функциональных и стилистических элементов. Каскадные таблицы стилей (CSS) используются для определения внешнего вида («внешнего вида») веб-сайта. Эти стили хранятся отдельно от структуры HTML, что позволяет легко обновлять и придерживаться веб-стандартов.
Проблема со стилями
Учитывая размер и сложность многих веб-сайтов сегодня, таблицы стилей могут быть довольно длинными и громоздкими. Это особенно верно сейчас, когда медиа-запросы для адаптивных стилей веб-сайта являются неотъемлемой частью дизайна, гарантируя, что веб-сайт будет выглядеть так, как должен, независимо от устройства. Одни только эти медиа-запросы могут добавить значительное количество новых стилей к документу CSS, что затрудняет работу с ним. Здесь комментарии CSS могут стать неоценимой помощью для дизайнеров и разработчиков сайтов.
Комментарии Добавить структуру и ясность
Добавление комментариев к файлам CSS веб-сайта – отличный способ организовать разделы этого кода для читателя, который просматривает документ. Это также обеспечивает согласованность, когда один веб-профессионал начинает с того места, где остановился другой, или когда на сайте работают группы людей.
Хорошо отформатированные комментарии могут сообщать о важных аспектах таблицы стилей членам команды, которые, возможно, уже не знакомы с кодом. Эти комментарии также очень полезны для людей, которые работали на сайте раньше, но не в последнее время; веб-дизайнеры обычно работают на многих сайтах, и запоминание стратегий проектирования от одного к другому затруднительно.
Только для профессионалов
Комментарии CSS не отображаются, когда страница отображается в веб-браузерах. Эти комментарии носят исключительно информативный характер, так же как и комментарии HTML (хотя синтаксис другой). Эти CSS-комментарии никак не влияют на визуальное отображение сайта.
Добавление комментариев CSS
Добавить комментарий CSS довольно просто. Вы просто добавляете комментарий с правильными открывающими и закрывающими тегами комментариев:
Все, что появляется между этими двумя тегами, является содержимым комментария, видимым только в коде и не отображаемым браузером.
Комментарий CSS может занимать любое количество строк. Вот два примера:
Разрыв разделов
Многие дизайнеры объединяют таблицы стилей в небольшие, легко усваиваемые фрагменты, которые легко сканировать при чтении. Как правило, перед вами появляются комментарии, за которыми следуют последовательности дефисов, которые создают большие очевидные разрывы на странице, которые легко увидеть. Вот пример:
Эти комментарии указывают на начало нового раздела кодирования.
Код “Закомментирование”
Поскольку теги комментариев говорят браузеру игнорировать все, что находится между ними, вы можете использовать их для временного отключения определенных частей кода CSS. Это может быть удобно при отладке или при настройке форматирования веб-страницы. Фактически, дизайнеры часто используют их, чтобы «закомментировать» или «отключить» области кода, чтобы посмотреть, что произойдет, если этот раздел не является частью страницы.
Для этого просто добавьте открывающий тег комментария перед кодом, который вы хотите закомментировать (отключить); поместите закрывающий тег там, где вы хотите, чтобы отключенная часть заканчивалась. Ничто между этими тегами не повлияет на визуальное отображение сайта, что позволит вам отладить CSS, чтобы увидеть, где происходит проблема. Затем вы можете пойти и исправить только эту проблему и удалить комментарии из кода.
Спектакль
Хотя добавление слишком большого количества комментариев может повлиять на скорость и производительность загрузки сайта, не стесняйтесь их использовать. Потребовалось бы много строк комментариев, чтобы оказать существенное негативное влияние. Как и многие другие аспекты веб-дизайна, все сводится к балансу.
Подготовим простой шаблон HTML-страницы для вставки в неё графики
Для наглядности сначала создадим каркас HTML-страницы с неким текстом , а затем вставим в неё картинку, после чего уже разберём все параметры и настройки, которые, в основном, используются и могут быть полезны:
Код 1. Базовый каркас HTML-страницы
Информацию далее рассмотрим в виде урока, чтобы поочерёдно раскрыть тему детальнее…
Перед началом выполните следующие подготовительные шаги:
- Создайте, например, на рабочем столе, любую папку, в которой будем работать… Назовём её (скачать готовый результат со всеми исходниками можно ).
- В подготовленной папке создайте файл (справка начинающим ), в который поместите предоставленный в блоке HTML-каркас — это будет наша очень простая web-страница, в текст которой будем вставлять картинки и производить с ними различные настройки.
- Для наглядности, чтобы страница имела небольшой логотип, поместите в эту папку файл с названием (например, этот) (его подгрузка на страницу уже прописана в предоставленном коде).
Итого, мы имеем папку и в ней 2 файла:
Рис. 1. Рабочая папка с файлами
Синтаксис CSS-правил
Давайте разберем основу основ CSS, а именно, синтаксис написания CSS-правил. Сделаем это на примере правила для тега
<h1> , которое мы написали выше.
Посмотрите на картинку:
Объявление стиля (или CSS-правило) состоит из 2-х частей:
- Селектор, в нашем случает h1 (о селекторах позже поговорим подробнее)
- Блок объявлений (находится после селектора в фигурных скобках)
В блоке объявлений, может находится множество объявлений. Каждое объявление состоит из:
- Свойства, которое определяет что будет сделано (в примере text-align – т.е. текст будет выровнен);
- Двоеточия «:» – разделяет свойство и значение;
- Значение, которое описывает как браузер должен обработать свойство (в примере center – т.е. текст будет выровнен по центру)
В CSS определено множество свойств и для каждого свойства имеются допустимые значения. Все их не помнит, наверно, никто. На практике лишь часть из них используется часто, и они быстро запоминаются.
Исходя из того, что все свойства и значения запомнить нереально, вытекает что нужно пользоваться справочниками.
Вот справочный указатель на портале mdn: https://developer.mozilla.org/ru/docs/Web/CSS/Reference
Также мне нравится справочник: https://webref.ru/css
Для CSS в этом справочнике, кроме собственно списка, есть разбивка по категориям, тоже иногда бывает удобно:
Практический алгоритм действий.
Предположим, стоит задача сделать красный текст на желтом фоне.
Мы понимаем, что надо:
- Сделать цвет шрифта красным
- Сделать желтый фон
Ищем подходящие свойства – это color и background-color. В итоге:
{
color: red;
background-color: yellow;
}
|
1 |
{ colorred; background-coloryellow; } |
Пример сложнее. Скажем, вам требуется, в каком-то блоке, фоном которого является картинка, написать текст. Вы пишите его и понимаете, что фоновая картинка слишком пестрая и текст на ней не читается.
Выход из ситуации: наложить сверху какой-то полупрозрачный слой и уже на нем написать текст, тогда он будет читаться.
Но! Вот проблема: вы в принципе не понимаете, как это сделать, какие свойства искать, как к этому подступиться.
Выход простой – в большинстве случаев это кто-то уже делал, идете в поисковик и ищите. Главное правильно сформулировать запрос. Если с первого раза не нашли, переформулируйте запрос.
В нашем примере, введите в яндексе: css сделать полупрозрачный фон.
Посмотрите поисковую выдачи, вы найдете ответ на свой запрос, и даже, с примерами.
Если вам не совсем понятны примеры, то смотрите из каких свойств состоят правила, ищите эти свойства в справочнике и читайте описания.
CSS 3 псевдо-классы
Вы уже ознакомились со всеми основными селекторами и вам на первых парах этого должно хватить с горкой. Однако в CSS 3 появилось множество новых псевдо-классов, теперь мы можем брать не только первого ребёнка, но и любого другого по счёту, можем идти от обратного, брать не первого, а последнего ребёнка и так далее и тому подобное. Всё это очень удобно и практично, разве что у вас могут возникнуть проблемы со старыми версиями IE. Давайте соберём все силы в кулак и пробежимся по всем оставшимся селекторам, чтобы потом уже вы могли иметь их ввиду при вёрстке собственного макета.
:last-child – аналог :first-child, только берёт не первого, а последнего ребёнка.
:only-child – сработает, если элемент (тег) является единственным ребёнком.
:only-of-type — сработает, если элемент (тег) является единственным ребёнком своего типа.
:nth-child() – обращается к потомкам по их порядковым номерам, можно обращаться ко всем чётным или нечётным (even или odd) числам. Например:
<style>
div p:nth-child(5) {background-color: green;} /* Обращаемся к 5 по счёту ребёнку, если он является тегом p. */
div p:nth-child(2n) {background-color: yellow;} /* Обращаемся к каждому второму ребёнку, если он является тегом p. */
div p:nth-child(2n+6) {background-color: red;} /* Обращаемся к каждому второму ребёнку начиная с шестого, если он является тегом p. */
</style>
<div>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<span>текст в спане</span>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
</div>
Результат:
:nth-last-child – работает также как и предыдущий, но отчёт начинается с конца.
:first-of-type – первый ребёнок своего типа в рамках прямого родителя.
:last-of-type – последний ребёнок своего типа в рамках прямого родителя.
:empty – сработает для тех тегов, внутри которых нет ни одного символа (без текста).
:not() – делает исключение для заданных элементов. Пример:
<style>
p:not(.roll) {color: red;} /* для всех параграфов на странице делаем красный цвет текста, за исключением параграфов с классом roll */
</style>
<p class="roll">параграф с классом roll</p>
<p>параграф</p>
<p>параграф</p>
<p class="roll">параграф с классом roll</p>
Результат:
ШАГ 3: изменяем шрифты
Еще одна вещь которую можно сделать — шрифтовое разнообразие
разных элементов на странице. Давайте напишем шрифтом “Georgia”
весь текст, исключая заголовки, которые мы напишем “Helvetica.”
Поскольку в Web никогда нельзя быть целиком уверенным в том,
какие шрифты установлены на компьютерах посетителей, мы добавим
альтернативные способы отображения: если Georgia не найдена, то мы
будем использовать Times New Roman или Times, а если и он не
найден, то браузер может взять любой шрифт с засечками. Если отсутствует Helvetica, то мы
можем попробовать использовать Geneva, Arial или SunSans-Regular
поскольку они очень похожи по начертанию, ну а если у пользователя
нет таких шрифтов, то браузер может выбрать любой другой шрифт без
засечек.
В текстовом редакторе добавьте следующие строки (строки 7-8 и 11-13):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
<body>
Если вы сохраните файл снова и нажмете “обновить” в браузере, то
у вас должны быть разные шрифты в заголовках и в тексте.
Комментарии в HTML, CSS, PHP
В данном уроке я расскажу о том, как делаются комментарии в HTML, CSS, PHP. Комментарии представляют собой текст, который не виден на веб-странице. Они используется для разного рода пояснений, напоминаний, описаний для вебмастеров, что позволяет структурировать документ. Комментарии незаменимы при отладке кода, позволяют быстро сориентироваться в разметке веб-страницы и найти нужный блок. Часто комментарии применяются для отладки кода HTML. К примеру, можно временно закомментировать конкретный блок кода, чтобы он не исполнялся, а в случае необходимости легко его восстановить.
Селекторы в CSS
Теперь, когда мы разобрались с блоком объявлений стилей, нужно разобраться с тем, что находится вначале любого CSS-правила – с селектором.
Селектор указывает, к каким элементам применять объявления стилей.
В нашем примере селектор h1 – это тип элемента, говоря по-простому тег.
Такой селектор означает что стили будут применены ко всем тегам h1 на странице.
В качестве селектора могут выступать:
- элементы (имена тегов), например h2
- класс, перед ним ставится точка, например .my-class
- идентификатор, перед ним ставится решетка, например #main
- псевдоклассы и псевдоэлементы
Универсальный селектор
Существует селектор *.
Он выбирает все элементы на странице. Например правило:
* {
margin: 0;
}
|
1 |
* { margin; } |
установит для всех элементов нулевые внешние отступы.
Элементы
Селекторы элементов дают возможность выбрать, для применения стилей, все элементы одного типа на странице (проще говоря все одинаковые теги). Например:
h2 {
color: blue;
}
|
1 |
h2 { colorblue; } |
Это правило устанавливает для всех заголовков <h2> голубой цвет текста.
Классы
Селекторы классов позволяют выбрать для задания стилей один или более элементов с одинаковыми именами классов.
В элементах классы задаются при помощи атрибута class, например:
<h3 class=»big»>Текст заголовка</h3>
<p class=»big»>Текст абзаца</p>
|
1 |
<h3 class=»big»>Текст заголовка</h3> <p class=»big»>Текст абзаца</p> |
.big {
font-size: 1.4em;
}
|
1 |
.big { font-size1.4em; } |
В этом примере шрифт будет увеличен и для заголовка h3, и для параграфа.
Идентификаторы
Селекторы идентификаторов предназначены для выбора одного конкретного элемента на странице.
В элементах идентификаторы задаются при помощи атрибута id, например:
<div id=»main»>…</div>
| 1 | <div id=»main»>…</div> |
Атрибуты
Селектор по атрибуту позволяет выбрать элементы, имеющие определенный атрибут или атрибут с определенным значением.
Проще всего этот вид селектора показывать на примерах:
titlespanspancontenteditabletrue
Селектор
a – выберет все ссылки, у которых в атрибуте
href содержится
yandex.ru
Полный список вариантов использования этого селектора вы можете посмотреть в документации.
Псевдоклассы
Псевдоклассы в CSS – это определенный набор ключевых слов, которые добавляются к селекторам через двоеточие.
Их предназначение дать возможность применить стили к элементу, когда происходит определенное событие, например когда указатель мыши находится над элементом.
a:hover {
color: red;
}
|
1 |
a:hover { colorred; } |
Правило выше означает, что, когда указатель мыши находится над ссылкой, цвет её текст становится красным.
hoverдокументации
Псевдоэлементы
Псевдоэлементы в CSS – это определенный набор ключевых слов, которые добавляются к селекторам через двойное двоеточие.
С их помощью можно выбрать какую-то часть элемента, и задать для нее свойства.
Например, можно сделать первые буквы заголовков h2 красного цвета:
h2::first-letter {
color: red;
}
|
1 |
h2::first-letter { colorred; } |
Список стандартных псевдоэлементов вы можете посмотреть в документации.
Как делать комментарии в коде?
В сегодняшней статье я хотела бы вам рассказать, как можно делать в html комментарии в коде, а так же в css-стилях и php-файлах.
Для чего нужно оставлять комментарии в коде?
Привычка оставлять пометки и пояснения в коде – это одна из самых полезных привычек программиста или веб-разработчика! Так как это позволяет, во-первых вам самим лучше и быстрее ориентироваться в своём файле, а во-вторых если вы работаете в команде или планируете передавать проект на доработку – то комментарии в html-коде – это незаменимая вещь.
Кроме того это пригодиться вам, в случае если вам нужно какой-то фрагмент кода временно убрать, например, отключить какие-то css-стили, или убрать определённый элемент на html-странице.
Получается, что такая мелочь как умение правильно расставлять комментарии в коде, позволит вам сэкономить много времени и нервов и привести его в более опрятный и понятный вид.
