Как изменить код элемента на сайте


Как изменить код элемента на сайте / webentrance.ru

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

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

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

В коде <div> обозначает блок, <a> – ссылки, img – картинки, h2, h3, h4 – заголовки и т. д. То есть, нужно понять, что каждый элемент сайта обозначается определенными тегами.

Классы и идентификаторы

В коде заголовка видим

<h2 id — “site-title”>

Id здесь – идентификатор.

В другом случае, если нажать на меню, то в коде увидим

<li class=”page …, то есть у тега li есть класс такой-то, а у блока <div class-“menu”> есть класс меню, то есть к этому элементу применяется класс “menu”.

Это нужно для того, чтобы было легче обращаться к элементам сайта для изменения их стиля. То есть, чтобы решить, как изменить код элемента заголовка, нужно найти идентификатор id — “site-title” и изменить его на нужный.

Итак, все элементы кода сайта имеют свои идентификаторы, либо классы.

Как изменить код элемента, отвечающего за его цвет

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

В правой колонке, в первой строке видим .art-postheader {

 

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

Цвет в данном случае темно-синий, ближе к черному. При помощи изменения правил можно поменять его, например, на красный с кодом цвета — #FF3300, чтобы заголовок выглядел так

Соответственно, код будет таким

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

Для этого копируем .art-postheader, заходим в панель администрирования WordPress, Внешний вид — Редактор, открываем таблицу стилей style.css и вызываем поиск по сайту, нажимая Ctrl+F.

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

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

Аналогично можно поменять жирность текста, подчеркивание ссылки и другие параметры элемента.

Чтобы определить, какие еще правила существуют для того или иного элемента кода, можно прибегнуть к специальному сервису, который располагается по адресу — htmlbook.ru.

Здесь нужно ввести в строку поиска тег HTML или свойство CSS и получаем все возможные правила для него. Любое правило можно скопировать и вставить на свой сайт.

Меняем цвет фона

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

Выделяется блок кода, отвечающий за фон. В правой колонке показываются правила для идентификатора #wrapper.

Правило background, который отвечает за цвет, может иметь еще много различных значений. Для замены цвета нажимаем на квадрат кнопки и выбираем нужный цвет, например, голубой.

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

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

Добавляем картинку фона

За это отвечает правило background-image. На сайте открываем просмотр кода элемента нашего фона и в правой колонке вставляем для фона сайта это правило, ставим двоеточие и затем потребуется ссылка. Записываем url (“ “) и в кавычках пишем ссылку на картинку.

Чтобы найти ссылку, можно воспользоваться обычным сервисом google.ru картинки.

Ищем что-нибудь для сайта, например, в категории Гармония.

Поиск выдает множество картинок. Опять вводим Обои для сайта, выбираем нужную, размером побольше, допустим 1024 × 768.

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

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

Работа со шрифтами

Чтобы изменить код элемента, например, размер шрифта нашего заголовка, нужно вставить в правой колонке для него правило font-size. Ставим двоеточие и размер в пикселях, допустим 36 px.

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

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

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

Можно выбрать разновидность шрифта. За это отвечает font-family — семейство шрифтов.

Чтобы сменить шрифт заголовка, прописываем в правилах к элементу font-family и после двоеточия ставим, например, Georgia.

После запятой можно поставить еще один распространенный шрифт, допустим, Times New Roman.

В этом случае, если даже у кого-то Georgia не будет отображаться, то отобразится Times New Roman.

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

Если нужно сделать шрифт пожирнее, то применяем правило font-weight и т. д.

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

Другие записи по теме:

Как временно редактировать любую веб-страницу

В вашем браузере скрывается мощный инструмент: Inspect Element .

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

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

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

Давайте узнаем, как использовать Google Chrome Inspect Element для облегчения вашей работы, независимо от того, являетесь ли вы разработчиком или маркетологом, который никогда не писал ни строчки кода.Если вы читаете это на своем телефоне, пора переключиться на ноутбук, открыть Google Chrome и приготовиться настроить код.

Большинство веб-браузеров, включая Mozilla Firefox и Apple Safari, включают инструмент Inspect Element, тогда как Internet Explorer и Edge от Microsoft включают аналогичный набор инструментов разработчика. В этом руководстве основное внимание уделяется инструментам проверки элементов Google Chrome, но большинство функций работают так же в других браузерах.

Подождите, почему я должен использовать элемент Inspect?

Google Chrome Inspect Element позволяет просматривать исходный код веб-сайта и настраивать все, что угодно

Если вы никогда не заглядывали в код веб-сайта из любопытства, вы можете задаться вопросом, зачем вам изучать, как использовать Inspect Element.

Для этих и десятков других случаев использования Inspect Element - удобный инструмент, который стоит иметь под рукой. Это часть инструментов разработчика в вашем браузере, которая включает в себя ряд дополнительных функций: консоль для запуска кода, страницу View Source для просмотра только необработанного кода сайта, страницу Sources со списком всех загруженных файлов. на веб-сайте и многое другое.Вы можете изучить все это самостоятельно, а пока давайте посмотрим, как использовать основную вкладку Elements , чтобы настроить веб-страницу самостоятельно.

Как начать работу с элементом Inspect

Есть несколько способов получить доступ к Google Chrome Inspect Element. Просто откройте веб-сайт, который хотите попробовать отредактировать (чтобы следовать этому руководству, откройте Zapier.com), затем откройте инструменты Inspect Element одним из следующих трех способов:

По умолчанию Инструменты разработчика открываются на панели в самом низу браузера и показывают вкладку Elements - это знаменитый инструмент Inspect Element, который мы искали.

У вас не будет много места для работы с элементом Inspect Element в нижней части экрана, поэтому щелкните три вертикальные точки в верхней правой части панели элемента Inspect рядом с знаком «X» (который вы бы щелкнули, чтобы закройте панель). Теперь вы увидите возможность переместить панель в правую часть браузера (вид справа) или открыть панель в совершенно отдельном окне (вид отстыковки).

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


Теперь, когда мы находимся в Inspect Element, у нас под рукой есть множество полезных инструментов, которые мы можем использовать, чтобы любой сайт выглядел именно так, как мы хотим. В этом руководстве мы сосредоточимся на вкладках «Элементы», «Эмуляция» и «Поиск».

Искать

Вкладка «Поиск» позволяет искать на веб-странице определенное содержимое или элемент HTML.Он немного скрыт: вам нужно щелкнуть 3 точки, затем щелкнуть Search All Files , чтобы раскрыть его. Тогда вы сможете искать в каждом файле на веб-странице все, что захотите.

Элементы

«Inspect Element» - это инструмент, который мы больше всего будем изучать в этом руководстве, и он открывается первым, когда вы запускаете Инструменты разработчика в большинстве браузеров. Или щелкните вкладку «Элементы» в Инструментах разработчика, чтобы вернуться к ней, если вы изучали где-то еще.

На вкладке «Обзор» вы можете увидеть все элементы HTML, JavaScript и CSS, с помощью которых был создан веб-сайт.Это почти то же самое, что просто просмотреть исходный код веб-сайта, с одним важным отличием: вы можете изменить любой код и видеть изменения в реальном времени на открытом сайте. Вы можете изменить что угодно, от копии до гарнитуры, затем сделать снимок экрана нового дизайна или сохранить изменения (просто перейдите в View> Developer> View Source и сохраните страницу как файл HTML или скопируйте изменения кода в текстовый редактор ). Однако после повторной загрузки страницы все ваши изменения исчезнут навсегда.

Эмуляция

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

Он также немного скрыт: вам нужно открыть Inspect Element и щелкнуть значок телефона, чтобы запустить его.Тогда у вас будет отличный инструмент, чтобы понять, как другие воспринимают веб-страницу.


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

Найдите что-нибудь на сайте с помощью поиска по элементам проверки

Хотите знать, что входит в ваши любимые сайты? Поиск - ваш лучший инструмент для этого, помимо чтения всего исходного кода сайта.Вы можете просто открыть представление элементов по умолчанию, нажать CTRL + F или CMD + F и выполнить поиск по исходному коду, но полный инструмент поиска позволит вам искать по каждому файлу на странице, помогая вам найдите текст в файлах CSS и JavaScript или найдите изображение значка, которое вам нужно для статьи.

Для начала откройте Zapier.com в Chrome, если вы еще этого не сделали, затем откройте Inspect Element, щелкните 3 вертикальные точки в правом верхнем углу панели инструментов разработчика (рядом с закрывающим «X») и выберите «Искать во всех файлах."Вкладка" Поиск "появится в нижней половине панели инструментов разработчика.

Помните, как открыть Inspect Element? Просто щелкните правой кнопкой мыши и выберите Inspect Inspect Element или нажмите Command + Option + i на Mac или F12 на ПК.

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

Введите мета-имя в поле поиска, нажмите клавишу Enter , и вы сразу увидите каждое вхождение «мета-имени» в коде на этой странице.Теперь вы можете видеть метаданные этой страницы, ключевые слова SEO, на которые она ориентирована, а также то, настроена ли она для того, чтобы Google индексировал ее для поиска. Это простой способ увидеть, на что нацелены ваши конкуренты, и убедиться, что вы ничего не испортили на своем сайте.

Попробуем другой запрос. Удалите мета-имя , вместо этого введите h3 в поле поиска и нажмите «ввод». Вы увидите каждое вхождение «h3» в файлах JavaScript Zapier вверху, но как только вы прокрутите вниз, вы увидите каждый заголовок «h3» на этой странице.

Search также является эффективным инструментом для дизайнеров, так как вы также можете искать по цвету. Введите # ff4a00 в поле поиска и нажмите «ввод» (и обязательно установите флажок рядом с «Игнорировать регистр», чтобы увидеть все результаты). Теперь вы должны каждый раз видеть цвет # ff4a00, оттенок оранжевого Zapier, в файлах CSS и HTML этого сайта. Затем просто щелкните строку с надписью «color: # ff4a00;» чтобы перейти к этой строке в HTML-коде сайта и настроить ее самостоятельно (мы рассмотрим это в следующем разделе).

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

Инструмент «Поиск» также является прекрасным способом улучшить взаимодействие с разработчиками, поскольку вы можете показать им, где именно вы нашли ошибку или что именно нужно изменить.Просто сообщите им номер строки, в которой существует проблема, и вы получите исправление гораздо быстрее.

Или вы можете изменить веб-страницу самостоятельно с помощью Elements , основной части инструментов разработчика Chrome.

Измените что угодно с помощью элементов

Front-end разработчики используют инструмент Inspect Element каждый день, чтобы изменять внешний вид веб-страницы и экспериментировать с новыми идеями - и вы тоже можете. Inspect Elements позволяет настраивать внешний вид и содержимое веб-страницы, добавляя временные изменения в файлы CSS и HTML сайта.

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

Посмотрим, что мы можем с этим сделать.

Щелкните вкладку «Элементы» на панели инструментов разработчика - и, если вам нужно больше места, нажмите клавишу «Esc», чтобы закрыть окно поиска, которое вы открывали ранее.Вы должны увидеть HTML-код этой страницы - теперь вы знаете, как делают колбасу.

В верхнем левом углу панели разработчика вы увидите значок мыши поверх квадрата. Щелкните по нему, затем вы можете выбрать любой элемент на странице, который вы хотите изменить. Так что давайте изменим кое-что!

Изменить текст на веб-странице

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

Щелкните значок «мышь над квадратом», затем щелкните любой текст на странице - возможно, слоган на главной странице Zapier. На панели инструментов разработчика вы увидите строку текста с синим выделением, которая выглядит примерно так:

Дважды щелкните текст «Подключите ваши приложения», выделенный синим цветом на панели «Инструменты разработчика», и он превратится в редактируемое текстовое поле.

Введите все, что угодно, в это текстовое поле («Аури - гений» должно работать нормально) и нажмите Enter. Вуаля! Вы только что изменили текст на веб-странице.

Обновите страницу, и все вернется в нормальное состояние.

Весело? Давайте изменим еще кое-что на этой странице.

Панель инструментов разработчика перезагружается вместе со страницей, но давайте закроем ее. Нажмите «X» в правом верхнем углу страницы.

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

Когда откроется панель инструментов разработчика, это предложение должно автоматически выделиться. Довольно аккуратно, да? Важны мелочи.

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

Изменение цвета и шрифта элементов

Справа от этого предложения на панели инструментов разработчика вы увидите подпанель с тремя дополнительными вкладками: стили, вычисленные и прослушиватели событий. Каждый из них позволяет вам изменить внешний вид этого предложения на странице.Начнем с вкладки «Стили».

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

Попробуем что-нибудь изменить. Снова щелкните значок стрелки в верхней части Inspect Element и выделите текст прямо под кнопкой «Зарегистрироваться» на странице. Найдите "выравнивание текста" на вкладке "Стили" (возможно, вам придется немного прокрутить, чтобы найти это).

Прямо сейчас он установлен в «центр», но дважды щелкните «центр» и введите left . Это выравнивает текст на странице по левому краю.

А теперь поиграемся с цветом. Используйте значок мыши в Inspect Element, чтобы выбрать кнопку на этот раз, затем на вкладке Styles найдите эту строку:

И дважды щелкните "# ff4a00". Наберите # 4199ad (не забудьте #) и нажмите «ввод».

Мы только что изменили цвет нашей кнопки с оранжевого на синий! А теперь попробуем что-нибудь действительно крутое.

Изменить состояние элемента

Хотите увидеть, как будет выглядеть кнопка или ссылка, когда кто-то наведет на нее курсор или щелкнет? Chrome Inspect Element может показать это с помощью инструментов состояния силового элемента. Вы можете увидеть, как будет выглядеть элемент, когда посетитель наводит курсор на элемент (состояние наведения), выбирает элемент (состояние фокуса) и / или щелкает по этой ссылке (состояние посещения).

Давай попробуем. Убедитесь, что вы выбрали кнопку регистрации на главной странице Zapier. Затем щелкните правой кнопкой мыши этот код на вкладке «Элементы» и выберите в этом меню : active: .

Это изменит цвет кнопки на серый, который отображается на сайте Zapier при нажатии кнопки.

Теперь измените значение background-color на # FF4A00 , и вы должны сразу увидеть изменение цвета кнопки.

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

Изменить изображения

Вы также можете легко менять изображения на веб-странице с помощью Inspect Element.Давайте заменим фон Супергероя на сайте Zapier на эту впечатляющую фотографию солнечной вспышки, сделанную НАСА.

Сначала скопируйте и вставьте эту ссылку в изображение:

https://c1.staticflickr.com/9/8314/7931831962_7652860bae_b.jpg

Теперь откройте Inspect Element на фоне домашней страницы Zapier и убедитесь, что вы выбрали строку signup-hero в коде. Дважды щелкните ссылку URL-адреса фона на панели «Стили» и вставьте ссылку, которую вы скопировали выше.

Нажмите "ввод" и сразу увидите разницу.

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


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

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

Тестирование сайта на любом устройстве с эмуляцией

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

Эмуляция

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

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

Измените размер небольшого браузера, чтобы увидеть, как все выглядит, если вы просматриваете страницы на планшете, телефоне или даже на меньшем экране. Или щелкните меню вверху, чтобы выбрать размеры устройства по умолчанию, например iPad Pro или iPhone 8 Plus - вперед и выберите последнее.

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

Увеличьте изображение, перетащив правый край эмуляции веб-страницы вправо. Смотрите, что происходит? Мы больше не находимся в представлении iPhone 8 Plus. Перетаскивание экрана по сетке позволяет увидеть, как веб-страница будет изменяться при изменении размера экрана, но ваше представление больше не будет отражать модель устройства, которую вы выбрали ранее.

Вернемся к представлению iPhone 8 Plus, снова выбрав его в раскрывающемся списке модели. Рядом с выпадающим списком есть слово «Портрет». Как вы уже догадались, это позволяет переключаться между пейзажным и горизонтальным видом.

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

В представлении iPhone 8 Plus мы видим, что это текст 2em, а в представлении по умолчанию на компьютере - 3em.

«em» - это единица размера шрифта, которая позволяет автоматически изменять размер текста относительно окружающего текста. Например, предположим, что у нас есть пользователь с большими настройками пользовательского шрифта в своем браузере. Если вы установите размер шрифта абзаца на 14 пикселей, ваш шрифт всегда будет 14 пикселей для этого пользователя, несмотря ни на что.Однако, если вы установите размер шрифта абзаца равным 1em, браузер вашего пользователя будет использовать эту единицу измерения для масштабирования текста в соответствии с большими пользовательскими настройками. Телефоны и планшеты делают это для удобного увеличения текста.

Теперь давайте переключимся на представление Apple iPad и выберем заголовок «тестирование на разных устройствах» выше. На этот раз размер шрифта 3em. Размер шрифта изменился в зависимости от вида устройства, вернувшись к размеру по умолчанию, который использовался бы на компьютере, благодаря большему экрану планшета.


Эмуляция датчиков мобильных устройств

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

Вы даже можете заставить ваш браузер работать как телефон. Нажмите клавишу «Esc», чтобы снова открыть панель поиска в Inspect Element, и на этот раз щелкните меню с тремя точками слева, чтобы открыть меню параметров.Выберите Sensors , чтобы получить три новых инструмента: Geolocation, Orientation и Touch.

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

Давайте попробуем просмотреть этот сайт из штаб-квартиры Google в Маунтин-Вью, Калифорния.

Установите флажок «Эмулировать координаты геолокации» и введите значение 37 в текстовое поле Lat = и 122 в текстовое поле Lon = . Нажмите Enter на клавиатуре.

Ничего не меняется, да?

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

Эмуляция

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

Эмуляция мобильных сетей

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

Чтобы попробовать, снова нажмите кнопку с тремя кружками слева от вкладки поиска «Проверить элемент» и выберите «Условия сети». Здесь вы можете выбрать быстрый или медленный 3G или автономный режим, чтобы увидеть, как страница работает без Интернета. Или щелкните Добавить… , чтобы включить собственное тестирование (возможно, добавьте 56 Кбит / с для тестирования Интернета по коммутируемому доступу). Теперь перезагрузите страницу, и вы увидите, сколько времени потребуется сайту для загрузки при медленном соединении - и как сайт выглядит во время загрузки. Это покажет, почему вам следует улучшить свой сайт, чтобы он загружался быстрее при медленных соединениях.

Вы также можете изменить свой пользовательский агент - снимите флажок «Выбирать автоматически» рядом с «Пользовательским агентом» и выберите «Internet Explorer 7», возможно, чтобы увидеть, изменит ли сайт свою визуализацию для старых браузеров. Это также удобный способ заставить веб-страницы загружаться, даже если они утверждают, что работают только в другом браузере, таком как Internet Explorer.


Вызовы

Давайте закончим несколькими проблемами. Покажи нам, что ты узнал!

  1. Изменить заголовки на CNN.com и отправьте нам снимок экрана с заголовком своей популярной статьи.
  2. Дублируйте ваш любимый веб-сайт, используя «Просмотр исходного кода», и возитесь с HTML, чтобы сделать его своим.
  3. Посмотрите, как ваш веб-сайт отображается на мобильном устройстве, и покажите своему разработчику, что можно сделать лучше, исправив это самостоятельно!

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

Как использовать Inspect Element? Мы будем рады услышать ваши истории в комментариях ниже!

Вам нравятся ваши новые хакерские навыки? Изучите их дальше в нашем руководстве «Как создать веб-сайт без какого-либо программирования» и его сопутствующем руководстве «Как создать отличную графику без какого-либо программирования».

Изначально это руководство было опубликовано 5 января 2015 г., затем было обновлено и переиздано 6 июня 2017 г. и 25 января 2018 г. со скриншотами и шагами из последней версии Google Chrome.

.

HTML-элементов


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


Элементы HTML

Элемент HTML определяется начальным тегом, некоторым содержимым и конечным тегом:

Здесь идет контент ...

Элемент HTML - это все, от начального тега до конечного тега:

Мой Первый заголовок

Мой первый абзац.

Начальный тег Содержание элемента Концевая метка

Моя первая заголовок

Мой первый абзац.


нет нет

Примечание. Некоторые элементы HTML не имеют содержимого (например,
элемент).Эти элементы называются пустыми элементами. Пустые элементы не имеют закрывающего тега!


Вложенные элементы HTML

HTML-элементов могут быть вложенными (это означает, что элементы могут содержать другие элементы).

Все документы HTML состоят из вложенных элементов HTML.

Следующий пример содержит четыре элемента HTML ( , ,

и

):

Пример


Мой первый заголовок


Мой первый абзац.


Попробуй сам "

Объяснение примера

Элемент является корневым элементом и он определяет весь HTML-документ.

Он имеет начальный тег и конечный тег .

Затем внутри элемента находится a элемент:

Мой первый заголовок


Мой первый абзац.

Элемент определяет тело документа.

Он имеет начальный тег и конечный тег .

Затем внутри элемента есть два других элемента:

и

:

Мой первый заголовок


Мой первый абзац

Элемент

определяет заголовок.

Он имеет начальный тег

и конечный тег

:

Мой первый заголовок

Элемент

определяет абзац.

Он имеет начальный тег

и конечный тег

:

Мой первый абзац.



Никогда не пропускайте конечный тег

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

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


Пустые элементы HTML

HTML-элементов без содержимого называются пустыми элементами.

Тег
определяет разрыв строки и это пустой элемент без закрывающего тега:


HTML не чувствителен к регистру

В тегах HTML

регистр не учитывается:

означает то же, что и

.

Стандарт HTML не требует тегов в нижнем регистре, но W3C рекомендует строчных букв в HTML, а требует строчных букв для более строгих типов документов, таких как XHTML.

В W3Schools мы всегда используем имена тегов в нижнем регистре.


Ссылка на тег HTML

Справочник тегов

W3Schools содержит дополнительную информацию об этих тегах и их атрибутах.

Тег Описание
Определяет корень HTML-документа
Определяет тело документа

до

Определяет заголовки HTML


.

Как изменить цвет ссылок на веб-странице

Обновлено: 31.08.2020, Computer Hope

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

Наконечник

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

Описание различных типов гиперссылок

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

  1. Посещенная ссылка - Цвет посещенной ссылки. Если гиперссылка имеет этот цвет, пользователь может ожидать, что щелчок по ссылке приведет его на страницу, которую он уже видел.
  2. Ссылка при наведении - Цвет при наведении курсора мыши на ссылку. Если гиперссылка имеет этот цвет, пользователь может ожидать, что нажатие левой кнопки мыши (щелчок), а затем отпускание кнопки приведет к посещению ссылки. Цвет наведения одинаков для «Активных» и «Посещенных» ссылок.
  3. Активная ссылка - Цвет ссылки при нажатии. Когда пользователь видит этот цвет, он может ожидать, что при отпускании кнопки мыши браузер перейдет по ссылке.
Наконечник

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

Пример цвета ссылки CSS

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

 a { цвет: # 2c87f0; } а: посетил { цвет: # 636; } a: hover, a: active, a: focus { цвет: # c33; } 

Если ваша страница не использует CSS, приведенные ниже шаги показывают, как это сделать в теге HTML BODY.Однако, как упоминалось ранее, мы настоятельно рекомендуем использовать приведенный выше код CSS вместо тега body. Вы можете добавить приведенный выше код в файл CSS и связать все свои веб-страницы с этим файлом CSS. Затем вы можете изменить значения background-color в этом одном файле CSS, чтобы мгновенно изменить цвет фона всех страниц, ссылающихся на него.

Пример тега HTML body

В очень редких случаях использование CSS может оказаться невозможным. В таких ситуациях вы также можете определить цвет фона, цвет текста, цвет ссылки и другие значения в теге тела HTML, как показано ниже.

  

Ниже приведены описания каждого из атрибутов HTML в теге body.

ТЕКСТ = Цвет текста.
ССЫЛКА = Цвет ссылок.
VLINK = Цвет посещенной ссылки.
ALINK = Цвет активной ссылки или цвет, на который ссылка меняет при нажатии.
BGCOLOR = Цвет фона страницы.

.

Как изменить тип и цвет шрифта на веб-странице

Обновлено: 02.06.2020 компанией Computer Hope

Эта страница содержит инструкции по изменению шрифта и его цвета на веб-странице. С появлением HTML5 правильным способом настройки шрифтов веб-страниц является использование каскадных таблиц стилей. Старый метод использования встроенного атрибута стиля или тега шрифта устарел и больше не должен использоваться.

Заметка

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

Использование CSS для одного приложения

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

Пример кода

 

Этот текст имеет шрифт Courier, синий цвет и 20 пикселей.

Результат

Этот текст имеет шрифт Courier, синий цвет и размер 20 пикселей.

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

Пользовательский шрифт для одной страницы

В верхней части вашей веб-страницы вы можете вставить код между вкладками , чтобы изменить внешний вид вашего текста в различных элементах. Следующее синее поле содержит пример кода, который после вызова изменит ваш шрифт на Courier и закрасит его в красный цвет.Как видите, мы определили имя класса как «custom».

  

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

Пример

 

Всё это предложение красное и Курьер

Только слово test красное и Courier.

Результат

Вся эта фраза красная и курьерская.

Только слово тест красное и Курьер.

Пользовательский шрифт для многих страниц

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

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

 @charset «utf-8»; 
.courier { семейство шрифтов: Courier; цвет: # 005CB9; }

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

  
Наконечник

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

Использование тега шрифта

Тег HTML , хотя и объявлен устаревшим, по-прежнему может использоваться и может быть необходим для использования с некоторыми онлайн-сервисами. При использовании тега FONT вы должны включить атрибут лица, описывающий используемый шрифт. В приведенном ниже примере мы используем шрифт Courier и шестнадцатеричный код цвета # 005CB9 , который является темно-синим.

Пример кода

  Пример специального шрифта.  

Результат

Пример специального шрифта.

.

Смотрите также