В css для header, а он не изменяется. Можете указать на ошибки?
Код для header и всё что с ним связано не работает, можете указать на ошибки?
HTML
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css"> <body> <!-- Подключение собственного файла css --> <link rel="stylesheet" href="css/style.css"> <!--Подключение гугл фонтс--> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300&display=swap" rel="stylesheet"> </head> <body> <header class="container-fluid"></header> <div class ="container"></div> <div class="row"></div> <div class="col-6"></div> <h1>TEST</h1> </div> </div> <nav> <ul> <li><a href="#"><i class="las la-home"></i>Домой</a></li> <li><a href="#"><i class="las la-hotel"></i>Забронировать</a> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script> </body> </html> |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css"> <body> <!-- Подключение собственного файла css --> <link rel="stylesheet" href="css/style.css"> <!--Подключение гугл фонтс--> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300&display=swap" rel="stylesheet"> </head> <body> <header class="container-fluid"></header> <div class ="container"></div> <div class="row"></div> <div class="col-6"></div> <h1>TEST</h1> </div> </div> <nav> <ul> <li><a href="#"><i class="las la-home"></i>Домой</a></li> <li><a href="#"><i class="las la-hotel"></i>Забронировать</a> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script> </body> </html>
CSS
a { font-family : 'Roboto', sans-serif; } html, h1, h2, h3, h4, h5, h6 { color : darkred; } a:hover { color : aqua; } header { background-color : lightcyan; } header h1 { margin-top : 10px; display : inline-block; border-top : 2px solid; border-bottom : 2px solid; line-height : 1; } body { background-color : bisque; } a { text-decoration : none; border-radius : 10px; color : black; box-shadow : 0 -2px 0 darkred inset; } header ul { margin : 0; padding : 0; list-style : none; } header ul li { float : left; } |
a { font-family : 'Roboto', sans-serif; } html, h1, h2, h3, h4, h5, h6 { color : darkred; } a:hover { color : aqua; } header { background-color : lightcyan; } header h1 { margin-top : 10px; display : inline-block; border-top : 2px solid; border-bottom : 2px solid; line-height : 1; } body { background-color : bisque; } a { text-decoration : none; border-radius : 10px; color : black; box-shadow : 0 -2px 0 darkred inset; } header ul { margin : 0; padding : 0; list-style : none; } header ul li { float : left; }
Дополнительно:
Ваш код применяется.
Но размер хедера 0. Потому что он пустой.
Как только в нем что-то появится, вы увидите и фон.
p.s. в современном мире сетки верстают флексами и гридами, а флоаты используют исключительно по назначению: для обтекания одного элемента другими.
Ответы:
header имеет высоту 0 и ширину 0, поэтому его не видно.
и в нем нет никаких объектов.
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css"> <!-- Подключение собственного файла css --> <link rel="stylesheet" href="css/style.css"> <!--Подключение гугл фонтс--> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300&display=swap" rel="stylesheet"> </head> <body> <header class="container-fluid"> <div class ="container"></div> <div class="row"></div> <div class="col-6"></div> <h1>TEST</h1> </header> <nav> <ul> <li><a href="#"><i class="las la-home"></i>Домой</a></li> <li><a href="#"><i class="las la-hotel"></i>Забронировать</a></li> </ul> </nav> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script> </body> </html> |
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css"> <!-- Подключение собственного файла css --> <link rel="stylesheet" href="css/style.css"> <!--Подключение гугл фонтс--> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300&display=swap" rel="stylesheet"> </head> <body> <header class="container-fluid"> <div class ="container"></div> <div class="row"></div> <div class="col-6"></div> <h1>TEST</h1> </header> <nav> <ul> <li><a href="#"><i class="las la-home"></i>Домой</a></li> <li><a href="#"><i class="las la-hotel"></i>Забронировать</a></li> </ul> </nav> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script> </body> </html>
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для начала, давайте уточним, что именно вы имеете в виду под "не изменяется". Если вы имеете в виду, что стили, указанные в css для header не отображаются на вашем сайте, то причиной этой проблемы может быть несколько.
1. Проверьте правильность пути к файлу стилей в вашем HTML-документе. Убедитесь, что путь указан правильно и файл стилей действительно существует.
2. Убедитесь, что ваши стили для header не переопределены другими стилями далее в CSS-файле. Порядок определения стилей имеет значение, так что если у вас есть другие стили, которые могут переопределять стили для header, это может быть причиной проблемы.
3. Проверьте, нет ли опечаток в вашем CSS-коде. Одна неправильно поставленная точка с запятой или скобка может привести к тому, что стили не будут применяться корректно.
4. Используйте инструменты разработчика в браузере, чтобы проверить, какие стили применяются к вашему header элементу. Возможно, вы увидите, что какие-то другие стили переопределяют ваши стили.
Пример кода:
header { background-color: #333; color: #fff; padding: 10px; }
Если после выполнения всех этих шагов проблема остается, пожалуйста, предоставьте больше информации о вашем коде и возможно даже ссылку на ваш сайт, чтобы мы могли более точно определить причину проблемы и помочь вам ее решить.