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

继承的样式没有权值

link标签和css引入方式的更多相关文章

  1. css引入方式和基本样式

    css的三种引入方式: 1.内嵌:直接在标签中添加style属性 格式:<标签名 style="样式1:样式值1:样式2=样式值2:"></标签名> 2.内 ...

  2. css引入方式

    1.<style>          body{}    </style> 2.写在一个单独的文件里面保存即新建一个文件:xx.css; 注明该文件的位置<link re ...

  3. CSS引入方式的区别详解

    在web前端开发中,CSS是一种用来表现HTML或XML等文件样式的语言.很多处于web前端初学阶段的朋友,很多人都不知道CSS引入方式存在三种方法,css引入方式分别为标签内联书写.页面头部书写.外 ...

  4. 关于CSS引入方式的详细见解

    关于CSS的发展史这里不做介绍.写博客的原因之一是想帮助那些与我一样喜欢纠结的初入前端的伙伴,希望自己写的帖子能对伙伴有些许帮助:原因之二这些帖子也算自己的一个知识的整理.现在还没有一定的顺序可循,但 ...

  5. 认识CSS中css引入方式、选择器、文本样式设置以及显示模式

    前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...

  6. 项目复习期总结3:CSS引入方式,凝视,命名规范,背景,行高,文本属性

    文件夹: 1.CSS凝视的书写 怎么写?优点? 2.CSS引入方式  各种的优缺点 3.选择器的写法与选择器的优先级 4.CSS命名规范 5.背景,行高 6.文本(text与font开头)等全部属性 ...

  7. css 基础 css引入方式

    color:red; //改变颜色 font-size:18px : //改变文字大小 background-color : blue; //设置背景颜色 width:100px ://设置宽度 he ...

  8. 【使用DIV+CSS重写网站首页案例】CSS引入方式

    CSS引入方式(3种) *就近原则:行内引入可以覆盖内部引入的效果 内部引入: *  type="text/css"      为默认可以不写 例子: <!DOCTYPE h ...

  9. python全栈开发 * 表格标签 表单标签 css 引入方式 * 180807

    html部分 一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...

随机推荐

  1. Django(十三)ajax 与 Bootstrap,font-awesome

    prop,attr,val font-awesome:字体,图标库 对话框添加,删除,修改: 添加: Ajax偷偷向后台发请求: 1. 下载引入jQuery 2. $.ajax({ url: '/ad ...

  2. PHP的SQL语句优化

    (转)仅供自己学习,特此转发 普遍遇到的慢SQL有以下三种: 1.未走索引 2.where条件里包含子查询,多表联查 3.查询大量数据 解决 一.索引:SQL中的高速公路 但凡优化SQL,首先要看的就 ...

  3. vcf文件去除非变异的基因型(use GATK exclude nonvariant in vcf format,0|0,0/0)

    对于某些特殊vcf,想去除没有变异的基因型(主要形式为0|0或者0/0),则需要用到GATK的--excludeNonVariants参数,命令行如下: java -Xmx8g -jar Genome ...

  4. 第十五节、韦伯局部描述符(WLD,附源码)

    纹理作为一种重要的视觉线索,是图像中普遍存在而又难以描述的特征,图像的纹理特征一般是指图像上地物重复排列造成的灰度值有规则的分布.纹理特征的关键在于纹理特征的提取方法.目前,用于纹理特征提取的方法有很 ...

  5. 第三十节,目标检测算法之Fast R-CNN算法详解

    Girshick, Ross. “Fast r-cnn.” Proceedings of the IEEE International Conference on Computer Vision. 2 ...

  6. C++ vector的运用

    C++ vector 用法(#include <vector>) 标准库Vector类型 使用需要的头文件: #include <vector> Vector:Vector 是 ...

  7. wz

    chcp 437 monkeyrunner wz.py wz.bat #coding=utf-8 from com.android.monkeyrunner import MonkeyDevice,M ...

  8. HDFS-Shell 文件操作

    一.操作 HDFS 上的文件有两个命令可以用 hdfs dfs:只能操作 HDFS 上的文件 Usage: hdfs [--config confdir] [--loglevel loglevel] ...

  9. C语言复习---矩形法求定积分函数

    一:分析: 大一学习积分的时候,我们学习过,可以通过矩形法来求定积分. 思路就是将积分区间划分成n等份,然后将这n等份近似看成矩形(或梯形),然后对所有的矩形(或梯形)的面积进行求和. 二:简单的例子 ...

  10. 【1】[leetcode-124] 二叉树中的最大路径和

    (没做出来,典型题目重要) 二叉树中的最大路径和(hard) 给定一个非空二叉树,返回其最大路径和. 本题中,路径被定义为一条从树中任意节点出发,达到任意节点的序列.该路径至少包含一个节点,且不一定经 ...