Основы работы с языком CSS для новичков
Мы с вами уже разобрали основные теги языка HTML и теперь пришло время навести красоту. Хотелось бы иметь возможность менять цвет текста, его размер, фон и многое другое. Это делается с помощью языка CSS.
Блок . Как работать с CSS
Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу <p> соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет. После селектора следует ставить фигурные скобки {}, внутри которых следует писать CSS свойства.
CSS свойства и задают цвет, размер шрифта и другие интересные вещи. Их следует писать в таком формате: имя свойства, потом двоеточие, потом значение этого свойства (например, свойство — это цвет, а «красный» — это значение). Потом нужно поставить точку с запятой и можно писать следующее свойство.
Давайте покрасим все абзацы в красный цвет:
Это HTML код:
<p>
Абзац с текстом.
</p>Это CSS код:
p {
color: red;
}Так код будет выглядеть в браузере:
Абзац с текстом.
А теперь давайте покрасим абзацы в зеленый цвети сделаем их большого размера:
<p>
Абзац с текстом.
</p>p {
color: red;
font-size: 25px;
}Так код будет выглядеть в браузере:
Абзац с текстом.
Обратите внимание на оформление CSS кода: каждое новое свойство пишется с новой строки.
Блок . Способы подключения CSS к HTML коду
Давайте теперь разберемся с тем, как сделать так, чтобы написанный CSS применился к нашему HTML коду. Это можно сделать тремя способами.
Первый способ заключается в том, что CSSбудет написан в отдельном файле и специальным образом подключен к нашей HTML странице.
Еще два способа заключаются в том, что CSS код будет написан прямо на HTML странице.
Первый способ используется гораздо чаще (в подавляющем большинстве случаев). Одновременно можно применять все три способа.
Давайте разберемся с этими способами более подробно.
Способ 1. Отдельный CSS файл
Самый распространенный способ подключения CSS — это когда он хранится в отдельном файле и этот файл подключается ко всем страницам нашего сайта.
Преимущество такого подхода в том, что CSS файл один, а HTML файлов может быть любое количество, хоть тысяча. Мы сделаем изменение в одном месте CSS файла, например, покрасим все абзацы в красный цвет, и эти изменения применятся на всей 1000 HTML страниц, к которым подключен наш CSS файл. Очень удобно и быстро.
Чтобы подключить CSS файл к HTML странице, в теге head следует написать такую конструкцию: <link rel=»stylesheet» href=»путь к CSS файлу»>
Сам CSS файл должен быть с расширением .css. Обычно его называют styles.css или style.css.
В следующем примере к нашему HTML файлу подключается CSS файл style.css:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>
Это абзац с текстом.
</p>
</body>
</html>Можно подключать не один файл, а несколько. Давайте подключим файлы style1.css, style2.css и style3.css:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="style3.css">
</head>
<body>
<p>
Это абзац с текстом.
</p>
</body>
</html> Способ 2. CSS внутри тега style
Второй способ заключается в том, что CSS код можно написать в теге <style> Его можно размещать как внутри <head> (чаще всего), так и внутри <body>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл </title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>
Это абзац с текстом.
</p>
</body>
</html>Недостаток этого способа в том, что CSS код применяется только к одной странице сайта, а не ко многим. Этот способ обычно применяется тогда, когда нужно написать CSS на конкретной странице сайта, не затрагивая остальных, и, в общем случае, к употреблению не рекомендуется.
Правило такое: если что-то можно сделать первым способом, то использовать второй способ — дурной тон.
Способ 3. CSS внутри атрибута style
Третий способ заключается в том, что можно добавить атрибут style любому тегу на странице и прямо там написать для него HTML код. Обратите внимание на то, что при этом никаких селекторов писать не нужно, так как CSS код применится только к тому тегу, для которого он написан:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
</head>
<body>
<p>
Это абзац с текстом.
</p>
</body>
</html>Третий способ, так же, как и второй, не сильно рекомендуется к использованию, потому что он захламляет HTML код. В настоящее время общепринято то, что языки нужно разделять по отдельным файлам — в одном файле мы пишем на языке HTML, а в другом — на CSS.
Впрочем, иногда без второго и третьего способа не обойтись.
Блок . Комментарии CSS
Так же, как и в HTML, в CSS можно ставить комментарии. Они оформляются следующим образом: слеш и звездочка /*, потом текст комментария, потом звездочка и слеш */. Смотрите пример:
p {
/*
Тут находится
комментарий CSS.
*/
color: red;
font-size: 27px;
}Видео про CSS
Посмотрите следующее видео из заочного курса: скачайте его по данной ссылке. Там я рассказываю про подключение CSS, а также демонстрирую работу с некоторыми свойствами (эти знания пригодятся вам в следующем уроке).
Что вам делать дальше:
Приступайте к решению задач по следующей ссылке: задачи к уроку.
Когда все решите — переходите к изучению новой темы.
code.mu
Введение в CSS | htmlbook.ru
После знакомства с HTML разработчики сайтов разделяются на две основные категории. Одна часть считает, что с помощью HTML на сайте можно создавать всё или практически всё, другая же понимает, что в целом средств разметки недостаточно для оформления веб-документов. Действительно, HTML лишь первый этап в процессе обучения созданию сайтов. Следующим шагом является изучение стилей или CSS (Cascading Style Sheets, каскадные таблицы стилей).
Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы. Чтобы стало понятно, о чем идет речь, посмотрим на рис. 1.1.
Рис. 1.1. Веб-страница, созданная только на HTML
Это обычная веб-страница, оформленная без всяких изысков. Тот же самый документ, но уже с добавлением стилей приобретает совершенно иной вид (рис. 1.2).
Рис. 1.2. Веб-страница, созданная на HTML и CSS
Перемена разительна, поэтому заглянем в код, чтобы понять, в чем же разница (пример 1.1).
Пример 1.1. Исходный код документа
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<title>Флексагон</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Флексагон</h2>
<p>Флексагон представляет собой бумажную фигуру, которая имеет
три и более стороны. Поначалу кажется, что это невозможно, но вспомните
ленту Мёбиуса, она ведь имеет всего одну сторону, в отличие от листа бумаги,
и, тем не менее, реальна. Так же реален и флексагон, который легко сделать и
склеить в домашних условиях. Он выглядит как двухсторонний шестиугольник, но
стоит согнуть его особым образом, и мы увидим третью сторону. Легко убедиться,
что мы имеем дело именно с тремя сторонами, если раскрасить их в разные цвета.
Перегибая флексагон, по очереди будем наблюдать все его поверхности.</p>
</body>
</html>Сам код HTML никаких изменений не претерпел и единственное добавление — это строка <link rel=»stylesheet» href=»style.css»>. Она ссылается на внешний файл с описанием стилей под именем style.css. Содержимое этого файла показано в примере 1.2.
Пример 1.2. Содержимое стилевого файла style.css
body {
font-family: Arial, Verdana, sans-serif; /* Семейство шрифтов */
font-size: 11pt; /* Размер основного шрифта в пунктах */
background-color: #f0f0f0; /* Цвет фона веб-страницы */
color: #333; /* Цвет основного текста */
}
h2 {
color: #a52a2a; /* Цвет заголовка */
font-size: 24pt; /* Размер шрифта в пунктах */
font-family: Georgia, Times, serif; /* Семейство шрифтов */
font-weight: normal; /* Нормальное начертание текста */
}
p {
text-align: justify; /* Выравнивание по ширине */
margin-left: 60px; /* Отступ слева в пикселах */
margin-right: 10px; /* Отступ справа в пикселах */
border-left: 1px solid #999; /* Параметры линии слева */
border-bottom: 1px solid #999; /* Параметры линии снизу */
padding-left: 10px; /* Отступ от линии слева до текста */
padding-bottom: 10px; /* Отступ от линии снизу до текста */
} В файле style.css как раз и описаны все параметры оформления таких тегов как <body>, <h2> и <p>. Заметьте, что сами теги в коде HTML пишутся как обычно.
Поскольку на файл со стилем можно ссылаться из любого веб-документа, это приводит в итоге к сокращению объёма повторяющихся данных. А благодаря разделению кода и оформления повышается гибкость управления видом документа и скорость работы над сайтом.
CSS представляет собой свой собственный язык, который совпадает с HTML только некоторыми значениями, например способом определения цвета.
Типы стилей
Различают несколько типов стилей, которые могут совместно применяться к одному документу. Это стиль браузера, стиль автора и стиль пользователя.
Стиль браузера
Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Например, заголовок страницы, формируемый тегом <h2>, в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.
Стиль автора
Стиль, который добавляет к документу его разработчик. В примере 1.2 показан один из возможных способов подключения авторского стиля.
Стиль пользователя
Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа. В браузере Internet Explorer подключение стиля пользователя делается через меню , как показано на рис. 1.3.
Рис. 1.3. Подключение стиля пользователя в браузере Internet Explorer
В браузере Opera аналогичное действие происходит через команду (рис. 1.4).
Рис. 1.4. Подключение стиля пользователя в браузере Opera
Указанные типы стилей могут спокойно существовать друг с другом, если они не пытаются изменить вид одного элемента. В случае возникновения противоречия вначале имеет приоритет стиль пользователя, затем стиль автора и последним идёт стиль браузера.
Вопросы для проверки
1. Требуется задать цвет заголовка зелёным. Какое стилевое свойство подойдёт для этой цели?
- font-color
- color
- font-family
- text
- font-size
2. Что такое стиль?
- Способ сокращения HTML-кода за счёт переноса части данных в другой файл.
- Язык разметки гипертекстовых документов.
- Набор правил форматирования элементов веб-страницы.
- Метод преобразований текстовых документов в HTML.
- Технология, представляющая собой разные приёмы для вёрстки HTML-кода.
3. Как расшифровывается аббревиатура CSS?
- Colorful Style Sheets
- Cascading Style Sheets
- Computer Style Sheets
- Creative Style Sheets
- Common Style Sheets
Ответы
1. color
2. Набор правил форматирования элементов веб-страницы.
3. Cascading Style Sheets
htmlbook.ru
Урок 2: Как работает CSS?rustutorial
Вы этом уроке вы создадите свою первую таблицу стилей/style sheet. Вы узнаете об основах базовой модели CSS и о том, какие коды необходимо использовать для CSS в HTML-документе.
Многие свойства, используемые в Cascading Style Sheets (CSS), аналогичны свойствам HTML. Таким образом, если вы используете HTML для дизайна страниц, вы, наверняка узнáете многие коды. Посмотрим на конкретном примере.
Базовый синтаксис CSS
Скажем, нам нужен красный цвет фона web-страницы:
В HTML это можно сделать так:
С помощью CSS того же самого результата можно добиться так:
body {background-color: #FF0000;}
Как видите, эти коды более или менее идентичны в HTML и CSS. Этот пример также демонстрирует фундаментальную модель CSS:
Но где размещать CSS-код? Именно этим вопросом мы и займёмся сейчас.
Применение CSS к HTML-документу
Есть три способа применить правила CSS к HTML-документу. Ниже мы рассмотри эти три метода. Мы рекомендуем сосредоточиться на третьем — то есть внешней/external таблице стилей.
Метод 1: Инлайн/In-line (атрибут style)
Можно применять CSS к HTML с помощью HTML-атрибута style.
Красный цвет фона можно установить так:
<html><head><title>Example</title></head><body><p>This is a red page</p></body></html>
Метод 2: Внутренний (тэг style)
Второй способ вставки CSS-кодов — HTML-тэг <style>.
Например:
<html><head><title>Example</title><style type="text/css">body {background-color: #FF0000;}</style></head><body><p>This is a red page</p></body></html>
Метод 3: Внешний (ссылка на таблицу стилей)
Рекомендуемый метод — создание ссылки на так называемую внешнюю таблицу стилей. В данном учебнике мы будем использовать именно этот метод во всех примерах.
Внешняя таблица стилей это просто текстовый файл с расширением .css. Вы можете поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие файлы.
Например, скажем, ваша таблица стилей называется style.css и находится в папке style. Это можно проиллюстрировать так:
Весь фокус состоит в том, чтобы создать ссылку из HTML-документа (default.htm) на таблицу стилей (style.css). Это можно сделать одной строчкой HTML-кода:
<link rel="stylesheet" type="text/css" href="style/style.css" />
Обратите внимание, как указан путь к вашей таблице стилей атрибутом href.
Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами <head> и </head>. Например, так:
<html><head><title>My document</title><link rel="stylesheet" type="text/css" href="style/style.css" /></head><body>...
Эта ссылка указывает браузеру, что он должен использовать правила отображения
HTML-файла из CSS-файла.
Самое важное здесь то, что несколько HTML-документов
могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно
использовать для управления отображением множества HTML-документов.
Это поможет вам сэкономить уйму времени и сил. Если вы, например, хотите изменить цвет фона web-сайта из 100 страниц, таблица стилей избавит вас от необходимости вручную изменять все сто HTML-документов. Используя CSS, эти изменения можно сделать за несколько секунд, просто изменив один код в центральной таблице стилей.
Давайте посмотрим, как это сделать.
Попытайтесь сделать это сами
Откройте Notepad (или другой ваш текстовый редактор) и создайте два файла — HTML-файл и CSS-файл — такого содержания:
default.htm
<html><head><title>Мой документ</title><link rel="stylesheet" type="text/css" href="style.css" /></head><body><h2>Моя первая таблица стилей</h2></body></html>
style.css
body {background-color: #FF0000;}
Разместите эти файлы в одной папке. Не забудьте сохранить файлы с правильными расширениями («.css» и «.htm»)
Откройте default.htm в вашем браузере и вы увидите, что страница имеет красный фон. Поздравляем! Вы создали вашу первую таблицу стилей!
Переходите в следующий урок, где мы рассмотрим некоторые из свойств CSS.
<< Урок 1: Что такое CSS?
Урок 3: Цвет и фон >>
ru.html.net
Основы работы с селекторами CSS для новичков
В данном уроке мы с вами научимся более продвинутой работе с селекторами CSS.
В предыдущих уроках мы с вами использовали только один тип селекторов — имя тега, по которому мы обращались ко всем таким тегам.
Однако, чаще всего нам нужны более точные способы обращения: к примеру, мы хотим выбрать не все абзацы, а только некоторые из них.
Способы сделать это мы и будем изучать в данном уроке.
Однако, для начала разберем два тега, которые пригодятся нам в дальнейшем.
Блок . Тег div
Тег div служит контейнером для других тегов. Сам по себе он ничего не делает, однако в него можно положить много разных тегов, например, абзацев и заголовков, а затем для всех них одновременно применить различные CSS свойства. Для примера покрасим содержимое тега div в красный цвет (используя атрибут style):
<div>
<h3>
Lorem ipsum dolor sit amet.
</h3>
<p>
Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet.
</p>
</div>Так код будет выглядеть в браузере:
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
В настоящее время тег div является одним из основных строительных элементов на сайте. Вы еще столкнетесь с ним в дальнейшем много раз.
Блок . Тег span
Тег span является контейнером для кусочка текста. Вы уже знаете, что для того, чтобы сделать, к примеру, жирный текст — следует использовать тег b. Однако, что делать, если я хочу покрасить кусочек текста в красный цвет? Для такого случая тега, подобного тегу b, не существует.
Для этого и предназначен тег span — сам по себе он абсолютно ничего не делает, но для него можно применить CSS стили, которые позволят нам добавить нужный эффект к кусочку текста.
Давайте покрасим некоторый текст в красный цвет:
<p>
Lorem ipsum <span>dolor</span> sit amet.
</p>Так код будет выглядеть в браузере:
Lorem ipsum dolor sit amet.
Мы с вами изучили два необходимых нам тега и теперь приступаем к изучению более сложной работы с селекторами.
Блок . Группировка селекторов
Иногда может возникнуть следующая ситуация: вам нужно сделать одно и то же с разными тегами, например, покрасить все заголовки h3, h4 и абзацы в красный цвет. В этом случае вам придется написать что-то вроде такого:
h3 {
color: red;
}
h4 {
color: red;
}
p {
color: red;
}Однако, существует способ сделать это немного короче: селекторы тегов можно объединять через запятую и CSS код применится к ним всем одновременно. Приведенный выше код можно переписать покороче таким образом:
h3, h4, p {
color: red;
}<h3>Заголовок h3</h3>
<h4>Заголовок h4</h4>
<p>
Абзац с текстом.
</p>Так код будет выглядеть в браузере:
Заголовок h3
Заголовок h4
Абзац с текстом.
Группировать через запятую можно любое количество селекторов тегов, пробел после запятой не имеет значения, можно без него, но с ним код более красивый.
Блок . Вложенность тегов друг в друга
Представим теперь ситуацию, когда мы хотим обратиться только к тем тегам i, которые находятся внутри абзацев, и не хотим трогать те теги i, которые находятся внутри заголовков h3.
Это делается с помощью так называемого контекстного селектора, который позволяет обращаться к тегам по их вложенности в другие теги.
Чтобы показать вложенность, между селекторами следует поставить пробел (этот пробел и есть знак контекстного селектора).
Например, так — p i — мы обратимся ко всем тегам i, находящимся внутри p, p b — так ко всем тегам b внутри p, а так — div p b — ко всем тегам b, которые находятся внутри абзацев p, которые в свою очередь находятся внутри тега div.
В следующем примере мы обратимся ко всем абзацам внутри div и покрасим их в красный цвет. Абзацы вне дива и другие элементы внутри дива (в нашем случае h3) красными не станут:
div p {
color: red;
}<div>
<h3>
Заголовок h3 внутри тега div.
</h3>
<p>
Абзац внутри тега div.
</p>
<p>
Абзац внутри тега div.
</p>
<p>
Абзац внутри тега div.
</p>
</div>
<p>
Абзац вне тега div.
</p>Так код будет выглядеть в браузере:
Заголовок h3 внутри тега div.
Абзац внутри тега div.
Абзац внутри тега div.
Абзац внутри тега div.
Абзац вне тега div.
Блок . Выбор элемента по уникальному id
Следующий способ может вам понадобится в такой ситуации: вам необходимо для всех абзацев поставить красный цвет, а конкретно для этого абзаца — зеленый. В этом случае, как вы уже знаете, можно воспользоваться атрибутом style, однако этот способ не самый оптимальный (он захламляет HTML код CSS кодом).
Второй способ заключается в том, что нужному элементу дается атрибут id, который содержит в себе уникальное имя нашего тега (другого id с таким именем на странице быть не должно — будет конфликт). Если мы дадим ему, к примеру, имя test, тогда в CSS мы сможем обратиться к нему таким образом: #test — то есть сначала пишется символ «решетка», а затем — то имя, которое мы записали в атрибут id.
Давайте сейчас для всех абзацев зададим красный цвет, а для абзаца с id=»test» — зеленый:
p {
color: red;
}
#test {
color: green;
}<p>
Абзац с атрибутом id в значении "test".
</p>
<p>
Обычный абзац с текстом.
</p>
<p>
Обычный абзац с текстом.
</p>Так код будет выглядеть в браузере:
Абзац с атрибутом id в значении «test».
Обычный абзац с текстом.
Обычный абзац с текстом.
А теперь атрибут id дадим конкретному диву и покрасим содержимое этого дива в красный цвет, обратившись к нему по его id:
#test {
color: red;
}<div>
<h3>
Заголовок h3 внутри #test.
</h3>
<h3>
Заголовок h3 внутри #test.
</h3>
<h3>
Заголовок h3 внутри #test.
</h3>
<p>
Абзац внутри #test.
</p>
<p>
Абзац внутри #test.
</p>
<p>
Абзац внутри #test.
</p>
</div>
<p>
Абзац вне #test.
</p>Так код будет выглядеть в браузере:
Заголовок h3 внутри #test.
Заголовок h3 внутри #test.
Заголовок h3 внутри #test.
Абзац внутри #test.
Абзац внутри #test.
Абзац внутри #test.
Абзац вне #test.
А теперь совместим контекстный селектор (который пробел, показывающий вложенность) и id и сделаем так, чтобы только абзацы (но не заголовки h3 в данном случае) из #test стали красного цвета:
#test p {
color: red;
}<div>
<h3>
Заголовок h3 внутри #test.
</h3>
<h3>
Заголовок h3 внутри #test.
</h3>
<h3>
Заголовок h3 внутри #test.
</h3>
<p>
Абзац внутри тега div.
</p>
<p>
Абзац внутри тега div.
</p>
<p>
Абзац внутри тега div.
</p>
</div>
<p>
Абзац вне тега div.
</p>Так код будет выглядеть в браузере:
Заголовок h3 внутри #test.
Заголовок h3 внутри #test.
Заголовок h3 внутри #test.
Абзац внутри #test.
Абзац внутри #test.
Абзац внутри #test.
Абзац вне #test.
Блок . Классы элементов
Обращение к элементу по его id имеет некоторый недостаток — так мы можем обратиться только к одному элементу на странице. А что делать, если нам, к примеру, нужны абзацы двух типов — красные и зеленые и они могут чередоваться в произвольном порядке? В этом случае гораздо удобнее будет воспользоваться классами.
Классы задаются с помощью атрибута class, в котором мы пишем имя класса. Их преимущество в том, что один и тот же класс может быть у многих элементов на странице. То есть, если элементы должны вести себя одинаково — мы даем им один и тот же класс.
Как обратиться к элементам с определенным классом в CSS: пусть мы задали нужным нам элементам класс с именем test, тогда в CSS ко всем элементам с этим классом мы можем обратиться следующим образом — .test — вначале символ «точка» и потом имя класса из атрибута class.
В примере ниже и абзацы, и заголовки имеют один и тот же класс test, который красит эти элементы в красный цвет:
.test {
color: red;
}<h3>
Заголовок h3 с классом test.
</h3>
<h3>
Заголовок h3 с классом test.
</h3>
<h3>
Заголовок h3 с классом test.
</h3>
<p>
Абзац с классом test.
</p>
<p>
Абзац с классом test.
</p>
<p>
Абзац с классом test.
</p>
<p>
Абзац без класса.
</p>
Так код будет выглядеть в браузере:
Заголовок h3 с классом test.
Заголовок h3 с классом test.
Заголовок h3 с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац без класса.
Блок . Определенный тег с заданным классом
Бывают такие ситуации, когда разные теги имеют один и тот же класс. К примеру, у абзацев и заголовков h3 одновременно задан класс test. Вам может потребоваться выбрать только абзацы с классом test, не затрагивая заголовков h3 с этим же классом.
В этом случае вместо селектора .test я должен написать следующее: p.test — таким образом я выберу все абзацы с классом test, не затронув заголовки. Если же я напишу h3.test — то выберу все заголовки h3 с классом test, не затронув абзацев.
В следующем примере только абзацы с классом test станут красного цвета, а заголовки с таким же классом — не станут:
p.test {
color: red;
}<h3>
Заголовок h3 с классом test.
</h3>
<h3>
Заголовок h3 с классом test.
</h3>
<h3>
Заголовок h3 с классом test.
</h3>
<p>
Абзац с классом test.
</p>
<p>
Абзац с классом test.
</p>
<p>
Абзац с классом test.
</p>
<p>
Абзац без класса.
</p>
Так код будет выглядеть в браузере:
Заголовок h3 с классом test.
Заголовок h3 с классом test.
Заголовок h3 с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац без класса.
Итак, еще раз: p.test — такой селектор выбирает абзацы с классом test. А вот если я сделаю так: p .test (поставлю пробел), то выберу все элементы с классом test, находящиеся внутри абзацев. Прочувствуйте эту разницу.
Давайте теперь выберем только h3 с классом test:
h3.test {
color: red;
}<h3>
Заголовок h3 с классом test.
</h3>
<h3>
Заголовок h3 с классом test.
</h3>
<h3>
Заголовок h3 с классом test.
</h3>
<p>
Абзац с классом test.
</p>
<p>
Абзац с классом test.
</p>
<p>
Абзац с классом test.
</p>
<p>
Абзац без класса.
</p>
Так код будет выглядеть в браузере:
Заголовок h3 с классом test.
Заголовок h3 с классом test.
Заголовок h3 с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац без класса.
А сейчас сделаем так, чтобы класс test задавал курсив всем элементам, которым он дан, и чтобы при этом все заголовки h3 с классом test красились в красный цвет, а абзацы с этим классом — в зеленый:
.test {
font-style: italic;
}
h3.test {
color: red;
}
p.test {
color: green;
}<h3>
Заголовок h3 с классом test.
</h3>
<h3>
Заголовок h3 с классом test.
</h3>
<h3>
Заголовок h3 с классом test.
</h3>
<p>
Абзац с классом test.
</p>
<p>
Абзац с классом test.
</p>
<p>
Абзац с классом test.
</p>
<p>
Абзац без класса.
</p>
Так код будет выглядеть в браузере:
Заголовок h3 с классом test.
Заголовок h3 с классом test.
Заголовок h3 с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац без класса.
Блок . Видео
Посмотрите следующее видео из заочного курса: скачайте его по данной ссылке (вам нужно именно про селекторы, пару видосов там лишние. Хотя они тоже лишними не будут) ).
Что вам делать дальше:
Приступайте к решению задач по следующей ссылке: задачи к уроку.
Когда все решите — переходите к изучению новой темы.
code.mu
что это такое, для чего он нужен и как с его помощью обозначить внешний вид сайта
Мы увеличиваем посещаемость и позиции в выдаче. Вы получаете продажи и платите только за реальный результат, только за целевые переходы из поисковых систем
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Подпишись на рассылку и получи книгу в подарок!
Дополнительно CSS может использоваться и с другими документами типа XML, наиболее часто используются документы XUL и SVG.
Чтобы понять, что такое CSS, разберем простой пример. Когда сотрудник редакции газеты или журнала производит верстку издания, он делает пометки, по которым затем разрабатывается внешний вид готового материала. Например: «выделить заголовок красным», «сделать отступ», «увеличить расстояние между информационными блоками» и так далее. При работе с сайтами нельзя прописать подобные заметки обычным языком, браузер не сможет их прочитать. Чтобы он учел отметки, необходимо прописать их на языке CSS.
Принцип работы CSS
Принцип работы основывается на том, что CSS находит определенный элемент HTML (заголовок) и определяет для него конкретное свойство (цвет), чтобы присвоить ему значение (красный). Прописывается это так:
CSS применяется для выполнения стилистических решений, а также для компоновки документов типа HTML: задачи высоты, колонок, размещения элементов и так далее.
Как и где можно написать CSS
- CSS может быть прописан как атрибут непосредственно в HTML.
- Можно применять тег<style>в теге<head>документа HTML.
- CSS также можно прописать отдельным файлом и присвоить ему расширение .css. После этого необходимо связать файл через тег<link> . И HTML
Для чего нужен CSS
CSS применяют, чтобы задать стиль документу. Сюда входит разработка дизайна, верстка макета в зависимости от типа устройств, на котором будет отображаться. CSS можно прописать как в качестве составного элемента документа, так и в качестве самостоятельного файла.
Что лучше: простой HTML или HTML с CSS
Многие разработчики сайтов задаются вопросом, зачем нужен CSS, если можно использовать простой HTML. Скорее всего, они только познают разработку сайта и имеют ряд пробелов в знаниях. Суть в том, что HTML применяется для составления структуры содержимого страницы. А CSS позволяет отформатировать это содержимое, сделать его более привлекательным для пользователей.
Когда был создан World Wide Web, разработчики применяли только один язык — HTML. Его использовали как средство вывода структурированного текста. У автора в распоряжении был скудный функционал. Максимум, что можно было сделать – обозначить заголовок, выделить параграф. Тегов тоже было мало.
В связи с развитием интернета базу тегов языка HTML расширили, чтобы позволить корректировать внешний вид документов. При этом структура оставалась неизменной.
Стали распространяться теги структурирования, например<table>. Именно их чаще выбирали для оформления страниц вместо самой структуры. Некоторые браузеры предлагали собственные теги, воспроизвести которые могли только они.
Таким образом, пользователи часто натыкались на сообщение: «Чтобы просмотреть страницу, вам необходимо воспользоваться браузером ХХХ».
Чтобы исправить сложившуюся ситуацию и создать единую базу тегов для форматирования был создан CSS. Он позволил отказаться от привязки тегов к браузерам.
Использовать HTML с CSS удобнее, чем простой HTML. CSS предоставляет следующие преимущества:
- Проработанный до мелочей дизайн.
- С помощью единой таблицы можно управлять различными документами.
- Можно настроить варианты отображения страницы для разных устройств: экран компьютера, экран смартфона и т.д.
Продвижение сайта с помощью CSS
Появление и развитие CSS позволило сделать разработку веб-ресурсов более эффективной и результативной. Теперь управлять дизайном, корректировать его намного легче и удобнее. Также с помощью CSS удалось сократить код страниц, их размер. Это положительно сказалось на скорости загрузки, индексирование тоже стало проходить быстрее. Применение адаптивного подхода позволило сделать рывок в сфере мобильных версий интернет-ресурсов.
Для улучшения продвижения сайта специалисты рекомендуют выносить таблицы стилей CSS в отдельный документ, чтобы не увеличивать объем кода. Можно составить один или несколько таких файлов.
Ранее поисковики не умели читать таблицы стилей, что открывало возможность использовать их в черном SEO, например, для создания невидимых текстов. Сейчас лучше отказаться от использования CSS не по назначению.
CSS обладает рядом преимуществ и позволяет улучшить сайт, сделать его более привлекательным для посетителей. Однако важно правильно прописать все элементы.
semantica.in
Что такое CSS и как он работает?
Hello my friends. Этой статьей я начинаю блок статей посвященных основам CSS. В первой статье цикла я поведаю вам что такое CSS и как он работает. Буду рад если данный материал будет для вас полезен. Итак давай те же приступим!
Для начала сообщу что для того чтобы начать изучать CSS вам необходимо знать и основы HTML. В этом вам поможет цикл статей посвященных основам HTML, изучив который вы можете приступать к обучению и работе с CSS.
Теперь перейдем теме статьи.
Что такое CSS?
CSS расшифровывается как «каскадные таблицы стилей». Синтаксис самого языка не сложный, он состоит из различных селекторов и свойств.
Что можно делать с помощью CSS?
CSS это язык позволяющий определять отображение HTML-документов. Как пример CSS может работает с шрифтами, цветом, шириной, высотой,строками, полями, фоновыми изображениями, позиционированием элементов и многими другими вещами.
HTML может (неправильно) использоваться для оформления web-сайтов. Но CSS предоставляет больше возможностей в работе с дизайном, он более точный и гибкий. CSS, на сегодняшний день, поддерживается абсолютно всеми браузерами.
Прочитав несколько статей посвященных CSS вы уже сможете создавать собственные стили и использовать CSS для создания уникальных и красивых web-сайтов.
Как работает CSS?
- Селекторы нужны чтобы указывать браузеру какие элементы страницы мы ходим изменить с помощью CSS. (пример: блок с текстом)
- С помощью свойств мы указываем как именно будут оформлены наши элементы. (пример: свойство определяющее цвет текста).
- В свою очередь для свойств мы задаем конкретные значения (пример: красный).
О том какие бывают селекторы и какие есть базовые свойства я расскажу в следующих статьях.
Какие преимущества даст мне CSS?
Конкретные преимущества CSS:
- управление отображением различных документов с помощью одной или множества таблиц стилей;
- полный контроль над внешним видом ваших web-сайтов.
- различные представления для разных носителей информации ( компьютер, телефон, планшет, эл.книга)
- создание сложного и качественно проработанного дизайна сайта.
На этом здесь все. До встречи в будущих статьях!
dmkweb.ru Права на контент защищены.dmkweb.ru
Работа с продвинутыми свойствами CSS
В данном уроке мы будем изучать некоторые продвинутые CSS свойства, которые мы не трогали раньше. В учебнике я не буду приводить то, как с ними работать — вместо этого я буду давать ссылки на CSS справочник. Внимательно изучите материал по ссылкам и порешайте задачи к каждому блоку. Итак, приступим.
Блок
Изучите следующие CSS свойства: letter-spacing, word-spacing, font-variant, text-transform.
Блок
Изучите следующие CSS свойства: empty-cells, border-collapse, border-spacing, table-layout.
Блок
Изучите следующие CSS свойства: text-align-last.
Блок
Изучите следующие HTML теги и CSS свойства: pre, overflow, white-space.
Блок
Изучите следующие CSS свойства: opacity (обратите внимание на rgba при изучении).
Блок
Изучите следующие CSS свойства: text-shadow.
Блок
Изучите следующие CSS свойства: box-shadow.
Блок
Изучите следующие CSS свойства: cursor.
Блок
Изучите следующие CSS свойства: text-decoration-line, text-decoration-style, text-decoration-color.
Блок
Изучите следующие CSS свойства: box-sizing.
Блок
Изучите работу со множественными фонами CSS3, смотрите свойство background.
Блок
Изучите следующие CSS свойства: background-size.
Блок
Изучите следующие CSS свойства: text-overflow, white-space, tab-size, word-break, word-wrap.
Блок
Изучите следующие CSS свойства: hyphens.
Блок
Изучите следующие CSS свойства: user-select.
Блок
Изучите работу с градиентами на CSS: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient.
Блок
Изучите следующие CSS свойства: display, visibility.
Блок
Изучите следующие CSS свойства: columns.
Блок
Изучите следующие функции CSS: calc, min, max, attr.
Блок
Изучите следующие CSS свойства: font-face.
Блок
Изучите следующие CSS свойства: border-image.
Блок
Изучите следующие CSS свойства: background-clip, background-origin.
Что вам делать дальше:
Приступайте к решению задач по следующей ссылке: задачи к уроку.
Когда все решите — переходите к изучению новой темы.
code.mu