Psd到html但样式不适用
[英]Psd to html but style not applying
问题描述
我正在学习psd到html并从头开始，但我不能得到一个div来应用我的风格。
我在styles.css中的div有以下内容
div header header-text
{
top:25px;
left:54px;
font-size:30pt
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
这是我的HTML
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="header">
<div class=header-text">100+ Years Of Combiend Expierence</div>
<div class="header-logo"></div>
</div>
</body>
</html>
是否有任何好的插件可以获得裸骨样式表设置。
3 个解决方案
解决方案1
3 已采纳 2017-11-12 11:56:51
回答
你的选择器错了。 正确的选择器将是：
div.header .header-text
或完全放弃第一个div元素选择器，只需：
.header .header-text
关于这个主题的更多背景：
在上面的例子中： div是一个元素选择器和.header .header-text是类选择器。
您最有可能遇到（但不限于）的常见选择器类型是：
ELEMENT- 它只是html元素标记名称，如div, span, body
- 只要知道你应用于这个选择器的任何内容将适用于该类型的所有元素（如果你没有增加特异性的子选择器）
CLASS- 它是一个（你决定的任何名字）名称预先加上一个点
- 例如
.header-text，.myFancyClass
ID- 它将是一个（您决定的任何名称）名称预先加上哈希值
- 例如
#some-id，#some-id#foo
也...
在CSS中，类/选择器之间的间距很重要。 因此在你的HTML中：
<div class="header">
<div class="header-text">100+ Years Of Combiend Expierence</div>
<div class="header-logo"></div>
</div>
</div>
-
header类位于顶部div，因此您需要div.header来定位它。 - 然后，子元素中的
header-text。 因此，您需要一个空格，然后是类名（或任何子选择器），从而产生div.header .header-text的最终选择器组合/组。 - 如果您想更深入，请添加另一个空间和另一个子选择器。
想象上面的：
div.header // same element
.header-text // child
.header-logo // child of child
----------------------------------------------
// same elem |child |child of child
div.header .header-text .header-logo
解决方案2
0 2017-11-12 12:01:58
您需要了解选择器 。 如果要按类选择项目，请将其放置。
.header-text{ top:25px; left:54px; font-size:30pt font-family: 'Roboto', sans-serif; font-weight: bold; color:red; }
<html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="css/style.css"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="header"> <div class=header-text>100+ Years Of Combiend Expierence</div> <div class="header-logo"></div> </div> </body> </html>
解决方案3
0 2017-11-12 12:02:34
只需对类使用apply write CSS，因此必须使用。 （点）在html标签之前，而不是div和header类之间的空格：
div.header .header-text
HTML img：应用样式
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.