Как адаптировать сайт под мобильные устройства?
Для адаптации используют @media запросы CSS . Синтаксис такой:
@media(Условие)
@media(max-width: 992px) < /*Стили, на устройствах с максимальной ширеной экрана 992 пикселя и меньше */ >@media(max-width: 768px) < /*Стили, на устройствах с максимальной ширеной экрана 768 пикселей и меньше */ >@media(max-width: 500px) < /*Стили, на устройствах с максимальной ширеной экрана 500 пикселей и меньше */ >Это стандартная сетка из bootstrap. Почитать про эту библиотеку можете тут Можно подключив ее к сайту и немного переписать верстку, но это тяжелая библиотека и там много лишнего. Многие от нее отказываются. Почитать про медиа-запросы можно, например, тут или тут.
Еще стоит почитать про подходы к адаптивной верстке mobile-first и desktop-first. Сравнивают их во многих статьях, например, тут.
Также стоит отметить, что если вы используете медиа-запросы, то их надо группировать, чтобы Ваш сайт лучше работал. И тут два варианта:
- Писать только один экземпляр медиа-запроса, как выше и в конце файла css , что не всегда удобно.
- Использовать сборщики с предустановленными плагинами, которые автоматизируют рутинные задачи верстки (подключение и конвертация шрифтов, сжатие картинок, группировка медиа-запросов, подстановка префиксов для разных браузеров). Я использую для этого сборку gulp с плагином gulp-group-css-media-queries и некоторыми другими. Хороший гайд по настройке найдите в ютубе, сборок тьма. Есть еще сборщик webpack, говорят он лучше, точно новее, но с ним не работал, так как привык к gulp.
Быстрый способ подключить CSS к HTML
Основная задача каскадных таблиц стилей (CSS) — добавить документам HTML оформление без программирования или сложной логики. Это цвета, шрифты, расположение отдельных блоков на странице и т.д. Учимся подключать CSS к сайту.
Анатолий Ализар
Пишет про разработку в Skillbox Media. Работал главным редактором сайта «Хабрахабр», ведёт корпоративные блоги.
В принципе, внешний вид текста и изображений можно изменить атрибутами HTML (например, выделить заголовок), но это устаревший способ оформления, лучше использовать средства CSS.
В таблице стилей мы прописываем стили (правила) представления элементов. Каждое правило состоит из селектора и блока объявлений. Селектор в левой части правила определяет, на какие части документа распространяется правило. Блок объявлений в правой части помещается в фигурные скобки и состоит из одного или более объявлений, разделенных точкой с запятой. Другими словами, данное правило говорит браузеру, что и как мы хотим изменить в нашем документе. Что — это часть слева (селектор), а как — это часть справа (блок объявлений в фигурных скобках).
Селекторов слева может быть несколько, если мы хотим одинаковым образом изменить несколько элементов. Также и объявлений справа может быть несколько, если мы хотим дать целый ряд указаний для изменений определенного элемента (например, сменить и размер шрифта, и цвет элемента, и его местоположение на странице, а еще добавить рамку).
Способы подключения CSS
Таблицу стилей можно прописать конкретно в коде HTML-страницы, обрамив правила тегами . Или хранить в отдельном файле .css — и применять для многих страниц. Это внутренние и внешние таблицы стилей. Их еще называют глобальными и связанными.
Но кроме этих двух обычных способов, существует «нестандартный» метод, позволяющий прописывать стили непосредственно отдельным элементам. Выглядит примерно так:
Обратите внимание на оформление кода CSS. На самом деле не обязательно начинать каждое объявление с новой строки или оставлять отдельные строки для фигурных скобок. Просто принято оформлять код именно так для лучшей читаемости, при этом перед объявлениями ставится табуляция или несколько пробелов.
Сейчас мы создали внутреннюю таблицу стилей, которую в будущем сможем редактировать по своему желанию: добавлять новые правила, то есть селекторы и объявления для любых элементов на странице. Более того, можно даже вынести ее в отдельный файл .css — и применить сразу для многих HTML-страниц. Это уже будут внешние таблицы стилей.
Внешние таблицы стилей
Внешние таблицы стилей хранятся в отдельном файле с расширением .css. Вы можете создать этот файл хоть в Блокноте, главное — сохранить под правильным расширением. Содержание этого файла не отличается от кода, который мы написали для внутренних стилей и поместили между открывающим тегом и закрывающим :
p < color: red; font-size: 3em; >
То есть в файле .css пишется все то же самое, что и во внутренних стилях. И наоборот: во внутренних стилях внутри тегов можно писать все то же самое, что и в файле .css. Разница только в том, что внешние стили могут применяться сразу к нескольким страницам HTML и даже ко всему сайту целиком.
Теперь вместо тегов в HTML-файлы нужно вставить код, который указывает на местонахождение внешней таблицы стилей. Он вставляется в то же самое место после заголовка ( ), где мы раньше размещали встроенные стили:
link href="styles.css" rel="stylesheet">
Он будет выглядеть так:
html> head> meta charset="utf-8"> title>Стили Skillbox title> link href="styles.css" rel="stylesheet"> head> body> p>Привет, мир! p> body> html>
В данном примере не указан путь до файла styles.css, потому что он лежит в той же папке, что и документ HTML. Если же файл находится в другой папке или вообще на другом сервере, то следует указать полный абсолютный или относительный путь к нему. В случае нашего сервера достаточно относительного пути с указанием только папки, где лежит файл. В случае другого сервера потребуется полный абсолютный путь с указанием доменного имени.
Прелесть внешних стилей в том, что на один и тот же стиль могут ссылаться сколько угодно страниц HTML с любого количества доменов. То есть чтобы поменять шрифт или другим образом изменить внешний вид сотен или тысяч страниц на сотнях или тысячах сайтов, мы просто меняем одну строчку в файле .css.
Импорт чужого CSS
Из предыдущего раздела понятно, как использовать чужой стиль в своем документе: просто укажите URL соответствующего файла в своих HTML-документах.
link href="https://example.com/styles.css" rel="stylesheet">
Вот и все. Но имейте в виду: если владелец сайта изменит свой стиль — у вас тоже поменяются все страницы! Может быть, проще скопировать его файл .css к себе на сервер.
Читайте также:
- JavaScript: главный инструмент frontend-разработчиков
- Могут ли роботы любить, писать законы и видеть сны?
- Как начать программировать на PHP
CSS ‘>’ selector; what is it? [duplicate]
I’ve seen the «greater than» ( > ) used in CSS code a few times, but I can’t work out what it does. What does it do?
78.1k 110 110 gold badges 165 165 silver badges 272 272 bronze badges
asked Dec 16, 2010 at 10:39
101k 50 50 gold badges 172 172 silver badges 209 209 bronze badges
Aug 16, 2023 at 6:27
7 Answers 7
> selects immediate children
For example, if you have nested divs like such:
and you declare a css rule in your stylesheet like such:
.outer > div
your rules will apply only to those divs that have a class of «middle» since those divs are direct descendants (immediate children) of elements with class «outer» (unless, of course, you declare other, more specific rules overriding these rules). See fiddle.
div < border: 1px solid black; padding: 10px; >.outer > div
div.outer - This is the parent. div.middle - This is an immediate child of "outer". This will receive the orange border. div.inner - This is an immediate child of "middle". This will not receive the orange border. div.middle - This is an immediate child of "outer". This will receive the orange border. div.inner - This is an immediate child of "middle". This will not receive the orange border. Without Words
. . Side note
If you, instead, had a space between selectors instead of > , your rules would apply to both of the nested divs. The space is much more commonly used and defines a «descendant selector», which means it looks for any matching element down the tree rather than just immediate children as the > does.
NOTE: The > selector is not supported by IE6. It does work in all other current browsers though, including IE7 and IE8.
If you’re looking into less-well-used CSS selectors, you may also want to look at + , ~ , and [attr] selectors, all of which can be very useful.
This page has a full list of all available selectors, along with details of their support in various browsers (its mainly IE that has problems), and good examples of their usage.
Как в HTML подключить CSS
HTML (HyperText Markup Language) и CSS (Cascading Style Sheets) являются двумя основными технологиями веб-разработки. HTML используется для структурирования содержимого веб-страницы, а CSS определяет внешний вид и стиль этого содержимого. Понимание того, как правильно подключить CSS к HTML, является ключевым навыком для всех, кто интересуется созданием веб-страниц.
В этой статье мы рассмотрим несколько способов подключения CSS к HTML документу.
Внутренний CSS:
Первый способ — использовать внутренние стили, которые определяются прямо внутри HTML документа. Для этого используется тег в секции HTML страницы. Внутри этого тега вы можете написать CSS правила для стилизации элементов HTML.
Пример внутреннего CSS
Этот текст будет стилизован с использованием внутреннего CSS.
Внешний CSS:
Другой распространенный способ — использовать внешние CSS файлы. В этом случае вы создаете файл с расширением .css , определяете в нем все стили, а затем подключаете этот файл к HTML документу с помощью тега в секции .
Создайте файл с именем styles.css и определите в нем стили:
Затем подключите этот файл к HTML документу:
Пример внешнего CSS
Этот текст также будет стилизован с использованием внешнего CSS.
Встроенный CSS:
Третий способ — использовать встроенные стили, которые определяются непосредственно в тегах HTML. Хотя это не рекомендуется из-за смешивания структуры и стиля, это может быть полезным в некоторых случаях, особенно при работе с небольшими участками текста.
Пример встроенного CSS
Этот текст также будет стилизован с использованием встроенного CSS.
Это основные способы подключения CSS к HTML документу. Каждый из них имеет свои преимущества и недостатки, и выбор зависит от конкретной ситуации и предпочтений разработчика.
Использование CDN:
Если у вас есть доступ к интернету, вы можете подключить CSS файл через CDN (Content Delivery Network). CDN предоставляет возможность подключить файл стилей, размещенный на удаленном сервере, что может ускорить загрузку страницы благодаря использованию кэширования и распределенной доставке контента.
Пример подключения стилей с помощью CDN:
Пример подключения CSS через CDN
Этот текст будет стилизован с использованием CSS из CDN.
В этом примере мы подключаем стили из Bootstrap CDN, который содержит множество предварительно оформленных стилей для быстрой и простой стилизации веб-страниц.
Использование @import:
Дополнительным методом подключения CSS к HTML является использование правила @import внутри тега в секции . Этот метод позволяет подключить внешний CSS файл прямо из другого CSS файла.
Пример использования @import для подключения CSS
Этот текст также будет стилизован с использованием внешнего CSS.
В файле styles.css содержатся все необходимые стили.
Каждый из этих методов имеет свои особенности и может быть использован в зависимости от требований вашего проекта. Надеюсь, эта статья помогла вам разобраться в способах подключения CSS к HTML документу.
Важность разделения структуры и стиля:
При разработке веб-страниц рекомендуется придерживаться принципа разделения структуры (HTML) и стиля (CSS). Это делает код более чистым, поддерживаемым и понятным. Внутренние и встроенные стили иногда могут сделать код менее читабельным, особенно при работе над крупными проектами с множеством страниц и разработчиков.
Использование внешних CSS файлов и их последующее подключение к HTML документу позволяет легко изменять стили на всех страницах сайта, не затрагивая HTML код. Это также облегчает повторное использование стилей и снижает объем кода, что положительно сказывается на производительности и обслуживании сайта.
Порядок подключения CSS:
При использовании нескольких файлов CSS или CDN для стилей важно следить за порядком их подключения. Обычно файлы CSS подключаются в секции
HTML документа перед закрывающим тегом . Если есть необходимость переопределить какие-то стили, подключенные ранее, это можно сделать в последующих CSS файлах или внутренних стилях, которые будут иметь более высокий приоритет.Каскадность и наследование:
CSS основан на концепциях каскадности и наследования. Каскадность означает, что стили могут быть переопределены с помощью более специфичных селекторов или правил. Наследование позволяет применять стили, определенные для родительских элементов, к их дочерним элементам.
Это важно понимать при разработке стилей, чтобы избежать неожиданных результатов и управлять стилями более эффективно.
Применение классов и идентификаторов:
Для более точного управления стилями HTML элементов используются классы и идентификаторы. Классы позволяют применять одни и те же стили к нескольким элементам, в то время как идентификаторы обеспечивают уникальность стилей для конкретного элемента.
Пример использования классов и идентификаторов:
Пример использования класса
Пример использования идентификатора
В файле styles.css можно определить стили для класса .header и идентификатора #paragraph .
Заключение статьи на тему как в html подключить css
Подключение CSS к HTML — важный этап создания веб-страниц, определяющий их внешний вид и стиль. В этой статье мы рассмотрели несколько способов подключения CSS к HTML документу, включая внутренние, внешние, встроенные стили, использование CDN и правило @import. Каждый из этих методов имеет свои особенности и преимущества, и выбор зависит от требований проекта и предпочтений разработчика. Следуя лучшим практикам разработки, таким как разделение структуры и стиля, правильный порядок подключения CSS файлов и использование классов и идентификаторов, вы сможете создавать красивые и функциональные веб-страницы.
Дополнительная информация:
Изучение основ HTML и CSS:
-
,
и многие другие, а также понять основные концепции CSS, такие как селекторы, свойства и значения, каскадность и наследование.
Принципы адаптивного и отзывчивого дизайна:
С развитием мобильных устройств все большее значение приобретает адаптивный и отзывчивый дизайн веб-страниц. Это позволяет вашим страницам выглядеть хорошо на различных устройствах и экранах, а также улучшает пользовательский опыт. Изучение принципов медиазапросов, гибкой сетки и других техник адаптивного дизайна поможет вам создавать более функциональные и удобные веб-приложения.
Использование инструментов разработчика:
Инструменты разработчика в браузере (например, Chrome DevTools) являются мощным инструментом для отладки и тестирования веб-страниц. Они позволяют вам просматривать и изменять HTML и CSS код в реальном времени, а также анализировать производительность вашего сайта. Изучение этих инструментов поможет вам стать более эффективным разработчиком.
Продолжение обучения:
Веб-разработка — это постоянно развивающаяся область, поэтому важно постоянно обновлять свои знания и навыки. Существует множество онлайн-курсов, учебных материалов, блогов и сообществ, где вы можете найти полезную информацию и поддержку в своем обучении. Уделите время изучению новых технологий, фреймворков и лучших практик, чтобы стать более компетентным и востребованным специалистом в области веб-разработки.
Юрий Савченко
Привет, моё имя Юрий, и мне 39 лет. Родом из Грозного. Сейчас живу и работаю в Краснодаре, в одном из крупнейших маркетинговых агентств города. Я являюсь основным автором статей на проекте Code4web.
В основном пишу в такие категории как Javascript, HTML и Офтопик.
В свободное время я — лютый геймер. Обожаю игры серии Dark Souls и RPG. Это такой мой способ расслабиться и отдохнуть от повседневной рутины.