我在Firefox中打开页面时未应用Css。但它确实可以在谷歌浏览器中使用。以下是详细信息：
HTML：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" href="Style.css" rel="stylesheet">
</head>
<body>
<div id="content">
<p>
Lorem ipsum dolor sit amet, dolorem fierent vim ea. Duo no discere
voluptatum. Eum eu adhuc appareat, dolores imperdiet sea ea. Pri ut
cetero consectetuer, ad populo sensibus ius. Nominavi persecuti pro ad,
bonorum imperdiet moderatius cu cum, tollit tritani numquam ex qui.
</p>
</div>
</body>
</html>
外部CSS：Style.css
#content{
width:300px;
height:500px;
background:#e3e3e3;
border:1px solid #666;
margin-top:40px
}
#content p{
padding:20px;
}
答案 0 :(得分：0)
只需在CSS周围添加样式标记：
<style>
#content{
width:300px;
height:500px;
background:#e3e3e3;
border:1px solid #666;
margin-top:40px
}
#content p{
padding:20px;
}
</style>
答案 1 :(得分：0)
<script type="text/javascript">
//Initialise the canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
///Put the canvas dimesnions into variables for later use
var W = 500;
var H = 500;
//Create an array so that we can pop out particles
var particles = [];
for(var i = 0; i < 2; i++)
{
//This will add a particle to the array
particles.push(new create_particle());
}
//This creates a unique(ish) particle each time its called
function create_particle()
{
//Random position on the canvas
this.x = Math.random()*W;
this.y = Math.random()*H;
//this is the code to stop the ball getting 'stuck' at the edges, which happens a lot
if (this.x < 35) {
this.x = this.x+35
}
if (this.x > W - 50) {
this.x = this.x-35
}
if (this.y < 35) {
this.y = this.y+35
}
if (this.y > H - 50) {
this.y = this.y-35
}
//Add random velocity to each particle
this.vx = Math.random()*20-10;
this.vy = Math.random()*20-10;
//Random size
this.radius = Math.random()*20+20;
}
//change the color to green and change some text on the page
function gogreen(elmnt,clr)
{
elmnt.style.color = clr;
document.getElementById("demo").innerHTML = "OK you clicked a ball";
}
// this draws the particles
function draw()
{
//Paint the canvas black each draw
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(0, 0, 0, .3)";
ctx.fillRect(0, 0, W, H);
ctx.globalCompositeOperation = "lighter";
//Draw the particles from the array now
for(var t = 0; t < particles.length; t++)
{
var p = particles[t];
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(p.x, p.y, p.radius, Math.PI*2, false);
ctx.fill();
//Apply the movement
p.x += p.vx;
p.y += p.vy;
//Add onclick event here
p.onclick="gogreen(this, 'red')";
//Bounce if the ball hits the edges
if(p.x < p.radius) p.vx *= -1;
if(p.y < p.radius) p.vy *= -1;
if(p.x > W-p.radius) p.vx *= -1;
if(p.y > H-p.radius) p.vy *= -1;
}
}
//Starts the draw and sets the refresh rate
setInterval(draw, 33);
</script>
标记应该用于将HTML页面链接到单独的CSS样式表。您无法将CSS插入link标记。为此，只需使用link标记：
style答案 2 :(得分：-4)
如果您只是使用内联css，请使用<style>标记，如下所示：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title></title>
<style>
#content{
width:300px;
height:500px;
background:#e3e3e3;
border:1px solid #666;
margin-top:40px
}
#content p{
padding:20px;
}
</style>
<style id="web-developer-edit-css-styles-0" class="web-developer-edit-css-styles" xml:base="/C:/Users/user1.Data/Desktop/CssNoobToNinja/CssNoobToNinja/">
</head>
<body>
<div id="content">
<p> Lorem ipsum dolor sit amet, dolorem fierent vim ea. Duo no discere voluptatum. Eum eu adhuc appareat, dolores imperdiet sea ea. Pri ut cetero consectetuer, ad populo sensibus ius. Nominavi persecuti pro ad, bonorum imperdiet moderatius cu cum, tollit tritani numquam ex qui. </p>
</div>
</body>
</html>
编辑：巨大的屁屁，放<script>代替<style>现在修复了