Обновлено: 21.11.2024
В этом руководстве вы создадите папки и файлы, необходимые для изучения CSS и создания веб-сайта. Используя редактор кода, вы создадите каталог проекта для нашего веб-сайта, папку и файл для нашего кода CSS, файл для нашего кода HTML и папку для изображений. В этой серии руководств используется Visual Studio Code — бесплатный редактор кода для Mac, Windows или Linux, но вы можете использовать любой редактор кода, который вам больше нравится. Обратите внимание, что некоторые инструкции, возможно, придется немного изменить, если вы используете другой редактор.
Как создавать файлы и папки HTML и CSS
Открыв предпочитаемый текстовый редактор, откройте новую папку проекта и назовите ее css-practice. Вы будете использовать эту папку для хранения всех файлов и папок, которые вы создадите в ходе работы с этой серией руководств.
Чтобы создать новую папку проекта в Visual Studio Code, перейдите к пункту меню «Файл» в верхнем меню и выберите «Добавить папку в рабочую область». В новом окне нажмите кнопку «Новая папка» и создайте новую папку с именем css-practice:
Затем создайте новую папку внутри css-practice и назовите ее css. Внутри этой папки откройте новый файл в каталоге вашего проекта и сохраните его как styles.css — это файл, который вы будете использовать для хранения наших правил стиля CSS. Если вы используете Visual Studio Code, вы можете создать новую папку, щелкнув правой кнопкой мыши (в Windows) или CTRL + щелкните левой кнопкой мыши (в Mac) в папке css-practice, выбрав «Новая папка» и создав папку css. Затем щелкните правой кнопкой мыши (в Windows) или CTRL + щелчок левой кнопкой мыши (в Mac) на новой папке css, выберите «Новый файл» и создайте файл styles.css, как показано на рисунке ниже:
Сохраните файл и оставьте его открытым.
Вам также необходимо создать файл для добавления содержимого HTML — текста, изображений и элементов HTML, которые будут отображаться в браузере. В каталоге проекта css-practice откройте дополнительный новый файл и сохраните его как index.html так же, как вы создали файл styles.css выше. Обязательно сохраните этот файл index.html в папке css-practice, а не в папке css.
Этот фрагмент кода указывает браузеру интерпретировать HTML-код в соответствии с таблицей стилей, расположенной по адресу css/styles.css. Убедитесь, что вы не стираете эту строку при добавлении или удалении контента в файл index.html на протяжении всей серии руководств. Сохраните файл index.html и не закрывайте его.
Наконец, создайте дополнительную папку внутри css-practice и назовите ее images так же, как вы создали папку css выше. В этой папке вы будете сохранять любые изображения, которые используете в этой серии руководств.
Теперь у вас должна быть папка проекта css-practice, содержащая папки и файлы, необходимые для изучения CSS в этой серии руководств:
- Папка css, содержащая файл styles.css
- Пустая папка с именем images
- Файл с именем index.html
Если вы используете Visual Studio Code, ваш редактор теперь должен отображать следующее дерево файлов и открытые файлы:
Обратите внимание, что имена файлов включают расширения ( .html и .css ), указывающие на тип содержимого, которое они содержат. Вы добавите содержимое в эти файлы в наших практических упражнениях в следующих руководствах.
Отладка и устранение неполадок CSS и HTML
Точность важна при работе с HTML и CSS. Даже лишний пробел или опечатка могут помешать вашему коду работать должным образом.
Если ваш код HTML или CSS не отображается в браузере должным образом, убедитесь, что вы написали код точно так, как написано в руководстве. Хотя мы рекомендуем вам писать код вручную в целях обучения, копирование и вставка иногда могут быть полезны, чтобы убедиться, что ваш код соответствует примерам.
Ошибки HTML и CSS могут быть вызваны рядом причин. Проверьте свою разметку и правила CSS на наличие лишних или отсутствующих пробелов, отсутствующих или написанных с ошибками тегов, а также отсутствующих или неправильных знаков препинания или символов. Вы также должны убедиться, что вы случайно не используете «фигурные» или «умные» кавычки, такие как «и», которые часто используются текстовыми процессорами. Фигурные кавычки предназначены для удобочитаемого текста и вызовут ошибку в вашем коде. поскольку они не распознаются браузерами как кавычки. Вводя кавычки непосредственно в редактор кода, вы можете убедиться, что используете правильный вид.
Кроме того, каждый раз, когда вы меняете код, обязательно сохраняйте файл, прежде чем перезагружать его в браузере для проверки результатов.
Краткое примечание о функциях автоматической поддержки HTML
Некоторые редакторы кода, такие как редактор кода Visual Studio, который мы используем в этой серии, обеспечивают автоматическую поддержку написания HTML-кода.Для Visual Studio Code эта поддержка включает интеллектуальные предложения и автодополнения. Хотя эта поддержка часто полезна, имейте в виду, что вы можете создать дополнительный код, который приведет к ошибкам, если вы не привыкли работать с этими функциями поддержки. Если эти функции вас отвлекают, вы можете отключить их в настройках редактора кода.
Заключение
Теперь вы готовы приступить к серии руководств. В следующем руководстве вы начнете изучать, как правила CSS используются для управления стилем и макетом содержимого HTML на веб-странице.
Хотите узнать больше? Присоединяйтесь к сообществу DigitalOcean!
Присоединяйтесь к нашему сообществу DigitalOcean, насчитывающему более миллиона разработчиков, бесплатно! Получайте помощь и делитесь знаниями в нашем разделе "Вопросы и ответы", находите руководства и инструменты, которые помогут вам расти как разработчику и масштабировать свой проект или бизнес, а также подписывайтесь на интересующие вас темы.
Серия руководств: Как создать веб-сайт с помощью CSS
Это руководство является частью серии, посвященной созданию и настройке этого веб-сайта с помощью CSS, языка таблиц стилей, используемого для управления представлением веб-сайтов. Вы можете просмотреть всю серию, чтобы воссоздать демонстрационный веб-сайт и познакомиться с CSS или использовать описанные здесь методы для других проектов веб-сайтов CSS.
Прежде чем продолжить, мы рекомендуем вам иметь некоторое представление о HTML, стандартном языке разметки, используемом для отображения документов в веб-браузере. Если вы не знакомы с HTML, вы можете изучить первые десять руководств из нашей серии «Как создать веб-сайт с помощью HTML», прежде чем начинать эту серию.
У вас возникли проблемы с открытием файла CSS или вам просто интересно, что в нем содержится? Мы объясним, для чего используются эти файлы, и покажем вам программное обеспечение, которое, как мы знаем, может открывать или иным образом обрабатывать ваши файлы.
Что такое файл CSS?
CSS — это аббревиатура от Cascading Style Sheet. Файлы с расширением .css используются для форматирования содержимого связанной веб-страницы. Хотя формат файлов CSS чаще всего ассоциируется со страницами веб-сайтов, написанными на языках программирования HTML и XHTML, этот формат также можно применять к XML-документам любого типа.
Файл CSS содержит свойства, определяющие, как будут отображаться элементы HTML связанной веб-страницы, такие как цвет, шрифт, размер, межстрочный интервал, границы и другие элементы HTML.
Файлы CSS аналогичны файлам шаблонов, что позволяет пользователям создавать несколько веб-сайтов с одинаковым внешним видом без необходимости создавать каждый сайт с нуля.
Как открыть файлы CSS
Важно! Разные программы могут использовать файлы с расширением CSS для разных целей, поэтому, если вы не уверены, какой формат у вашего файла CSS, вам может потребоваться попробовать несколько разных программ.
Хотя мы сами еще не проверяли приложения, наши пользователи предложили 10 различных открывателей CSS, которые вы найдете в списке ниже.
Последнее обновление: 9 марта 2022 г.
Предложить другой формат файла, используя расширение CSS
Хотя нам известен один формат файлов с расширением .CSS, их может быть больше. Широко распространено, что разные программы используют файлы с одним и тем же расширением для очень разных типов данных. Сообщите нам, если вам известны файлы .CSS другого типа.
Различные приложения, использующие файлы с этим расширением
Известно, что эти приложения открывают определенные типы файлов CSS. Помните, что разные программы могут использовать файлы CSS для разных целей, поэтому вам может потребоваться попробовать несколько из них, чтобы иметь возможность открыть конкретный файл.
| | Adobe Dreamweaver | Отправлено пользователем |
| | Microsoft Expression Web | Отправлено пользователем |
| | Macromedia Dreamweaver MX | Отправлено пользователем |
| | Microsoft Office | Отправлено пользователем |
| | Microsoft Development Environment | Отправлено пользователем |
| | Расширения веб-платформы Microsoft | Отправлено пользователем |
| | Накануне Полумесяца | Отправлено пользователем | < /tr>
| | UltraEdit | Отправлено пользователем |
| | Aptana Studio< /td> | Отправлено пользователем |
| | Macromedia Dreamweaver | Отправлено пользователем |
Не уверены, какой тип файла вы пытаетесь открыть? Попробуйте наш новый анализатор файлов. Это бесплатный инструмент, который может идентифицировать более 11 000 различных типов файлов — скорее всего, и ваши! Это поможет вам найти программное обеспечение, которое может обрабатывать файлы определенного типа. Загрузите анализатор файлов здесь.
Расширение css обычно используется для текстовых файлов, содержащих данные каскадных таблиц стилей, которые используются на веб-сайтах и определяют графическое оформление и внешний вид веб-страниц.
Существует еще один тип файла, использующий
расширение файла CSS!
Добавить эту страницу в закладки и поделиться ею с другими:
Расширение файла CSS – Каскадные таблицы стилей
Что такое файл css? Как открыть файлы css?
Спецификация типа файла:
Тип файла, связанный с Интернетом
Расширение файла css связано с каскадными таблицами стилей (CSS). Файлы css используются для форматирования содержимого веб-страниц.
Файл css содержит настроенные глобальные свойства и другую информацию о том, как отображать элементы HTML. Он может определять размер, фон, цвета, шрифты, межстрочный интервал, отступы, границы, форматы и расположение элементов HTML.
Как правило, файлы css используются для создания одинакового внешнего вида на всех веб-сайтах. Файлы .css также используются для сокращения объема работы и HTML-кода, создаваемого путем объединения свойств отображения в один файл. Файлы .css хранятся в текстовом формате.
Таблицы стилей в той или иной форме существовали с момента появления SGML в 1970-х годах. Каскадные таблицы стилей были разработаны как средство создания единого подхода к предоставлению информации о стилях для веб-документов.
Каскадные таблицы стилей (CSS) помогают веб-разработчикам создавать единый внешний вид для нескольких страниц веб-сайта. Вместо того, чтобы определять стиль каждой таблицы и каждого блока текста в HTML-коде страницы, часто используемые стили необходимо определять только один раз в документе CSS.
После определения стиля в каскадной таблице стилей его можно использовать на любой странице, которая ссылается на файл .css. Более того, CSS позволяет легко менять стили сразу на нескольких страницах.
Например, веб-разработчик может изменить размер шрифта по умолчанию с 12 пунктов на 14 пунктов сразу для десяти страниц своего веб-сайта. Если все страницы ссылаются на одну и ту же таблицу стилей, необходимо изменить только размер текста в таблице стилей, и на всех страницах будет изменен шрифт.
Хотя каскадные таблицы стилей отлично подходят для создания стилей текста, они также очень полезны для форматирования других аспектов макета веб-страницы. Например, файл .css можно использовать для определения отступов ячеек таблицы, стиля, толщины и цвета границы таблицы, а также отступов вокруг изображений или других объектов. CSS дает веб-разработчикам гораздо больший контроль над тем, как будут выглядеть их веб-страницы, по сравнению с тем, что предлагает формат HTML. Именно по этой причине большинство интернет-страниц сегодня используют каскадные таблицы стилей.
Спецификации CSS поддерживаются Консорциумом World Wide Web (W3C).
Типы MIME:
text/css зарегистрирован для использования с CSS согласно RFC 2318.
Сегодня мы напишем и сохраним наш первый файл 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 и адаптивный дизайн на профессиональном уровне.
Об авторе
Брэд Шифф (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%, но держать меня в курсе ваших успехов 🙂
Читайте также:
