1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
      <output id="hzk7v"></output>
    2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
    3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

      关于CSS引入方式的详细见解小结

        发布时间£º2019-02-25 15:31:32   作者£ºXLNZ   我要评论

      这篇文章主要介绍了关于CSS引入方式的详细见解小结的相关资料£¬小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧

      关于CSS的发展史这里不做介绍¡£写博客的原因之一是想帮助那些与我一样?#19981;?#32416;结的初入前端的伙伴£¬希望自己写的帖子能对伙伴有些许帮助£»原因之二这些帖子也算自己的一个知识的整理¡£现在还没有一定的顺序可循£¬但从CSS开始£¬尽量写的有顺序可循¡£

      1.CSS初始

      概念£ºCSS称之为层叠样式表或级联样式表¡£样式定义如何显示HTML元素¡£样式通常存储在样式表?#23567;?/p>

      作用£ºCSS以HTML为基础£¬提供了丰富的功能£¬而?#19968;?#21487;以针对不同的浏览器设置不同的样式¡£CSS主要用于设置HTML页面中的文本内容£¨字体¡¢大小¡¢对齐方式等£©¡¢?#35745;?#30340;外形£¨宽高¡¢边框样式¡¢边距等£©以及版面的布局和外观显示样式¡£

      2.CSS语法

      CSS语法由两个主要的部分构成£º选择器£¬以及一条或多条声明¡£每条声明由一个属性和一个属性值组成¡£

      简单来说一个样式的语法是由三部分构成£º选择器¡¢属性和属性值¡£

      例如£º

      选择器£º选择器会告诉浏览器该样式将作用于页面中哪些对象£¬而这些对象可以是某个标签¡¢所有网页对象¡¢指定Class或ID值等¡£浏览器在解析这个样式时£¬根据选择器来渲染对象的显示鲜果¡£也就是说选择器通常是你想要改变样式的HTML元素£¬选择器就是用一种方式把你想要设置样式的那一个标签选?#23567;?#25226;这个标签选中了£¬你才能给这个标签设置CSS样式¡£

      声明£º声明可以是一条或者多条£¬这些声明会告诉浏览器如何去渲染选择器指定的对象¡£声明由属性和属性值组成£¬并用分号来标识一个声明的结束£¬在一个样式中£¬最后一个声明可以省略分号£¬所有的声明被放置在一对大括号内£¬这个大括号跟在选择器的后面¡£

      知道了CSS是做什么的了£¬也知道了CSS的语法由几部分组成£¬那么问题来了£¬如何使用CSS呢£¬CSS样式书写在什么位置呢£¿接下来要说的就是CSS的书写位置¡£

      3.CSS的引入方式

      在HTML中引入CSS样式的方式有3种£¬分别为内联样式表¡¢内部样式表¡¢外部样式表¡£

      3.1内联样式表

      内联样式表也称之为?#24515;?#26679;式表¡¢行间样式表¡£内联样式表是把CSS代码和HTML代码放在同一个文件?#23567;?#22914;果要使用内联样式£¬需要在相关的标签内使用样式£¨style£©属性¡£Style属性可以包含任何CSS属性¡£

      语法£º<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ">内容</标签名>

      例如£º

      <!DOCTYPE html>
      <html>
          <head>
              <title>内联样式表</title>
          </head>
          <body>
              <h1 style="color:red;">我是内联样式表£¬也可以称我为?#24515;?#26679;式表¡¢行间样式表</h1>
          </body>
      </html>

      从上面的代码可以看出£¬我们给<h1>标签添加了style属性£¬而给style属性设置的CSS属性是color属性£¬属性值是red£¬显示效果如下£º

      内联样式表方便操作£¬也很容易理解¡£ ?#23548;?#19978;任何HTML标签?#21152;?#26377;style属性£¬用来设置内联式 ¡£使用内联式需要注意的点如下£º

      (1).style其实就是标签的一个属性£»

      (2).样式属性和属性值中间使用";"£¬也就是英文状态下的分号£»

      (3).多组属性值之间用英文状态下的分号“;”隔开£»

      (4).内联式只能控制当前的标签和以及嵌套在其中的子标签£¬容?#33258;?#25104;代码冗余¡£

      内联式是在单个标签内定义的¡£对于网站来说£¬冗余代码很多£¬而且由于冗余代码多£¬?#30475;?#25913;动CSS样式?#23478;?#21040;具体的标签内修改£¬这样使得网站的维护性也非常差¡£而且£¬内联式没有实现样式和结构相分离¡£

      3.2.内部样式表

      内部样式表也称之为内嵌样式表£¬是将CSS代码集中写在HTML文档的head头部标签中£¬并且用style标签定义¡£

      语法£º

      <!DOCTYPE html>
      <html>
      <head>
          <title>内部样式表</title>
          <style>
              选择器{
                  属性1:属性值1;
                  属性2:属性值2;
              }
          </style>
      </head>
      <body>
      </body>
      </html>

      例如£º

      <!DOCTYPE html>
      <html>
      <head>
          <title>内部样式表</title>
          <style>
              p{
                  color:pink;
              }
          </style>
      </head>
      <body>
          <p>我是内部样式表£¬也?#24515;?#23884;式样式表</p>
      
      </body>
      </html>

      从上面代码中可以看出£¬给p标签使用的是内部样式表£¬添加了字体颜色是pink£¬显示效果如下£º

      需要?#24471;?#30340;是内部样式表中£¬style标签有个type属性£¬其值为text/css£¬即£ºtype="text/css"£¬在html5中可以省略¡£使用内部样式表的缺点有两点£º第一点就是内部样式表只能控制当前的页面£»第二点就是内部样式表没有实现结构与样式分离¡£

      3.3.外部样式表

      外部样式表又称之为链入式或者外链式¡£所谓外部样式表就是把CSS代码和HTML代码都单独放在不同文件中£¬然后在HTML文档中使用link标签或者@import来引用CSS样式表¡£外部样式表的文件扩展名是.css£¬且文件中不能包含任何html标签¡£

      外部样式表的引入分为两种情况£º

      第一种情况是放置于head标签内的link标签?#23567;?#35821;法为£º<head><link rel="stylesheet" type="text/css" href="1.css"></head>

      例如£º

      <!DOCTYPE html> 
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <title></title>
          <!--在HTML页面中引用文件名为index的css文件-->
          <link href="index.css" rel="stylesheet" type="text/css" />
      </head>
      <body>
          <div></div>
      </body>
      </html>

      第二种情况是放置于head标签内的style标签中或者直接写入样式表?#23567;?#35821;法为£º

      <style>
          @import 1.css;
          @import '1.css';
          @import "1.css";
          @import url(1.css);
          @import url('1.css);
          @import url("1.css");¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡
      </style>

      注意£º上面的语法中就“1.css”写了6?#20013;?#24335;£¬也就是说使用@import命令导入外部样式表的书写方式有6种¡£

      例如£º

      <!DOCTYPE html> 
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <title></title>
         <style>
              @import url("index.css");
          </style>
      </head>
      <body>
          <div></div>
      </body>
      </html>

      对于是使用link标签还是@import引入外部样式表£¬可能大家有些疑惑¡£link标签与@import的区别如下£º

      区别1£º从从属关系来说£¬link标签是一个html标签£¬除了可以加载CSS文件外还可以做很多其它的事情£¬比如定义RSS£¬定义rel连接属性等?#27426;ø@import是CSS提供的一种方式£¬只能用来加载CSS文件¡£

      区别2£º从加载顺序来说£¬页面加载时£¬link标签引入的CSS文件被同时加载?#27426;ø@import引入的CSS将在页面加载完毕后被加载¡£

      区别3£º从兼容性来说£¬link标签是一个html标签£¬不存在兼容性问题?#27426;ø@import是 CSS2.1 提供的语法£¬ IE5之前的浏览器是不支持的¡£

      区别4£º从DOM可控性来说£¬当你使用JavaScript控制dom去改变样式的时候£¬只能使用link标签£¬无法使用@import的方式¡£

      区别5£º从权重来说£¬link引入的样式权重大于@import引入的样式¡££¨PS£º关于权重相关的知识这里不做详解£¬后面再做详细的解释£©

      以上就是本文的全部内容£¬希望对大家的学习有所帮助£¬也希望大家多多支持脚本之家¡£

      相关文章

      • 详解CSS文件的三种引入方式

        这篇文章主要介绍了详解CSS文件的三种引入方式的相关资料£¬CSS的引入方式共有三种?#30418;心?#26679;式¡¢内部样式表¡¢外部样式表¡£具有一定的参考价值£¬?#34892;?#36259;的小伙伴们可以参?#23478;?#19979;
        2018-09-27
      • reset.css引入以及1px边框问题的解决方法

        这篇文章主要给大家介绍了关于reset.css引入以及1px边框问题的解决方法£¬文中通过?#32416;?#20195;码介绍的非常详细£¬对大家的学习或者工作具有一定的参考学习价值£¬需要的朋友们下面
        2018-07-10
      • 详解如何在css中引入自定义字体(font-face)

        本篇文章主要介绍了详解如何在css中引入自定义字体(font-face)£¬能将自定义的字体添加到网页中£¬小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考¡£一起跟随小编过来看
        2018-05-17
      • 引入css的四种方式总结(分享)

        下面小编就为大家分享一篇引入css的四种方式总结£¬具有很好的参考价值£¬希望对大家有所帮助¡£一起跟随小编过来看看吧
        2018-01-04
      • 网页引入css样式的几种方法

        本文介绍了网页引入css样式的几种方法£¬包括内联式样式表¡¢嵌入式样式表¡¢外链式¡¢导入式£¬大家参考使用吧
        2014-01-14
      • Css基本概念及其引入方式介绍

        在本文将为大家介绍下css的引入方式¡¢css的基本语法等等£¬新手朋友们可以参考下哈£¬希望对大家有所帮助
        2013-09-12
      • CSS学习之一 CSS样式引入方法

        CSS样式引入方法£¬一般情况下最好使用link加入远程样式£¬但不好的地方就是当网速慢的情况下£¬这种方法容?#36164;?#39029;面因为样式没有加载而变形£¬很多大网站首页都是直接写到页面
        2010-08-26
      • CSS学习之一 CSS样式的引入

        CSS样式的引入方法小结¡£
        2010-07-27

      最新评论

      3dÊÔ»úºÅÖвÊÍø

        1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
          <output id="hzk7v"></output>
        2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
        3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

            1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
              <output id="hzk7v"></output>
            2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
            3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>