CSS - это язык, который определяет внешний вид HTML-страницы в браузере. Он быстро развивается, и благодаря новейшим функциям использование CSS никогда не было таким простым.
- Что такое CSS
- Краткая история CSS
- Как выглядит CSS
- Точка с запятой
- Форматирование и отступ
- Как загрузить CSS на веб-страницу
Что такое CSS
CSS(сокращение отКаскадные таблицы стилей) - это язык, который мы используем для стилизации HTML-файла и сообщаем браузеру, как он должен отображать элементы на странице.
Он вырос из необходимости стилизовать веб-страницы. До того, как был введен CSS, людям нужен был способ стилизации своих веб-страниц, который в свое время выглядел очень похожим и «академическим». С точки зрения персонализации ничего нельзя было сделать.
В HTML 3.2 появилась возможность определения встроенных цветов как атрибутов HTML-элементов и презентационных тегов, напримерcenter
иfont
, но это быстро переросло в далеко не идеальную ситуацию 😱.
CSS позволяет перенести все, что связано с презентацией, из HTML в CSS, чтобы HTML мог вернуться в формат, определяющий структуру документа, а не то, как все должно выглядеть в браузере.
CSS постоянно развивается, и CSS, который вы использовали 5 лет назад, возможно, просто устарел, поскольку появились новые идиоматические методы CSS и изменились браузеры.
Краткая история CSS
Прежде чем продолжить, я хочу вкратце рассказать вам об истории CSS.
CSS вырос из необходимости стилизовать веб-страницы. До того, как был введен CSS, людям нужен был способ стилизации своих веб-страниц, который в свое время выглядел очень похожим и «академическим». С точки зрения персонализации ничего нельзя было сделать.
В HTML 3.2 появилась возможность определения встроенных цветов как атрибутов HTML-элементов и презентационных тегов, напримерcenter
иfont
, но это быстро переросло в далеко не идеальную ситуацию.
CSS позволяет перенести все, что связано с презентацией, из HTML в CSS, чтобы HTML мог вернуться в формат, определяющий структуру документа, а не то, как все должно выглядеть в браузере.
CSS постоянно развивается, и CSS, который вы использовали 5 лет назад, возможно, просто устарел, поскольку появились новые идиоматические методы CSS и изменились браузеры.
Трудно представить, когда родился CSS и насколько отличался Интернет.
В то время у нас было несколько конкурирующих браузеров, основными из которых были Internet Explorer или Netscape Navigator.
Страницы были стилизованы с использованием HTML со специальными презентационными тегами, такими какbold
и специальные атрибуты, большинство из которых теперь устарели.
Это означало, что у вас было ограниченное количество возможностей настройки.
Основная часть решений по стилю была оставлена браузеру.
Кроме того, вы создали сайт специально для одного из них, потому что каждый из них вводил разные нестандартные теги, чтобы дать больше возможностей и возможностей.
Вскоре люди осознали необходимость стиля страниц таким образом, чтобы он работал во всех браузерах.
После первоначальной идеи, предложенной в 1994 году, CSS получил свой первый выпуск в 1996 году, когда была опубликована рекомендация CSS уровня 1 («CSS 1»).
CSS Level 2 («CSS 2») был опубликован в 1998 году.
С тех пор началась работа над CSS Level 3. Рабочая группа CSS решила разделить каждую функцию и работать над ней отдельно, по модулям.
Браузеры не особенно быстро внедряли CSS. Нам пришлось подождать до 2002 года, чтобы первый браузер реализовал полную спецификацию CSS: IE для Mac, как хорошо описано в этой публикации CSS Tricks:https://css-tricks.com/look-back-history-css/
В Internet Explorer с самого начала блочная модель была реализована неправильно, что привело к многолетним мучениям в попытках обеспечить единообразное применение одного и того же стиля во всех браузерах. Нам пришлось использовать различные уловки и уловки, чтобы заставить браузеры отображать вещи так, как мы хотели.
Сегодня дела обстоят намного лучше. Мы можем просто использовать стандарты CSS, не задумываясь о причудах, большую часть времени, а CSS никогда не был более мощным.
У нас больше нет официальных номеров релизов CSS, но рабочая группа CSS выпускает «снимок» модулей, которые в настоящее время считаются стабильными и готовыми к включению в браузеры. Это последний снимок за 2018 год:https://www.w3.org/TR/css-2018/
CSS Level 2 по-прежнему является базой для CSS, который мы пишем сегодня, и у нас есть много других функций, построенных на его основе.
Как выглядит CSS
CSSнабор правилодна часть называетсяселектор, а другая часть называетсядекларация. Декларация содержит различныеправила, каждая из которых состоит изсвойство, аценить.
В этом примереp
является селектором и применяет одно правило, устанавливающее значение20px
кfont-size
свойство:
p {
font-size: 20px;
}
Несколько правил складываются одно за другим:
p {
font-size: 20px;
}
a {
color: blue;
}
Селектор может нацеливаться на один или несколько элементов:
p, a {
font-size: 20px;
}
и он может нацеливаться на теги HTML, как указано выше, или элементы HTML, которые содержат определенный атрибут класса с.my-class
, или HTML-элементы с определеннымid
атрибут с#my-id
.
Более продвинутые селекторы позволяют вам выбирать элементы, атрибуты которых соответствуют определенному значению, а также элементы, которые реагируют на псевдоклассы (подробнее об этом позже)
Точка с запятой
Каждое правило CSS заканчивается точкой с запятой. Точки с запятойнетнеобязательно, за исключением последнего правила, но я предлагаю всегда использовать их для согласованности и во избежание ошибок, если вы добавляете другое свойство и забываете добавить точку с запятой в предыдущей строке.
Форматирование и отступ
Не существует фиксированного правила форматирования. Этот CSS действителен:
p
{
font-size: 20px ;
}
a{color:blue;}
но боль видеть. Придерживайтесь некоторых соглашений, подобных тем, которые вы видите в приведенных выше примерах: закрепите селекторы и закрывающие скобки слева, сделайте отступ на 2 пробела для каждого правила, сделайте открывающую скобку на той же строке селектора, разделенную одним пробелом.
Правильное и последовательное использование интервалов и отступов - это наглядное пособие для понимания вашего кода.
Как загрузить CSS на веб-страницу
CSS можно загрузить на страницу тремя способами: с помощьюstyle
тег на страницеhead
, с внешним файлом CSS и встроенным в теги. CSS по-разному прикрепляется к HTML-странице.
1: Использованиеlink
тег
Вlink
Тег - это способ включить файл CSS. Это предпочтительный способ использования CSS, поскольку он предназначен для использования: один файл CSS включается на все страницы вашего сайта, и изменение одной строки в этом файле влияет на представление всех страниц сайта.
Чтобы использовать этот метод, вы добавляетеlink
тег сhref
атрибут, указывающий на файл CSS, который вы хотите включить. Вы добавляете его внутриhead
тег сайта (не внутриbody
тег):
<link rel="stylesheet" type="text/css" href="myfile.css">
Вrel
иtype
атрибуты также являются обязательными, поскольку они сообщают браузеру, к какому типу файла мы ссылаемся.
2: использованиеstyle
тег
Вместо использованияlink
чтобы указать на отдельную таблицу стилей, содержащую наш CSS, мы можем добавить CSS прямо внутриstyle
тег. Это синтаксис:
<style>
...our CSS...
</style>
Используя этот метод, мы можем избежать создания отдельного файла CSS. Я считаю, что это хороший способ поэкспериментировать, прежде чем «формализовать» CSS в отдельный файл или добавить специальную строку CSS только в файл.
3: встроенные стили
Встроенные стили - это третий способ добавить CSS на страницу. Мы можем добавитьstyle
к любому тегу HTML и добавьте в него CSS.
<div style="">...</div>
Пример:
<div style="background-color: yellow">...</div>
Скачать мою бесплатнуюСправочник CSS
Больше руководств по css:
- Руководство по Flexbox
- Учебник по CSS Grid
- Переменные CSS (настраиваемые свойства)
- Введение в PostCSS
- Свойство поля CSS
- Как центрировать элемент с помощью CSS
- Системные шрифты CSS
- Как напечатать HTML со стилем
- Вводное руководство по переходам CSS
- Учебник по CSS-анимации
- Введение в CSS
- Руководство по CSS
- Как настроить Tailwind с PurgeCSS и PostCSS
- Шпаргалка по попутному ветру
- Как непрерывно вращать изображение с помощью CSS
- Как сделать таблицу адаптивной с помощью CSS
- Как отлаживать CSS путем деления пополам
- Селекторы CSS
- CSS-каскад
- Специфика CSS
- Селекторы атрибутов CSS
- Цвета CSS
- Единицы CSS
- URL-адрес CSS ()
- CSS Типографика
- Коробочная модель CSS
- Свойство CSS position
- CSS Media Queries и адаптивный дизайн
- Запросы функций CSS
- CSS преобразования
- Как стилизовать списки с помощью CSS
- Префиксы поставщиков CSS
- Наследование CSS
- Псевдоклассы CSS
- Псевдоэлементы CSS
- Стилизация HTML-таблиц с помощью CSS
- Свойство CSS Display
- Функция CSS calc ()
- CSS Границы
- Импорт файла CSS с помощью @import
- Обработка ошибок CSS
- CSS фильтры
- CSS Размер окна
- CSS-фоны
- Комментарии CSS
- CSS шрифты
- CSS Padding
- CSS свойство float и очистка
- CSS нормализация
- Свойство CSS z-index
- Как отключить выделение текста с помощью CSS
- Как разместить элемент в нижней части контейнера с помощью CSS
- Как инвертировать цвета с помощью CSS
- Адаптивные предварительные теги в CSS
- Адаптивные вставки видео YouTube
- Каковы хорошие значения контрольной точки CSS для адаптивного дизайна?
- Как выровнять центр в flexbox