Меню
Спросить
*.{ }

Урок 1. Hello CSS!

26 октября 2015
Урок 1. Hello CSS!

CSS – эта аббревиатура расшифровывается на русский язык, как «Каскадные таблицы стилей».

Говоря иначе, эти таблицы задают индивидуальный стиль или вид определенному элементу в HTML и сайту в целом. С их помощью мы можем изменять цвет, ширину, длину, позицию и т.д., в общем, внешний вид элементов.

Стили css

Ребзя, план такой:

1.Пишем урок 1 html

2.Кто хочет посмотреть как происходит оформление и параллельно изучать CSS смотрим урок 1 css

Как подключить таблицы к файлу HTML?

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

Способ подключения, как правило, не один.

Один из способов, вы можете заполнять стили прямо в документе HTML. Для этого, открываем документ и после элемента или же где-нибудь внизу открываем тег STYLE и в нем пишем стили.

  1. <элемент>
  2. <style type=”text/css”>
  3. Здесь пишем наши стили
  4. </style>
  5. </элемент>

Второй способ, как правило «правильный» способ, это вынесение стилей за пределы кода HTML, то есть пишем их в отдельном файле.

Теперь относительно нашего сайта, мы подключим стили вторым способом. Заходим в нашу папку, там где лежит наша страничка index.html. В ней создаем или же не создаем, кому как удобнее, обычно стили хранят в отдельной папке, создаем папку, я назову ее «resource», в ней же создаем файл стилей, это обычный текстовый файл с произвольным названием и расширением «CSS». В моем случае это «style.css».

Файл создан осталось его подключить. Подключение внешнего файла CSS происходит через тег LINK. Пишется этот тег в голове сайта, то есть в теге HEAD. Обязательно для подключения должны присутствовать атрибуты, это путь к документу и отношение между текущим документом и на который ссылаемся. Разберем и напишем код:

  1. <link> - тег LINK
  2. href=”” – сюда пишем путь к файлу
  3. rel=”” – это отношение между текущим документом HTML и файлом CSS
  4. Теперь прописываем все вместе в структуру нашего кода:
  5. <! Doctype html>
  6. <html>
  7. <head>
  8. <link href=”resource/style.css” rel=”stylesheet”>
  9. </head>
  10. <body>
  11. </body>
  12. </html>

Все, теперь стили подключились к документу, осталось только проверить.

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

Но как различить где ID и где CLASS?

Если это просто название, то пишем просто название, класс пишется через точку, а айди пишется через шарп(решетку):

  1. Разберем три элемента
  2. <div class=”krasnoe”></div>
  3. <div id=”beloe”></div>
  4. <div></div>
  5. Вот это три элемента с разными атрибутами
  6. Изменить их стили мы сможем так:
  7. div – изменяться стили у всех элементов с названием DIV
  8. div.krasnoe – изменяться стили у всех элементов с названием DIV и классом krasnoe
  9. div#beloe – изменяться стили у всех элементов с названием DIV и айди beloe

Можно не писать перед точкой или решеткой элемент, в данном случае элемент DIV, но это если вы хотите изменить свойства для всех элементов с таким классом или айди.

css для начинающих

Без комментариев

Комментировать текст в CSS можно так:

  1. /*Закомментированный текст*/

Давайте же уже проверим наше подключение!

Изменим стиль элементу BODY. Чтобы изменить, пишем название элемента, которому хотим изменить свойство, открываем {фигурные скобки} и пишем стили:

  1. Пишем имя, айди или класс элемента и открываем фигурные скобки
  2. body {
  3. }
  4. Внутри фигурный скобок пишем стили
  5. body {
  6. СТИЛЬ: параметр стиля;
  7. }

  8. Как вы могли заметить, после названия свойства или стиля ставим двоеточие и перечисляем параметры, потом закрываем все это «точка с запятой»

  9. Зададим нашему body синий фон
  10. body {
  11. background: blue;
  12. }
  13. background – это означает фон
  14. blue – синий цвет

Сохраняем и обновляем! Цвет изменился, теперь изменит тип шрифта

  1. body {
  2. background: blue;
  3. font-family:Arial;
  4. }

Добавим еще пару свойств

  1. body{
  2. background:blue;
  3. font-family:Arial;
  4. color:white; /*это цвет шрифта:белый*/
  5. border:5px solid red; /*рамка вокруг элемента: 5 пикселей сплошная красная*/
  6. font-size:16pt; /*размер шрифта:16pt*/
  7. }

Заключение

Вот так вот и изменяются стили на сайтах, познакомились мы сегодня так из далека конечно, но подробно, надеюсь понятно, идем дальше на второй урок =). Пишите весь код в ручную без копирование!!!

Следующая статья