Готовые css стили – Урок 2. Внешние таблицы стилей CSS. Как подключить стили. Уроки CSS | Уроки CSS Внешние таблицы стилей CSS | Уроки MODx Evo

Содержание

как сделать их самому и как взять готовые

Css стили для сайта: как их правильно подключать и писать

От автора: здравствуйте, уважаемые читатели портала webformyself. В сайтостроении огромное значение имеет оформление веб-ресурса. Именно за это отвечает язык css (каскадные таблицы стилей), о котором мы сегодня и поговорим. А точнее, о его подключении и использовании. Рассмотрим некоторые css стили для сайта, которые используются при оформлении веб-страниц.

Подключение css

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

Нужно сказать, что вообще существуют также возможности включения стилей в html-файл. Например, их можно определить с помощью атрибута style или такого же тега. Это называют встроенными стилями. Такой подход сегодня не приветствуется и нарушает современные стандарты разработки.

А как же сделать правильно, спросите вы? Для этого нужно создать новый файл с расширением css, а затем подключить его к html. Это делается очень просто с помощью тега link, который и отвечает за подключение внешних файлов. Делается это так:

Css стили для сайта: как их правильно подключать и писать

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

<link rel = "stylesheet" type = "text/css" href = "style.css">

<link rel = "stylesheet" type = "text/css" href = "style.css">

Тег является одинарным, как вы уже поняли. Немного подробнее расскажу о его атрибутах:

rel = «stylesheet» – вообще атрибут rel записывается для того, чтобы определить роль файла на странице. В нашем случае роль – это таблица стилей, что и указывается.

type = «text/css» – так называемый MIME-тип, который обычно указывается всем подключаемым файлам, чтобы браузер правильно их интерпретировал. В современных веб-обозревателях можно не писать этот атрибут.

href = «style.css» – стандартный атрибут, указывающий адрес нашего внешнего файла. В данном случае он записан исходя из того, что файл имеет название style, расширение css и находится в той же папке, что и html-документ.

Как видите, в подключении css-файлов у вас будет меняться только атрибут href, все остальное менять не нужно. К странице можно подключать сколько угодно таблиц стилей, но оптимальным считается не более 2-4, потому что слишком много запросов к серверу это тоже не очень хорошо.

Где взять готовые css стили для сайта?

Ну ладно, с подключением, я надеюсь, все более менее понятно. Но ведь вы создаете пустой файл, и чтобы от его добавления был виден эффект, нужно либо самому написать правила, либо взять их откуда-то.

Css стили для сайта: как их правильно подключать и писать

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

Селектор – это особенность языка css, присущая только ему. Зачем они нужны? Ну вот представьте такой код:

<h2 class = "title">Текст в заголовке</h2> <p>Текст в абзаце</p>

<h2 class = "title">Текст в заголовке</h2>

<p>Текст в абзаце</p>

Css стили для сайта: как их правильно подключать и писать

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

И вот как нам в css, например, оформить абзац и заголовок? Для этого и созданы селекторы, чтобы обращаться только к тем элементам, к которым нужно. Например:

p{ font-size: 12px; } .title{ font-size: 36px; }

p{

font-size: 12px;

}

.title{

font-size: 36px;

}

Мы задали для всех абзацев размер шрифта, равный 12 пикселям, а элементы с классом title (в нашем случае это h2) получили гораздо больший размер – 36 пикселей. Заметьте, в случае с абзацами стили применяться к ним всем, сколько бы их ни было на странице.

Второй же селектор обратился только к одному элементу – с классом title. Конечно, можно создать другие элементы с точно таким классом, это не запрещено, и они получат такое же правило, но если мы просто напишем в html тег h2 (без класса title), то для него никаких правил добавлено не будет.

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

Например, в таблице стилей видим такой код:

.nav{ width: 300px; background: aqua; ... } .nav a{ display: block; color: #ccc; ... }

.nav{

width: 300px;

background: aqua;

...

}

.nav a{

display: block;

color: #ccc;

...

}

Уже из этого мы можем сделать вывод, что где-то на нашей html-странице должен находиться элемент с классом nav, а в нем должны лежать ссылки. Если это действительно так, то оформление применится к ним и внешний вид их соответствующим образом изменится. Если же таких элементов обнаружено не будет, то код просто проигнорируется.

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

Как самому сделать css стили для сайта?

Сss не является чем-то страшным и чрезвычайно сложным. Это обычная технология, созданная людьми для оформления веб-страниц, имеющая свои правила. Достаточно понять их, и вы тоже сможете создавать внешний вид веб-ресурсов с помощью этого языка.

Css стили для сайта: как их правильно подключать и писать

Самое главное условие быстрого освоения – постоянная практика, вкупе с новыми знаниями, которые вы для себя усвоите. Подобную практику вам может дать наш курс по различным техникам верстки.

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

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

На этом я с вами прощаюсь. Читайте наш блог webformyself, чтобы улучшать свои знания в области сайтостроения.

Css стили для сайта: как их правильно подключать и писать

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться Css стили для сайта: как их правильно подключать и писать

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Готовые CSS шаблоны и генераторы

Готовые CSS шаблоны для сайтов в последнее время стали очень
популярными. Поставил движок - и за пару минут установил на него любой понравившийся дизайн. Это если нет желания и навыков делать дизайн для своего сайта или блога.

Если такое желание есть, то можно воспользоваться заготовками, которые сделаны в соответствии со стандартами и позволят сделать на их основе прекрасный дизайн, легкий и красивый, который будет нормально отображаться во всех браузерах. Использование готовых CSS заготовок для дизайна экономит массу времени и сил, позволяя сосредочиться на креативности и уникальности дизайна.

Кроме готовых CSS шаблонов и заготовок для дизайна, существует ряд он-лайн сервисов, которые генерируют CSS шаблоны.

Генераторы CSS шаблонов:
http://www.ibdjohn.com/csstemplate/
http://csscreator.com/?q=tools/layout
http://www.maketemplate.com/
http://www.positioniseverything.net/

Готовые CSS шаблоны:
http://www.opensourcetemplates.org/
http://www.freecsstemplates.org/
http://www.ex-designz.net/
http://www.templateworld.com/ Высылают PSD на e-mail
http://www.csstemplates.net/

🔥 Кстати! Я провожу платный курс по продвижению англоязычных сайтов SEO Шаолинь. Если интересует, можете подать заявку на его сайте seoshaolin.com.

Приглашаю вас подписаться на мои каналы в Telegram:

@shakinru - продвижение в рунете.
@burzhunet - англоязычное SEO.

Заготовки для CSS дизайна:
http://www.intensivstation.ch/en/templates/
http://www.free-css-templates.com/
http://www.designshack.co.uk/
http://blog.html.it/layoutgala/
http://www.sixshootermedia.com/free-templates/

http://maxdesign.com.au/

Готовые CSS шаблоны для блогов

CSS дизайны для блогов на сервисе Blogspot.com:
http://blogger-templates.blogspot.com/
http://finalsense.com/services/blogs_templates.html
http://blogspottemplates.blogspot.com/
http://freetemplates.blogspot.com/

CSS шаблоны для блогов на движке Movable Type:
http://www.blogfashions.com/

CSS шаблоны для блогов на движке Textpattern:
http://www.textplates.com/templates
http://textgarden.org/
http://txp-templates.com/

Вспомогательные CSS генераторы для веб-дизайна

CSS генератор оформления текста:
http://www.somacon.com/p334.php

CSS генераторы круглых углов:
http://www.neuroticweb.com/
http://wigflip.com/cornershop/

CSS генератор полосы прокрутки браузера:
http://www.iconico.com/CSSScrollbar/ Не работает в Firefox

Глобатор

P.S. Cегодняшний постскриптум - рисуем Nintendo Mii.

Подпишитесь на рассылку блога с полезными материалами по SEO

Оцените, пожалуйста, статью, я старался 🙂 :

Загрузка...

Бесплатные HTML, CSS шаблоны для сайта

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

Премиум шаблон для сайта Electronics Web

Прекрасный шаблон для сайта с отличным дизайном.

Пример ι Скачать исходники

Бизнес шаблон для сайта

Отличный бизнес шаблон в тёмно синих тонах

Пример ι Скачать исходники

Молодёжный CSS и HTML шаблон

Прекрасный шаблон на музыкальную тематику в серых тонах

Пример ι Скачать исходники

HTML шаблон Design & Consultancy

Современный шаблон для Вашего будущего сайта в зелёных тонах

Пример ι Скачать исходники

CSS и HTML шаблон для сайта

Не плохой шаблон в темно синих тонах

Пример ι Скачать исходники

CSS шаблон Happy Template

Замечательный яркий шаблон

Пример ι Скачать исходники

HTML шаблон Nautica

Замечательный шаблон для сайта в стиле минимализм

Пример ι Скачать исходники

HTML5 шаблон

Отличный современный шаблон в светло зелёных тонах.

Пример ι Скачать исходники

Тёмный HTML шаблон

Стильный, сделанный в тёмных тонах, шаблон, который сразу запомнится посетителю

Пример ι Скачать исходники

CSS шаблон для сайта Style.

Ещё один шаблон сделанный в тёмных тонах и с запоминающимся дезайном

Пример ι Скачать исходники

Таблица стилей CSS со шпаргалкой основные свойств