25 подписчиков

CSS

25 августа 201925 авг 2019

2 мин

После знакомства с HTML, следующим шагом является изучение стилей или CSS (Cascading Style Sheets, каскадные таблицы стилей). CSS — это язык для формирования внешнего вида документа, созданного с помощью языка разметки. CSS обычно применяется в качестве инструмента для описания веб-страниц, которые ранее были написаны на языках XHTML и HTML. Принцип работы CSS Принцип работы основывается на том, что CSS находит определенный элемент HTML (например заголовок H1) и определяет для него конкретные свойства (цвет, размер шрифта), чтобы присвоить ему значение (зеленый цвет, размер 50 пикселей). Добавляем стили Вот так будет выглядеть заголовок после добавления стилей Как и где можно прописать стили? В своей практике я использую создание файла .css и его последующим подключением с помощью <link>. Где изучать? Для желающих изучить CSS могу порекомендовать следующие ресурсы: htmlbook

Уже знакомый нам ресурс предоставляет массу полезной информации. htmlacademy Интерактивные задани

Оглавление

Принцип работы CSS
Как и где можно прописать стили?
Где изучать?

После знакомства с HTML, следующим шагом является изучение стилей или CSS (Cascading Style Sheets, каскадные таблицы стилей).

CSS — это язык для формирования внешнего вида документа, созданного с помощью языка разметки. CSS обычно применяется в качестве инструмента для описания веб-страниц, которые ранее были написаны на языках XHTML и HTML.

Принцип работы CSS

Принцип работы основывается на том, что CSS находит определенный элемент HTML (например заголовок H1) и определяет для него конкретные свойства (цвет, размер шрифта), чтобы присвоить ему значение (зеленый цвет, размер 50 пикселей).

Добавляем стили

Вот так будет выглядеть заголовок после добавления стилей

Как и где можно прописать стили?

CSS может быть прописан как атрибут непосредственно в HTML.

Можно применять тег<style>в теге<head>документа HTML.

CSS также можно прописать отдельным файлом и присвоить ему расширение .css. После этого необходимо связать файл через тег<link> .

В своей практике я использую создание файла .css и его последующим подключением с помощью <link>.

Где изучать?

Для желающих изучить CSS могу порекомендовать следующие ресурсы:

htmlbook
Уже знакомый нам ресурс предоставляет массу полезной информации.

htmlacademy

Интерактивные задания помогут освоить CSS.

Youtube канал Sorax

Отлично подойдет для новичков. Автор канала доходчиво объяснит основные моменты.

Для тех кто знает английский язык:

w3schools

Полезный ресурс, не только для изучения CSS, но и HTML и JavaScript.

freeCodeCamp

У данного ресурса есть канал на Youtube, где также много полезного материала. Вот ссылка на курс для новичков по CSS.

Практика

Как и в случае с HTML, в процессе изучения CSS необходимо практиковаться. Верстайте для начала не страницы, а отдельные элементы — блоки, меню, формы и прочее. После того как наберетесь опыта, пробуйте сверстать PSD макет.

Отправляетесь сюда и находите макеты в формате PSD, скачиваете и пробуйте верстать. Для того, чтобы открыть файл PSD вам потребуется
Adobe Photoshop. По ходу верстки макета, у вас, скорее всего будут возникать различные вопросы. В свое время я не стеснялся их задавать гуглу, поверьте, там есть ответы на все ваши вопросы, нужно только правильно спросить. В свою очередь гугл, рано или поздно, приведет вас к такому полезному ресурсу как StackOverflow.

P.S. Всё придёт с практикой. Хороший верстальщик всегда продолжает учиться в процессе деятельности. Всегда будет что-то новое и интересное.