link标签和css引入方式 您所在的位置:网站首页 css能干嘛 link标签和css引入方式

link标签和css引入方式

2024-06-03 11:45| 来源: 网络整理| 查看: 265

link常见用途

标签最常见的用途是链接样式表,在 HTML 中, 标签没有结束标签,此元素只能存在于 head 部分,不过它可出现任何次数。

使用link引用网页收藏夹图标

 

css引入方式

1、内联css文件,在html文件的head部分,用style标签包裹

Title p{      background-color:red;   color: black      } div{background-color:chartreuse; color: coral}

最长见得就是访问量大的门户网站。或者访问量较大的企业网站的首页。

优点:速度 快,所有的CSS控制都是针对本页面标签的,没有多余的CSS命令;再者不用外链CSS文件,节省了请求开销。直接在HTML文档中读取样式。

缺点:改版麻烦些,单个页 面显得臃肿,CSS不能被其他HTML引用造成代码量相对较多,维护也麻烦些。

 

2、行内样式,在标签的属性里

Jay

 

3、使用@import导入

Title @import "css3.css";

@import有数量限制,且是先等网页加载完再引入样式,如果网页足够大,则可能出现闪烁,就是漫长的无样式网页加载之后,css突然出来。

 

4、使用link引入外部链接

Title

link是html加载前就引用,等dom树生成好后和样式表结合生成渲染树,浏览器再开始渲染页面,不会出现闪烁

样式引入优先级

行内样式优先级最高

内联样式,链接样式表,导入样式表,谁写在下面以谁为准。

p{ color: blue; }  选择器优先级

基础的优先级:ID选择器>类选择器>标签选择器

权重的计算

内联样式和!import  权值1000

ID选择器 权值100

类,伪类和属性选择器 权值10

类型(标签)选择器和伪元素选择器 权值1

通配符、子选择器、相邻选择器等 权值0000

继承的样式没有权值



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有