Psd 到 html 但样式不适用

Question

我正在学习 psd 到 html 并从头开始，但我无法获得 div 来应用我的风格。

我的 div 在 styles.css

中有以下内容

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>

是否有任何好的插件可以得到基本风格 sheet 设置。

Answer 1

回答

你的selectors错了。正确的选择器是：

div.header .header-text

或者完全放弃第一个 div 元素选择器，只需要：

.header .header-text

有关该主题的更多背景信息：

在上面的例子中： div 是元素选择器 & .header .header-text 是 class 选择器。

您最有可能遇到（但不限于）的常见选择器类型是：

ELEMENT - Where it'll just the the html element tag name such as div, span, body

Just know that whatever you apply to this selector will apply to ALL elements of that type (if you don't have sub selectors increasing the specificity)

CLASS - Where it'll be a (any name you decide upon) name pre-pended with a dot

E.g. .header-text, .myFancyClass

ID - Where it'll be a (any name you decide upon) name pre-pended with a hash

E.g. #some-id, #foo

还有...

在 CSS 中，您的 classes/selectors 之间的间距很重要。因此在你的 html:

<div class="header">
   <div class="header-text">100+ Years Of Combiend Expierence</div>
        <div class="header-logo"></div> 
   </div>
</div>

header class 在顶部 div，因此您需要 div.header 才能定位它。
然后，在子元素中header-text。因此，您需要一个 space，然后是 class 名称（或任何子选择器），从而导致 div.header .header-text 的最终选择器 combo/group。
如果您想更深入，请添加另一个 space 和另一个子选择器。

可视化以上内容：

div.header                // same element
  .header-text            // child
      .header-logo        // child of child

----------------------------------------------

// same elem  |child       |child of child
   div.header .header-text .header-logo

看看这个 CSS cheat sheet to see what other options you have available at you disposal, also read up on CSS specificity 来理解这一切。

Answer 2

您需要阅读 selectors。如果你想 select class 一个项目，把它。

.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>

Answer 3

只需为 classes 使用写成 CSS 的应用程序，因此您必须使用 . （点）在 html 标签之前而不是 space 在 div 和 header 之间 class:

div.header .header-text

Psd 到 html 但样式不适用

Psd to html but style not applying

html

css

photoshop