526互联

编写css并在html中调用

发布时间 2023-08-23 23:09:31作者: Sawyerhan

编写CSS文件的基本步骤如下：

  1. 创建一个新的文本文件，并将其保存为以.css为扩展名的文件，例如styles.css。

  2. 在CSS文件中编写样式规则。每个样式规则由选择器和一组属性-值对组成。选择器用于选择要应用样式的HTML元素，属性-值对定义了要应用的样式。例如：

    body {
  background-color: #f2f2f2;
  font-family: Arial, sans-serif;
  color: #333333;
}

h1 {
  font-size: 24px;
  color: #ff0000;
}

p {
  font-size: 16px;
  line-height: 1.5;
}

     

  1. 保存CSS文件。

HTML如何调用CSS文件的步骤如下：

  1. 在HTML文件的<head>标签中添加一个<link>标签，用于引入CSS文件。例如：
<link rel="stylesheet" href="styles.css">

其中，
href属性指定了CSS文件的路径。如果CSS文件与HTML文件位于同一目录下，可以直接使用文件名。如果CSS文件位于其他目录下，需要提供相对路径或绝对路径。
rel是<link>和<a>等元素的一个属性，用于定义当前元素与被链接资源之间的关系。

对于<link>元素，rel属性用于指定被链接资源的类型或作用。常见的rel属性值包括：

  • stylesheet：指定被链接资源是一个样式表文件。
  • icon：指定被链接资源是一个图标文件，通常用于网页标签栏和书签图标。
  • preconnect：指定被链接资源是一个预连接，用于提前建立与服务器的连接，以加快页面加载速度。
  • alternate：指定被链接资源是一个替代版本，例如替代语言的页面或替代媒体的资源。

对于<a>元素，rel属性用于指定被链接资源与当前页面的关系。常见的rel属性值包括：

  • nofollow：指定被链接资源不应被搜索引擎追踪和索引。
  • noopener：指定被链接资源在新窗口打开时不应继承原窗口的window.opener属性，以增加安全性。
  • noreferrer：指定被链接资源在新窗口打开时不应发送Referer头部信息，以增加隐私性。

rel属性的具体取值和含义可以根据需要进行扩展和定义，但需要遵循HTML规范和浏览器的支持。

  1. 保存HTML文件。

  2. 在浏览器中打开HTML文件，即可看到HTML页面应用了CSS文件中定义的样式。

通过将CSS样式规则保存在独立的CSS文件中，可以实现样式和内容的分离，提高代码的可维护性和可重用性。同时，通过在HTML文件中引入CSS文件，可以轻松地应用样式到整个网站或多个页面上。