Question

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

对于styles.css中的div，我有以下内容

services.AddTransient<IValidator<LoginViewModel>, LoginViewModelValidator>();

这是我的HTML

div header header-text
{
    top:25px;
    left:54px;
    font-size:30pt
    font-family: 'Roboto', sans-serif;
    font-weight: bold;    
}

是否有任何好的插件可以获得裸骨样式表设置。

Answer 1

<强>答案

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

div.header .header-text

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

.header .header-text

关于此主题的更多背景信息：

在上面的例子中： div是一个元素选择器＆amp; .header .header-text是类选择器。

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

ELEMENT - 它只是html元素标记名称，例如   div, span, body


只要知道你对此有什么用处   选择器将应用于该类型的所有元素（如果您不这样做）   有子选择器增加specificity）




CLASS - 它在哪里（您决定的任何名称）名称   预先加点


E.g。 .header-text，.myFancyClass




ID - 它在哪里（您决定的任何名称）名称   预先填写哈希


E.g。 #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来定位它。

然后，在{@ 1}}子元素中。因此，您需要一个空格，然后是类名（或任何子选择器），从而产生header-text的最终选择器组合/组。

如果您想更深入，请添加另一个空格和另一个子选择器。

想象上述内容：

div.header .header-text

请查看此CSS cheat sheet，了解您可以使用的其他选项，还可以阅读CSS specificity以了解所有这些选项。

Answer 2

您需要了解selectors。如果您想按类别选择项目，请将其设置。

.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

只需对类使用apply writ CSS，因此必须使用。（点）在html标签之前，而不是div和header类之间的空格：

div.header .header-text

Psd到html但样式不适用

3 个答案: