Домой / Учебник Css / 1 Урок. Основы css, как связать html с css

1 Урок. Основы css, как связать html с css

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

Например, создали файлы index.html и файл style.css. Style.css как раз и будет содержать стили.

Как связать css с html?

В файле index.html, между тегами <head> </head> мы напишем следующее:

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

То есть, в html странице мы пишем примерно следующее:

<HTML>
  <head> 
    <title>Моя страничка</title>
    <link rel="stylesheet" type="text/css" href="style.css"> 
  </head> 
  <body>
    Описание страницы
    Описание страницы
    Описание страницы......
  </body>
</HTML>

То есть мы привязали нашу страницу index.html к файлу стилей, который мы назвали style.css. Причем файл стилей должен лежать в одной папке с файлом html, к которому мы прописывали эту строчку.

Краткое содержание:

 Основы Css

Посмотрим, как вообще работают стили.  Попробуем разобраться на примере параграфа - <P>. По идее, текст в html разделен на параграфы. Так вот, если в css файле мы напишем:

p {color:red;} 

То весь текст, который в html страницах заключен в параграфы, станет красным цветом.

Запомните структуру: пишем сперва элемент, к которому хотим задать стили, в данном случае p, затем в кавычках {} пишем уже стили. Каждый новый стиль через точку с запятой.

 Преимущества Css

Css удобно тем, что, при желании что-то изменить на своем сайте, Вам не надо будет изменять каждую страницу, а просто можно изменить некоторые атрибуты в css файле. И во всех страницах (при условии, что у них прописана строчка связи с css) произойдут изменения.

Возьмем наш пример с параграфом. Мы можем одним движением в файле css изменить текст во всех параграфах, которые есть на сайте.

На самом деле файл стилей можете называть как угодно, главное, чтобы он был с расширением .css. Например: mystyle.css ; stl.css, да и вообще как пожелаете.

2 Урок. Текст в css

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

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