Question

我正在学习网络开发的在线课程，在我们被分配到的当前项目中，我们应该编写CSS代码来改变某些单词，背景等的外观。写完所有CSS代码后，它在我的实际网站上没有改变任何一件事。关于我可能做错什么的任何想法？

这是我的HTML

<html>
<head>
  <title>Selectors Exercise</title>
  <link rel="stylesheet" type="text/css" href="selectors.css">

</head>
<body>
  <h1>Selectors Exercise</h1>

<p>PARAGRAPH NOT INSIDE A DIV</p>

<div>
  <p class="hello">I am a paragraph with a class</p>
  <p id="special">I am a paragraph with an ID</p>

  <h2>I am an awesome h2</h2>


  <p>Roof party yr hella synth, Wes Anderson narwhal four dollar toast before they sold out retro lo-fi. Austin iPhone pop-up farm-to-table, PBR&B McSweeney's ennui messenger bag distillery before they sold out Portland wolf fanny pack YOLO. Locavore slow-carb trust fund farm-to-table. Pinterest gastropub lo-fi, McSweeney's trust fund VHS shabby chic ugh Austin twee. Messenger bag banjo lumbersexual, whatever 3 wolf moon XOXO normcore. Pug fanny pack 3 wolf moon, typewriter organic chia mustache scenester seitan shabby chic Blue Bottle salvia ugh iPhone. Fanny pack Williamsburg direct trade, cold-pressed disrupt flannel listicle health goth asymmetrical freegan mixtape street art pour-over whatever.</p>

</div>

<div>
  <h2>Things I need to do</h2>

  <ul>
    <li>Walk Dog <input type="checkbox" checked> </li>
    <li>Feed Dog <input type="checkbox" checked> </li>
    <li>Wash Dog <input type="checkbox"></li>
  </ul>
</div>

<div>
  <h2>I am another awesome h2</h2>

  <p>Cardigan Tumblr mlkshk, fap tilde 3 wolf moon Portland. Heirloom health goth taxidermy blog lo-fi selfies, post-ironic master cleanse fingerstache normcore. Kickstarter plaid twee, bespoke single-origin coffee sustainable lo-fi vinyl Pinterest pork belly <em>cronut skateboard</em> 3 wolf moon. Normcore single-origin coffee salvia, bespoke Austin swag Godard before they sold out kogi disrupt locavore. Lumbersexual Shoreditch Vice, artisan American Apparel master cleanse yr salvia vegan. Bespoke letterpress heirloom kale chips deep v four loko. Lomo sustainable put a bird on it trust fund post-ironic</p>

  <p>I'm the second paragraph inside this div!</p>
</div>

<p>PARAGRAPH NOT INSIDE A DIV</p>


<div>
  <h2>A less awesome h2</h2>

  <p>Roof party yr hella synth, Wes Anderson narwhal four dollar toast before they sold out retro lo-fi. Austin iPhone pop-up farm-to-table, PBR&B McSweeney's ennui messenger bag distillery before they sold out Portland wolf fanny pack YOLO. Locavore slow-carb trust fund farm-to-table. Pinterest gastropub lo-fi, McSweeney's trust fund VHS shabby chic ugh Austin twee. Messenger bag banjo lumbersexual, whatever 3 wolf moon XOXO normcore. Pug fanny pack 3 wolf moon, typewriter organic chia mustache scenester seitan shabby chic Blue Bottle salvia ugh iPhone. Fanny pack Williamsburg direct trade, cold-pressed disrupt flannel listicle health goth asymmetrical freegan mixtape street art pour-over whatever</p>

  <p>One last paragraph here!</p>

  <a href="http://www.facebook.com">I am a link to facebook</a>
  <a href="http://www.facebook.com">I am another link to facebook</a>
  <br>

  <input type="text" name="name" /><label> Name</label><br/>
  <input type="password" name="password" /><label> Password</label><br/>

</div>

<p>PARAGRAPH NOT INSIDE A DIV</p>

</body>
</html>

这是我的CSS

/* Style the HTML elements according to the following instructions. 
DO NOT ALTER THE EXISTING HTML TO DO THIS.  WRITE ONLY CSS!*/

/* Give the <body> element a background of #bdc3c7*/
body {
    background-color: #bdc3c7;
}

/* Make the <h1> element #9b59b6*/
h1 {
    color: #9b59b6;
}

/* Make all <h2> elements orange */
h2 {
    color: orange;
}

/* Make all <li> elements blue(pick your own hexadecimal blue)*/ 
li {
    color: #010090;
}

/*Change the background on every paragraph to be yellow*/
p {
    background-color: yellow;
}

/*Make all inputs have a 3px red border*/
input {
    border: 3px solid red;
}

/* Give everything with the class 'hello' a white background*/
.hello {
    background: white;
}

/* Give the element with id 'special' a 2px solid blue border(pick your own rgb blue)*/
#special {
    border: 2px solid #900099;
}

/*Make all the <p>'s that are nested inside of divs 25px font(font-size: 25px)*/
p div {
    font: 25px;
}

/*Make only inputs with type 'text' have a gray background*/
input[type = "text"] {
    background: grey;
}

/* Give both <p>'s inside the 3rd <div> a pink background*/
p div(3) {
    background: pink;
}

/* Give the 2nd <p> inside the 3rd <div> a 5px white border*/
p(2) div(3){
    border: 5px solid white;
}

/* Make the <em> in the 3rd <div> element white and 20px font(font-size:20px)*/
em div(3){
    font: 20px white;
}

Answer 1

如果只编写文件名，则css文件必须与html文件位于同一路径中。如果已经是这种情况，您可以尝试使用<style>标记将您的css代码写入html文件，这样您就可以看到问题是链接还是您的broswer没有显示css。

Answer 2

当您构建一个基本网站时，所有文件都在同一文件夹中可能看起来并不麻烦，但是当您构建由许多页面组成的复杂网站时，将所有项目文件放在同一文件夹中将会导致更多工作从长远来看，你的项目将显得无组织。通常，在设置新的Web项目时，您应该具有以下项目文件夹结构或其中的一些变体： HTML CSS JS 资产 -assets /图片 -assets /图标

当您链接外部样式表（CSS / bootstrap等）时，使用内联样式是不好的做法，因为它会使您的HTML更长，更难以跟随其他人。链接css时，应确保在计算机的根目录中包含正确的路径。如下所示。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="../css/styles.css">
...

此示例将使用../退出（返回根目录）HTML文件夹，然后输入css文件夹并找到文件styles.css 在开发网站时，了解如何查找文件路径及其在计算机目录中的相对位置非常重要。我希望我能够很好地解释这个概念，让你明白。希望这有帮助！

CSS未出现在网站上 - 正确链接

2 个答案: