zoukankan      html  css  js  c++  java
  • css的用法

    Css(Cascading Style Sheets,层叠样式表)是一种页面美化方法,通过编辑Css的对象属性达到美化页面的效果。Css的操作基本单元为对象,使用CSS的感觉就像是使用C++/C中的函数,CSS对象就像是函数,通过定义,声明,调用来使用。

    CSS有三种选择器(对象定义和使用方式):标签选择器类别选择器ID选择器

    CSS有四种包含方法:行内式内嵌式链接式导入式

     

    标签选择器:

     定义:引用的样式对象名{标签属性:属性值;标签属性:属性值;…….}

           eg: h1,h2{text-align: center; color: red;}

     使用:<h1>……..</h1>

           <h2>……..</h2>

    类别选择器:

     定义:标签名.类名{标签属性:属性值;标签属性:属性值;…….}或者

           .类名{标签属性:属性值;标签属性:属性值;…….}

           eg: p.center{ text-align: center; }

               .right{ text-align: right; }

     使用:<p class=”center”>……..</p>

           <h1 class=”right”>……..</h1>

           (*区别:后一种格式表示 所有class属性值为该类名的标签都遵守该类所定义的样式)

        (eg: 定义了.right{text-align: right;},调用的时候,只要是通过class调用right的属性的标签,都可以表现出right的属性。<h2 class=”right”>…..</h2>; <p class=”right”>……      </p>;<span class=”right”>……</span>;等等标签都表现出右对齐的属性。 )

    ID选择器:

     定义:#id名称{标签属性:属性值;标签属性:属性值;…….}

           eg: #sample{font-family:宋体; don’t-size:60pt;}

     使用:<p id=sample>……</p>

     

    行内式:

     不需要定义选择器,利用style属性直接为元素设计样式

     eg: <p style=”color:#FF0000”>……</P>

    内嵌式:

     先定义选择器,将样式表定义在<head></head>之间。

             eg: 

    <html>
            <head>
    
               <title>xxxxxx</title>
    
                <style type=”text/css”>
    
                    p{color: #000FF;}
    
                    .info{font-size: 12px;}
    
                 </syle>
    
            </head>
     </html>

    链接式:

     定义的对象单独放在一个以.css为扩展名的文件里,在使用<link>标签链接到所需要的网页中,在<head></head>之间。

     eg: <link href=”xxx.css” type=”text/css” rel=”stylesheet”>

    导入式:

     与链接式方法类似,只是通过import的方法导入。

      eg: <style type=”text/css”>@import url(xxx.css);</style>

     

    CSS样式表的优先级:

     嵌入式样式表 > 内联式 > 外联式 > 浏览器默认

    16:28:52 2016-10-07

  • 相关阅读:
    GO开发[一]:golang语言初探
    Python带参数的装饰器
    Python函数篇
    19. logging模块
    18. json模块
    17. os模块
    16. sys模块
    15. random模块
    14. 模块-time模块
    29. java面向对象项目
  • 原文地址:https://www.cnblogs.com/StrayWolf/p/5936213.html
Copyright © 2011-2022 走看看