Это нужно знать — CSS и HTML

Привет, Друзья! В последнее время мне на почту часто стали приходить вопросы типа: как изменить шрифт на блоге, размер шрифта, цвет ссылок, фон сайта, передвинуть какую-нибудь иконку, вставить картинку в сайдбар… и множество других вопросов, отвечающие за внешний вид сайта. Так вот, многие знают (а кто не знает), что за внешний вид сайта отвечает файл style.css – таблица стилей сайта (это один из главных файлов, и присутствует в любой теме/шаблоне WordPress), но многие не знают, как редактировать файл css и подстраивать внешний вид и дизайн сайта. А это не так и трудно, как кажется, уж поверьте мне!

css html

Вот сейчас пишу и понимаю, что этот пост должен быть одним из первых на этом блоге, т.к. css — это одна и главнейших составляющей дизайна сайта, и без базовых знаний css, Вам трудно будет работать со своим сайтом или блогом! Даже если у Вас блог на WordPress, в котором качественный визуальный редактор и понятная админка, все равно, Вы рано или поздно захотите что-нибудь изменить в дизайне, и если хоть немного разберетесь в css, то с сайтом будите творить чудеса!

Сейчас я пока не готов учить Вас языку css (может быть в будущем, когда стану супер-профессионалом в css Широкая улыбканачну писать на этом блоге уроки по таблицам стилей… а пока просто читаем дальше…), потому что сам я знаю css еще только на начальном уровне, но для работы над своим блогом, мне этих базовых знаний вполне хватает. Так же и Вам, желательно в обязательном порядке знать и хотя бы немного понимать, как работает файл styly.css в WordPress.

Поверьте, изучить css до начального уровня новичка, Вам достаточно несколько дней. И я серьезно Вам говорю, затем Вы уже сами, с легкостью сможете подстраивать дизайн блога под свой вкус.

Все блоги и сайты в интернете имеют красивые дизайны благодаря именно css. Именно в css вебмастера задают внешний вид как сайта в целом, так и отдельных блоков. Например, мой сайт с css и без файла css выглядит так:

с css                                                                            без css

с css            без css

как видите — css это полностью дизайн блога; а без css просто текст и картинки.

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

css таблица стилей

Вот эта страница, к которой будем применять различные стили и посмотрим что может получиться. Первое что нужно сделать, это перейти по ссылке, которая находится справа “View All Designs”. Вы попадете на огромное количество внешних видов именно этой страницы, и именно эта вебстраница, только благодаря css может быть изменена на столько, на сколько хватит Вашей фантазии:

таблица стилей

Видите, просто в голове не укладывается что можно творить с помощью таблиц стилей. Давайте, например, нам понравился сайт “Oceanscape”, перейдем на него:

css

Если Вы посмотрите исходный код (Ctrl+U) этой страницы и главной страницы с которой мы начали эксперимент, Вы увидите, что HTML код практически идентичен. А отсюда следует, что только с помощью css так изменен дизайн!

Также Вы можете просмотреть таблицу стилей css каждого сайта из списка. Для этого просто перейдите по ссылке “View This Design’s CSS” и изучайте таблицу стилей:

таблица стилей css

К чему я это Вам рассказал? Все просто, изучив css, Вы также сможете фантазировать и менять внешний вид своего блога WordPress.

Как Вы знаете, в интернете, чтобы выделиться, желательно иметь уникальный дизайн своего блога, а заказать уникальный внешний вид не всем по карману. Поэтому делаем все намного проще, выбираем и скачиваем бесплатный шаблон WordPress, устанавливаем его на блог (Как установить шаблон на блог) и просто меняем таблицу стилей…. Все гениальное просто!!!

Вот мой шаблон (Fresh-Wordpress), который был скачан с интернета. Выглядел он так:

Fresh-Wordpress

и только по средствам css, я за пару дней отредактировал файл style.css, и получил тот внешний вид, который Вы наблюдаете сейчас:

измененная Fresh WordPress

Вот так! Ну как, будем изучать css??Подмигивающая рожица

К тому же, я могу предложить Вам действительно классный и СОВЕРШЕННО БЕСПЛАТНЫЙ курс по css от Евгения Попова, пройдя который, Вы реально научитесь работать с таблицами стилей и спокойно сможете раскрыть весь потенциал своего WordPress блога.

Лично я учился именно по этому самому курсу (просматривал еще некоторые css курсы), но от курсов Попова только лучшие впечатления! К тому же, еще раз повторяю, курс бесплатен, Вам не нужно будет ничего платить! Обязательно скачайте и просмотрите курс, обещаю, Вам понравится! И результаты не заставят себя ждать!!!

Данный курс содержит 45 уроков, вот список уроков:

список уроков css

Скачать курс можете непосредственно с сайта Евгения Попопа, но для этого нужно будет ввести свое имя и электронный ящик:

курс css

далее предложение подтвердить подписку

курс попова

подтверждаем

подтверждаем подписку

Ну а дальше можете скачивать все бесплатные курсы Евгения Попова, в том числе скачайте и курс по HTML ну и само собой CSS! Также можете просмотреть их на youtube:
скачать курсы евгения попова

Скачать с сайта Евгения Попопа:

<<< СКАЧАТЬ КУРСЫ >>>

Также видео курс можете скачать с моего сервиса без подписки:

<<< СКАЧАТЬ КУРС ПО CSS БЕЗ ПОДПИСКИ >>>

(Здесь можете почитать отзывы о курсе css — http://1popov.ru/24329/promocss)

Даже если Вы разбираетесь в css, все равно советую скачать данный курс и пусть он будет у Вас на компьютере, вдруг что-нибудь забудете в css: селектор, тег, синтаксис или еще что…Широкая улыбка, просто запустите курс и откроите нужный параграф, меню курса сделано очень удобно, сам постоянно заглядываюШирокая улыбка

базовый курс css

Также пользуйтесь справочником по css и html, очень классный сайт, он у меня в закладках, там все по разделам и все предельно ясно http://htmlbook.ru/ пользуйтесь им постоянно, и сами не заметите как отточите мастерство по css!

Ну и желательно бы разобраться еще в HTML (еще легче чем css), потому что

работать в интернете и вести блог без базовых знаний HTML, будет затруднительно… Знания HTML в связке с CSS и это, наверно, треть успеха при создание и ведение блога…

Со следующих уроков будем учиться вставлять на блог кнопки социальных сетей, будем делать подписку по RSS (Что такое RSS. Как подписаться по RSS), изучать различные скрипты, поэтому знания HTML еще как пригодятся. Читатели моего блога помнят, когда разбирали, например, плагин Featured Posts with thumbnails, нам нужно было вставить от плагина в файл шаблона небольшой код, вот, знания HTML нам пригодилось…

Итак, скачать курс по HTML можно тут:

<<< СКАЧАТЬ КУРС ПО HTML >>>

(Отзывы можете прочитать здесь — http://1popov.ru/24329/promohtml)

Ну вот, наверно, на сегодня и все, буду заканчивать!

Я специально не вдавался в подробности и технические моменты css и html, потому что из курсов и из сайта-шпаргалки Вы и сами все прекрасно поймете, да и я нормально бы объяснить не смог, поэтому еще раз говорю, обязательно скачайте данные два курса и просмотрите их на досуге.

Эти знания не раз придут Вам на помощь, и поймите, без них будет очень не просто вести и улучшать слой WordPress блог! (Конечно можете просто писать в блог свои мысли, а все технические моменты за вас будет выполнять специально нанятый человек, например я (мои услуги), но за это нужно платить деньги, и если денег нет, тогда учиться, учиться и еще раз учиться!!! как говорил дедушка Ленин…Широкая улыбка)

PS Если понравятся бесплатные курсы, Вы можете заказать и платный курс о всех технических моментах Онлайн бизнеса, и если сделаете это по моей партнерской ссылки, я верну Вам 15% от стоимости курса (это около 500 руб)! Подробнее о курсе «Все Технические Моменты Онлайн Бизнеса в Видеоформате» Кстати, купите один этот курс, и вы в шоколаде!!!

Ну, в общем ознакомьтесь сначала с бесплатными курсами, и если почувствуете результат, тогда можно вести разговор и о платных!!!

Как создать сайт на wordpress за 15 мин с нуля, бесплатно и быстро — Инструкция + полезный файл

Хочешь получать новые уроки к себе на почту? Подписка ниже:

    ADD YOUR COMMENT