首页 > 其他分享 >编写css并在html中调用

编写css并在html中调用

时间:2023-08-23 23:13:08浏览次数:39  
标签:文件 调用 HTML html css rel 链接 CSS 属性

编写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文件,可以轻松地应用样式到整个网站或多个页面上。

 

标签:文件,调用,HTML,html,css,rel,链接,CSS,属性
From: https://www.cnblogs.com/sawyerhan/p/17653002.html

相关文章

  • 与.html相关的文件
    与.html相关的文件有HTML文件(.html或.htm)、CSS文件(.css)、JavaScript文件(.js)、图像文件(.jpg、.png、.gif等)、样式表文件(.scss、.less)、字体文件(.ttf、.otf、.woff等)、音频文件(.mp3、.wav)、视频文件(.mp4、.avi)、网页图标文件(.ico)等HTML文件HTML文件是一种文本文件,使用HTML(超文本标......
  • OS(二十三):接口之系统调用
    操作系统是用户与计算机硬件系统之间的接口。OS向用户提供了用户接口和程序接口两类接口。用户接口:操作系统为用户提供的用户与操作系统的接口。程序接口:操作系统向编程人员提供程序与操作系统的接口。1、系统调用程序接口是OS专门为各用户程序设置的,是用......
  • 微信小程序调用微信接口报40001
    背景小程序登录需要获取手机号,调用该接口发现接口报错并返回错误码40001。该错误码官方解释:获取access_token时AppSecret错误,或者access_token无效。请开发者认真比对AppSecret的正确性,或查看是否正在为恰当的公众号调用接口。排查发现reids里的token缓存并没有过期,后面......
  • 利用正则查找html代码中的ID值
    直接上代码:1stringrule="id='(?<value>.*?)'";2System.Text.RegularExpressions.Regexregex=newSystem.Text.RegularExpressions.Regex(rule);3//html代码4stringhtmlC......
  • div + css 详解
    第1页《Div+CSS布局大全》整理者:JesseZhao网站:送给我最爱的女朋友蜜蜜,希望她可以永远快乐幸福!!!《Div+CSS布局大全》第2页目录div+css布局入门..............................................................................................................
  • Java 获取Html标签中各属性值
    该方式适用于取任何标签的任何属性只要对应替换标签名和属性。publicstaticSet<String>getImgStr(StringhtmlStr){Set<String>pics=newHashSet<String>();Stringimg="";Patternp_image;Matcherm_image;StringregEx_img="<......
  • vs code 出现html js css 注释不正常
    vue地方使用了<!---->注释,这是正常的,但是css部分也是使用<!---->注释,css应该使用//或/**/注释,这里错了。多次检查扩展,发现是扩展的问题,卸载vue或vetur这些扩展即可。......
  • ios 调用系统应用的方法 应用间跳转的方法
    声明一个私有方法:#pragmamark-私有方法-(void)openUrl:(NSString*)urlStr{//注意url中包含协议名称,iOS根据协议确定调用哪个应用,例如发送邮件是“sms://”其中“//”可以省略写成“sms:”(其他协议也是如此)NSURL*url=[NSURLURLWithString:urlStr];UIApplica......
  • SAP ABAP 模式(Pattern)、模板的创建与调用
    1.代码模板2.模式(Pattern) 调用3.标准模式,一些内置固定格式代码的填充  ......
  • 13 CSS 的position属性
    13CSS的position属性就像photoshop中的图层功能会把一整张图片分层一个个图层一样,网页布局中的每一个元素也可以看成是一个个类似图层的层模型。层布局模型就是把网页中的每一个元素看成是一层一层的,然后通过定位属性position对元素进行定位摆放,最终实现网页的布局。定位属性p......