CSS. Урок 1. Что такое стили CSS?

Сегодня мы рассмотрим разные стили css. Их довольно много, но мы рассмотрим несколько основных:

1) Встроенные в элемент HTML:

<p style="..."></p>

В кавычках записываются некоторые стили, таким образом, все что находится в теге <p> приобретает нужный вам вид.

2) Внедренные в HTML документ:

<style>
...
</style>

Между тегами style мы можем прописывать все что хотим, или же можем подключать стили к различным HTML элементам при помощи специального атрибута. Об этом будет в следующих уроках.

3) Внешние таблицы стилей:
Создается специальный файл style.css и дальше при помощи специальной команды подключается к необходимым нам html документам. И в этих документах, можем использовать стили, прописанные в нашем файле style.css
Последний способ наиболее предпочтительней, т.к. позволяет разрабатывать стиль для нашего веб сайта отдельно от html документов. И более того, этот способ позволяет использовать разработанный стиль на многих html страницах, а не на одной, как в первых двух случаях.
В частности, это позволяет создать такой эффект как цветовая схема сайта.
Как пример — зайдите на почту мейл ру. Во вкладке «оформление» присутствует возможность выбрать понравившуюся вам тему оформления.
Каждая тема оформления будет прописана в своем файле стилей, например, style1.css, style2.css и т.д.

Все необходимые файлы, с которыми мы будем работать можно скачать тут.

Дальше нам понадобится шаблон, который представлен ниже.

1

Шаблон представляет собой обычный HTML документ, в котором мы можем писать любое содержимое.

Рассмотрим внимательнее документ:
Doctype html — дает понять браузеру, что данный документ написан на языке HTML
Теги <html></html> означают начало и окончание самого html документа.
Теги <head></head> означают заголовочную часть документа.
<title>Пример стилей</title> — выводится заголовок «Пример стилей»
Теги <meta> — служебные
http-equiv задает служебную кодировку windows-1251. Необходим для правильного отображения русских шрифтов.
«keywords» content=»> необходим для указания вашему документу ключевых слов, необходимых для поисковых систем
«description» content=»> необходим для короткого описания вашей страницы
В тегах <body></body> будет содержаться основная часть документа.

Теперь работаем с тегами <body></body>.
Впишите следующий тег с информацией:

<p>Привет мир!</p>

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

3) Для того чтобы подключить внешнюю таблицу стилей, необходимо для начала ее создать. Создайте новый документ: style.css
Для подключения созданной таблицы стилей, впишите в заголовочную часть файла тега <head></head> следующее:

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

запись указывает путь до таблицы стилей. Т.к. таблица стилей находится в той же папке, мы не указываем до нее путь.
rel=»stylesheet» — указывает что это будет таблицы стилей.
type=»text/css» — указывает, что таблица стилей будет написана именно на языке css. Это необходимо указывать потому что язык css не единственный язык описания стилей.

Теперь работаем с файлом style.css
Допустим вам захотелось раскрасить текст в красный цвет. Вписываем следующую информацию:

.red
{
color:red;
}

Рассмотрим внимательнее запись.
.red — селектор. Селекторов может быть несколько.
{} — Все что находится в этих скобках является набором правил.
color — свойство. Свойств может быть много.
red — значение свойства.

Изменяем атрибут путем добавления селектора:

<p class="red">Привет мир!</p>

Теперь в браузере можно посмотреть, как фраза изменила цвет.

3

Таким образом, можно прописать любой стиль. Так для примера, мы закрасим текст в синий цвет.
Добавляем в файл css следующее:

.blue
{
color:blue;
}

А в нашем html документе добавим следующее:

<p class="blue">Привет мир!</p>

И увидим результат:

4

Также можно работать и с гипер ссылками и придавать им различные стили.

Добавим в наш html документ:

<a href="http://startup-way.ru/" class="red">Ссылка на сайт</a>

Обновите браузер:

5

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

Например, мы хотим, чтобы только к элементам <p> применялось следующее свойство:

p.red
{
font-size:40px;
}

Т.е. размер шрифта у элементов <p> будет равен 40 пикселям.

А у элементов <a> применяем свойство:

a.red
{
font-size:100px;
}

Т.е. размер шрифта у элементов <a> будет равен 100 пикселям.

Что мы имеем? Два новых селектора p.red и a.red не противоречат основному селектору .red, а лишь дополняют его.

6

Поделиться в соц. сетях

Опубликовать в Google Plus

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

(Required)

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Бизнес идеи на любой выбор startup-way.ru