Html цвет фона страницы: Как изменить цвет фона и текста веб-страницы?

Leave a Comment / Html / By /

bootstrap — Как сменить стандартный цвет фона Laravel Breeze?

Для аутентификации использовал Laravel Breeze, там по умолчанию серый цвет фона

Я не могу найти как изменить цвет и сделать фон темным( прикрепил код шаблонов и страницу для входа

layout.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
        <title>@yield('title')</title>
        <header>
            <a href="/">MyTeacher</a>
            <nav>
                <a href="/journal">Електронний журнал</a>
            </nav>
        </header>
        <!-- Fonts -->
        <link href="https://fonts.
 
 googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
        <!-- Styles -->
        <style>
            /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.
  border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.
 
 text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.
  sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}}
        </style>
        <style>
            body {
                font-family: 'Nunito', sans-serif;
            }
            .
 
 mx-auto {
    margin-right: auto!important;
    margin-left: auto!important;
}
        </style>
    </head>
    <body>
        <div class=align-items-center relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0">
            @if (Route::has('login'))
                <div>
                    @auth
                        <a href="{{ url('/dashboard') }}">Dashboard</a>
                    @else
                        <a href="{{ route('login') }}">Log in</a>
                        @if (Route::has('register'))
                            <a href="{{ route('register') }}">Register</a>
                        @endif
                    @endauth
                </div>
            @endif
            <div>
                @yield('content')
            </div>
                </body>
            </html>

app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>{{ config('app.
 
 
 name', 'Laravel') }}</title>
        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
        <!-- Styles -->
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}" defer></script>
    </head>
    <body>
        <div>
            @include('layouts.navigation')
            <!-- Page Heading -->
            <header>
                <div>
                    {{ $header }}
                </div>
            </header>
            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>
        </div>
    </body>
</html>

guest.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>{{ config('app. name', 'Laravel') }}</title>
        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
        <!-- Styles -->
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}" defer></script>
    </head>
    <body>
        <div>
            {{ $slot }}
        </div>
    </body>
</html>

login.blade.php

<x-guest-layout>
    <x-auth-card>
        <x-slot name="logo">
            <a href="/">
                <x-application-logo />
            </a>
        </x-slot>
        <!-- Session Status -->
        <x-auth-session-status :status="session('status')" />
        <!-- Validation Errors -->
        <x-auth-validation-errors :errors="$errors" />
        <form method="POST" action="{{ route('login') }}">
            @csrf
            <!-- Email Address -->
            <div>
                <x-label for="email" :value="__('Email')" />
                <x-input type="email" name="email" :value="old('email')" required autofocus />
            </div>
            <!-- Password -->
            <div>
                <x-label for="password" :value="__('Password')" />
                <x-input
                                type="password"
                                name="password"
                                required autocomplete="current-password" />
            </div>
            <!-- Remember Me -->
            <div>
                <label for="remember_me">
                    <input type="checkbox" name="remember">
                    <span>{{ __('Remember me') }}</span>
                </label>
            </div>
            <div>
                @if (Route::has('password.
  request'))
                    <a href="{{ route('password.request') }}">
                        {{ __('Forgot your password?') }}
                    </a>
                @endif
                <x-button>
                    {{ __('Log in') }}
                </x-button>
            </div>
        </form>
    </x-auth-card>
</x-guest-layout>

Справочник HTML

Справочник HTML

    Оглавление:
Раздел 1.   Введение: теги, HTML документ.
Раздел 2.   Выделение текста — физические и логические стили.
Раздел 3.   Форматирование текста.
Раздел 4.   Ссылки.
Раздел 5.   Рисунки.
Раздел 6.   Цвет фона и текста. Шрифты.
Раздел 7.   Таблицы.
Раздел 8.   Списки.
Раздел 9.   Последовательности, комментарии.
Раздел 10. Изображения-карты (image maps).
Раздел 11. Звук на сайте.
Раздел 12. Каскадные таблицы стилей.
Раздел 13. Фреймы.

Раздел 6

Тема: цвет фона и текста, шрифты.

Цвет фона определяется значением аттрибута BGCOLOR — шестнадцатиричным числом вида #hhhhhh, где первая пара символов является значением насыщенности для красного цвета, вторая — для зеленого, и третья пара — для синего цвета. #00 — минимальная насыщенность, #FF — максимальная насыщенность цвета. Можно использовать текстовое определение цвета: BLUE, RED, FUCHSIA и т.п — одно из шестнадцати допустимых значений.

  BLACK#000000   GREEN#008000
  SILVER#C0C0C0   LIME#00FF00
  GRAY#808080   OLIVE#808000
  WHITE#FFFFFF   YELLOW#FFFF00
  MAROON#800000   NAVY#000080
  RED#FF0000   BLUE#0000FF
  PURPLE#800080   TEAL#008080
  FUCHSIA#FF00FF   AQUA#00FFFF
Например, чтобы сделать цвет фона страницы фиолетовым, можно написать
<BODY BGCOLOR=»#FF00FF»>, а можно и так:
<BODY BGCOLOR=»PURPLE»>.

Строго говоря, текстовых значений цвета значительно больше (SCARLET, VIOLET, BROWN и т.д. и т.п.), но не все браузеры их «знают». Применимы также значения LIGHTGREEN (светлозеленый), LIGHTYELLOW (светложелтый) и LIGHTBLUE (светлосиний).

Фоном может служить и какое-то изображение. При этом заданная область заполняется множественными копиями этого изображения (как кафельной плиткой). Для этого используется аттрибут BACKGROUND с указанием пути к рисунку. Например
<BODY BACKGROUND=»graph/picture.gif»>

Аттрибуты BGCOLOR и BACKGROUND могут находиться внутри метки <BODY>, тогда цвет фона устанавливается для всей страницы, либо в метках <TABLE>, <TR> и <TD> — устанавливается цвет фона во всей таблице, ее строке и ее ячейке соответсвенно (таблицы — тема следующего урока).

Для изменения цвета и размера шрифта используется метка <FONT></FONT>. Ее аттрибуты:

  • COLOR=»#hhhhhh» — цвет текста;
  • SIZE=»n» — размер шрифта;
  • FACE=»имя_шрифта» — смена шрифта, где имя_шрифта может быть arial, verdana, helvetica, sans-serif и другие.
Пример использования метки <FONT>:

<FONT SIZE=»5″ COLOR=»RED» FACE=»SANS-SERIF»>Крупный шрифт красного цвета без засечек</FONT>
В окне браузера увидите Крупный шрифт красного цвета без засечек

Для размещения текста в верхнем или нижнем регистре используются соответственно метки <SUP>..</SUP> (superscript) и <SUB>..</SUB> (subscript). Пример их использования:

в тексте: в окне браузера:
E=mc<SUP>2</SUP> E=mc2
2<SUP>x+2</SUP>=64 2x+2=64
H<SUB>2</SUB>O H2O

Тэг BODY может содержать аттрибут TEXT, который определяет цвет шрифта для всей страницы. Значение аттрибута — шестнадцатиричное значение цвета или текстовое. <BODY TEXT=»NAVY»> устанавливает цвет шрифта на странице темно-синим.

Также в тэге BODY можно определить каким цветом на вашей странице будут выделяться ссылки. Это аттрибуты:

  • LINK=»#hhhhhh» — определяет цвет ссылки, по умолчанию голубой;
  • ALINK=»#hhhhhh» — определяет цвет ссылки на документ, просмотренный ранее, по умолчанию фиолетовый;
  • VLINK=»#hhhhhh» — опрделяет цвет активизированной ссылки, т.е. когда на нее наведен курсор и нажата кнопка мыши, по умолчанию красный.
следующий раздел

Иордания: тестер цвета веб-фона



Иордания: тестер цвета веб-фона

Перейти на главную страницу сайта.
Перейти на главную страницу сайта.

Содержимое создано: 24.11.2012
Последнее изменение файла:
Создано содержание: 121124
Последнее изменение файла:

Эта страница изменит цвет фона на любой, который вы укажете.

Если ваш компьютер не поддерживает JavaScript, вам следует нажать здесь, чтобы получить более медленную версию CGI-Perl. Он работает только тогда, когда вы онлайн, но не требует JavaScript.

Просто введите название цвета или любой шестнадцатеричный код цвета от 000000 до FFFFFF и нажмите «Показать», чтобы увидеть результат.

Предостережения:

  • Не все названия цветов понимаются веб-браузерами. У меня «оливковый» работает, а «персиковый» дает, например, ярко-зеленый. Как только вы определитесь с цветом, если он действительно важен для вас, лучше использовать числовой код, чем название цвета.
  • Различные браузеры могут по-разному интерпретировать цвета, особенно именованные цвета. Попробуйте проверить последнюю страницу на нескольких компьютерах. По моему опыту, цвета Macintosh обычно светлее, чем цвета ПК.
  • В общем, цвета, обозначаемые комбинациями кодов 00, 33, 66, 99, CC и FF, являются «безопасными» для использования с достаточно схожими результатами практически на всех машинах. (Например, FFCC99 будет неопределенно персикового цвета как на ПК, так и на Macintosh.) К сожалению, названия цветов редко соответствуют «безопасной» палитре.
  • Цвета могут отличаться в зависимости от системных настроек пользователя.
  • Для цветовых кодов (или имен) не имеет значения, используете ли вы верхний или нижний регистр.
  • Помните, что текст и ссылки должны быть разборчивы на выбранном вами фоне, поэтому не забудьте выбрать для них цвета. Используются те же цветовые коды.

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

черный=000000 флот = 000080 зеленый=008000 бирюзовый = 008080 синий=0000FF лайм=00FF00 Аква=00FFFF серый=808080 темно-бордовый=800000

фиолетовый=800080 оливковое=808000 коричневый=A52A2A серебро=C0C0C0 красный=FF0000 желтый = FFFF00 оранжевый = FFA500 белый = FFFFFF

В следующей таблице перечислены большинство цветов, которые можно назвать по имени, а не по номеру. Обратите внимание, что пурпурный и фуксия относятся к одному и тому же цвету.
В следующей таблице перечислены большинство цветов, которые можно назвать по имени, а не по номеру. Обратите внимание, что пурпурный и фуксия относятся к одному и тому же цвету.
бирюзовый 00FFFF
бирюзовый 00FFFF		 черный 000000
черный 000000		 синий 0000FF
синий 0000FF		 коричневый* A52A2A
коричневый* A52A2A
коралловый* FF7F50
коралловый* FF7F50		 малиновый* DC143C
малиновый* DC143C		 голубой* 00FFFF
голубой* 00FFFF		 темно-синий* 00008B
темно-синий* 00008B
лесная зелень* 228B22
лесная зелень* 228B22		 золото* FFD700
золото* FFD700		 серый 808080
серый 808080		 зеленый 008000
зеленый 008000
слоновая кость* FFFFF0
слоновая кость* FFFFF0		 лаванда* E6E6FA
лаванда* E6E6FA		 светло-желтый* FFFFE0
светло-желтый* FFFFE0		 лайм 00FF00
лайм 00FF00
пурпурный* FF00FF
пурпурный* FF00FF		 темно-бордовый 800000
темно-бордовый 800000		 темно-синий 000080
темно-синий 000080		 оливковое 808000
оливковое 808000
оранжевый* FFA500
оранжевый* FFA500		 фиолетовый 800080
фиолетовый 800080		 красный FF0000
красный FF0000		 серебро C0C0C0
серебро C0C0C0
небесно-голубой* 87CEEB
небесно-голубой* 87CEEB		 бирюзовый 008080
бирюзовый 008080		 бирюзовый* 40E0D0
бирюзовый* 40E0D0		 белый FFFFFF
белый FFFFFF
желтый FFFF00
желтый FFFF00		 *-Названия цветов со звездочками неофициальны, но все же работают.
*-Названия цветов со звездочками неофициальны, но все же работают.

Цвет фона страницы прокрутки – Tempertemper

Перейти к основному содержанию

Опубликовано 24 января 2021 г. в CSS

В Safari и Chrome (а также в любом браузере на основе Chromium, таком как Edge и Opera) есть замечательная функция: если вы прокручиваете страницу вверх или вниз и нажимаете вверх или вниз, происходит удовлетворительный скачок, а не резкая остановка.

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

Я хотел бы сказать вам, что это было так просто:

 html { 
 цвет фона: синий; 
 } 
 тело { 
 цвет фона: белый; 
 }

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

В Safari (в macOS и iOS), если элемент имеет фоновый цвет , это то, что видно при отскоке, поэтому в приведенном выше примере background-color из является как холстом , так и его фоном. Синий фон игнорируется. Раздражающий.

Итак, нам нужен отдельный элемент холста, который находится поверх и :

И CSS будет выглядеть так:

 html { 
 background -цвет синий; 
 } 
 .canvas { 
 цвет фона: белый; 
 }

Теперь, с небольшим дополнительным HTML, любой, кто использует Chrome или Safari, увидит белую страницу со скрытым синим фоном, который выглядывает, когда они прокручивают страницу вверх или вниз.

Подписаться

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

  • Обзор опубликованных мною статей
  • Горячий выбор из моих архивов
  • Несколько интересных сообщений из Интернета

Адрес электронной почты

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

Еще сообщения

Вот еще пара постов для вашего удовольствия. Если этого недостаточно, взгляните на полный список.

  1. Не вмешивайтесь в пользовательский ввод

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *