zoukankan      html  css  js  c++  java
  • DHTML【6】--CSS

        从今天开始,我们迎来了一个新的面孔---CSS,二者这也是一个漂亮的面孔,为什么说这是一个漂亮的面孔呢?因为CSS是做特效的,可以美化HTML页面,我们看到淘宝网、网易首页等网站都非常好看,那都是一些专业的设计者用CSS美化出来的,那么这和程序员有什么关系呢?

     

        程序员的确不用深入的研究CSS,但是程序员要读得懂设计者的代码,并且能灵活运用CSS操作HTML页面,做到和设计者完美的配合,只有合作好了,网站项目才能趋近于完美,诸葛亮很牛,但是他一个上战场打仗也肯定失败,就是这个道理,要合作,很好的合作。

     

        我们已经知道CSS是美化HTML界面用的了,那么就让我进一步简单的介绍介绍CSS吧。

     

        下面我来介绍一下CSS的常用属性,大家也可以根据我分享的CSS帮助文档自己查阅相应属性,一般属性都很容易理解是什么意思,因为那些属性一般都是用英语拼出来的,如果包含两个单词以上就用”-“符号在中间分隔。

     

        1.文本属性

         font-size:字体大小,属性值即为像素,如28px。

         font-family:设置字体名称。

         font-style:设置字体样式。

         color:设置文本的颜色。值为”#”+6位十六进制的颜色值。前两位代表Red,后两位代表Blue,中间两位代表Green,值越大代表相应颜色越深。

         text-align:文本对齐方式。

     

        下面看一个具体例子:

         <table border="10px">

          <tr><td style="font-style:normal;font-size:36px">我是normal</td>       <td style="text-align:center;color:#FF0000;font-size:20px;font-family:Arial,Helvetica, sans-serif;font-style:italic">我是italic</td></tr>

          <tr><tdstyle="color:#0000ff;font-size:28px;text-align:right;font-style:inherit">我是inheri</td><tdstyle="color:#00FF00;font-size:42px;font-style:oblique">我是oblique</td></tr>

         </table>


        2.背景属性

         background-color:设置背景颜色。

         background-image:设置背景图像。

         background-repeat:设置一个指定的图像如何被重复。有四个可取值,repeat-x,repeat,no-repeat,repeat-y;具体是什么效果,你可以自己试试看,别人说千遍不如自己一试,没错,具体什么效果,试试就知道了。

     

        看下面的例子:

         <fontstyle="background-color:#FF0000">我在北京</font><hr/>

         <fontstyle="background-color:#00ff00">我在上海</font><hr/>

         <fontstyle="background-color:#0000ff">我在广州</font><hr/>


        3.方框属性




         具体例子自己体验吧,也可以查看帮助文档,看看效果。


         常用属性就介绍到这,下一节将介绍CSS的选择器,HTML与CSS结合的方式有很多,也有很多方便的地方,好的,下一节见。

  • 相关阅读:
    【bzoj1499】[NOI2005]瑰丽华尔兹 【单调队列优化dp】
    【poj3709】K-Anonymous Sequence 【斜率优化dp】
    【bzoj4566】[Haoi2016]找相同字符【后缀自动机】
    【Play】蜂鸣器音乐 校歌
    【poj2373】Dividing the Path【单调队列优化dp】
    【bzoj2010】SubString【后缀自动机+LCT】
    【bzoj1047】[HA蛤OI2007]理想的正方形【单调队列】
    【poj1743】Musical Theme【后缀数组】
    【bzoj4293】[PA2015]Siano【线段树】
    【bzoj4553】[Tjoi2016&Heoi2016]序列【树套树 树状数组套平衡树】
  • 原文地址:https://www.cnblogs.com/riskyer/p/3237134.html
Copyright © 2011-2022 走看看