Question

无论出于何种原因，无法让我的浏览器或编辑器识别我为段落标记设置的样式。这是我的代码。非常感谢任何帮助：）

＆＃13;

/* COLORS */
$color1: #000000;
$color2: #111111;
$color3: #222222;
$color4: #333333;
$color5: #444444;
$color6: #555555;

/* BODY TEXT */
p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
}

/* H1-H6 */
h1 {
    font-size: 60px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    color: #000;
    letter-spacing: 0px;
}
h2 {
    font-size: 50px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    color: #000;
    letter-spacing: 0px;
}
h3 {
    font-size: 40px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    color: #000;
    letter-spacing: 0px;
}
h4 {
    font-size: 30px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    color: #000;
    letter-spacing: 0px;
}
h5 {
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 100;
    color: #000;
    letter-spacing: 0px;
}
h6 {
    font-size: 10px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 100;
    color: #000;
    letter-spacing: 0px;
}

＆＃13;

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<link href="styleguide_sample.css" rel="stylesheet" type="text/css" >
<title>Title of project goes here</title>
</head>
<body>
	<p>
	<strong>This is body text:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id malesuada felis. Sed efficitur scelerisque tortor, a ultricies tortor vestibulum non. Proin id nisi condimentum, ultrices tellus id, vehicula massa. Ut laoreet, purus at malesuada ornare, orci dui mattis elit, fermentum mollis dolor quam ut orci. Morbi consequat non nibh eget aliquam. Donec diam velit, volutpat ut ornare in, ultricies ac est. Aenean a ligula auctor, congue elit nec, fringilla eros. Mauris placerat ligula id neque fringilla, ut congue quam pellentesque. Aenean lacinia, velit ut fringilla tincidunt, tortor nisi faucibus quam, sed lobortis justo ex ac ipsum. Etiam et dolor eget metus ultrices tincidunt non ac erat. Integer non accumsan mi, sed consequat purus.  
	</p>
	<h1>
	This is Header 1
	</h1>
	<h2>
	This is Header 2
	</h2>
	<h3>
	This is Header 3
	</h3>
	<h4>
	This is Header 4
	</h4>
	<h5>
	This is Header 5
	</h5>
	<h6>
	This is Header 6
	</h6>
</body>
</html>

＆＃13;

我测试过这是firefox＆amp; Chrome，它似乎唯一可以工作的地方是Dreamweaver。我确定有一个简单的解决方案。我似乎无法确定它是什么。

ps：H1-H6标签似乎工作正常。唯一不起作用的是P标签的样式。

Answer 1

这可能是因为您的字体不支持给定的重量。如果您使用以下内容，则可以获得粗体文本。正常体重通常为400，粗体重通常为700.据我所知，不保证支撑其他体重。

p { 
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
}

Answer 2

p规则（#ffffff）中的颜色代码代表白色，因此您不会看到该文字，因为它是白色背景上的白色字母。

Answer 3

你的css开头似乎是你的颜色装饰：

/* COLORS */
$color1: #000000;
$color2: #111111;
$color3: #222222;
$color4: #333333;
$color5: #444444;
$color6: #555555;

正在弄乱样式表的其余部分。

如果您想在CSS中使用变量，请查看SASS或LESS。这些预处理器将常规css扩展为带有便利功能的变量和嵌套。

浏览器无法识别我的段落标记的样式

3 个答案: