Основы CSS

Основы CSS

29.08.2018 93

Поделиться
Отправить
Плюсануть
Запинить
Класснуть
Поделиться

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 и много всего интересного. Зарегистрироваться. Спасибо за то, что прочитал данную статью! Удачи тебе!

Хочешь научиться создавать сайты? Изучи все на практике, с помощью интерактивных курсов у нас на проекте. Регистрация - Войти - Наши курсы. Задавайте вопросы в комментариях!
Автор данной статьи:

Максим Shushval