Как подключить файл css к html в возвышенном тексте

Обновлено: 06.07.2024

Сегодня мы напишем и сохраним наш первый файл 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 — позволить веб-дизайнеру определять объявления стилей, а затем применять эти стили к HTML-страницам с помощью селекторов.

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

Стили могут быть связаны с HTML-документом одним из трех способов:

1. Встроенный стиль

2. Встроенный стиль

3. Внешний стиль

Как подключить таблицу стилей CSS к HTML-странице?

1.Встроенный стиль

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

Например, если вы хотите добавить стили, вы можете использовать следующий код:

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

вывод

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

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

2. Встроенный стиль

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

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

Вы должны начать с открывающего тега стиля, как показано ниже:

вывод

3. Внешний стиль

Внешняя таблица стилей — это обычный текстовый файл, содержащий только форматы стилей CSS. Расширение внешнего файла должно заканчиваться расширением .css (например, pagestyle.css). Этот внешний файл называется внешней таблицей стилей.

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

Значением атрибута rel должна быть таблица стилей. Атрибут href указывает расположение и имя файла таблицы стилей. В приведенном выше коде имя внешнего файла — «style.css», и оно хранится в том же каталоге, что и ваш HTML-файл. Если вы хотите сохранить файл .css в другом месте каталога, вам следует указать путь к вашему файлу css в href.

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

Для тестирования внешней таблицы стилей необходимо создать один файл CSS и один файл HTML.

Шаги по созданию файла CSS

Откройте обычный текстовый файл, скопируйте и вставьте следующие правила css.

Сохраните файл как "styles.css"

Шаги по созданию файла HTML

Откройте обычный текстовый файл, скопируйте и вставьте следующий HTML-код.

Сохраните файл как «external.html» в той же папке, что и «styles.css». Обратите внимание, что тег соединяет этот файл HTML с внешним файлом CSS "styles.css".

После сохранения обоих файлов (html и css) в одной папке откройте файл «external.html» в веб-браузере. При открытии браузера вы можете увидеть стили, примененные к тегам H1 и H2, как на следующем изображении:

Вы можете связать один файл .css с любым количеством файлов HTML одновременно, и любые изменения, внесенные вами в определения стилей в этом файле (.css), повлияют на все страницы HTML, которые ссылаются на него .

Добро пожаловать в эту статью, и эта статья посвящена тому, как сохранить файл css.

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

А здесь мы предоставим подробное руководство о том, как сохранить файл css в различных текстовых редакторах, так что давайте начнем статью.

Но перед тем, как начать статью, мы даем некоторые знания о css и о том, как сохранить файл css.

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

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

И всегда помните еще одну вещь: CSS всегда используется с языками разметки, такими как Html, а также с XML.

Изначально CSS был выпущен в 1996 году, после чего он несколько раз обновлялся, и сейчас наиболее удобна версия css3.

Оглавление

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

Всегда выбирайте редактор кода, в котором вы хотите создать файл CSS.

На следующем шаге напишите код в редакторе кода.

Теперь нажмите Ctrl+S, чтобы сохранить документ css.

На следующем шаге укажите расширение файла в формате .html или в формате .css.
Теперь вы можете запустить код CSS в своем браузере.

Теперь мы обсудим, как сохранить файл css в различных редакторах кода.

Как сохранить файл CSS в возвышенном?

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

Сначала загрузите превосходный текстовый редактор на свой компьютер, а затем настройте этот файл.
На следующем шаге создайте любой текст в редакторе.
Теперь используйте параметр сохранения, нажав кнопку файла или нажав сочетание клавиш Ctrl+S.
Укажите имя, под которым вы хотите сохранить документ, и нажмите клавишу ввода.

Теперь вы можете запустить код, щелкнув правой кнопкой мыши в окне браузера и просто нажав кнопку «Открыть в новом пользователе».

Как сохранить файл CSS в коде Visual Studio? :

Загрузите текстовый редактор.

Затем откройте текстовый редактор и выберите вкладку файла.
Выберите вариант добавления папки в рабочую область.

Затем напишите код CSS.

Затем выберите папку и дайте ей идеальное имя.

И сохраните это в файл css.

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

Как сохранить файл блокнота в формате CSS?:

Этот процесс аналогичен тому, что я уже упоминал в предыдущих текстовых редакторах.

Просто откройте блокнот.

Выберите пункт меню "Файл" и выберите новый вариант.
Теперь выберите параметр «Сохранить как» в меню «Файл» или вы также можете выбрать вариант сохранения. Вместо этого вы также можете использовать ярлык для сохранения документа.

Напишите код CSS.

Теперь откройте его в браузере .

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

Как открыть файл CSS? :

Просто перейдите на вкладку "Файл" в текстовом редакторе.
Теперь нажмите кнопку "Открыть" на вкладке "Файл".
Или нажмите сочетание клавиш на клавиатуре.
А теперь щелкните файл, который хотите открыть.

Как сохранить внешний файл CSS?:

Мы знаем, что обычно существует три типа файловых методов CSS: один — внутренний CSS, второй — встроенный CSS, а третий — внешний CSS.

Создание внешнего файла CSS и процесс сохранения файла CSS немного отличаются от процесса сохранения другого файла CSS.

Сначала создайте файл css и дайте ему правильное имя, например index.html.

Второй шаг – создание еще одного файла с расширением .css.

Третий шаг: используйте тег таблицы стилей и свяжите файл style.css с нашим файлом index,html.

В этом процессе оба файла будут связаны друг с другом.

Какое расширение используется для сохранения файла CSS? :

Как я упоминал ранее, существует три типа файлов css. Встроенный , внутренний и внешний.

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

Внутренний css — это то, что используется внутри тега заголовка файла css.

Чтобы использовать внешний css, нам нужно создать отдельный файл и связать его с html-файлом.

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

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

Вывод:

Эта статья посвящена тому, как сохранять файлы CSS в отдельных редакторах кода. И, пожалуйста, следите за нашим веб-сайтом для получения подобной информационной статьи.

Это подключаемый модуль Sublime Text 2 и 3, позволяющий форматировать код HTML, CSS, JavaScript, JSON, React и Vue. Он использует набор хороших скриптов для украшения, сделанных Эйнаром Лиелманисом. Средства форматирования написаны на JavaScript, поэтому вам понадобится что-то (node.js) для интерпретации кода JavaScript вне браузера.

Это будет работать с файлами HTML, CSS, JavaScript, JSON, React и Vue.

Установка

Прежде всего, убедитесь, что у вас установлен node.js, чтобы можно было запускать улучшитель. После того, как вы установили node.js, вам нужно будет настроить этот подключаемый модуль.

В каждой ОС есть отдельная папка Packages, необходимая для Sublime Text. Откройте его через «Настройки» -> «Обзор пакетов» и скопируйте содержимое этого репозитория в папку Sublime-HTMLPrettify.

Более короткий способ сделать это:

Через Sublime Package Manager

Ctrl+Shift+P или Cmd+Shift+P в Linux/Windows/OS X
введите install , выберите Package Control: Install Package
введите prettify , выберите HTML-CSS-JS Prettify

Вручную

Убедитесь, что вы используете правильную папку Sublime Text. Например, в OS X пакеты для версии 2 находятся в ~/Library/Application\ Support/Sublime\ Text\ 2 , а версия 3 помечена как ~/Library/Application\ Support/Sublime\ Text\ 3 .

Это для Sublime Text 3:

Линукс

Окна

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

Инструменты -> Палитра команд ( Cmd+Shift+P или Ctrl+Shift+P ) и введите htmlprettify .

Ctrl+Shift+H (или Cmd+Shift+H, если вы работаете на Mac).

Щелкните правой кнопкой мыши в текущем буфере и выберите HTML/CSS/JS Prettify -> Prettify Code .

Откройте файл HTML, CSS, JavaScript, JSON, React или Vue, откройте консоль в Sublime Text из View -> Show Console и введите view.run_command("htmlprettify") .

Писать команды в консоли некрасиво. Настройте для этого свою собственную комбинацию клавиш, перейдя в «Настройки» -> «Привязки клавиш» — «Пользователь» и добавив команду в этот массив: < «keys»: [«super+shift+h»], «command»: «htmlprettify» >. Вы можете использовать любую другую команду, хотя большинство из них уже занято.

О нет, команда не найдена!

Если вы получаете сообщение о том, что Node.js не найден или похожее, у вас нет узла на правильном пути. Попробуйте указать абсолютный путь к узлу в HTMLPrettify.sublime-settings .

Ctrl+Shift+P или Cmd+Shift+P в Linux/Windows/OS X
введите htmlprettify , выберите Задать путь к узлу

Простое использование узла без указания пути иногда не работает :(

Например, в Linux путь может быть в /home//.nvm//bin/node .

В Windows абсолютный путь к node.exe должен использовать косую черту. Должен включать nodejs.exe, например: C:/Program Files (x86)/Nodejs/node.exe

Будьте очень осторожны в Linux!

Улучшить Vue

Чтобы должным образом украсить файлы Vue, убедитесь, что синтаксис файла распознается Sublime как HTML, XML или Vue.

Улучшить JSX

Чтобы должным образом украсить файлы JSX, убедитесь, что Sublime распознает синтаксис файла как JavaScript и что e4x имеет значение true в вашем .jsbeautifyrc .

Украсить при сохранении

Чтобы украсить код при сохранении документа, установите для параметра format_on_save значение true в HTMLPrettify.sublime-settings :

Ctrl+Shift+P или Cmd+Shift+P в Linux/Windows/OS X
введите htmlprettify , выберите Установить параметры плагина

Улучшение при редактировании (только для экспериментальной версии / Sublime Text 3)

Чтобы украсить код при редактировании документа, установите для параметра format_while_editing значение true в HTMLPrettify.sublime-settings .

Автоматическое украшение при открытии, фокусировке или размытии файла (только в Sublime Text 3)

Чтобы украсить код при любом из этих событий, установите для параметров format_on_open , format_on_focus , format_on_focus_lost значение true в HTMLPrettify.sublime-settings .

Форматирование только выделенного текста

Чтобы прекратить украшать только выделенный текст, установите для параметра format_selection_only значение false в HTMLPrettify.sublime-settings .

Сохранение во временный файл перед предварительным редактированием

Перед предварительной обработкой копия текстового содержимого текущего редактора сохраняется во временный файл. Это позволяет избежать передачи текста непосредственно в prettifier, избегая ошибок «имя файла или расширение слишком длинное» в Windows или любой потенциальной нехватки данных. Чтобы вместо этого работать с исходным документом, установите для параметра save_to_temp_file_before_prettifying значение false в HTMLPrettify.sublime-settings .

Указание файлов, которым разрешено предварительное уточнение

Чтобы добавить различные расширения файлов, используйте allow_file_extensions или allow_file_syntaxes в HTMLPrettify.sublime-settings в настройках global_file_rules.

Если для параметра use_editor_syntax установлено значение false, применяется следующее:

Если для параметра use_editor_syntax установлено значение true, применяются следующие правила:

Игнорирование определенных файлов

Чтобы добавить правила игнорирования, используйте disallowed_file_patterns в HTMLPrettify.sublime-settings в настройках global_file_rules. Если файл (включая путь) соответствует любому из шаблонов регулярных выражений, определенных в disallowed_file_patterns, он не будет украшен.

Следующее применяется независимо от значения параметра use_editor_syntax:

Игнорирование определенных блоков кода

Части кода, которые не следует форматировать, можно игнорировать с помощью директивы beautify save и beautify ignore. Это позволяет указать бьютификатору сохранить форматирование или полностью игнорировать часть файла. Приведенные ниже примеры ввода останутся измененными после улучшения.

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

Используйте игнорирование, если содержимое не может быть обработано как javascript.

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

Чтобы прекратить использование стиля форматирования, определенного в файле конфигурации .jsbeautifyrc в отношении размера отступа и использования табуляции или пробелов, чтобы вместо этого использовать настройки возвышенного, установите для параметра use_editor_indentation значение true в HTMLPrettify.sublime-settings. .

Использование синтаксиса редактора для определения типа файла

Чтобы отказаться от использования синтаксиса редактора и вместо этого использовать расширения файлов для определения типа файла, установите для параметра use_editor_syntax значение false в HTMLPrettify.sublime-settings .

Соблюдение файлов .editorconfig

Эти файлы конфигурации можно размещать везде, где можно разместить .jsbeautifyrc. Чтобы перестать уважать файлы .editorconfig, которые переопределяют правила prettifier, установите для параметра use_editorconfig значение false в HTMLPrettify.sublime-settings. Обратите внимание, что use_editor_syntax и use_editor_indentation имеют приоритет и всегда переопределяют любые другие параметры из любого файла конфигурации, например .jsbeautifyrc и .editorconfig .

Использование собственных параметров .jsbeautifyrc

Подключаемый модуль ищет файл .jsbeautifyrc в следующих каталогах:

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

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

А вот как может выглядеть файл .jsbeautifyrc в вашей домашней папке:

См. документацию по JS или CSS и HTML.

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

Дженнифер Кирнин — профессиональный веб-разработчик, помогающий другим в изучении веб-дизайна, HTML, CSS и XML.

Создайте таблицу стилей CSS

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

Выберите «Файл» > «Создать» в Блокноте, чтобы открыть пустое окно.
Сохраните файл как CSS, нажав Файл < Сохранить как.
Перейдите в папку my_website на жестком диске.
Измените «Тип файла:» на «Все файлы».
Назовите файл "styles.css" (без кавычек) и нажмите "Сохранить".

Связать таблицу стилей CSS с вашим HTML

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

Исправить поля страницы

Когда вы пишете XHTML для разных браузеров, вы узнаете одну вещь: все они имеют разные поля и правила для того, как они отображают вещи. Лучший способ убедиться, что ваш сайт выглядит одинаково в большинстве браузеров, — не позволять таким параметрам, как поля, выбирать браузер по умолчанию.

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

html, поле тела: 0 пикселей;
отступ: 0 пикселей;
граница: 0 пикселей;
слева: 0 пикселей;
сверху: 0 пикселей;
>

Изменение шрифта на странице

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

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

шрифт p, li: 1em Arial, Helvetica, без засечек;
>
шрифт h1: 2em Arial, Helvetica, без засечек;
>
шрифт h2: 1.5em Arial, Helvetica, без засечек;
>
шрифт h3: 1.25em Arial, Helvetica, без засечек;
>

Мы начали с 1 em в качестве базового размера для абзацев и элементов списка, а затем использовали его для установки размера заголовков. Мы не планируем использовать заголовок глубже, чем h4, но если вы планируете это сделать, вы также захотите изменить его стиль.

Как сделать ваши ссылки более интересными

Цвета по умолчанию для ссылок — синий и фиолетовый для непосещенных и посещенных ссылок соответственно. Хотя это стандарт, он может не соответствовать цветовой схеме ваших страниц, поэтому давайте его изменим.В свой файл styles.css добавьте следующее:

Мы настроили три стиля ссылок: a:link по умолчанию, a:visited для посещения, мы меняем цвет и a:hover. С помощью a:hover мы получаем ссылку, которая получает цвет фона и выделяется жирным шрифтом, чтобы подчеркнуть, что это ссылка, по которой нужно щелкнуть.

Стиль раздела навигации

Поскольку мы поместили раздел навигации (id="nav") первым в HTML, давайте сначала настроим его стиль. Нам нужно указать, насколько широким он должен быть, и поставить более широкое поле с правой стороны, чтобы основной текст не упирался в него. мы также поместим вокруг него рамку.

Добавьте следующий код CSS в документ styles.css:

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

Позиционирование основного раздела

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

Поместите в документ styles.css следующее:

Стили абзацев

Поскольку я уже установил шрифт абзаца выше, я хотел придать каждому абзацу дополнительную «изюминку», чтобы он лучше выделялся. Я сделал это, поместив рамку вверху, которая выделяла абзац больше, чем просто изображение.

Поместите в документ styles.css следующее:

Мы решили сделать это как класс с названием "topline", а не просто определять таким образом все абзацы. Таким образом, если мы решим, что хотим, чтобы абзац был без верхней желтой линии, мы можем просто убрать class="topline" в теге абзаца, и у него не будет верхней границы.

Стили изображений

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

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

Поместите в документ styles.css следующее:

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

Теперь посмотрите на свою заполненную страницу

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

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

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