css语法

什么是 CSS?

• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一

---

css如何引入

• 外部样式表(推荐)
  • 通过引入css
  • 通过 @import引入样式，放入 css 中

• 内部样式表
  • 将 CSS 放在页面的
    • 内嵌样式(不推荐)

    CSS 很 
    
    

    ---

    css语法

    selector{
        property1:value;
        property2:value;
        ....
    }
    选择器
    属性声明 = 属性名:属性值
    注释  /*  */
    
    

    ---

    浏览器私有属性

    • chrome safari
      • -weikit -
    • firefox
      • -moz-
    • IE
      • -ms-
    • opera
      • -o-

    为了兼容不同的浏览器,我们需要用到这些私有属性

    .pic{
        -weikit-transform:rotate(45deg);
        -moz-transform:rotate(45deg);
        -ms-transform:rotate(45deg);
        -o-transform:rotate(45deg);
        transform:rotate(45deg);
    }
    

    ---

    属性值语法

    例:
    margin:[||auto]{1,4}
    基本元素      组合符号             数量符号
    

    组合符号

    1. 组合符号 - 空格
    • <'font-size'> <'font-family'>空格隔开的两个基本属性
      • 必须出现,顺序不能错
      • 合法值: 12px arial
      • 不合法值: 2em 或者 arial 14px
    2. 组合符号 - &&
    • && &&连接的基本属性
      • 必须出现但顺序没有关系
      • 合法值:green 2px 或者 10px red
    3. 组合符号 - ||
    • underline || overline || line-through || bink
      • 至少出现一个,顺序无关
      • 合法值: underline 或者 overline underline
    4. 组合符号 - |
    • | transparent
      • 只能出现一个
      • 合法值 orange 或者 transparent
    5. 组合符号 - []
    • bold [ thin || ]
      • 主要是分组的作用, []里可以看做一个整体,再和外面属性计算
      • 合法值: bold thin 或者 bold 2em

    数量符号

    1. 数量符号 - 无
    • • 基本元素只能出现一次
      • 合法值:1px
    2. 数量符号 - +
    • [,]+
      • +加号可以出现一次或者多次
      • 合法值:#fff , red或者blue, green 50%,gray
    3. 数量符号 - ?
    • insert?&&
      • ?可以出现也可以不出现
      • 合法值:red 或者insert blue
    4. 数量符号 - {}
    • {2,4}
      • 最少出现几次,最多出现几次,上例说最少出现2次,最多4次
    5. 数量符号 - *
    • [.]*
      • *表示可以出现0次,1次或者多次
    6. 数量符号 - #
    • #
      • 出现一次或多次,中间用逗号隔开
      • 合法值: 2s,4s

    属性值例子

    padding-top:|
      padding-top:1px;
      padding-top:1em 5%;  (错)
    border-width:[ |thick|medium|thin]{1,4} 
      border-width:2px;
      border-width:2px small;   (错)
    box-shadow:[inset? &&[{2,4}&&?]]#|none
      box-shadow:3px 3px rgb(50%,50%,50%),red 0 0 4px inset; 
      box-shadow:inset 2px 4px,2px blue;    (错)
    

    ---

    @规则语法

    • @ 标识符 xxx;
    • @ 标识符 xxx {};
    1. @media 做一些响应式布局,媒体查询条件
    2. @keyframes描述css动画的中间步骤
    3. @font-face引入外部字体
    4. @charset
    5. @import
    6. @support
    7. @document

    ---

    参考:

    css语法