<分区>
<分区>
我正在参加一个学习网络开发的在线类(class)，在我们分配到的当前元素中，我们应该编写 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;
}
最佳答案
当您构建一个将所有文件都放在同一个文件夹中的基本网站时，这似乎并不麻烦，但是当您构建由许多页面组成的复杂网站时，将所有元素文件都放在同一个文件夹中会导致更多工作从长远来看，您的元素将显得杂乱无章。通常，在设置新的 Web 元素时，您应该具有以下元素文件夹结构或它的一些变体: 网页格式 CSS js Assets - Assets /图像 - Assets /图标
当您链接外部样式表(CSS/bootstrap 等)时，使用内联样式是一种不好的做法，因为它会使您的 HTML 变得更长，并且其他人更难理解。链接 css 时，您应该确保在计算机的根目录中包含正确的路径。如下所示。
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="../css/styles.css">
...
这个例子会使用../退出(回到根目录)HTML文件夹，然后进入css文件夹，找到文件styles.css 在开发网站时，了解如何找到文件的路径及其在计算机目录中的相对位置非常重要。我希望我对这个概念的解释足够让你理解。希望这对您有所帮助!
关于html - CSS 未出现在网站上 - 链接正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38711895/