CSS样式简介

作者: 我的梦想之路 | 来源:发表于2016-07-11 22:31 被阅读122次

    CSS:层叠样式表,用来控制HTML标签样式

    CSS的编写格式是键值对形式的

    如:color:red(冒号左边是属性名,冒号右边是属性值)
    1>CSS的3中书写格式
    行内样式:(内嵌样式)直接在标签style属性中书写
    <body style="color:red;">

    <!--设置背景颜色-->
    <body style="background-color: #b3d4fc;">   
     <!--行内样式-->
    </body>
    
    设置背景颜色
    <body>    
    <!--行内样式--> 
     <div style="font-size: 30px; color:red; background-color: #b3d4fc">糖糖</div>   
     <p style="font-size: 24px; color:bisque; background-color: aqua">个人博客</p>
    </body>
    
    界面展示

    页内样式:在本网页的style标签中书写

    <html lang="en">
    <head>    
         <meta charset="UTF-8">   
         <title>页内样式</title>  
          <!--页内样式:符合统一样式的应用-->
          <style>       
           div{       
                 font-size: 30px;   
                 color: red;       
                 background-color: #b3d4fc;  
            }   
          
           p{           
                 font-size: 24px;   
                 color:rebeccapurple;  
                  background-color: red;   
           }    
          </style>
    </head>
    <body>   
             <div>糖糖</div>   
             <p>个人博客</p>
    </body>
    </html>
    
    界面展示

    外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用

    新建一个文件:index.css(固定名称),新建的时候你是找不到css后缀的,选择第一个新建file然后自己写上css后缀就可以了
    div{    
          color: darkred;    
          /*字体样式*/   
           font-family: "Apple Braille"; 
           font-size: 30px;
      }
    
    p{    
            color: #b3d4fc;  
            font-size: 24px;
     }
    
    
    需要用到的地方运用外部样式进行引用
    <html lang="en">
    <head>   
           <meta charset="UTF-8"> 
           <title>外部样式</title>  
           <link rel="stylesheet" href="dist/css/index.css">
    </head>
    <body>    
        <div>111111111111111111</div>    
        <p>2222222222222222222</p>
    </body>
    </html>
    
    新建文件 界面效果

    CSS样式后两者运用最多,页内样式就像我们在本类中写一个方法,本类调用,而外部样式就像是我们在写一个类对象出来,通过导入头文件进行调用里面的方法,而行内样式就像是最傻的办法,在一个方法里面写的东西,虽然它傻,但是还是有特殊的地方要这样写,如果你想知道三个样式或者同时运用两个样式的结果。

    -----------无情的分隔线------------

    CSS样式遵循的规律:

    1.就近原则
    2.叠加原则

    也就是说它会先选择离它最近的,然后叠加相对于它选择的那个没有的效果

    相关文章

      网友评论

        本文标题:CSS样式简介

        本文链接:https://www.haomeiwen.com/subject/nxyjjttx.html