Введение в CSS

CSS - это язык, который определяет внешний вид HTML-страницы в браузере. Он быстро развивается, и благодаря новейшим функциям использование 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-странице.

В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:


Tech Wiki Online!