📌  相关文章
📜  带有CSS的HTML

📅  最后修改于: 2020-11-01 11:29:54             🧑  作者: Mango

使用CSS的HTML样式

假设我们已经使用简单的HTML代码创建了我们的网页，并且我们想要一些能够以正确的格式显示我们的网页并吸引人的东西。因此，我们可以使用CSS(级联样式表)属性来设置网页样式。

CSS用于在由HTML元素组成的网页中应用样式。它描述了网页的外观。

CSS提供了各种样式属性，例如背景颜色，填充，边距，边框颜色等，以为网页设置样式。

CSS中的每个属性都有一个“名称/值”对，每个属性都用分号(;)分隔。

注意：在本章中，我们对CSS进行了概述。您将在我们的CSS教程中深入了解CSS的所有内容。

例：


      
Welcome to javaTpoint

      
This is a great website to learn technologies in very simple way.

在上面的示例中，我们使用了style属性为代码提供某种样式格式。

输出：

Welcome to javaTpoint



This is a great website to learn technologies in very simple way.






应用CSS的三种方法


要将CSS与HTML文档一起使用，有以下三种方法：


    

  • 内联CSS：使用HTML元素中的style属性定义CSS属性。
    • 

  • 内部或嵌入式CSS：使用部分中的
    
  
   
    Learning HTML with internal CSS
    
    
    This is a blue color paragraph
    
    
    This is a red color paragraph
    
    
    This is a green color paragraph
    
  





注意：在上面的示例中，我们使用了class属性，您将在下一章中学习它。


外部CSS：


外部CSS包含一个单独的CSS文件，该文件仅包含使用类名，ID名称，标签名等的样式代码。我们可以在HTML文件中使用以下样式，将该CSS文件包含在HTML文件中：标签。


如果我们有一个应用程序的多个HTML页面，并且使用相似的CSS，则可以使用外部CSS。


需要创建两个文件以应用外部CSS


    

  • 首先，创建HTML文件
    • 

  • 创建一个CSS文件并使用.css扩展名保存(此文件仅包含样式代码。)
    • 

  • 使用链接HTML文件中的CSS文件标记在HTML文档的标题部分。
    • 



例：







    
    
  
   
Learning HTML with External CSS

    
This is a blue color paragraph

    
This is a red color paragraph

    
This is a green color paragraph

  






CSS文件：





body{
             background-color:lavender;
    text-align: center;
    }
h2{
    font-style: italic;
      size: 30px;
      color: #f08080;
    }
   p{
  font-size: 20px;
     }

.blue{
color: blue;
    }
.red{
            color: red;
        }
    .green{
           color: green;
        }





常用的CSS属性：






Properties-name
Syntax
Description




background-color
background-color:red;
It defines the background color of that element.




color
color: lightgreen;
It defines the color of text of an element




padding
padding: 20px;
It defines the space between content and the border.




margin
margin: 30px; margin-left:
It creates space around an element.




font-family
font-family: cursive;
Font-family defines a font for a particular element.




Font-size
font-size: 50px;
Font-size defines a font size for a particular element.




text-align
text-align: left;
It is used to align the text in a selected position.