css3的chapter3 -凯发k8官方网

css的常用样式分为几大类:

字体样式（font，color, text-decoration ,text-shadow）

元素样式（width，height，margin，padding，opacity,盒子模型）

边框样式（border ， border-radius ， box-shadow）

段落样式( line-height , text-align , text-indent , letter-spacing )

背景样式( background , background-size )

列表样式（ list-style）

变形样式 （transform）

过渡动画 （transition）

自定义动画（animate）

 

　　字体样式：

• • 字体名称——font-family
    

    设置文字名称，可以使用多个名称，或者使用逗号
    分隔，浏览器则按照先后顺序依次使用可用字体。

    p { font-family:‘宋体'，'黑体', 'arial’ }
  • 字体大小——font-size
    p { font-size:14px;}

  • 字体加粗——font-weight

    p { font-weight:bold ||normal || bolder || lighter || length;}

  • 字体斜体——font-style

    p { font-style: italic || oblique || normal; }

  • 字体缩写

    p{font-style:italic;font-weight:bold;font-size:14px;line-height:22px;font-family:宋体; }p { font:italic bold 14px/22px 宋体}

  • 字体颜色——color

    p{color:#ff0000 || rgba(255,0,0,.5) || red || rgb(255,0,0);}

     

  • 文本装饰线条——text-decoration

    p{text-decoration : none || underline || blink || overline || line- through }

     

  • 文字阴影——text-shadow

    h-shadow	必需。水平阴影的位置。允许负值。
    v-shadow	必需。垂直阴影的位置。允许负值。
    blur	可选。模糊的距离。
    color	可选。阴影的颜色。

     

    h1{text-shadow: 2px 2px #ff0000; }

  • 嵌入字体——@font-face

    @font-face { font-family : 自定义字体名称; src : format(字体类型); }

     

 

　　元素样式：

• • 宽度和高度——width,height
    p {width:300px;height:200px; }

  • 外边距——margin

    margin-top	设置上边的外边距
    margin-bottom	设置下边的外边距
    margin-left	设置左边的外边距
    margin-right	设置右边的外边距

    div {
    margin:0 auto;
    　　 margin:2px 2px 2px 2px;
    magin:2px 5px 3px;
    magin:2px;
    }
  • 内边距——padding
    

    padding-top	设置上边的内边距
    padding-bottom	设置下边的内边距
    padding-left	设置左边的内边距
    padding-right	设置右边的内边距

    
    div { padding:0 auto;padding:2px 2px 2px 2px;padding:2px 5px 3px;padding:2px; }
  • 透明度——opacity
    number值为 0.0-1.0 之间的小数
    div{ opacity:.5; }
  • 盒子模型
    盒子模型就是指css布局中的每一个元素，在浏览器的解释中，都被当作一个盒状物。
    元素最终所占的宽度=左边框宽 左内边距 内容宽度 右内边距 右边框宽
    元素最终所占的高度=上边框宽 上内边距 内容高度 下内边距 下边框宽
    

　　边框样式：

• • 边框线——border-style
    div {
    　　border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset }
  • 边框宽度——border-width
    div{order-width : medium | thin | thick | length }
  • 边框颜色——border-color
    div{border-color:red; }
  • 缩写
    div { width:300px; height:100px; border-style:solid; border-width:1px; border-color:#ff0000; } div {width:300px; height:100px; border:1px solid #ff0000; }
  • 圆角效果——border-radius
    div{ border-radius:50% border-radius:10px;border-radius: 5px 4px 3px 2px; }
  • 边框图片——border-image
    div {border: 10px solid gray;border-image: 10px; }

 

 

转载于:https://www.cnblogs.com/jiangwenjie/p/5760224.html

总结

以上是凯发k8官方网为你收集整理的css3的chapter3的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。