Оформление тела сайта с помощью CSS
Эта серия мануалов покажет вам, как создать и настроить веб-сайт с помощью CSS, языка таблиц стилей, используемого для управления внешним видом сайтов. Вы можете выполнить все мануалы по порядку, чтобы создать тестовый веб-сайт и познакомиться с CSS, или вразброс использовать описанные здесь методы для оптимизации других проектов CSS.
Примечание: Найти все мануалы этой серии можно по тегу CSS-practice
Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.
В этом мануале мы подготовим тело веб-страницы и оформим его с помощью правила CSS. Это позволит нам применить и стилизовать фоновое изображение и установить для веб-страницы семейство шрифтов. Мы также создадим правило стиля, которое изменяет цвет текста, содержащего гиперссылки, на цвет, который больше соответствует нашей цветовой палитре.
Методы, которые использованы здесь, можно применить к любым другим проектам, разработанным на CSS и HTML.
Требования
Чтобы следовать этому мануалу, нужно подготовит среду согласно мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.
На нашем тестовом сайте мы предлагаем вам использовать фоновое изображение, которое вы можете скачать по этой ссылке. Вы можете использовать другое изображение в качестве фона, но для начала убедитесь, что оно достаточно большое, чтобы заполнить экран, и не забудьте скорректировать все ссылки на это изображение в коде.
Примечание: Чтобы загрузить изображение, перейдите по указанной ссылке, нажмите Ctrl и кликните левой кнопкой (на Mac) или правой кнопкой мыши (в Windows) по изображению, выберите «Сохранить изображение как» и сохраните его в своей папке images как background-image.jpeg.
Добавление фонового изображения на сайт с помощью CSS
Чтобы объявить правила стиля для тела веб-страницы, вам необходимо создать правило CSS для тега body. Эти правила будут применяться ко всем элементам внутри тегов <html>, которые вы добавили в файл index.html в предыдущем мануале, Создание сайта на CSS и HTML: подготовка домашней страницы.
Чтобы добавить на свой сайт фоновое изображение, создайте CSS-правило с помощью селектора тега <body>. Сотрите все в файле styles.css (если вы следовали этой серии статей) и добавьте следующий набор правил:
/* General Website Style rules */
font-family: «Helvetica», Sans-Serif;
background-image: url(» ../images/background-image.jpeg «);
Обратите внимание на выделенный путь к файлу, который сообщает браузеру, где найти фоновое изображение. Если вы изменили имя или расположение этого файла, вам нужно будет соответствующим образом откорректировать этот путь.
Давайте подробно рассмотрим каждое из объявлений в этом наборе правил:
- /* General Website Style rules */ – это комментарий CSS, который не отображается браузером. Как и HTML-комментарии, CSS-комментарии нужны для объяснения и организации вашего кода. Обратите внимание, что комментарии CSS открываются и закрываются тегами /* и */, а не <!– и –>, как в HTML.
- Объявление font-family: “Helvetica”, Sans-Serif; устанавливает семейство шрифтов (Helvetica) и общее семейство шрифтов (Sans-Serif) для всего текста на веб-странице. Обратите внимание: вы можете настроить разные семейства шрифтов на одной и той же веб-странице, добавив другие правила CSS. Общее семейство шрифтов – это запасное семейство, оно используется, если первое семейство шрифтов недоступно и браузеру необходимо найти резервный шрифт. Вы можете попробовать другие шрифты, заменив Helvetica другими названиями шрифтов (например, Times, Courier или Palatino).
- Объявление background-image: url(“../images/background-image.jpeg;”) добавит фоновое изображение, используя для этого найденный по указанному пути файл. Обратите внимание: в путь к файлу мы добавили ../, чтобы браузер мог найти папку images в каталоге, который в файловой системе находится над каталогом, содержащим файл styles.css.
Сохраните styles.css и загрузите страницу index.html в браузере.
Если вы не знаете, как открыть оффлайн-файл, обратитесь к нашему мануалу Основы работы с html-элементами (раздел Просмотр оффлайн HTML-файла в браузере).
Вы должны получить пустую страницу – на ней не будет ничего, кроме фонового изображения
Если изображение не добавилось на страницу, убедитесь, что указали правильный путь к файлу и что в файлах index.html и styles.css нет ошибок.
Изменение цвета текста с гиперссылкой
Давайте теперь добавим CSS-правило, которое изменит цвет всего текста с гиперссылками на цвет, который лучше подходит цветовой палитре нашего веб-сайта.
В конец файла styles.css добавьте следующий набор правил:
Этот набор правил применит цветовой код HTML #112d4e к любому тексту, помеченному тегом <a>. Этот стиль не будет отображаться на вашей странице до тех пор, пока вы не добавите элементы <a> в файл index.html. Вы можете изменить цвет ссылок, если хотите – просто укажите код другого цвета в этом правиле.
Заключение
Теперь у вас есть пустая веб-страница с большим фоновым изображением. Кроме того, вы объявили семейство шрифтов, которое будет применяться к вашему текстовому контенту. Использование подобных наборов правил позволяет изменять шрифт и фоновое изображение веб-страницы, создавая наборы правил для селектора тегов. Также мы создали правило стиля, определяющее цвет любого текста с гиперссылками.
Красивое оформление HTML/CSS кода
Зачем красиво оформлять HTML/CSS код в процессе верстки сайта и так ли это важно? Ведь заказчик не видит изнаночную сторону сайта?
С красиво оформленной и структурированной разметкой легко работать, как самому верстальщику, так и коллегам по работе. Можно быстрее находить нужные участки кода для внесения дополнений или изменений, одним словом улучшает читаемость кода.
Красивое оформление HTML
Давайте перечислим основные правила, которые следует соблюдать при написании HTML разметки.
Правила оформления HTML кода
1) Соблюдение отступов для вложенных элементов.
Каждый вложенный элемент, отделяем четырьмя (или двумя) пробелами от его родителя, относительно левого края редактора кода. Тег div является вложенным элементом относительно тега section.
В свою очередь теги h1 и p, являются вложенными элементами в тег div и выравниваются относительно этого тега div, не создавая лесенки.
<section>
<div>
<h1>Заголовок</h1>
<p>Красиво оформленный код понравиться как заказчику, так и работодателю.</p>
</div>
</section>
Это правило не распространяется на строчные теги (i, u, a, b, span) внутри абзаца. Например, тег span не нужно начинать с новой строки и ставить перед ним пробелы.
<p>Соблюдайте вами же установленные <span>правила написания кода</span>.</p>
2) Выравнивание тегов по одной линии.
Теги не должны хаотично плясать туда-сюда на странице редактора. Так писать не нужно.
3) Написание комментариев
Когда в разметке, идет подряд много закрывающих тегов div, то ставьте комментарий (название класса) рядом с закрывающим тегом div. Тогда вам не придется гадать, какой именно класс закрывает div.
Начало каждой секции/блока начинаем с короткого комментария с названием данной секции. При скролле сайта, мы сразу видим, какие блоки есть на сайте.
Красивое оформление CSS
Где ставить пробелы?
Между названием селектора и открывающей фигурной скобкой.
Между свойством и значением после двоеточия внутри селектора.
После запятой ставить пробел.
font-family: 'PT Sans Narrow', sans-serif;
Правила в селекторе пишем на одном уровне с четырьмя (или двумя) пробелами относительно названия этого селектора.
.header <
padding-top: 20px;
font-size: 15px;
background-color: #333333;
>
Каждый новый селектор отделять одной строкой.
.nav_link <
margin: 0;
padding: 0;
list-style: none;
>
Писать комментарии перед началом стилей каждого блока.
/* Section */
.section <
padding: 30px 0;
>
.section_title <
margin-bottom: 20px;
padding-bottom: 0;
>
.section_img <
background-color: #f8f8f8;
>
В начале большого CSS файла писать содержание, это нужно для быстрой навигации через поиск.
Как не нужно писать стили
Не пишите свойства в одну строку. В таком стиле оформления кода очень тяжело ориентироваться.
Заключение
Следует придерживаться определенного стиля написания кода, писать везде одинаково. Чистый и красивый код говорит об уровне профессионализма верстальщика и отношения его к работе.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Как красиво оформить сайт в html
Каждый HTML документ должен начинаться со строки <!DOCTYPE . >, которая указывает на версию HTML и строгость написания и использования HTML элементов (тегов).
Для HTML5 данная строка выглядит так:
Далее следует сам документ, начало и конец которого обозначаются тегами <html> и </html>. Внутри документа есть два основных блока — <head> и <body>.
Начала каждого блока блока обозначается открывающим тегом (<head>), а конец — закрывающим (</head>).
В первой части документа, в блоке <head>, содержатся элементы, описывающие документ. Они не отображаются в браузере.
В блоке <head> могут содержаться:
- заголовок документа <title>, который устанавливает заголовок страницы в браузере
- мета теги названию, описания и ключевых слов документа <meta>
- ссылка на стилевой файл документа <link>
- ссылки на JavaScript файлы, использующиеся в документе (тег <script>)
- описание автора документа
Второй раздел <body> содержит непосредственно элементы страницы.
Если есть желание создать свою первую HTML страницу, можете открыть любой текстовый редактор (даже Блокнот), написать туда этот текст, сохранить с расширением .html (вместо .txt) и открыть документ при помощи любого браузера. В таком случае вы увидите две строчки — заголовок и описание. Причем заголовок будет иметь больший размер текста, чем описание. Это связано со встроенными стандартными стилями браузера.
HTML тег — это элемент HTML разметки страницы. Теги бывают открывающими (<html>) и закрывающими (</html>). Некоторые теги не имеют закрывающего — <img src=»https://www.sites.google.com/images/1.jpg» />. Также теги бывают блочными и строчными. Блочные теги начинаются с новой строки и переводят следующий элемент на новую строку — <p>, <div>. Строчный элементы отображаются в той же строке — <span>, <b>. При расположении элементов на HTML странице помните, что элементы будут следовать друг за другом, отображаясь сбоку или снизу от предыдущего. Чем ниже описан элемент на HTML странице, тем ниже он будет отображаться. На расположение элемента и его соседей также влияют размеры элемента(width ширина и height высота), его внешние(margin) и внутренние(padding) отступы и границы(border). Фактический размер элемента равен сумме его высоты (ширины), вертикальных(горизонтальных) внутренних отступов и границ. На расположение соседних элементов также влияют его внешние отступы. Но следование элементов можно изменять при помощи различных свойств. Так, например, свойство float отображает блочные элементы в том же ряду. При помощи свойства position элемент можно вытащить из потока и разместить в любом месте страницы, поверх всех элементов и т.д.
Блок <body> может содержать такие HTML теги:
- <table> — табличка
- <a> — ссылка
- <img> — картинка
- <div> — блочный элемент, без оформления
- <p> — параграф, абзац
- <span> — сточный элемент, без оформления
- <form> — форма
- <ul>, <ol> — списки
- <input>, <textarea>, <select> — элементы формы
- <h1> — <h6> — заголовки
- <b>, <i>, <u>, <em> — строчные элементы для оформления текста — жирный, курсив
- <audio>, <video>, <canvas> — мультимедийные элементы
В HTML5 появилось много новых тегов(header, footer, article, menu, figure, meter, progress) и много новый типов тега input(color, date, time, range, search).
В контенте могут использоваться специальные символы, вроде кавычек, стрелочек, греческих букв. Для корректного отображения данных символов на HTML странице, используйте для их вставки нужные коды, которые можно посмотреть в статье — Специальные символы html.
Урок 6. CSS: Стили кода и построение макетов
Так как текстовый контент до сих пор остается лидирующим по объему, его форматирование способно существенно улучшить восприятие информации. Текстовые элементы могут быть как строчными ( <span> , <strong> , <i> ), так и блочными ( <article> , <p> , <aside> ). Это нужно учитывать при работе с ними.
Опишем главные возможности CSS при взаимодействии с текстовым содержимым:
1) Цвет (задается свойством color , по умолчанию наследуется от <body> )
- Через медиазапросы
- Через тег <link>
1.2. Списки
1.3. Ссылки
1.4. Медиафайлы
1.5. Таблицы
Но почему не работает? Зайдем в раздел Computed . Тут мы видим не только присвоенные разработчиком атрибуты, но и те, которые браузер сам определил на основании настроек или предков блока.
Бросается в глаза свойство display: inline . Другими словами, даже если мы забыли, что какой-то элемент сайта отображается как строка (для которой задавать высоту или ширину бесполезно), в панели разработчика это легко выяснить.
Хоть пример и примитивен, но показывает, насколько проще можно исследовать и править стили в браузере, чем с помощью ковыряния в бесконечном полотне CSS-файла. В реальной верстке у вас может быть несколько файлов CSS, множество документов HTML, в которых легко «закопаться». Инструменты разработчика позволяют облегчить модификацию стилей, а также посмотреть, из какого конкретного файла они присвоены.
Здесь мы не просто исследуем свойства элементов или выявляем свои ошибки, но и способны протестировать другие атрибуты, напрямую прописав их, чтобы понять, насколько они соответствуют замыслу дизайнера.
Разрабатывая даже небольшой проект в одиночку, не стоит забывать о Style Guide . Хоть может показаться, что вам все понятно и вы легко «читаете» написанное, через какое-то время неструктурированные CSS-документы начнут вызывать головную боль. А в случаях занятости масштабными проектами индивидуальность вовсе не приветствуется. Хотелось бы лично вам разбираться в чужом коде, написанном сплошным неструктурированным набором без какой-то единой стилизации?
Для решения этой проблемы существуют договоренности, правила, стили написания кода. Они есть и в CSS. Компьютеру или браузеру совсем не важно, как написаны документы верстальщика, но вот для человека это имеет значение.
Рекомендуется придерживаться следующих правил:
3.1. Минимизируйте использование препроцессоров
Для упрощения разработки в CSS придуманы так называемые препроцессоры ( Sass , Less , SCSS ). Они превращают описание свойств стилей чуть ли не в отдельный язык программирования, существенно ускоряя процесс верстки. Если все участники команды знакомы с этим инструментом, им можно и нужно пользоваться.
В любом случае, это повышает уровень требований к кандидатам на должность верстальщика в компанию. Максимум простоты и ясности, а также минимальный порог входа – хорошая практика.
Вывод
Препроцессоры не запрещены, но актуальны только там, где имеют место быть опытные разработчики, понимающие их синтаксис.
3.2. Аккуратнее с CSS-методологиями
Методики, о которых мы будем говорить далее, никак не модифицируют CSS-язык. При этом их применение требует некоторой подготовки. У крупных разработчиков они используются повсеместно, но в небольших проектах не всегда необходимы. Они удобны, понятны знающим верстальщикам, но только не новичкам.
Для начала необходимо договориться и достичь единого уровня понимания методологии, а уже потом внедрять ее в разработку. Наиболее известными являются следующие подходы:
1) BEM ,
2) OOCSS ,
3) Atomic ,
4) SMACSS .
Пройдемся по каждому пункту подробнее:
1 ) BEM (Block Element Modifier)
Является соглашением по именованию. А это важная проблема в любом языке программирования. Имя класса или идентификатора можно задать случайным набором символов (тогда никто не увидит его логику) или осмысленно (что упростит понимание).
Приведем пример:
– navbuttonactive
– NavButtonActive
– nav-button-active
В первом случае понять смысл имени не просто: нужно всмотреться, чтобы выделить отдельные слова. Второй и третий варианты более наглядны, но, опять же, не дают ясности относительно того, с чем мы имеем дело: блоком, элементом или модификатором.
Именно для этого в методологии BEM введены эти 3 категории:
– блок (независимая автономная сущность)
Это некие базовые единицы сайта (меню, заголовки, шапка и т.п.). Они состоят из одного или нескольких слов (через дефис), задающих имя класса.
Типичные примеры именования:
class= «navigation»
– элемент (семантически привязаны к отдельным блокам и не имеют независимого состояния в качестве понятной единицы HTML-документа)
Присвоение имени осуществляется через класс с указанием имени блока, а через 2 нижних подчеркивания – названия элемента.