htmllessons.ru
29.08.2018
1352
Основы CSS
CSS – является каскадной таблицей стилей, это знает даже любой школьник, как по мне. Но для чего он нужен?
Есть HTML который служит для размещения контента, подробнее про HTML можете прочитать в нашей статье по этой теме. А вот как раз чтобы изменять шрифт, цвет, фон, границы, форматирование текста, эффекты для ссылок и т.п., нужен как раз CSS.
В этой статье на тему основы CSS, я тебе дам некую основу и покажу где лучше и быстрей продолжить изучать CSS.
Варианты подключения CSS
Внутреннее подключение, то есть прям в шапке структуры html пишешь CSS, вот так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
font-size: 20px;
}
</style>
</head>
<body>
</body>
</html>Этот метод хорош тем, что ты можешь указывать на каждой отдельной странице HTML, разный код CSS.
Внешнее подключение, есть 2 варианты, сейчас я тебе покажу.
Ты просто для начала пишешь основу css в отдельный файл, затем выбираешь сохранить и сохраняешь его с расширением .css. Теперь ты можешь подключить его в свой файл html, либо так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="file.css">
</head>
<body>
</body>
</html>Или можно использовать новый метод CSS3, import:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@import url("main.css");
</style>
</head>
<body>
</body>
</html>Где лучше подключать данный файл?
Если следовать трендам и новым технологиям, то на данный момент, очень хорошо используется подключение в футер, там же где и скрипты, перед закрывающимся тегом body. Я так говорю потому что старое место размещение это в теге head.
Вот пример структуры HTML, вместе с подключенным CSS (чтобы учить основы css):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<link rel="stylesheet" href="file.css">
</body>
</html>Смотри, есть еще встроенные стили, тут не надо писать код где-то отдельно, ты просто пишешь его в атрибуте style нужного тебе элемента, пример ниже:
Базовые основы CSS ты получил, что же делать дальше?
1) Ты можешь искать уроки в интернете, на ютубе
2) Ты можешь купить офлайн или онлайн курс по CSS
3) Ты можешь получать теорию в статьях по интернету
Но мне кажется, что ты не хочешь платить деньги и не хочешь учить глупую, скучную теорию по css. Поэтому друг, я тебе предлагаю зарегистрировать у нас на проекте и пройти бесплатные интерактивные курсы, это и css, и html, и javascript и много всего интересного. Зарегистрироваться. Спасибо за то, что прочитал данную статью! Удачи тебе!
Хочешь научиться создавать сайты? Изучи все на практике, с помощью интерактивных курсов у нас на проекте. Регистрация - Войти - Наши курсы. Задавайте вопросы в комментариях!