Знакомство с CSS

1. Появление CSS

Когда стало понятно, что браузером пользуются не столько в научных целях, сколько в развлекательных, в нем сразу стало не хватать мультимедиа: видео, анимации, цветов, звуков, прозрачности и т.п.

Сначала хотели добавить побольше тегов для этого, но потом поняли, что новых тегов будут сотни и они сильно усложнят работу с HTML-документами. Поэтому появилась идея отделить «раскраску документа» (оформление) от его содержимого. Так и появились CSS.

Cascading Style Sheets (CSS) или каскадные таблицы стилей, являются одним из ключевых компонентов веб-разработки, отвечающим за визуальное оформление веб-страниц.

CSS — это набор свойств, каждое из которых имеет имя и значение. Веб-разработчик указывает эти свойства, а браузер отвечает за их отображение. Такие свойства можно задать практически для любого элемента. Пример CSS-стилей:

Таких CSS-параметров (их еще называют CSS-свойства) меньше сотни. Но они могут хитро друг с другом взаимодействовать и давать очень неожиданные эффекты. На JavaRush вы научитесь с ними работать и создавать настоящую магию на странице 🦄.

2. Стили элементов

Для каждого HTML-элемента можно указать собственный CSS-стиль с помощью атрибута style.

Пример:

      
<p style="color: blue; font-size: 16px;">Это пример встроенного стиля.</p>
      
    

Этот стиль сообщает браузеру, что текст внутри параграфа нужно отрисовать синим цветом, а размер шрифта должен быть 16 пикселей по высоте.

На самом деле тут два «стиля»:

• color = blue
• font-size = 16px

Просто они указаны в одну строчку и разделены точкой с запятой.

Также вы можете, например, создать черный прямоугольник и написать в нем текст белым цветом. Выглядеть этот код будет так:

      
<div style="width:100%; height:200px;color:white;background-color:black"> 
Белый текст на черном фоне 
</div>
      
    

3. Цвета

Более подробно мы разберем CSS-стили, когда изучим HTML. Но чтобы вам было интереснее, давайте сегодня разберемся с цветами. С помощью CSS можно задать любой цвет, который может отобразить компьютер, и даже больше.

Цвета в CSS являются важной частью стилизации веб-страниц. Они позволяют создавать визуально привлекательные и интуитивно понятные интерфейсы. Существует несколько способов задания цветов в CSS, каждый из которых имеет свои особенности и применение.

1. Имена цветов (Color Names)

CSS поддерживает более 140 стандартных имен цветов. Это простой и понятный способ задания цвета.

      
<div style="color: lightblue;"> Голубой цвет текста</div>
      
    

Некоторые распространенные имена цветов:

2. Шестнадцатеричные значения (Hexadecimal Values)

Есть еще один способ, с помощью которого вы можете задать любой цвет — шестнадцатеричная кодировка. Она позволяет задать 16 миллионов оттенков — названия для такого количества цветов придумать невозможно, поэтому используют цифры.

Шестнадцатеричные значения задаются с использованием символа #, за которым следуют шесть цифр или букв, представляющих интенсивность красного, зеленого и синего цветов (RRGGBB).

      
<div style="color: #ff0000; background-color: #00ff00;"> Красный на зеленом </div>
      
    

Вы будете часто встречать такой способ заданий цвета в примерах. Мы вернемся к этой теме, когда будем изучать CSS подробнее.