Question

<div id="firstColumn" style="
    float: left; padding-right:5px; background-color:red;
">First Column</div>
<div id="SecondColumn" style="
    float: left; padding-right:5px; background-color: rgb(197, 117, 117);

">Second Column</div>
<div id="thirdColumn" style="
    float: left; padding-right:5px; background-color:blue;
">
Third Column

<div >
<div id="thirdLeftColumn" style="float:left; padding-right:5px; background-color:red;"> Third Left Column</div>
<div id="thirdRightColumn" style="float:left;background-color: rgb(168, 148, 148);">Third Right Column</div>
</div>
</div>

参见输出 JSFiddle

我想用CSS规则来做。我不想在这里使用内联样式。我怎样才能为此编写单独的样式表。

Answer 1

获取每个div id并在其前面添加#例如。 #firstColumn。

然后从每个div添加'style ='的内容并将其包装在{ CONTENT HERE }括号中。

像这样...

#firstColumn {
    float: left;
    padding-right:5px;
    background-color:red;
}

对所有不同的div ID执行此操作，并将其保存在扩展名为.CSS的文件中。

您可以使用类而不是ID将相同的样式应用于多个div。这样做与使用id一样，但使用以下方法。

.exampleClass {
    float:left;
    /* more attributes here */
}

并使用<link>标记链接到文档<head>中的文件。

例如。 <link rel="stylesheet" type="text/css" href="FILE_LOCATION">

Answer 2

在css中，您使用#来定位ID，并使用.来定位类。所以你有一个CSS文件：

#firstColumn {
  float: left; 
  padding-right:5px; 
  background-color:red;
}
#SecondColumn {
 float: left; 
 padding-right:5px; 
 background-color: rgb(197, 117, 117);
}

等。然后，您可以从元素中删除style标记，然后通过在<head>中添加类似内容将文档链接到该css文件...

<link href="/CSS/style.css" rel="stylesheet"/>

Answer 3

只需在您的html页面中添加Stylesheet，然后调用id或class，然后将内联CSS复制到CSS文件中：

    #firstColumn{
 float: left;
 padding-right:5px;
 background-color:red;

    }
    #SecondColumn{

 float: left;
 padding-right:5px;
 background-color: rgb(197, 117, 117);
    }
    #thirdColumn{
 float: left;
 padding-right:5px;
 background-color:blue;

    }
    #thirdLeftColumn{
 float:left;
 padding-right:5px;
 background-color:red;

    }
    #thirdRightColumn{
float:left;
background-color: rgb(168, 148, 148);

    }

JSfiddle here

Answer 4

你可以这样做：

#firstColumn, #SecondColumn, #thirdColumn, #thirdLeftColumn {
    float: left; 
    padding-right:5px;
}

#firstColumn, #thirdLeftColumn {
    background-color:red;
}

#SecondColumn {
    background-color: rgb(197, 117, 117);
}

#thirdColumn {
    background-color:blue;
}

#thirdRightColumn {
    float:left;
    background-color: rgb(168, 148, 148);
}

<强> Updated Fiddle

1）使用#定位id

2）使用.来定位课程

3）如果它们具有相同的样式，您可以将它们组合在一起并使用,分隔选择器

4）例如，将此代码放在名为styles.css的外部css文件中，在HTML文件中，您可以使用以下命令链接到此外部css：

<link href="styles.css" rel="stylesheet"/>

在这种情况下，HTML文件与此外部CSS文件是同一目录。

如果没有内联样式，我该怎么做呢？

4 个答案: