zoukankan      html  css  js  c++  java
  • HTML引入CSS样式三种方法及优先级

    方法

        css的样式引用由3种方式。分别为内联定义、链入内部CSS和链入外部CSS。有一点注意,样式表放在不同的地方,产生作用的范围不同(以下会说明)。

    内联定义

       内联定义,即在对象的标记内使用对象的style属性定义适用的样式表属性,格式定义为 :<div style="内容"><div>,如下示例

    浏览器此时显示内容

    链入内部CSS

      CSS内链接是由<style></style>标记对放在<head></head>中,在<style>中有一个类型属性type,后面接test/css,表示CSS文本,语法格式如下:

      <style type="text/css">

       /*这里写CSS内容*/

     </style>

      示例如下:

      

    效果图如下:

    链接外部CSS

      css外链接是把CSS文件放在网页外面,通过链接<link>使CSS文件对本网页的样式有效,就相当于C语言的.h文件喽。

      <link>里面的属性有type、rel、href,其中type固定为text/css,rel(即样式表)固定为stylesheet,href自然指的就是css文件的地址了,语法格式为:

      <link type="text/css" rel="stylesheet"  href="css文件的存放地址">

      示例代码如下:

      

      web.css内容为

      

     效果如下

    三种样式范围及优先级

       简而言之吧,

       链接外部CSS:作用在引用该CSS文件的网页中。

       链接内部CSS:只作用在该CSS文件的网页中。

      内联定义:只作用在定义该样式的div层中,对其它层无效。

    三种样式优先级

      不知道以“优先级”这个词来形容是否合适,专业的如果看到莫怪。下面以代码效果说明:

      

      我在外部CSS文件内定义class的div1背景颜色为红色,内部CSS定义为黑色,内联定义为绿色,效果图如下:

      

     显示为绿色,好吧,内联定义优先级最高。

    然后我再把内联定义去掉,比较一下内部CSS和外部CSS的优先级,如下

     

    此时效果图如下:

     

    恩,就这样了,内部CSS次之,外部CSS优先级最低。重要的话说三遍,优先级:内联定义最高、内部CSS次之、外部CSS优先级最低。或许我提优先级的时候,很多人感觉想想也应该是这样。恩,我也这样想的,不过还是验证一下呗,大周末的也没事儿,斗地主也没豆子了。

    后语

      脑袋里还有些对div模糊的,想写,不过下节写background的知识。

    我们都是从菜鸟开始 决定我们成为什么样人的,不是我们的能力,而是我们的选择。
  • 相关阅读:
    springboot中filter的配置和顺序执行
    springboot整合fastdfs实现上传和下载
    移动端通过fiddler代理调试PC端代码
    react-native windows 环境搭建
    带你逐行阅读redux源码
    前端单页面拆分多个单页面
    Koa2学习(九)与mongoDB交互
    Koa2学习(八)使用session
    Koa2学习(七)使用cookie
    Koa2学习(六)使用koa-router
  • 原文地址:https://www.cnblogs.com/zhengyuan1314/p/7003657.html
Copyright © 2011-2022 走看看