css三种定义和demo是什么

发表于前端技术学习版块 css,教程

CSS是一种用于网页排版和样式设计的语言。在CSS中，有三种不同的定义方式。分别是内联样式、内部样式和外部样式。下面将分别介绍这三种定义方式。1. 内联样式：内联样式是指在HTML标签中直接加入sty

CSS是一种用于网页排版和样式设计的语言。在CSS中，有三种不同的定义方式。分别是内联样式、内部样式和外部样式。下面将分别介绍这三种定义方式。

1. 内联样式：内联样式是指在HTML标签中直接加入style属性，并为属性赋值来实现定义样式。例如：

<p style="color: red">这是一段红色文字</p>

这里的style属性表示这个段落应该应用什么样式，而color: red则是要将文字颜色设置为红色。

2. 内部样式：内部样式是指在HTML文档头部的<head>标签内定义样式，再通过HTML标签的class或id属性来应用样式。例如：

<head>
  <style>
    .myclass {
      font-size: 18px;
      color: blue;
    }
  </style>
</head>

<p class="myclass">这是一个应用了.myclass样式的段落</p>

这里我们定义了一个名为.myclass的样式，包括了字体大小和颜色两个属性。在HTML中，我们在<p>标签中使用了class="myclass"属性来应用这个样式。

3. 外部样式：外部样式是指将CSS样式定义在一个独立的.css文件中，并在HTML文件中引用这个文件。例如：

// main.css
.myclass {
  font-size: 18px;
  color: blue;
}

// index.html
<head>
  <link rel="stylesheet" href="main.css">
</head>

<p class="myclass">这是一个应用了.myclass样式的段落</p>

这里我们把样式规则存放在名为main.css的外部文件中。然后在HTML文件中通过<link>标签将这个文件引用进来。最后再在HTML中使用class属性应用这个样式。

CSS在网页设计中非常常用，不论是内联还是内部、外部样式都会大量使用。下面是一些样例代码展示各种样式定义方式的具体作用：

内联样式

<p style="color: green; font-weight: bold;">这是一段内联样式的文字</p>

内部样式

<head>
  <style>
    .mystyle {
      background-color: #f4f4f4;
      padding: 10px;
    }
  </style>
</head>

<div class="mystyle">
  <p>这是一个内部定义样式的</p>
  <p>这个段落也应用了相同的样式</p>
</div>

外部样式

// main.css
.mystyle {
  background-color: #f4f4f4;
  padding: 10px;
}

// index.html
<head>
  <link rel="stylesheet" href="main.css">
</head>

<div class="mystyle">
  <p>这是一个外部定义样式的</p>
  <p>这个段落也应用了相同的样式</p>
</div>

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。