- Сообщения
- 869
- Реакции
- 309
В прошлой статье мы рассмотрели логику построения страниц и основы работы с HTML-тегами. В этой статье мы рассмотрим базовую информацию о работе CSS, а так же некоторые “подводные камни”.
Введение
Фактически, первые сайты строились только на HTML-тегах:
На этом скриншоте изображен первый в мире сайт, написанный 6 августа 1991 года. Создание сайтов стало крупным технологическим прорывом, за которым последовало бурное развитие технологий веба. Со временем, обычных HTML-тегов стало мало и 17 декабря 1996 была выпущена первая версия CSS (Cascading Style Sheets - каскадные таблицы стилей). Это специальный язык, для описания “внешности” страницы, который предоставляет большую гибкость настройки внешнего вида и уменьшение сложности кода.
Синтаксис CSS
Синтаксис CSS достаточно прост:
Вы пишите название свойства и через двоеточие его значение. Свойства разделяются точкой с запятой. CSS часто называют более кратко и лаконично - стили. Стили можно указывать прямо в HTML-тегах внутри атрибута style:
У каждого элемента может быть множество свойств:
Такая запись стилей называется инлайном (in line). Такие стили действую только на тот элемент, которому прописаны. Вроде все легко и просто, но что, если таких элементов на странице десяток?
Для этого стили записываются в виде селектора и блока объявлений:
Селектором называется некий отличительный признак элемента. Это может быть название тега, название класса, атрибут и т.д.. После селектора указывается блок объявлений, который представляет собой фигурные скобки, внутри которых перечисляются нужные свойства и значения. Внутри этого блока можно писать сколько угодно пар "свойство: значение", но обязательно завершать пару точкой с запятой. Хорошим тоном является построчная запись свойств c добавлением символа табуляции или нескольких пробелов:
Запись стилей инлайном является плохой практикой, так как серьезно уменьшает читабельность и качество вода. Поэтому HTML и CSS код нужно разделять. Код можно записывать в отдельный файл или записывать в специальный тег
Если код внутри тега
Файл со стилями должен иметь расширение .css.
Стили внутри тега
Введение
Фактически, первые сайты строились только на HTML-тегах:
На этом скриншоте изображен первый в мире сайт, написанный 6 августа 1991 года. Создание сайтов стало крупным технологическим прорывом, за которым последовало бурное развитие технологий веба. Со временем, обычных HTML-тегов стало мало и 17 декабря 1996 была выпущена первая версия CSS (Cascading Style Sheets - каскадные таблицы стилей). Это специальный язык, для описания “внешности” страницы, который предоставляет большую гибкость настройки внешнего вида и уменьшение сложности кода.
Синтаксис CSS
Синтаксис CSS достаточно прост:
CSS:
свойство: значение;
свойство_2: значение;
Код:
<div style="padding: 10px;"></div>
| |
| |_____ значение свойства
|__________ название свойства
У каждого элемента может быть множество свойств:
<p style="font-size: 18px; color: red;">MSE-Script</p>
Такая запись стилей называется инлайном (in line). Такие стили действую только на тот элемент, которому прописаны. Вроде все легко и просто, но что, если таких элементов на странице десяток?
Для этого стили записываются в виде селектора и блока объявлений:
CSS:
h1 {font-size: 18px; color: red;}
| |
| |_____________ блок объявлений
|_________________________ селектор
CSS:
h1 {
font-size: 18px;
color: red;
}
<style>
, который должен находится внутри тега <head>
.
HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
font-size: 24px;
color: red;
}
</style>
</head>
<body>
<h1>Новинки музыки 2020</h1>
</body>
</html>
<style>
становится большой, его потребуется подключить в отдельном файле с помощью тега link:<link rel="stylesheet" href="/css/main.css" type="text/css" />
Файл со стилями должен иметь расширение .css.
Стили внутри тега
<style>
еще называют внутренними, а подключенными в отдельном css-файле - внешними.Внутренние стили имеют больший приоритет над внешними, а инлайновые над внутренними. То есть, если на сайте используется запись стилями несколькими видами (для одного элемента), то к нему применится инлайновый стиль. Использование инлайнового стиля является плохой практикой. Он может использоваться в специфических случаях, например, для JS-анимаций. В остальном лучше писать стили в отдельном файле.