Всем привет!
В прошлом уроке мы разбирали способы подключения CSS. Теперь перейдём к самому языку.
Как и любой другой язык, CSS имеет свой, однако предельно простой синтаксис. Состоит всего из двух компонентов:
1. Селектор (выбор объекта, с которым будем работать. Например, заголовок, div, таблица и тд.)
2. Блок стилей - описание одного или нескольких свойств объекта - цвет, размер и тд. Заключается в фигурные скобки {}
Мы видим, как заголовку - селектор, в блоке стилей присваивается свойство цвет текста (color) - синий.
Блок стилей состоит из свойств и их значений, которые при перечислении разделяются точкой с запятой ( ; ), как в примере ниже.
Теперь мы добавляем ещё одно свойство - форматирование текста (font). В нём мы придаём значение размер текста - 20 пикселей.
Пример работы CSS
Создайте в любом месте папку, например, урок 2. В ней создайте файл style.css. В него скопируйте весь код ниже. В коде CSS мы задаём свойства для тега <body> и заголовков <h1> и <h2>.
Код CSS (файл style.css)
Обратите внимание, не будет разницы, записывать блок стилей в строчку (h1,h2) или в столбик (body). И тот, и другой вариант будут работать. Выбирайте так, как Вам удобно.
Теперь создаём HTML-файл. Неважно, какое будет название, главное, чтобы путь к файлу с CSS кодом был указан верно. Указывается также как и в ссылках, путях к изображениям. В примере ниже указан путь (style.css) в ту же директорию, что и html-файл. То есть оба файла должны быть в одной папке.
Результат работы вы можете посмотреть >>здесь<<
А так же скачать исходник >>тут<<
В примерах выше в качестве селекторов использовались элементы страницы: body, h1, h2. Однако бывают ситуации, когда нужно работать с конкретным элементом, а не со всеми. Например, все заголовки были синего цвета, а один, в конце, чёрного. Для это существуют разные виды селекторов. Давайте рассмотрим их подробнее.
Идентификаторы
Идентификатор элемента - это селектор, который присваивается одному элементу и делает его уникальным. Задаётся при помощи параметра id.
Разберём пример
Код HTML и CSS
Сначала в стилях у всех параграфов в свойстве цвета указан черный цвет, а текст параграфа с id "blue" будет синим. Селектор в данном случае состоит из элемента (p - параграф), разделителя (# - обозначение идентификатора) и имени идентификатора (blue).
Важно отметить то, что идентификатор в теории даётся только одному элементу, которому хотим придать уникальные свойства. Да, в некоторых браузерах, если дать один и тот же идентификатор двум элементам, то может сработать. Однако, такое получится не во везде.
Если хотите задать стили для нескольких элементов, то следует использовать классы.
Классы
Класс (class) - это селектор, который позволяет применить стили к одному и более элементам. Например, id применим только к одному уникальному элементу. В качестве значения принимается имя элемента.
Код HTML и CSS
В результате параграф с идентификатором (id) blue будет иметь текст синего цвета, элементы с class blue будут выделены полужирным шрифтом и синим цветом. А все остальные элементы p будут иметь шрифт чёрного цвета.
Как видите, класс можно применить несколько раз. Соответственно всё элементы будут иметь свойства описанные для данного класса.
Унифицированные селекторы
Унифицированные селекторы (.) - это селектор, который можно присвоить разному типу элементов, например, и заголовкам, и параграфам, и блокам (div). Самый распространённый вариант. До этого мы использовали конструкцию в коде CSS p#blue и p.blue, то есть сначала указывали тип элемента (p - параграф), а потом уже сам идентификатор или класс. Так вот можно указывать конструкцию проще, сразу начинать с .blue. Подобный селектор будет применим уже не только к параграфам, а к другим элементам.
Код HTML и CSS
В результате унифицированный селектор, в данном случае класс .blue, мы применили и к парафграфу (p), и к блоку (div), и к строковому элементу (span). Результат везде одинаковый - текст полужирный и синего цвета.
Контекстные селекторы
Контекстный селектор - это селектор, который выделяет один элемент в группе других элементов. В написании выделяется пробелом. Чтобы было легче, сразу перейдём к примеру. Допустим мы хотим, чтобы полужирный текст, содержащийся в параграфах выделялся ещё каким-либо цветом.
Код HTML и CSS
Соответственно синим будет выделен только тот полужирный текст (strong), который будет в параграфе (p).
Группировка селекторов
Группировка селекторов - это такая конструкция таблицы стилей, где блок объявления стилей обращён к одному и более ранее упоминаемым элементам и добавляет новое свойство.
По тексту сложно понять. Лучше сразу к примеру.
В первой строке мы упоминаем сразу несколько элементов. Для того, чтобы обратиться сразу к нескольким элементам надо в селекторе перечислить их через знак , (запятую) и пробел. Перед последним перечисляемым элементом запятая и пробел НЕ нужны.
Последующими упоминаниями данных элементов мы добавляем им значения новых свойств. В данном случае размера шрифта.
Код HTML и CSS
В результате все заголовки будут синего цвета. Однако разных размеров, так как последующие записи в таблице стилей давали заголовкам разный размер.
Использование группировки - вопрос спорный. Среди преимуществ можно отметить то, что удаётся избегать крупных частей кода, которые по содержание будут во многом дублировать себя. Из недостатков можно сказать, что использование подобного кода, где свойства к тому или иному элементу дописываются в разных местах достаточно проблемно и неудобно. Конечно, при грамотном последовательном написании можно избежать подобных минусов, но это уже другой вопрос.
На этом всё друзья)
Основной источник >тут<
Отдельное спасибо за содержательность статьи Сергею Касаткину
В прошлом уроке мы разбирали способы подключения CSS. Теперь перейдём к самому языку.
Как и любой другой язык, CSS имеет свой, однако предельно простой синтаксис. Состоит всего из двух компонентов:
1. Селектор (выбор объекта, с которым будем работать. Например, заголовок, div, таблица и тд.)
2. Блок стилей - описание одного или нескольких свойств объекта - цвет, размер и тд. Заключается в фигурные скобки {}
Мы видим, как заголовку - селектор, в блоке стилей присваивается свойство цвет текста (color) - синий.
Блок стилей состоит из свойств и их значений, которые при перечислении разделяются точкой с запятой ( ; ), как в примере ниже.
Теперь мы добавляем ещё одно свойство - форматирование текста (font). В нём мы придаём значение размер текста - 20 пикселей.
Пример работы CSS
Создайте в любом месте папку, например, урок 2. В ней создайте файл style.css. В него скопируйте весь код ниже. В коде CSS мы задаём свойства для тега <body> и заголовков <h1> и <h2>.
Код CSS (файл style.css)
HTML:
body{
background: gray;
color: white;
}
h1{color:#0085cc;}
h2{color:white;}Теперь создаём HTML-файл. Неважно, какое будет название, главное, чтобы путь к файлу с CSS кодом был указан верно. Указывается также как и в ссылках, путях к изображениям. В примере ниже указан путь (style.css) в ту же директорию, что и html-файл. То есть оба файла должны быть в одной папке.
HTML:
<html>
<head>
<title>Пример работы CSS</title>
<!-- Подключаем CSS. После href= в кавычках путь к файлу -->
<linkrel="stylesheet"type="text/css"href="style.css">
</head>
<body>
<h1>Заголовок h1</h1>
<h2>Заголовок h2</h2>
</body>
</html>А так же скачать исходник >>тут<<
Если Вы измените какие-либо свойства в блоке стилей, то для обновления дизайна достаточно обновить страницу (Ctrl+F5).
Селекторы CSS
В примерах выше в качестве селекторов использовались элементы страницы: body, h1, h2. Однако бывают ситуации, когда нужно работать с конкретным элементом, а не со всеми. Например, все заголовки были синего цвета, а один, в конце, чёрного. Для это существуют разные виды селекторов. Давайте рассмотрим их подробнее.
Идентификаторы
Идентификатор элемента - это селектор, который присваивается одному элементу и делает его уникальным. Задаётся при помощи параметра id.
HTML:
<pid="blue">Данному параграфу присвоен id. У него будут уникальные свойства.</p>
<p>Параметры текста останутся по умолчанию.</p>Код HTML и CSS
HTML:
<html>
<head>
<title>Пример работы CSS</title>
<!-- В этот раз используем встроенные стили, не из отдельного файла. -->
<style>
p{ color:black;}
p#blue{ color:blue; }
</style>
</head>
<body>
<pid="blue">Текст который будет синего цвета, потому что есть id</p>
<p>Цвет текста останется по умолчанию.</p>
</body>
</html>Важно отметить то, что идентификатор в теории даётся только одному элементу, которому хотим придать уникальные свойства. Да, в некоторых браузерах, если дать один и тот же идентификатор двум элементам, то может сработать. Однако, такое получится не во везде.
Если хотите задать стили для нескольких элементов, то следует использовать классы.
Классы
Класс (class) - это селектор, который позволяет применить стили к одному и более элементам. Например, id применим только к одному уникальному элементу. В качестве значения принимается имя элемента.
Названия (имя) для id и class могут быть одинаковыми, однако для CSS это всё равно будут разные элементы. В CSS к идентификатору обращается упоминанием символа #, а к классу . (точкой).
Рассмотрим пример:Код HTML и CSS
HTML:
<html>
<head>
<title>Пример работы CSS</title>
<!-- В этот раз используем встроенные стили, не из отдельного файла. -->
<style>
p{ color:black;}
p#blue{ color:blue; }
p.blue{ color:blue; font-weight: bold;}
</style>
</head>
<body>
<p>Цвет текста чёрный.</p>
<pclass="blue">Текст полужирный и синего цвета.</p>
<pid="blue">Текст синего цвета.</p>
<pclass="blue">Текст полужирный и синего цвета.</p>
<p>Цвет текста чёрный.</p>
</body>
</html>Как видите, класс можно применить несколько раз. Соответственно всё элементы будут иметь свойства описанные для данного класса.
Унифицированные селекторы
Унифицированные селекторы (.) - это селектор, который можно присвоить разному типу элементов, например, и заголовкам, и параграфам, и блокам (div). Самый распространённый вариант. До этого мы использовали конструкцию в коде CSS p#blue и p.blue, то есть сначала указывали тип элемента (p - параграф), а потом уже сам идентификатор или класс. Так вот можно указывать конструкцию проще, сразу начинать с .blue. Подобный селектор будет применим уже не только к параграфам, а к другим элементам.
Код HTML и CSS
HTML:
<html>
<head>
<title>Пример работы CSS</title>
<!-- В этот раз используем встроенные стили, не из отдельного файла. -->
<style>
p{ color:black;}
#blue{ color:blue; }
.blue{ color:blue; font-weight: bold;}
</style>
</head>
<body>
<h1id="blue">Заголовок с идентификатором.</h1>
<p>Цвет текста чёрный.</p>
<pclass="blue">Текст полужирный и синего цвета.</p>
<divclass="blue">Текст в блоке тоже полужирный и синего цвета</div>
<spanclass="blue">Текст в строчном элементе тоже полужирный и синего цвета</span>
</body>
</html>Контекстные селекторы
Контекстный селектор - это селектор, который выделяет один элемент в группе других элементов. В написании выделяется пробелом. Чтобы было легче, сразу перейдём к примеру. Допустим мы хотим, чтобы полужирный текст, содержащийся в параграфах выделялся ещё каким-либо цветом.
Код HTML и CSS
HTML:
<html>
<head>
<title>Пример работы CSS</title>
<style>
p strong{ color:blue;}
</style>
</head>
<body>
<p>Цвет текста чёрный. Но теги полужирный шрифта тут не упоминаются.</p>
<strong>Обычный полужирный текст</strong>, который не содержится в параграфе. Поэтому и цвет у него не меняется.
<p>И внимание!!! Параграф с фразой <strong>полужирным шрифтом синего цвета</strong></p>
</body>
</html>Группировка селекторов
Группировка селекторов - это такая конструкция таблицы стилей, где блок объявления стилей обращён к одному и более ранее упоминаемым элементам и добавляет новое свойство.
По тексту сложно понять. Лучше сразу к примеру.
HTML:
h1, h2, h3{ color:blue;}
h1{ font-size:18px;}
h2{ font-size:16px;}
h3{ font-size:14px;}Последующими упоминаниями данных элементов мы добавляем им значения новых свойств. В данном случае размера шрифта.
Код HTML и CSS
HTML:
<html>
<head>
<title>Пример работы CSS</title>
<style>
h1, h2, h3{ color:blue;}
h1{ font-size:18px;}
h2{ font-size:16px;}
h3{ font-size:14px;}
</style>
</head>
<body>
<h1>Заголовок h1</h1>
<h2>Заголовок h2</h2>
<h3>Заголовок h3</h3>
</body>
</html>Использование группировки - вопрос спорный. Среди преимуществ можно отметить то, что удаётся избегать крупных частей кода, которые по содержание будут во многом дублировать себя. Из недостатков можно сказать, что использование подобного кода, где свойства к тому или иному элементу дописываются в разных местах достаточно проблемно и неудобно. Конечно, при грамотном последовательном написании можно избежать подобных минусов, но это уже другой вопрос.
На этом всё друзья)
Основной источник >тут<
Отдельное спасибо за содержательность статьи Сергею Касаткину
Последнее редактирование: