Maison > interface Web > tutoriel HTML > CSS属性_html/css_WEB-ITnose

CSS属性_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:43:53
original
1118 Les gens l'ont consulté

  • CSS--属性
  • css属性键值对,property:value。主要是一下几类:
  • 文字相关属性:控制文字的字体,颜色,修饰,阴影等属性。
  • font-family  设置字体类型,如"Arial"、"宋体"等
    font-size 设置字体大小,常用度量单位pt和px
    font-style 设置字体风格,可选值normal, italic和oblique
    font-weigh 设置字体“重量”,常用值为normal和bold
    font 综合设置上述各种字体属性


  • 段落相关属性:控制整个段或者div的显示效果,包括文字的缩进,文字的对齐方式。
  • text-align  设置文本对齐方式,可选值left,center,right,justify
    text-indent 设置首行缩进,其值可采用绝对或相对的长度单位及百分比
    line-height 设置行高,其值可采用绝对或相对的长度单位及百分比
    letter-spacing  设置字符间距,其值可采用绝对或相对的长度单位
    color  设置文字颜色


  • 背景相关属性:控制背景色,背景图片等属性。
  • 表格相关属性:控制表格的外观。
  • 大小相关属性:控制目标对象的长,宽,最小长度,宽度等属性。
  • 在CSS样式表中,长度单位分为两类:

  • 位置相关属性:控制目标对象的位置,包括是否悬浮于页面上。这里有必要说下这类相关属性,其实这就是css的定位机制。
  • 文档流
    行框:按顺序水平摆放,放不下出现滚动条
    块框:按顺序垂直摆放,放不下出现滚动条
    1,相对定位,原来在文档流中的位置仍然保留,当前位置是相对于原始位置偏移后的结果。

    position: relative;#pos {position: relative;top: 5px;left: 55px;}
    Copier après la connexion
    2,绝对定位     position: absolute;
    从文档流中删除其原来的位置,就好像该元素从来都不存在一样。它当前所处的位置如果和其他元素重合则会遮盖住其他元素的显示,这就是 CSS 中层的概念。当前位置的定位有两种情况:
    ①父容器以及祖先容器未定位:相对于浏览器左上角
    #pos {position: absolute;top: 0px;left: 0px;}
    Copier après la connexion

    ②存在已定位的祖先元素:相对于最接近的已定位的祖先元素
    <div> </div><div> </div><div id="pos"><div id="test">测试</div></div><div> </div><div> </div>#pos {position: absolute;top: 30px;left: 100px;}#test {position: absolute;top: 5px;left: 20px;}
    Copier après la connexion
    3,浮动:脱离文档流,向上浮起一层,所有同一容器内的浮动元素根据 float 属性值按顺序进行排列,例如如果都是 float:left 则按从左向右的顺序排列。也会遮盖住文档流中未浮动的正常元素。

    <div> </div><div> </div><div> </div><div> </div><div> </div>div {border-style: solid;border-width: 1px;border-color: black;width: 50px;height: 50px;margin-right: 5px;float: left;}
    Copier après la connexion
  • 边框相关属性:设置目标对象的边框特征,包括颜色,粗细,以及使用的线型。
  • 轮廓相关属性:用于让目标对象周围产生一圈光晕,这圈光晕不会占用页面实际的物理布局。通过轮廓相关属性,可设置该光晕的颜色,线宽,线型。


  • 块元素和行元素:
  • HTML元素按其显示方式可分为“块级”(block)元素和“行内”(inline)元素两种:
    块级元素: 前后换行、可设定块大小(宽度和高度)、块的定位、块边框、块间距、块内和块边框间空隙等。如body,p,tr,td,div等。
    行内元素: 位于当前行中,前后不换行,不单独定位。如span元素。
      <p>一段文字中的<span style='="font-size:20pt;' color:red>一部分显示效果有所不同</span>,可以采用span元素来实现</p>
    Copier après la connexion

    可以使用CSS的display属性设置/修改元素的显示方式,其常用属性取值为:block、inline和none

    以上这些属性我们大概知道就OK了,具体的相关属性翻ipa文档就好了,如下图。


  • 特别介绍3个常用的属性
  • 1,display,用于设置目标对象是否以及如何显示。该属性的常用值是none,用于设置目标对象隐藏,一旦这个对象隐藏,其占用的页面空间也会释放。如果没有为该属性指定值,目标对象就会显示出来。这个还是比较常用的,一般的我们在页面上控制一部分页面的显示和隐藏,一般都是如下设置;
    显示:document.getElementById('id').style.display='' ;隐藏:document.getElementById('id').style.display='none' ;
    Copier après la connexion

    2,visibility,用于设置目标对象是否显示。与display不同的是,通过该属性隐藏某个html元素后,该元素占用的页面空间会被依然保留,不会被释放。该属性的2个常用值是:visible和hidden,分别用于控制对象的显示和隐藏。
    显示:document.getElementById('id').style.visibility='visible' ;隐藏:document.getElementById('id').style.visibility='hidden' ;
    Copier après la connexion

    3,cursor,用于设置目标对象上光标的形状。该属性常用的值auto(自动光标),crosshair(十字线光标),default(客户端光标),hand(手形光标),move(十字箭头光标),help(带问号的帮助光标),text(文本光标),wait(沙漏光标),url(自定义光标)。比如:

    <div style="cursor:wait;"></div>
    Copier après la connexion


    Étiquettes associées:
    source:php.cn
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal