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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

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

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

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

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

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

Primer-CSS.css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подготовка проекта CSS и HTML с помощью Visual Studio Code

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

При написании мы использовали Visual Studio Code, редактор кода, свободно доступный для Mac, Windows или Linux

Примечание: Найти все мануалы этой серии можно по тегу CSS-practice

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

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

С помощью редактора кода вы создадите каталог проекта, каталог и файл для кода CSS, файл для кода HTML и папку для изображений. В этой серии мануалов используется Visual Studio Code, редактор кода, свободно доступный для Mac, Windows или Linux, но вы можете использовать редактор кода, который вам нравится больше. Обратите внимание: если вы используете другой редактор, вам нужно будет откорректировать некоторые инструкции мануалов.

Создание файлов и папок HTML и CSS

Запустив текстовый редактор, откройте новую папку для нашего проекта и назовите ее css-practice. Мы будем использовать эту папку для хранения всех файлов и папок, созданных в ходе выполнения этой серии мануалов.

Чтобы создать новую папку проекта в редакторе Visual Studio Code, перейдите к пункту File в верхнем меню и выберите Add Folder to Workspace. В новом окне нажмите кнопку New Folder и создайте новую папку по имени css-practice.

Затем создайте новую папку внутри css-practice и назовите ее css. Внутри этой папки откройте новый файл и сохраните его как styles.css – это файл, который вы будете использовать для хранения правил стилей CSS. Если вы используете Visual Studio Code, вы можете создать новую папку, щелкнув правой кнопкой мыши (в Windows) или нажав CTRL+левая кнопка мыши (на Mac) в папке css-practice, затем выберите New File и создайте папку css. Затем кликните правой кнопкой мыши (в Windows) или нажмите CTRL+левая кнопка (в Mac) в папке css, выберите New File и создайте файл styles.css.

Сохраните файл и оставьте его открытым.

Вам также необходимо создать файл для добавления контента HTML – текста, изображений и HTML-элементов, которые будут отображаться в браузере. В каталоге проекта css-practice откройте еще один новый файл и сохраните его как index.html (так же, как вы создали файл styles.css ранее). Обязательно сохраните этот файл index.html в папке css-practice, а не в папке css.

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

Благодаря этому фрагменту кода браузер будет интерпретировать HTML-код в соответствии с таблицей стилей, расположенной в css/styles.css. На протяжении всей этой серии мануалов будьте внимательны, чтобы случайно не удалить эту строку при изменении кода в файле index.html. Сохраните файл index.html и оставьте его открытым.

Теперь создайте дополнительную папку внутри css-practice и назовите ее images. В этой папке вы сохраните все изображения, которые будете использовать при выполнении этой серии мануалов.

Теперь у вас должна быть папка проекта 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 Code который мы используем в этой серии) предоставляют автоматическую поддержку написания HTML. В Visual Studio Code эта поддержка подразумевает умные подсказки и автозавершение кода. Эта функция бывает полезной, но будьте с ней осторожны: если вы не привыкли работать с ней, вы можете сгенерировать дополнительный код, который вызовет ошибки. Если эти подсказки вас отвлекают, вы можете отключить их в настройках редактора кода.

Заключение

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

Как структурирован CSS

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

Необходимые знания:	Базовая компьютерная грамотность, Базовое программное обеспечение, базовые знания работа с файлами, и базовые знания HTML (статья Введение в HTML), и знание о том Как работает CSS
Задача:	Подробно узнать основные синтаксические структуры CSS.

Применение CSS к вашему HTML

Первое, что мы рассмотрим, это три метода применения CSS к документу.

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

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

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

doctype html> html> head> meta charset="utf-8" /> title>Я пробую писать CSStitle> link rel="stylesheet" href="styles.css" /> head> body> h1>Привет!h1> p>Это мой первый опыт в CSSp> body> html> 

Файл CSS может выглядеть следующим образом:

h1  color: blue; background-color: yellow; border: 1px solid black; > p  color: red; > 

В приведённом выше примере файл CSS находится в той же папке, что и HTML-документ, но вы можете поместить его куда-нибудь ещё и настроить относительный путь, например:

link rel="stylesheet" href="styles/style.css" /> link rel="stylesheet" href="styles/general/style.css" /> link rel="stylesheet" href="../styles/style.css" /> 

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

Внутренняя таблица стилей, где у вас нет внешнего файла CSS, но вместо этого CSS помещён внутри элемента , содержащейся внутри HTML .

Таким образом, HTML будет выглядеть вот так:

doctype html> html> head> meta charset="utf-8" /> title>Я пробую писать CSStitle> style> h1  color: blue; background-color: yellow; border: 1px solid black; > p  color: red; > style> head> body> h1>Привет!h1> p>Это мой первый опыт в CSSp> body> html> 

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

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

Встроенные стили являются правилами CSS, которые влияют только на один элемент, содержащиеся в атрибуте style :

doctype html> html> head> meta charset="utf-8" /> title>Я пробую писать CSStitle> head> body> h1 style="color: blue;background-color: yellow;border: 1px solid black;"> Привет! h1> p style="color:red;">Это мой первый опыт в CSSp> body> html> 

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

Есть несколько мест, где встроенные стили являются более распространёнными или даже желательными. Вам, возможно, придётся прибегнуть к использованию их, если ваша рабочая среда сильно ограничена (возможно, ваша CMS позволяет редактировать только HTML-тело). Вы также увидите, как они использовали много в HTML электронной почте, чтобы получить совместимость с таким количеством почтовых клиентов, со скольким это возможно.

Игра с CSS в этой статье

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

doctype html> html lang="ru"> head> meta charset="utf-8" /> title>Я пробую писать CSStitle> link rel="stylesheet" href="styles.css" /> head> body> p>Пишите сюда свой кодp> body> html> 

/* Пишите сюда свой код */ p  color: red; > 

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

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

Читайте дальше и получайте удовольствие!

Селекторы

Говоря о CSS, нельзя не упомянуть о селекторах, о некоторых типах которых мы уже говорили в руководстве Начало работы с CSS. Селектор — это то, как мы обозначаем что-либо в нашем HTML-документе, чтобы стилизовать его. Если стиль не применился, то это, скорее всего, потому, что селектор в таблицах стилей не совпал с тем, что в HTML-документе.

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

/* это селектор тегов */ a:link /* это селектор ссылок */ .manythings /* это селектор классов (классы применяются тогда, когда необходимо применить правило к нескольким элементам) */ #onething /* это селектор идентификаторов (они применяются, когда правило относится к одному элементу) */ * /* универсальный селектор */ .box p /* селектор потомков */ .box p:first-child /* селектор потомков + селектор псевдоклассов */ h1, h2, .intro /* перечисление селекторов */ 

Примечание: вы узнаете больше о селекторах в руководстве CSS-селекторы в следующем модуле.

Спецификация

Иногда может случаться такое, что два селектора будут относиться к одному и тому же элементу HTML. Смотрите: в примере ниже я задал правило для элемента p — он будет синим; также я задал класс, который сделает элемент красным:

.special  color: red; > p  color: blue; > 

А теперь допустим, что в нашем HTML-коде у нас есть абзац p с классом special . Оба правила могут быть добавлены: так какое же одержит верх? Как вы думаете, какого цвета будет надпись?

p class="special">Какого же я цвета?p> 

В языке CSS есть правила, которые определяют, какое правило «выиграет» в случае подобного столкновения — они называются каскадами, или спецификациями. В примере ниже мы задали два правила для селектора p , но в итоге текст будет синим: объявление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.

p  color: red; > p  color: blue; > 

А в примере с селектором класса и селектором тега победит селектор класса — даже если он объявлен раньше.

Попрактикуйтесь сами — добавьте два правила для параграфа p < . >в вашу таблицу стилей. Затем добавьте класс к одному элементу p и попробуйте применить к нему какой-нибудь стиль.

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

Свойства и значения

Если говорить в общем, CSS строится на двух его составляющих:

Определяют, какую характеристику вы желаете изменить (например, font-size , width , background-color ).

Это величина свойства, определяющая, как и/или насколько вы желаете изменить свойство.

На изображении внизу выделены свойство и его значение. Здесь свойство — color , а его значение — blue .

Свойство вкупе со значением называется CSS-объявлением. CSS-объявления помещаются внутри блока объявлений CSS. Ниже показан наш CSS-код с выделенным блоком объявлений.

Наконец блок объявлений воссоединяется с селекторами, образуя CSS-правила. Наше изображение содержит два правила — одно для селектора h1 , другое для селектора p . Правило для h1 выделено.

Установление значений для CSS-свойств — вот суть языка CSS. Движок CSS определяет, какие объявления применять к каждому элементу на странице, чтобы соответствующим образом размещать и стилизовать его. Необходимо запомнить, что и свойства, и значения чувствительны к регистру. Пара свойство–значение разделяется двоеточием ( : ).

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

Предупреждение: Важно: Если свойство или значение не определено, то объявление считается недействительным — и будет попросту проигнорировано.

Предупреждение: Важно: В CSS (и прочих веб-стандартах) американское написание является стандартом. Например, color надо всегда писать color ; британский вариант colour не будет работать.

Функции

Чаще всего значения принимают форму числа или ключевого слова; существуют способы создавать функции для значений. Для примера можно взять функцию calc() . Она позволяет вам совершать лёгкие математические вычисления внутри CSS, например:

div class="outer">div class="box">The inner box is 90% - 30px.div>div> 

.outer  border: 5px solid black; > .box  padding: 10px; width: calc(90% - 30px); background-color: rebeccapurple; color: white; > 

В результате получим это:

Функция состоит из названия и скобок, внутри который помещается выражение с допустимыми для данной функции знаками. В примере выше я задал значение ширины блока равной 90% внешнего блока минус 30px. Не могу же я сказать, чему равны 90% блока?!

В следующем примере будут различные значения для свойства rotate() .

div class="box">div> 

.box  margin: 30px; width: 100px; height: 100px; background-color: rebeccapurple; transform: rotate(0.8turn); > 

Результат этого кода будет:

Найдите несколько значений для следующих свойств, а свойства добавьте в ваш файл:

• transform
• background-image , в частности со значениями градиента
• color (en-US),в частности со значениями rgb/rgba/hsl/hsla

@правила

До сих пор не сталкивались мы с правилами @rules (произносится как эт-рулс, от английского «at-rules»). Это особые правила, дающие CSS инструкции, как вести себя. У некоторых правил @rules простые названия и значения. Чтобы, к примеру, импортировать ещё одну таблицу стилей в основной CSS-файл, нужно использовать @import :

@import "styles2.css"; 

Чаще других встречается @rules под названием @media : оно позволяет вам использовать медиавыражения, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).

Ниже у нас CSS-файл, в котором значение заднего фона элемента равно pink . Однако после мы добавили правило @media , которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.

body  background-color: pink; > @media (min-width: 30em)  body  background-color: blue; > > 

Вы столкнётесь и с другими правилами @rules в продолжение следующих уроков.

Добавьте правило, которое изменяет стиль элемента, основываясь на ширине окна. Измените ширину окна, чтобы увидеть результат.

Стенография

Некоторые свойства вроде font , background , padding , border и margin называются стенографическими свойствами, — они позволяют установить несколько значений свойств в одной строке, ускоряя запись и делая её аккуратной.

К примеру, это строка (комментарий не в счёт):

/* В четырёхзначных стенографиях наподобие padding и margin значения добавляются в порядке верх–право–низ–лево (по часовой стрелке сверху). В трёхзначных стенограммах значения добавляются в порядке верх(низ)–право–лево. В двузначных стенограммах значения добавляются от верхнего/нижнего края к левому/правому краю */ padding: 10px 15px 15px 5px; 

делает то же самое, что и эти четыре, вместе взятые:

padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px; 

-block-start: 10px padding-inline-end: 15px; padding-block-end: 15px; padding-inline-start: 5px; 

в то время как строка:

background: red url(bg-graphic.png) 10px 10px repeat-x fixed; 

делает то же, что и эти строки:

background-color: red; background-image: url(bg-graphic.png); background-position: 10px 10px; background-repeat: repeat-x; background-scroll: fixed; 

Мы не будем проходить это сейчас — вы можете найти эти и многие другие стенографии в Руководстве по CSS.

Добавьте вышеупомянутые объявления в ваш код. Попробуйте изменить значения и посмотреть на результат.

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

Комментарии

Как и в HTML, вы можете делать комментарии, чтобы прояснить тот или иной отрывок кода.

Комментарии в CSS начинаются с /* и окачиваются с */ . В примере ниже я отметил комментариями различные разделы кода. Это очень полезно для навигации — комментарии легче искать.

/* Работаю над основными элементами */ /* -------------------------------------------------------------------------------------------- */ body  font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em; > @media (min-width: 70em)  /* Позволяет определить размер шрифта. На широких экранах больше размер шрифта для удобства чтения */ body  font-size: 130%; > > h1  font-size: 1.5em; > /* Работаю над элементами, вложенными в DOM */ /* -------------------------------------------------------------------------------------------- */ div p, #id:first-line  background-color: red; background-style: none; > div p  margin: 0; padding: 1em; > div p + p  padding-top: 0; > 

Отделяя комментариями участки кода, не нуждающиеся в проверке, вы можете выискивать ошибку (если такая есть). Ниже я отделил правило для селектора .special .

/*.special < color: red; >*/ p  color: blue; > 

Добавьте комментарии в ваш CSS-код, чтобы приноровиться к ним.

Отступы

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

В примере ниже каждое объявление (а также начало/окончание правила) находится на своей строке — это, возможно, наилучший вариант написания CSS-кода: он понятен и аккуратен:

body  font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em; > @media (min-width: 70em)  body  font-size: 130%; > > h1  font-size: 1.5em; > div p, #id:first-line  background-color: red; background-style: none; > div p  margin: 0; padding: 1em; > div p + p  padding-top: 0; > 

То же самое вы можете написать, не добавляя большие отступы, — коды идентичны; но я уверен, вы согласитесь, что это очень тяжело прочитать:

body  font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em; > @media (min-width: 70em)  body  font-size: 130%; > > h1  font-size: 1.5em; > div p, #id:first-line  background-color: red; background-style: none; > div p  margin: 0; padding: 1em; > div p + p  padding-top: 0; > 

Как вы будете оформлять код — решать вам; хотя, работая в команде, вы обнаружите, что она придерживается тех правил форматирования, которые в ней утверждены.

Внимательно делайте отступы в свойствах и значениях. К примеру, такие объявления будут работать:

margin: 0 auto; padding-left: 10px; 

А такие объявления не действительны:

margin: 0auto; padding- left: 10px; 

Всегда отделяйте друг от друга значения, а свойства пишите без пробелов через дефис.

Добавьте отступы в ваш код и посмотрите, что повлияет на код, а что нет.

Что дальше?

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

В этом модуле

1. Что такое CSS?
2. Начало работы с CSS
3. Как структурирован CSS
4. Как работает CSS
5. Использование ваших новых знаний

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.