的包装

Question

我是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>

Answer 1

我建议您验证以下内容并重试：

您需要在HTML中包含CSS。确保将CSS文件的相对路径放在“href”中。以下是将CSS链接到HTML的代码： <link rel="stylesheet" type="text/css" href="yourcssfilename.css">
如果您已经链接了CSS，则可能是CSS文件可能无效，即文件中间的任何标记如“;，。：或/ *”可能导致加载CSS属性失败。

Answer 2

可以通过3种方式将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

实施例

要将css中的div somelement的width属性设置为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; }

Answer 3

我建议你使用外部css，创建一个style.css，你的css选择器的命名很重要我可以看到你已经使用了包装器，第1列等等，将它们用作id或类，并在访问时使用#wrapper，

.wrapper for classes

的包装

示例

<div class="wrapper">

在您的案例档案中

.wrapper{

css属性 }

id

的包装器

Answer 4

你的CSS在开始时是无效的，然后没有选择器，然后可能还有其他东西......所以似乎所有/很多规则都被忽略了，因为当浏览器解析它们不是规则时！当浏览器看到并尝试解析时：

@charset "UTF-8" backround-color: black; font-family: Verdana, Geneva, Arial, sans-sarif; padding:0px; margin:0px; } /* CSS Document */

在第一个规则@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 我曾经忘记关闭background-image: url(/some/path/image.jpg;中的圆括号（ei），浏览器忽略了50行CSS，直到下一个) ...时间丢失+愤怒但是吸取了教训^^

➡️ CSS Validator

与HTML btw HTML validator

相同

编辑器中的语法突出显示也有很多帮助。

其他有用的提示恕我直言：验证此元素是否具有维度。 0px宽或高不会有助于看到它。添加背景颜色，你能看到吗？（实际上添加到一切）。为什么有垂直边距或水平滚动条或为什么⇒* { outline: 1px dotted blue; }

HTML和CSS没有链接/通信

4 个答案:

实施例

内联

内部

外部

的包装

id