HTML и CSS не связаны между собой - PullRequest
Новая
       7

HTML и CSS не связаны между собой

0 голосов
/ 06 июня 2018

Я новичок в кодировании HTML, и до сих пор, я действительно зацепил!Но я столкнулся с большой проблемой ... мой HTML и CSS не связаны должным образом.Я взял несколько уроков, но изменил результат моего сайта.Есть ли вне кода средства связывания этих двух, помимо того, что они находятся в одном и том же файле, которые мне не хватает?Или я просто облажался?Вот мой код: 

@charset "UTF-8" backround-color: black;
 font-family: Verdana, Geneva, Arial, sans-sarif;
 padding:0px;
 margin:0px;undefined}undefined/* CSS Document */undefined/* The body tag style applies to all elements on the page*/undefined body {
 wrapper {
     width: 960px;
     height: 800px;
     margin-left: auto;
     margin-right: auto;
     background-color: #F25F29;
}
/* The column-1 ID style is floated right*/
 column-1 {
     float;
     right;
     width: 600px height: 600px;
     background: #55D9D9 
}
/* The column-2 ID style is floated left*/
 column-1 {
     float;
     left;
     width: 360px height: 600px;
     background: #F2B544 
}
/* Selector for tags seperated by commas applies the style to all tags*/
 h1,h2,h3,h4,h5,h6,p,li {
     margin-left: 15px;
}
 h1 {
     color: white;
     padding-top: 15px;
}
/* Selector for tags not written in commas applies in specific circumstances*/
 column-1 h1 {
     padding-top:5px;
     color: black;
     font-size:36px;
}
/* Advanced web design relies on class or ID style boxes*/
 .box {
     height: 100px;
     width: 100px;
     float: left;
     margin:15px;
     padding:25px;
     background: #A8D977;
     border:2px solid gray;
}
/* The following pseudo-code applies to the box class when in a hovered state*/
 .box:hover {
     background-color: #F2B544;
}
/* This clear class style terminates float*/
 .clear {
     clear: both;
}undefined}undefined header, footer ( background-color: F27830;undefined color: red;undefined padding-top:5px;undefined padding-bottom:5px;undefined
<!--The HTML5 doctype (document type) decloration is very simple-> <!DOCTYPE HTML> <!--All page content is inside the HTML element-->
<html>
<!--Head element content is not visable in a browser window-->

<head>
    <!--The UTF-8 character set supports all symbols and characters-->
    <meta charset="UTF-8">
    <title>HTML TEMPLATE</title>
    <!--The following link links to our style sheet file-->
    <link rel="stylesheet" type="text/css" href="style.css"> </head>
<!--Content visable in the browser's window is inside the html element-->

<body>
    <!--All our content is enclosed in the wrapper ID style-->
    <div id="wrapper">
        <h1>Heading One Content</h1>
        <!--column-2 ID style is floated left and used for navigation-->
        <div id="column-2">
            <h2>Links...</h2>
            <ul>
                <li>
                    <h3>
                        <a href="#">Link 1</a>
                    </h3>
                </li>
                <li>
                    <h3>
                        <a href="#">Link 2</a>
                    </h3>
                </li>
                <li>
                    <h3>
                        <a href="#">Link 3</a>
                    </h3>
                </li>
            </ul>
            <!--column-1 ID style is floated right and used for content-->
        </div>
        <div id="coulmn-1">
            <h1>Right Coulmmn Heading Here </h1>
            <p> Right column content here </p>
            <div class="box">
                <p>Box Content</p>
            </div>
            <div class="box">
                <p>Box Content</p>
            </div>
            <div class="box">
                <p>Box Content</p>
            </div>
        </div>
        <!--The clear class style clears (removes) float-->
        <div class="clear"></div>
        <h4>Contact info here </h4>
    </div>
</body>

</html>

Ответы [ 4 ]

0 голосов
/ 06 июня 2018

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

@charset "UTF-8" backround-color: black; font-family: Verdana, Geneva, Arial, sans-sarif; padding:0px; margin:0px; } /* CSS Document */
  • После первого правила at @charset "UTF-8" нет точки с запятой ;.Браузер будет анализировать до тех пор, пока не встретит его, и увидит, что значение "UTF-8" backround-color: black не имеет смысла для @charset, поэтому игнорирует последнее
  • Тогда есть объявление font-family: Verdana, Geneva, Arial, sans-sarif; с без селектора selector { /* declaration(s) */ }так что игнорируется
  • то же самое с отступом
  • , тогда я не могу сказать, что редактирование вашего сообщения показывает, что у встроенного инструмента из SO также есть проблемы с недействительным CSS, и он добавил много undefined (ненеожиданно)

Итак, первое правило отладки CSS - «убедитесь, что ваш CSS действителен».Предупреждения могут быть хорошими, но ошибок нет ( большинство ошибок, когда вы испытываете и знаете, что хотите)
/ mylife Однажды я забыл закрыть скобки (ei) sв background-image: url(/some/path/image.jpg; и браузер игнорировал 50 строк CSS до следующего )… потерянного времени + гнев, но урок ^^

➡️ CSS Validator

То же самое с HTML кстати HTML-валидатор

Подсветка синтаксиса в вашем редакторе тоже очень помогает.

Другие полезные советы ИМХО: убедитесь, что этот элемент имеетизмерение.Широкий или высокий 0px не поможет увидеть это.Добавить цвет фона, вы видите это?(добавь ко всему по сути).Почему существует вертикальное поле или горизонтальная полоса прокрутки или почему ⇒ * { outline: 1px dotted blue; }

0 голосов
/ 06 июня 2018

Я бы посоветовал вам проверить следующее и повторить попытку:

  • Вам необходимо включить CSS в ваш HTML.Убедитесь, что вы указали относительный путь вашего CSS-файла в «href».Ниже приведен код для связывания вашего CSS с HTML: <link rel="stylesheet" type="text/css" href="yourcssfilename.css">

  • Если вы уже связали CSS, возможно, файл CSS может быть недействительным, то есть с любым токеном типа ";,.: или / * "в середине файла может вызывать сбой загрузки свойств CSS.

0 голосов
/ 06 июня 2018

Я бы посоветовал вам использовать внешний css, создать style.css, важно присвоить имена вашим селекторам css. Я вижу, что вы использовали обертку, column-1 и т. Д., Используйте их как идентификаторы или классы, а при доступе используйте#wrapper,

.wrapper для классов

оболочка

Пример 

<div class="wrapper">

Вфайл вашего дела 

.wrapper{

css properties}

оболочка для id

0 голосов
/ 06 июня 2018

CSS можно добавить к элементам HTML тремя способами: 

Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file

https://www.w3schools.com/html/html_css.asp

Примеры

Чтобы установить свойство ширины div somelement в css равным 70пикселей, мы можем использовать 3 способа.

Встроенный 

<div id="someelement" style="width: 70px;">

Внутренний 

<head>
    <style>
        #someelement { width: 70px; }
    </style>
</head>

Внешний 

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

mystyle.css: 

#someelement { width: 70px; }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...