• CSS3的chapter3


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

    1. 字体样式(font,color, text-decoration ,text-shadow)
    2. 元素样式(width,height,margin,padding,opacity,盒子模型)
    3. 边框样式(border , border-radius , box-shadow)
    4. 段落样式( line-height , text-align , text-indent , letter-spacing )
    5. 背景样式( background , background-size )
    6. 列表样式( list-style)
    7. 变形样式 (transform)
    8. 过渡动画 (transition)
    9. 自定义动画(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 : url(字体文件在服务器上的相对或绝对路径)  format(字体类型); 
        }

      元素样式:

      • 宽度和高度——width,height
        p {
             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 { 
            300px; 
            height:100px; 
            border-style:solid; 
            border-1px; 
            border-color:#FF0000; 
        }
        div {
            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: url(test.png) 10px; 
        }



         

  • 相关阅读:
    vim cheat
    latex base
    latex font
    lstings
    使用React 如何设计 模板自定义的框架
    react hooks 的更进一步适应性使用
    IDEA反编译jar包源码
    Redis Lua实战
    Spring AOP拦截并打印controller层请求日志
    漏桶算法和令牌桶算法的区别
  • 原文地址:https://www.cnblogs.com/jiangwenjie/p/5760224.html
Copyright © 2020-2023  润新知