Как создать стилевой файл css

Как создать файл стилей CSS?

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

Первым делом нужно разобраться, что вообще собой представляет этот файл. Нужно понимать, что файл стилей CSS – это обычный текстовый файл, точно такой же, какой вы можете создать в любом текстовом редакторе «Блокнот», «Microsoft Word» и.т.д.

Единственное, что отличает файл стилей от других текстовых документов – это его расширение, которое имеет вид *.css.

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

Для тех, кто любит видео:

Способ 1. Создание файла CSS меняя расширение текстового файла. 

Откройте любой текстовый редактор, например, редактор «Блокнот», который входит в состав операционной системы Windows. Найти эту программу можно через главное меню Пуск -> Все программы ->Стандартные -> Блокнот.

В главном меню программы выбираем «Файл-Сохранить как».

И сохраняем текстовый файл с расширением *.txt.

Теперь нужно поменять расширение этого файла с *.txt на *.css.

Если у Вас не отображается расширение файлов, вот заметка:

Как включить отображение расширений файлов в Windows.

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

Теперь для создания файла CSS нужно просто переименовать файл, изменив его расширение на css.

После данной операции вы получите файл стилей css.

Способ 2. Создание файла стилей с помощью редакторов кода  (на примере Dreamweaver). 

Многие специализированные программы для редактирвания кода, например Dreamweaver, имеют специальные функции для создания файлов стилей CSS.

Давайте посмотрим, как это можно сделать в редакторе Dreamweaver.

После открытия программы появляется главное меню, в котором можно выбрать создание файла CSS.

После того, как файл будет создан, его можно будет сохранить через главное меню «Файл-сохранить как…».

Аналогичный процесс создания файлов CSS есть и в других редакторов кода.

На сегодня все. Подготовьте все необходимые программы, о которых сегодня говорилось и создайте файл стилей style.css. Завтра мы начнем наполнять его содержимым.

Сделать css файл документ

Поддержипроект!!!

Как можно сделать файл css!? В какое программе можно сделать файл css!? Создать файл css на компьютере. Примеры создания файл css. Есть множество программ, в которых можно сделать файл css и это совсем просто! Плюс к тому, у нас есть готовый вариант сделать файл css, вообще без программы.

1. Видео - как сделать файл css
2. Как делать файл css без программы!?
3. Как сделать файл css в простом блокноте
4. Как делать файл css в программе Sublime!?
5. Как делать файл css в программе Notepad++!?
6. Как делать файл css на сервере в программе!?

1. Как сделать css файл документ

2. Как делать файл css без программы!?

   Способ сделать файл css вообще без программы, будем делать фал css на компьютере!

   Открываем папку, где должен находиться файл css

   Нажимаем ПКМ, по пустому месту в папке. Создать – текстовый документ.
   

   Можно сразу выделить и удалить сразу все, и написать ваше название нового файла стилей css

   Primer-CSS.css

   Если у вас нет точки, ищем - параметры папок - скрывать расширение для зарегистрированных файлов(для XP, vista, 7,8,10 - все одинаково). Вроде делал страницу на данную тему- не помню где... Зачем здесь, сейчас говорю об отсутствии разрешения файла!? Просто - когда столкнетесь, поймете зачем здесь показывать расширение!
   

   Выходит предупреждение – игнорируем – нажимаем да.

   Всё! Наш файл css – готов!

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

   /* CSS Document */

   Загрузим на сервер Смотрим, что у нас получилось!

   Следующим шагом у нас идёт прикрепление файла css к странице.

3. Как сделать файл css в простом блокноте

   Можно сделать файл css в простом блокноте! Открываем блокнот, заносим какие-то стили в текст вашего нового файла css - далее идем в файл - сохранить как - печатаем название создаваемого файла css - тип файла - здесь нужно выбрать все файлы - далее кодировка файла css - выбираем utf-8, вы конечно можете оставить ANSI - потом расскажите!

   

4. Как делать файл css в программе Sublime!?

   Открываем программу Sublime, в новом документе создаем какие-то нужные стили. Нажимаем файл - сохранить как, или сохранить все - выбираем название вашего будущего файла css - можно оставить тип фала - все файлы. либо выбрать расширение css в выпадающем окне:

   

5. Как делать файл css в программе Notepad++!?

   Создание файла css в программе Notepad абсолютно аналогично созданию файла css в предыдущей программе!

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

   

6. Как делать файл css на сервере в программе!?

   На сервере можно создать файл через, любую программу filezilla, которая может связываться с с сервером с помощью ftp

   Во вкладке сервер нажимаем ПКМ - в новом окне - выбираем новый файл - далее печатаем название создаваемого файла css - нажимаем ок - видим, что наш новый файл создался на сервере - естественно, что он сейчас пустой. Если вы хотите го редактировать, добавлять содержимое на компьютере его надо скачать.
   

Последняя дата редактирования : 2020-01-21 11:21

//dwweb.ru/comments_1_5/include/img/hand_no_foto.png

no

no

Урок 1. Как подключить таблицу стилей CSS?

Как создать таблицу стилей, css?

Скрин

Поздравляю! Ваш файл готов. Он пока пустой, но позже его можно будет наполнить соответствующим содержимым. Ниже мы рассмотрим азы - способы подключения css.

Внешние таблица стилей

<html>

    <head>

       <title>Внешнее подключение CSS</title>
      <!-- Ниже расположена ссылка на нашу таблицу стилей.  -->

       <link rel="stylesheet" type="text/css" href="style.css">
   </head>
<body>
<h2>Внимание</h2>

 В строке с тегом link предполагается, что style.css находится в той же директории (папке), что и данный файл. 
</body>

 </html>

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

Внутренние таблицы стилей

<p style="color:blue; font-size:14px;">Текст синего цвета, размер 14 пикселей</p>

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

Встроенные таблицы стилей

<html>

    <head>

       <title>Внешнее подключение CSS</title>
      <!-- Ниже расположены стили  -->

          <style>

           h3{ color:blue } 

          </style>

       <!-- Только заголовки второго уровня будут синего цвета  -->
   </head>
<body>
<h2>Заголовок первого уровня</h2>

 <h3>Заголовок второго уровня, синий</h3>

 <h4>Заголовок третьего уровня</h4>
</body>

 </html>

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

Недостаток встроенной таблицы стилей тоже очевиден - такие записи надо будет делать для каждой страницы отдельно.

Учебник CSS3. Статья "создание первой таблицы стилей"

В этом учебнике для создания HTML и CSS файлов мы будем использовать редактор Notepad ++, он предназначен для пользователей Microsoft Windows и все примеры будут выполнены именно в нем.

Если же у вас Mac, то вы можете выполнять примеры в редакторе Brackets, он как и Notepad ++ абсолютно бесплатен. Что касается редактора Brackets, то он подходит и для пользователей Microsoft Windows, вы можете впоследствии выбрать, что вам ближе.

Создание внутренней таблицы стилей

Рассмотрим пример в котором вы будете создавать Вашу первую внутреннюю таблицу стилей.

Шаг 1: Откройте текстовый редактор

Нажмите кнопки WIN + R одновременно (аналог Пуск - Выполнить) при этом откроется диалог «Выполнить» впишите notepad++ и нажмите Enter (откроется программа Notepad++), либо запустите программу Notepad++ через её ярлык.

Перед Вами откроется основное окно программы:

Шаг 2: Создайте структуру документа

Скопируйте или впишите в редактор следующий HTML код:

 <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <!-- указываем кодировку документа --> <title>Внутренняя таблица стилей</title> <style> </style> </head> <body> <h2>Как хорошо, что я занимаюсь саморазвитием.</h2> <p>Я выучу CSS за месяц, а то и быстрее</p> </body> </html> 

В коде примеров этого учебника я буду давать дополнительные комментарии, выделенные светло-зеленым цветом. В HTML для создания комментариев в вашем коде используется специальный тег <!-- ... -->, текст внутри такого элемента не отображается браузером. В CSS коде для добавления комментария необходимо текст комментария поместить в следующую конструкцию: /* текст комментария */. Комментарии в CSS коде вы можете делать как внутри встроенных стилей, так и во внешних (в отдельном файле).

Шаг 3: Добавьте встроенные стили

Следующим шагом добавьте к вашей странице встроенные стили: для заголовка первого уровня цвет текста красный (color: red), а для абзацев голубой (color: blue). Кроме того, для заголовка первого уровня мы сделаем выравнивание текста по центру (text-align: center). Проверьте, чтобы каждое CSS свойство и его значение было разделено двоеточием, а в конце каждого объявления стояла точка с запятой.

 <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Внутренняя таблица стилей</title> <style> h2 { text-align: center; /* горизонтальное выравнивание текста по центру */ color: red; /* изменяем цвет текста */ } p { color: blue; /* изменяем цвет текста */ } </style> </head> <body> <h2>Как хорошо, что я занимаюсь саморазвитием.</h2> <p>Я выучу CSS за месяц, а то и быстрее</p> </body> </html> 

Шаг 4: Просмотр HTML страницы в браузере

Откройте пример в браузере и убедитесь, что результат нашего примера соответствует изображению:

Подключение внешней таблицы стилей

Сейчас мы с Вами создадим отдельный файл, который будет содержать таблицу стилей и подключим его к нашему HTML документу.

1. В программе Notepad++ создайте новый пустой файл и сохраните его под именем page.css (при сохранении файла необходимо выбрать Cascade Style Sheets *.css) в той же папке, где вы создавали HTML документ.
2. Перенесите из предыдущего примера код CSS (содержимое тега <style>) в файл, который мы создали. Обратите внимание, что сам тег <style> необходимо удалить из документа (зачем нам пустые неиспользуемые теги в документе). Файл css у Вас должен содержать следующий код:

 h2 { text-align: center; color: red; } p { color: blue; } 

3. Добавьте к вашей таблице стилей следующий CSS код для элемента <body>, который определяет видимое содержимое страницы:

 body { margin-top: 50px; border: 5px solid green; font-family: courier; } 

Для элемента <body> мы указали следующие новые для Вас CSS свойства:

margin-top: 50px – это CSS свойство отвечает за внешний отступ от верхнего края элемента, его мы указали равным 50 пикселям.
border: 5px solid green - это универсальное CSS свойство, которое позволяет установить все свойства границ элемента в одном объявлении (в нашем случае задаем сплошной тип границы (solid) равной 5 пикселям зеленого цвета.
font-family: courier - задаем шрифт "Courier" для элемента.
4. Нам осталось только элементом <link> определить связь между документом и внешним ресурсом (таблицами стилей). Обратите внимание, что тег <link> необходимо разместить перед закрывающим элементом </head>:

 <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Внутренняя таблица стилей</title> <link href = "page.css" rel = "stylesheet"> <!-- подключаем нашу таблицу стилей --> </head> <body> <h2>Как хорошо, что я занимаюсь саморазвитием.</h2> <p>Я выучу CSS за месяц, а то и быстрее.</p> </body> </html> 

5. Сохраните ваши файлы и проверьте результат в браузере.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

• Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива в любую папку на вашем жестком диске:


• Составьте следующую HTML страницу, в которой CSS стили, отвечающие за заголовки страницы будут подключаться отдельным файлом, а все остальные используемые стили, будут содержаться во внутренней таблице стилей:

Практическое задание № 1.

Подсказка: на странице использованы цвета: dimgray, gray, aliceblue, orange.

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

Как работать и подключить CSS к HTML документу на практике

Добро пожаловать в следующий урок из серии уроков по CSS! С вами вновь Макс Метелев и сегодня мы разберем на практике как работать с CSS и как его подключить к html документу.

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

Завариваем кофе, чай, берем плюшки и вперед за изучение основ сайтостроения.

Как работает CSS?

В этом уроке вы создадите свой первый файл стилей. Многие из свойств, используемых в каскадных таблицах стилей аналогичны в HTML. Поэтому если вы уверенно разбираетесь в гипертекстовой разметке, то, скорее всего, вы быстро усвоите многие «приблуды» CSS. Давайте рассмотрим на примере.

Базовый синтаксис CSS

Например, нам нужен красный фоновый цвет веб страницы. Используя HTML мы бы сделали примерно так:

В стилях подобное мы бы достигли написанием следующего кода:

body {background-color: #FF0000;}

Как вы должны были заметить написание и там, и там одинаково. Данный пример демонстрирует фундаментальную модель CSS:

Но где размещать код CSS спросите Вы? Вполне логичный и здравый вопрос. Именно этим мы сейчас и займемся.

Как подключить CSS к HTML документу?

Можно выделить 3 способа подключения CSS к веб странице. Все их мы сейчас рассмотрим на примере. Внимательно смотрите 3 способ, так как он самый правильный с точки зрения стандартов верстки и логики. Другие тоже верны, но это «грубые» варианты. Их лучше не использовать.

Метод 1 – Внутристроковое размещение стилей (через атрибут style)

Первый путь заключается в подключении CSS к HTML посредством атрибута style. Основываясь на приведенным выше примере с красным цветом наш код записался бы так:

<html> <head> <title>Example</title> </head> <body> <p>Здесь красная страница</p> </body> </html>

Метод 2 – Через использование тегов style

Другой способ подразумевает включение парных тегов стилей <style></style>  внутрь той страницы, где мы хотим применить их. Например, как здесь:

<html> <head> <title>Простой пример</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>Здесь снова красная страница</p> </body> </html>

Метод 3 – Внешнее подключение файлов стилей.

Это рекомендуемый и правильный метод заключается в увязке файла стилей и веб страницы через подключение в html документ всего лишь одной строчки:

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

Единственное условие вы должны сохранить отдельно файл со стилями и назвать его, например style.css и быть он должен в папке CSS или Style. Такую ситуацию можно проиллюстрировать вот так:

Следует обратить внимание на место, где будет подключаться наша строчка, которая вызывает файл со стилями. Она должна находиться между служебными тегами <head></head> . Можно разместить ее сразу после тега заголовка страницы <title> , как на этом примере:

<html> <head> <title>My document</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> </body> </html>

Ссылка говорит браузеру, что он должен использовать макет из файла CSS для отображения html документа. Т.е как, своего рода, должная инструкция поисковику. Иди вот в это место, цепляй файл стилей и украшай страницу так, как я написал. Ну это образно говоря:-)

Самое важное то, что вы можете иметь неограниченное количество веб страниц и иметь при этом один файл со стилями.

Эта техника поможет сэкономить вам уйму времени. Представьте, что Вы хотите изменить цвет фона веб-сайта с количеством 100-200 страниц, таблица CSS спасет вас от необходимости вручную изменять все эти 100-200 документов.

Давайте еще раз закрепим все на практике.

Попробуйте самостоятельно

Откройте NOTEPAD++ или другую программу для редактирования и создания веб страниц и создайте два файла – один со страничкой html, а другой с файлом стилей:

Default.htm

<html> <head> <title>My document</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h2>My first stylesheet</h2> </body> </html>

Style.css

body { background-color: #FF0000; }

Теперь возьмите и поместите эти два файла в одну папку. Не забудьте сохранить файлы с правильными расширениями (.htm и .css соответственно)

Откройте в браузере файл default.htm и посмотрите, как ваша страница приобрела красный фон. Поздравляем Вас! Вы сделали свой первый файл стилей.

В следующем уроке мы взглянем на некоторые свойства CSS

Учебник CSS для начинающих. Способы внедрения CSS в HTML документ.

Глава 1

В этой главе речь пойдет о том, как внедрить CSS в документ HTML, то есть связать стилевое описание элемента непосредственно с самим элементом, каким либо HTML тегом.

Осуществить данную задачу можно тремя способами:

• Написать стилевое описание непосредственно в самом элементе. Такой способ хорош лишь в том случае если таковой элемент один единственный в HTML документе который нуждается в отдельном стилевом описании.
• Написать стилевое описание для всех идентичных элементов HTML документа. Такой способ оправдывает себя, если стиль страницы принципиально отличается от общего дизайна сайта (группы взаимосвязанных страниц).
• Вынести стилевое описание элементов HTML в отдельный файл CSS. Это позволит управлять дизайном всего сайта целиком, каждой страницей сайта в которой указанно обращение к CSS файлу. Этот способ является наиболее эффективным использованием таблицы каскадных стилей.

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

Практически каждый HTML тег имеет атрибут style, который говорит о том, что к этому тегу применяется некое стилевое описание.

Пишется так:

Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента, в данном случае элемента <p>

Ну например:

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

По такому же принципу можно указать индивидуальный стиль практически для каждого HTML элемента.

Пример:

Но еще раз повторюсь такой способ внедрения CSS хорош лишь в том случае если требуется задать определенный стиль малому числу HTML элементов.

Для того, что бы описать необходимые элементы одновременно на всей странице в заголовок HTML документа внедряют тег <style> </style> (не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.

Взгляните на пример, ниже к нему будут комментарии.

Как видно из примера мы добились точно такого же результата что и в первом случае только теперь мы не прописываем каждому элементу стиль индивидуально, а вынесли его в "голову" документа тем самым указав что все заголовки <h2>,<h3> - будут синими а параграфы <p> - красными. Представьте как мы облегчили бы себе работу будь на странице сотня таких параграфов и штук пятнадцать заголовков, да и сам документ стал меньше весить за счет "удаления" всех повторяющихся стилевых описаний для каждого отдельно взятого элемента.

Теперь обещанные комментарии:

Тег <style> принято внедрять в заголовок HTML документа между тегами <head></head>.

Атрибут тега <style> type - сообщает браузеру, какой синтаксис использовать для правильной интерпретации стилей. Для правильной интерпретации браузерами CSS значение type (MIME тип данных) должно равняться text/css.

Внутри тега <style> </style> идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:

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

Долго ли коротко ли, подошли мы к главному, на мой взгляд, достоинству CSS, а именно возможности выносить все сведения касающиеся дизайна сайта в отдельный внешний файл.

Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:

body {background-color: #c5ffa0}
a {color:#000060; font-weight: bold;}
a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
h2 {color: #0000ff; font-size:18px}
h3 {color: #ff00ff; font-size:16px}
p {color: #600000; font-size:14px}

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

Далее сохраняем этот небольшой файлик с расширением *.css (обычно файл со стилями называют style.css).

Все! файл со стилевым описанием создан! Теперь осталось совсем чуть чуть, а именно заставить нужные страницы нашего сайта черпать информацию с этого файла.

Делается это с помощью тега <link> (связь). Тег <link> многоцелевой и служит для "связывания" HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег <link> является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как <link> несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами <head></head> и не выводится браузерами на экран.

Тег <link> имеет атрибуты:

• shortcut icon - Определяет, что подключаемый файл является иконкой.
• stylesheet - Определяет, что подключаемый файл содержит таблицу стилей.
• application/rss+xml - Файл в формате XML для описания ленты новостей.

Так как мы подключаем в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид:

Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type="text/css"

Теперь вставляем эту строчку в заголовки страниц нашего сайта и наслаждаемся результатом..

Пример:

В примере выше, "сайт о слонах", на данный момент, имеется три страницы, каждая из которых связана с одним единственным внешним css файлом - mystyle.css. Таким образом, мы значительно его "разгрузили" и сделали дизайн всего сайта "мобильным". Представьте сколько б килобайт мы выиграли, будь на этом сайте сотня полноценных страниц!? А также, сколько б времени сэкономили, если бы нам понадобилось изменить что-либо в его дизайне!?

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

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

• Используйте атрибут style для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.
• Используйте тег <style> со стилевым описанием, в том случае, если страница должна иметь индивидуальный дизайн в корни отличный от других страниц сайта.
• В большинстве случаев разумно выносить каскадную таблицу стилей в отдельный css файл.

CSS Урок 2: Как создать свой первый файл CSS

Сегодня мы собираемся написать и сохранить наш первый файл CSS. Начнем с открытия программы редактирования текста. Если вы работаете на ПК с Microsoft Windows, откройте программу с именем «Блокнот» (удерживайте клавишу Windows на клавиатуре и нажмите R, затем введите блокнот и нажмите ввод). Если вы используете компьютер Macintosh, запустите приложение под названием «TextEdit» (которое находится в папке «Приложения»).

Давайте напишем наш первый бит CSS

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

 h2 { оранжевый цвет; выравнивание текста: центр; } 

Надеюсь, вы помните этот код из нашего предыдущего урока. Задача на сегодня - сохранить наш CSS-файл и связать его с HTML-страницей.

Шаг 1. Сохранение файла CSS

Создайте новую папку на рабочем столе (или в другом месте по вашему выбору) и назовите ее CSS-Test . Теперь вернитесь в программу редактирования текста и сохраните документ как «style.css ».

Связывание файла CSS с HTML-страницей

Наш новый файл CSS бесполезен, если мы не применяем его к веб-странице. Давайте создадим для этого урока быструю HTML-страницу. Создайте новый пустой файл в Блокноте (или TextEdit) и добавьте следующий код:

        
 CSS-тест 
 
 
 Это первая коробка.
 
 
 
 Это блок два. 
 
   

Если вы читали мои первые несколько уроков HTML, то этот код хотя бы отчасти вам знаком. Я объясню это по мере продолжения урока; а пока сохраните этот документ в нашей папке «CSS-Test» и назовите его «index.htm».

Связывание двух файлов вместе

Нам все еще нужно указать веб-браузеру загрузить наш «style.css »при просмотре страницы« index.htm ». Добавьте следующий код в index.htm прямо над закрывающим тегом :

Эта строка кода сообщает нашему браузеру, что мы хотим связать таблицу стилей, что она находится в той же папке, что и наша HTML-страница, и называется «style.css».

Теперь, когда вы просматриваете страницу index.htm в веб-браузере, вы должны увидеть по центру оранжевый заголовок:

Давайте украсим эти две коробки

Если вы посмотрите на код нашей HTML-страницы, вы увидите два элемента