Как создать файл css для html

Обновлено: 01.05.2024

Это краткое руководство предназначено для людей, которые хотят начать использовать CSS и никогда раньше не писали таблицы стилей CSS.

Это не многое объясняет в CSS. Он просто объясняет, как создать файл HTML, файл CSS и как заставить их работать вместе. После этого вы можете прочитать любой из множества других руководств, чтобы добавить дополнительные функции в файлы HTML и CSS. Или вы можете переключиться на использование специального редактора HTML или CSS, который поможет вам настроить сложные сайты.

В конце руководства вы создадите HTML-файл, который выглядит следующим образом:

Полученная HTML-страница с цветами и макетом, все сделано с помощью CSS.

Обратите внимание, я не утверждаю, что это красиво ☺

Разделы, которые выглядят так, являются необязательными. Они содержат дополнительные пояснения к кодам HTML и CSS в примере. «Внимание!» Знак в начале указывает на то, что это более сложный материал, чем остальной текст.

Шаг 1: написание HTML

В этом руководстве я предлагаю вам использовать только самые простые инструменты. Например, Блокнот (в Windows), TextEdit (в Mac) или KEdit (в KDE) вполне подойдут. Как только вы поймете принципы, вы можете перейти к более продвинутым инструментам или даже к коммерческим программам, таким как Style Master, Dreamweaver или GoLive. Но для вашей самой первой таблицы стилей CSS лучше не отвлекаться на слишком много расширенных функций.

Не используйте текстовый процессор, например Microsoft Word или OpenOffice. Обычно они создают файлы, которые веб-браузер не может прочитать. Для HTML и CSS нам нужны простые текстовые файлы.

Шаг 1 – откройте текстовый редактор (Блокнот, TextEdit, KEdit или любой другой на ваш выбор), начните с пустого окна и введите следующее:

На самом деле вам не нужно вводить его: вы можете скопировать и вставить его с этой веб-страницы в редактор.

(Если вы используете TextEdit на Mac, не забудьте указать TextEdit, что текст действительно является обычным текстом, перейдя в меню «Формат» и выбрав «Сделать обычным текстом».)

Первая строка вышеприведенного файла HTML сообщает браузеру, какой это тип HTML (DOCTYPE означает ТИП ДОКУМЕНТА). В данном случае это HTML версии 4.01.

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

Здесь находится фактический текст документа. В принципе, там будет отображаться все, кроме текста внутри, который служит комментарием для нас самих. Браузер проигнорирует его.

— это «Абзац». И это «Якорь», который создает гиперссылку.

Редактор KEdit, показывающий исходный код HTML.

«ul» — это список с одной гиперссылкой на элемент. Это будет служить нашим «меню навигации по сайту», ссылаясь на другие страницы нашего (гипотетического) веб-сайта. Предположительно, все страницы нашего сайта имеют похожее меню.
Элементы «h1» и «p» формируют уникальный контент этой страницы, а подпись внизу («адрес») снова будет одинаковой на всех страницах сайта.

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

Теперь выберите «Сохранить как…» в меню «Файл», перейдите в каталог/папку, куда вы хотите его поместить (подойдет рабочий стол), и сохраните файл как «mypage.html». Пока не закрывайте редактор, он нам еще понадобится.

(Если вы используете TextEdit в Mac OS X до версии 10.4, вы увидите параметр Не добавлять расширение .txt в диалоговом окне Сохранить как. Выберите этот параметр, поскольку имя «mypage.html» уже включает расширение. Более новые версии TextEdit автоматически заметят расширение .html.)

Затем откройте файл в браузере. Вы можете сделать это следующим образом: найдите файл с помощью файлового менеджера (Windows Explorer, Finder или Konqueror) и щелкните или дважды щелкните файл «mypage.html». Он должен открыться в веб-браузере по умолчанию. (Если это не так, откройте браузер и перетащите в него файл.)

Как видите, страница выглядит довольно скучно…

Шаг 2: добавление цветов

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

Мы начнем с таблицы стилей, встроенной в файл HTML. Позже мы поместим HTML и CSS в отдельные файлы.Отдельные файлы — это хорошо, так как это упрощает использование одной и той же таблицы стилей для нескольких файлов HTML: вам нужно написать таблицу стилей только один раз. Но для этого шага мы просто храним все в одном файле.

Нам нужно добавить элемент в файл HTML. Таблица стилей будет внутри этого элемента. Итак, вернитесь в окно редактора и добавьте следующие пять строк в заголовочную часть HTML-файла. Строки, которые нужно добавить, показаны красным (строки 5–9).

В первой строке говорится, что это таблица стилей и что она написана на CSS («текст/css»). Вторая строка говорит о том, что мы добавляем стиль к элементу «тело». Третья строка задает пурпурный цвет текста, а следующая строка задает фон в зеленовато-желтом цвете.

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

но так как оба правила влияют на тело, мы написали «тело» только один раз и объединили свойства и значения. Дополнительные сведения о селекторах см. в главе 2 книги Lie & Bos.

Фон элемента body также будет фоном всего документа. Мы не дали другим элементам (p, li, address…) какой-либо явный фон, поэтому по умолчанию они не будут иметь никакого фона (или: будут прозрачными). Свойство 'color' задает цвет текста для элемента body, но все остальные элементы внутри body наследуют этот цвет, если он явно не переопределен. (Мы добавим другие цвета позже.)

Теперь сохраните этот файл (используйте «Сохранить» в меню «Файл») и вернитесь в окно браузера. Если вы нажмете кнопку «Перезагрузить», дисплей должен измениться со «скучной» страницы на цветную (но все же довольно скучную) страницу. Помимо списка ссылок вверху, текст теперь должен быть фиолетовым на зеленовато-желтом фоне.

Как один браузер показывает страницу после добавления некоторых цветов.

Шаг 3: добавление шрифтов

Еще одна вещь, которую легко сделать, — это выделить шрифты для различных элементов страницы. Итак, давайте установим текст шрифтом «Georgia», за исключением заголовка h1, которому мы дадим «Helvetica».

В Интернете вы никогда не можете быть уверены, какие шрифты установлены на компьютерах ваших читателей, поэтому мы также добавляем несколько альтернативных вариантов: если Georgia недоступен, подойдет Times New Roman или Times, а если ничего не помогает, браузер может использовать любой другой шрифт с засечками. Если Helvetica отсутствует, Geneva, Arial и SunSans-Regular очень похожи по форме, и если ни один из них не работает, браузер может выбрать любой другой шрифт без засечек.

В текстовом редакторе добавьте следующие строки (строки 7–8 и 11–13):

Если вы снова сохраните файл и нажмете «Обновить» в браузере, теперь должны быть разные шрифты для заголовка и остального текста.

Теперь основной текст отличается от заголовка шрифтом.

Шаг 4. Добавление панели навигации

Список в верхней части HTML-страницы должен стать меню навигации. На многих веб-сайтах есть своего рода меню вверху или сбоку страницы, и на этой странице тоже должно быть такое меню. Мы поместим его слева, потому что там немного интереснее, чем вверху…

Поэтому нам нужно переместить список влево, а остальную часть текста немного вправо, чтобы освободить для него место. Для этого мы используем следующие свойства CSS: padding-left (для перемещения основного текста) и position, left и top (для перемещения меню).

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

В окне редактора добавьте в файл HTML следующие строки (строки 7 и 12–16):

Если вы снова сохраните файл и перезагрузите его в браузере, список ссылок должен появиться слева от основного текста. Это уже выглядит намного интереснее, не так ли?

Основной текст перемещен вправо, а список ссылок теперь находится слева от него, а не над ним.

Позиция: absolute указывает, что элемент ul позиционируется независимо от любого текста, который идет до или после него в документе, а 'left' и 'top' указывают, какова эта позиция. В данном случае 2em сверху и 1em с левой стороны окна.

'2em' означает 2-кратный размер текущего шрифта. Например, если меню отображается шрифтом размером 12 пунктов, то «2em» — это 24 пункта. 'em' — очень полезная единица в CSS, поскольку она может автоматически адаптироваться к шрифту, который использует читатель.В большинстве браузеров есть меню для увеличения или уменьшения размера шрифта: вы можете попробовать и увидеть, что размер меню увеличивается по мере увеличения шрифта, чего не было бы, если бы мы вместо этого использовали размер в пикселях.

Шаг 5. Оформление ссылок

Меню навигации по-прежнему выглядит как список, а не как меню. Давайте добавим к нему немного стиля. Мы удалим маркер списка и переместим элементы влево, туда, где был маркер. Мы также дадим каждому элементу свой собственный белый фон и черный квадрат. (Почему? Никаких особых причин, просто потому, что мы можем.)

Мы также не сказали, какого цвета должны быть ссылки, поэтому добавим и это: синий для ссылок, которые пользователь еще не видел, и фиолетовый для уже посещенных ссылок (строки 13-15 и 23- 33) :

Шаг 6: добавление горизонтальной линии

Последнее дополнение к таблице стилей — горизонтальная линейка, отделяющая текст от подписи внизу. Мы будем использовать 'border-top', чтобы добавить пунктирную линию над элементом (строки 34-37):

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

Шаг 7: размещение таблицы стилей в отдельном файле

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

Чтобы создать файл таблицы стилей, нам нужно создать еще один пустой текстовый файл. Вы можете выбрать «Создать» в меню «Файл» в редакторе, чтобы создать пустое окно. (Если вы используете TextEdit, не забудьте снова сделать его обычным текстом, используя меню «Формат».)

Затем вырежьте и вставьте все, что находится внутри элемента . Они принадлежат HTML, а не CSS. Теперь в новом окне редактора у вас должна быть полная таблица стилей:

Выберите «Сохранить как…» в меню «Файл», убедитесь, что вы находитесь в том же каталоге/папке, что и файл mypage.html, и сохраните таблицу стилей как «mystyle.css».

Теперь вернитесь к окну с HTML-кодом. Удалите все от тега включительно и замените его элементом следующим образом (строка 5):

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

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

Конечный результат

Следующим шагом будет размещение обоих файлов, mypage.html и mystyle.css, на вашем веб-сайте. (Ну, вы можете сначала немного изменить их…) Но как это сделать, зависит от вашего интернет-провайдера.

Дополнительная литература

Для ознакомления с CSS см. главу 2 книги Lie & Bos или введение Дейва Рэггетта в CSS .

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

Когда браузер читает таблицу стилей, он форматирует HTML-документ в соответствии с информацией, содержащейся в таблице стилей.

Три способа вставки CSS

Существует три способа вставки таблицы стилей:

Внешний CSS
Внутренний CSS
Встроенный CSS

Внешний CSS

С помощью внешней таблицы стилей вы можете изменить внешний вид всего веб-сайта, изменив всего один файл!

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

Пример

Внешние стили определяются внутри элемента внутри раздела HTML-страницы:

Внешняя таблица стилей может быть написана в любом текстовом редакторе и должна быть сохранена с расширением .css.

Внешний файл .css не должен содержать тегов HTML.

Вот как выглядит файл mystyle.css:

"mystyle.css"

тело <
цвет фона: голубой;
>

цвет h1: темно-синий;
поле слева: 20 пикселей;
>

Примечание. Не добавляйте пробел между значением свойства и единицей измерения:
Неверно (пробел): поле слева: 20 пикселей;
Правильно (без пробела): поле слева: 20 пикселей;

Внутренний CSS

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

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

Пример

Внутренние стили определяются внутри элемента внутри раздела HTML-страницы:

Встроенный CSS

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

Чтобы использовать встроенные стили, добавьте атрибут стиля к соответствующему элементу. Атрибут стиля может содержать любое свойство CSS.

Пример

Встроенные стили определяются в атрибуте "style" соответствующего элемента:

Совет. Встроенный стиль теряет многие преимущества таблицы стилей (из-за смешивания содержимого с представлением). Используйте этот метод экономно.

Несколько таблиц стилей

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

Предположим, что внешняя таблица стилей имеет следующий стиль для элемента:

Затем предположим, что внутренняя таблица стилей также имеет следующий стиль для элемента:

Пример

Если внутренний стиль определен после ссылки на внешнюю таблицу стилей, элементы будут "оранжевыми":

Пример

Однако, если внутренний стиль определен до ссылки на внешнюю таблицу стилей, элементы будут "темно-синими":

Каскадный порядок

Какой стиль будет использоваться, если для элемента HTML указано более одного стиля?

Все стили на странице будут "каскадироваться" в новую "виртуальную" таблицу стилей по следующим правилам, где номер один имеет наивысший приоритет:

Встроенный стиль (внутри HTML-элемента)
Внешние и внутренние таблицы стилей (в разделе заголовка)
Браузер по умолчанию

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

Вы когда-нибудь слышали о W3Schools Spaces? Здесь вы можете бесплатно создать свой собственный веб-сайт или сохранить фрагменты кода для дальнейшего использования.

CSS экономит много времени. Он может одновременно управлять макетом нескольких веб-страниц.

Что такое CSS?

Каскадные таблицы стилей (CSS) используются для форматирования макета веб-страницы.

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

Подсказка. Слово "каскад" означает, что стиль, примененный к родительскому элементу, также будет применяться ко всем дочерним элементам родительского элемента. Таким образом, если вы установите цвет основного текста на «синий», все заголовки, абзацы и другие текстовые элементы в теле также получат тот же цвет (если вы не укажете что-то другое)!

Использование CSS

CSS можно добавить в документы HTML тремя способами:

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

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

Встроенный CSS

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

Встроенный CSS использует атрибут стиля HTML-элемента.

В следующем примере цвет текста элемента задается синим, а цвет текста

элемента — красным:

Пример

Внутренний CSS

Внутренний CSS используется для определения стиля отдельной HTML-страницы.

Внутренний CSS определяется в разделе HTML-страницы внутри элемента.

В следующем примере цвет текста ВСЕХ элементов (на этой странице) устанавливается синим, а цвет текста ВСЕХ

элементов — красным. Кроме того, страница будет отображаться с фоновым цветом "голубого цвета":

Пример

Внешний CSS

Внешняя таблица стилей используется для определения стиля многих HTML-страниц.

Чтобы использовать внешнюю таблицу стилей, добавьте ссылку на нее в разделе каждой HTML-страницы:

Пример

Внешняя таблица стилей может быть написана в любом текстовом редакторе. Файл не должен содержать HTML-код и должен быть сохранен с расширением .css.

Вот как выглядит файл "styles.css":

"styles.css":

Совет. С помощью внешней таблицы стилей можно изменить внешний вид всего веб-сайта, изменив один файл!

Цвета, шрифты и размеры CSS

Здесь мы продемонстрируем некоторые часто используемые свойства CSS. Вы узнаете о них больше позже.

Свойство CSS color определяет используемый цвет текста.

Свойство CSS font-family определяет используемый шрифт.

Свойство CSS font-size определяет используемый размер текста.

Пример

Использование свойств CSS color, font-family и font-size:

Граница CSS

Свойство CSS border определяет границу вокруг элемента HTML.

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

Пример

Использование свойства границы CSS:

Заполнение CSS

Свойство CSS padding определяет отступ (пробел) между текстом и границей.

Пример

Использование свойств границ и отступов CSS:

Маржа CSS

Свойство CSS margin определяет поле (пробел) за пределами границы.

Пример

Использование свойств CSS border и margin:

Ссылка на внешний CSS

На внешние таблицы стилей можно ссылаться с помощью полного URL-адреса или пути относительно текущей веб-страницы.

Пример

В этом примере используется полный URL-адрес для ссылки на таблицу стилей:

Пример

Этот пример ссылается на таблицу стилей, расположенную в папке html на текущем веб-сайте:

Пример

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

Подробнее о путях к файлам можно прочитать в главе Пути к файлам HTML.

Резюме главы

Используйте атрибут стиля HTML для встроенного стиля
Используйте элемент HTML для определения внутреннего CSS
Используйте элемент HTML для ссылки на внешний файл CSS
Используйте элемент HTML для хранения элементов и
Используйте свойство цвета CSS для цветов текста
Используйте свойство CSS font-family для текстовых шрифтов
Используйте свойство CSS font-size для размеров текста.
Используйте свойство границы CSS для границ
Используйте свойство CSS padding для пространства внутри границы.
Используйте свойство margin CSS для отступа за границей

Совет. Вы можете узнать больше о CSS в нашем учебнике по CSS.

HTML-упражнения

Теги стиля HTML

Тег	Описание
	Определяет информацию о стиле для документа HTML
	Определяет связь между документом и внешним ресурсом

Полный список всех доступных тегов HTML см. в нашем справочнике по тегам HTML.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если вы посмотрите на код нашей HTML-страницы, вы увидите два элемента. Мы добавили HTML-атрибут «id» для этих двух элементов и присвоили им значения «box-one» и «box-two». Мы можем использовать «id» элемента, чтобы выбрать и стилизовать его с помощью CSS. Например, давайте сделаем первую коробку серой, а вторую — желтой. Добавьте следующий код в свой файл CSS непосредственно под исходным правилом:

Наши новые необычные коробки

Когда вы сохраняете файл CSS и обновляете нашу HTML-страницу в веб-браузере, вы должны увидеть что-то очень похожее на это:

За стиль

Возможно, это некрасиво, но мы создали нашу первую HTML-страницу с помощью CSS! Давайте подытожим ваши знания CSS. Вы знаете:

Основной синтаксис CSS (рассмотренный в предыдущем уроке)
Как связать файл CSS со страницей HTML
Как выбрать определенные элементы HTML и придать им стиль

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

Если вы предпочитаете смотреть видеоуроки, а не читать письменные уроки, ознакомьтесь с моим 8-часовым видеокурсом и присоединитесь к более чем 4000 других, которые изучили HTML, CSS и адаптивный дизайн на профессиональном уровне.

Об авторе

< /p>

Брэд Шифф (Brad Schiff) – разработчик интерфейса, дизайнер и преподаватель, который занимается созданием пользовательских интерфейсов более десяти лет. Он работал для компаний из списка Fortune 500, национальных политических кампаний и международных технологических лидеров. Его самым большим достижением является помощь людям в изучении интерфейсной веб-разработки.

28 мыслей на тему «Урок CSS 2: Как создать свой первый CSS-файл»

В настоящее время я учусь онлайн в Художественном институте веб-дизайна/интерактивных медиа. Я работаю с кодом HTML и CSS всего пару месяцев, и ваши уроки действительно очень помогли мне, чувак, я просто хотел воспользоваться этой возможностью, чтобы поблагодарить вас за публикацию таких замечательных руководств и за то, что все стало действительно легко. чтобы понять. Во всех смыслах я нашел ваш веб-сайт на прошлой неделе, я неукоснительно обращался к вашему сайту за помощью, и это сделало мой онлайн-опыт с кодированием чертовски легким. (смеется) Я даже захожу так далеко, что постоянно оставляю ваш сайт открытым на панели задач для быстрой справки. Большое спасибо, приятель, мы очень ценим твою работу. — Нортон

Сегодня я написал и пытался сохранить свой первый файл CSS. Я использую TextEdit. Когда я попытался сохранить его в текстовом формате как «style.css», я получил следующее сообщение… «Вы не можете сохранить этот документ с расширением «.css» в конце имени. Необходимое расширение «.txt». Вы можете выбрать оба варианта, чтобы имя вашего файла заканчивалось на «.css.txt». Как мне поступить? Спасибо!

Находясь в TextEdit, найдите в верхней строке меню OS X пункт «Формат». После того, как вы нажмете «Формат», должна появиться опция «Сделать обычным текстом». Это должно сработать — теперь должно работать сохранение файла с расширением .css.

Сочетание клавиш для переключения на обычный текст — Command+Shift+T.

Спасибо за этот полезный урок, Брэд!

Зачем создавать отдельный файл для CSS, а затем связывать его с html, когда есть возможность сделать все вместе в одном файле?
Я не пытаюсь предлагать, потому что я только начинающий, но, как я уже говорил в других учебниках по html и css, был способ сделать css и html в одном поле, и мне было намного проще понимать. Спасибо.

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

Ключевой концепцией является "разделение представления и содержания".

Подумайте об этом так: представьте, что у вас есть веб-сайт с 50 или 100 страницами, и вы хотите изменить цвет фона. Если мы сохраним наш CSS в отдельном файле, мы можем внести изменения в один файл, и цвет фона изменится для всех 100 страниц. Если вы сохраните код CSS в файле HTML, вам потребуется отредактировать 100 файлов.

Еще один пример. Представьте, что весь ваш CSS-код занимает около 10 килобайт данных. Представьте, что пользователь посещает ваш сайт и просматривает 15 разных страниц. Если вы включите CSS в свой HTML-файл, они будут повторно загружать одни и те же 10 килобайт данных CSS 15 раз! Если мы сохраним наш CSS в отдельном файле, им нужно будет загрузить его только один раз.

Я прошел урок html в школе вулкана веб и w3. Ваш урок css дал мне хорошую практику и потрясающие знания. Спасибо, чувак.

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

Большое уважение за то, что поделился знаниями, Брэд

Я нашел это руководство замечательным, да благословит вас Бог.
Спасибо

Да, я придерживаюсь старой школы и до сих пор зациклен на HTML, возвращаясь к старым дням Geocities, если кто-то об этом помнит. Это был бесплатный веб-хостинг в 90-х годах. Я давно откладывал изучение CSS. Я устал возвращаться назад и редактировать каждую отдельную страницу во всех своих материалах в сети. Просто изменить простой нижний колонтитул — это много работы. Мне нравится, как ваши уроки очень-очень просты, и берет вас за руку и медленно проводит всех по ним шаг за шагом. Я нашел этот сайт буквально пару недель назад. Хотелось бы раньше. Это помогло мне наконец понять концепцию CSS. У меня есть CSS для чайников, но я до сих пор не понял. Я никоим образом не стал экспертом за две недели, но я просто рад учиться.

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

Я работаю стажером в компании, занимающейся свадебным дизайном, и это руководство дало мне много информации, спасибо

Сейчас я посещаю веб-курс, и мне трудно следовать книге. Я наткнулся на ваш сайт, и это здорово!

Мне интересно, есть ли у вас какие-либо уроки, показывающие диаграммы, вставленные как на веб-страницу, так и в файл .css.

Этот сайт очень полезен для меня. продолжайте делиться своими лучшими знаниями о дизайне.
Спасибо.
Джей Хинд

Я новичок в школе, предлагаю основы веб-программирования, этот сайт отличный и мне удобно учиться, спасибо, Брэд

Мне это очень помогло. Я искал информацию о том, как связать таблицу стилей CSS с моими html-документами, и это лучший веб-сайт, который я нашел. Большое спасибо, Брэд.

Большое спасибо, Брэд

Это действительно полезно для меня.

полезно оставить его включенным

Спасибо, у меня больше нет с этим проблем.

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

Мне очень нравятся ваши уроки…. БОЛЬШОЕ СПАСИБО

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

Ха-ха, приятно это слышать! Как насчет того, чтобы сохранить 100%, но держать меня в курсе ваших успехов 🙂

Файл CSS – это обычный текстовый файл, сохраненный с расширением .css.

Начало работы с CSS

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

Без дальнейших церемоний, давайте приступим к работе с каскадными таблицами стилей (CSS).

Включение CSS в документы HTML

CSS можно прикрепить как отдельный документ или встроить в сам HTML-документ. Существует три метода включения CSS в HTML-документ:

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

В этом руководстве мы рассмотрим все эти три метода вставки CSS один за другим.

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

Встроенные стили

Встроенные стили используются для применения правил уникального стиля к элементу путем размещения правил CSS непосредственно в открывающем теге. Его можно прикрепить к элементу с помощью атрибута стиля.

Пример

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

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

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

Встроенные или внутренние таблицы стилей влияют только на документ, в который они встроены.

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

Пример

Совет. Атрибут type тега and (например, type="text/css" ) определяет язык таблицы стилей. Этот атрибут является чисто информативным. Вы можете опустить это, так как CSS является стандартным языком таблицы стилей по умолчанию в HTML5.

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

Внешняя таблица стилей идеальна, когда стиль применяется ко многим страницам веб-сайта.

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

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

Связывание внешних таблиц стилей

Перед связыванием нам нужно сначала создать таблицу стилей. Давайте откроем ваш любимый редактор кода и создадим новый файл. Теперь введите следующий код CSS внутри этого файла и сохраните его как «style.css».

Пример

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

Читайте также: