BuyScripts.ru

CSS с нуля

109₽ ~~139₽~~

Категории:

css html

В этом скрипте, мы будем изучать современные возможности CSS

Если вы не изучили скрипт HTML с нуля, то рекомендуем сначала пройти его.

И так, для начала "Что такое CSS ?"

CSS - каскадная таблица стилей. Ключевое слово здесь стилей. Основная задача CSS - задать стили HTML объектам.

И так, начнём с базы.

Стоит ли выносить CSS в отдельный файл или писать всё прямо на странице?

Тут всё очевидно, стили элементов повторяющиеся на разных страницах, описываются в отдельном файле. Если страница уникальная, то можно писать стили прямо на странице. Рассмотрим оба случая

Первый случай. Отдельный файл. Создайте 2 файла index.html и styles.css в удобной для вас папке. Создайте базовый каркас HTML в index.html

<!DOCTYPE html>
     <head>
     </head>
     <body>
     </body>
</html>

Подключаем наш css файл в <head></head>

Код будет писаться в файле styles.css

Второй случай - это писать код в теге style прямо в файле так:

<head>
   <style>
     * {
       margin; 0;
       padding: 0;
     }
   </style>
</head>

Третий случай (неполноценный), писать стили прямо в атрибуте style элемента через точку с запятой.

<a href="index.php" style="padding: 5px; margin: 10px 0 0 0; font-size: 18px;">Ссылка</a>

Такой способ назван "неполноценным", потому что нельзя использовать псевдо-классы. Псевдо-классы, это опция CSS 3, позволяющая частично заменить JavaScript для конкретного элемента.

Мы будем пользоваться первым способом, вынесем весь код в отдельный файл, предварительно подключив его в теге head (мы это уже сделали) и создадим в body один div (блок), на котором мы будем тестировать всё.

Теперь открываем файл

styles.css

и добавляем селектор по id

#block{

}

И так, теперь перечислим некоторые полезные свойства

margin: 5px; /* Внешний отступ от других элементов */
padding: 5px; /* Внутренний отступ от текста / от внутренних элементов блока до границ блока*/
font-size: 18px; /* Размер текста */
width: 300px; /* Ширина элемента */
height: 100px; /* Высота элемента */
background-color: #f04f43; /* Цвет на фоне у элемента */
text-align: center; /* Расположение текста, в данном случае по центру */
position: absolute; /* Позиция относительно других элементов, в данном случае абсолютная */
top: 10px; /* Отступ относительно самой верхней точки страницы (также есть left, right, bottom) */
z-index: 4; /* Это свойство позволяет накладывать элементы друг на друга слоями. Чем выше число, тем выше элемент */
cursor: pointer; /* Свойство, меняющее указатель мыши */
color: red; /* Свойство для текста: для ссылок параграфов и т.д. */
font-family: 'Afacad', sans-serif; /* Шрифт */
float: right; /* Указывает где расположить элемент */
text-decoration: none; /* Убирает подчеркивания у ссылок */
border: 1px solid black; /* Границы по краям элемента в формате (ширина, тип, цвет) */

Нужно уточнить, что для отступов и границ существуют варианты написания.

margin: 5px;
margin: 5px 10px 5px 10px;
margin-bottom: 8px;
padding-top: 7px;
border-bottom: 1px solid black;

Для границ доступна спецификация с какой стороны будет граница. Для отступов есть вариант отступа сразу с 4 сторон (margin: 5px И margin: 5px 5px 5px 5px - одно и тоже), а также спецификация стороны отступа (margin-bottom, padding-top).

Теперь перейдём к псевдо-классам. Псевдо-классы позволяют нам указать, при каком условии с конкретным элементом / элементами будет применено свойство описанное в CSS.

Самый распространенный псевдо-класс :hover , то что произойдет при наведении курсора мыши на элемент

#block:hover{ border: 1px solid black; }

При наведении на див с id="block" появятся границы, при отведении курсора границы исчезнут.

Для псевдо-класса :hover идеально подойдут свойства transition и transform. transition - это время в секундах (пример: transition: 0.7s;), transform - это тип трансформации элемента. Здесь вы найдёте все варианты трансформации объекта.

Вот небольшой пример трансформации за 0.5 секунд

#block:hover{
transform: translate(30px, 20px) rotate(180deg);
transition: 0.5s;
}

#block

Как вы могли понять, порой JavaScript заменяется CSS и это бывает удобно.

Ну и напоследок, не забудьте, что комментарии в CSS пишутся в формате

/* комментарий */

Для изучения других скриптов заходите сюда. Удачи.