如何使用 CSS 来分离内容和设计？

在本文中，我们将学习如何使用 CSS 将内容与设计分开，并通过示例了解实现它的不同方法。

吸引人的网页可能包含一些文本内容、图像、视频、音频、幻灯片等，其结构设计合理，有助于增强页面的整体交互性。为此，我们可以利用不同的样式属性来制作交互式网页。这些样式属性可以通过 3 种不同的方式实现，即

• 通过指定元素内的属性。
• 通过使用

示例 1：在本示例中，我们将使用 标签来利用外部样式表中的 CSS 属性。

HTML

  

    
     

  

    

        
GeeksforGeeks
        

            Separating the Content and Design using CSS
        
        

            A Computer Science portal for geeks. 
            It contains well written, well thought 
            and well explained computer science and 
            programming articles. 
        
    

style.css：在这个文件中，我们为不同的元素实现了各种 CSS 属性。

样式.css

body {
  background-color: lightgrey;
}
h1 {
  color: green;
}
h3 {
  color: indigo;
}
h1,
h3{
  text-align: center;
  font-family: sans-serif;
}
.content {
  text-align: justify;
  font-family: sans-serif;
  margin-left: 35px;
  margin-right: 35px;
  color: Tomato;
}

说明：在index.html文件中，我们只是简单地添加了标题和段落。

标签有一个.content类，它实现了一些 CSS 属性。此样式表是一个 CSS 文件，它具有单独的内容，并以扩展名“.css”保存。

输出：

使用导入语句：

示例 2：在下面的示例中，显示偶数和奇数。 CSS 在单独的文件中提供给他们。偶数以不同的颜色显示，奇数则无关紧要。

HTML

  

    

  

    
Even and Odd Numbers
    

        
1
    
    

        
2
    
    

        
3
    
    

        
4
    
    

        
5
    
    

    

    

        
6
    
    

        
7
    
    

        
8
    
    

        
9
    
    

        
10
    

SeparationContent.css：在这个文件中，我们将为奇数和偶数元素提供样式。

分离内容.css

.odd {
  color: white;
  background-color: lightblue;
  display: inline;
}
  
p {
  font-weight: bold;
  
  padding: 5%;
  display: inline;
}
  
.even {
  color: white;
  background-color: lightseagreen;
  display: inline;
}

说明：在主 HTML 文件中，我们只是在

下添加了整数。默认情况下，

为黑色。现在，为了给它们提供一些样式，我们将样式表链接到它。此样式表是一个 CSS 文件，它具有单独的内容，并以扩展名“.css”保存。在这个 CSS 文件中，我们为每个类定义了文本颜色和背景颜色，即奇数和偶数。提供了一些填充并将显示更改为内联。

输出：