zoukankan      html  css  js  c++  java
  • link标签和css引入方式

    link常见用途

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

    <head>
    <link rel="stylesheet" type="text/css" href="theme.css" />
    </head>

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

    <link rel="icon" href="favicon.ico" type="image/x-icon" /> 

    css引入方式

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

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            p{

          background-color:red;   color: black

          } </style> <style> div{background-color:chartreuse; color: coral} </style> </head>

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

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

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

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

    <p style="background-color: aquamarine;color: black">Jay</p>
    

    3、使用@import导入

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            @import "css3.css";
        </style>
        
    </head>

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

    4、使用link引入外部链接

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link href="css3.css" type="text/css" rel="stylesheet">
    </head>

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

    样式引入优先级

    行内样式优先级最高

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

      <link rel="stylesheet" type="text/css" href="css/style.css" /> 
        <!--内部部样式表-->
      <style type="text/css">
        p{
          color: blue;
        }
      </style>

     选择器优先级

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

    权重的计算

    内联样式和!import  权值1000

    ID选择器 权值100

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

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

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

    继承的样式没有权值

  • 相关阅读:
    集合已修改 ;可能无法执行枚举操作 Dictionary
    net 操作XML小结
    SQL SERVER 2000写存储过程出现列名无效的解决方法
    .net如何获得前一页面的地址
    SQL字符串叠加问题
    c# 保留2位小数
    如何取字符字段的第几个字符,如取name的左边从2位起的2个字符?
    SQL语句复制表的方法
    给页面加上Loading效果最简单实用的办法
    为XMl文档添加子节点,依据淘宝
  • 原文地址:https://www.cnblogs.com/yaoyao-sun/p/10371996.html
Copyright © 2011-2022 走看看