PHP笔记（CSS篇）

HTML常用于在网页中显示内容，当然，还可以是布局，但是比较不方便，所以，引进了CSS

CSS全称Cascading Style Sheets，中文名：层叠样式表

帮助文档：CSS.chm

作用:布局和美化网页

特点：

• 和HTML一样，是一种标记语言，可以由浏览器直接执行
• 大小写不敏感
• CSS文件是一个文本文件，后缀名为css
• 嵌套在HTML中使用

Css规则

• 语法
  • CSS定义由选择器（selector）、属性（PRoperty）及属性值（value）组成；
  • 格式：selector{property:value;}
  • 选择器包括
    • 类型选择器：
      • 定义：HTML标签
      • 使用：直接使用标签

定义　　　　　　　　　　　　　　　　　　　　　　　　　　使用

• • • class选择器：
      • 定义：标记名.类名 或 .类名
      • 使用：class="类名"
      • 标记名为html标签，“标记名.类名”表示只有使用该标签并class值为该类名时，才使用该选择器；
      • “.类名”表示只要class值为该类名，就会使用该选择器

定义　　　　　　　　　　　　　　　　　　　　　　　　使用

• • • id选择器：
      • 定义：标记名#id值 或 #id值
      • 使用：id="id值"
      • 标记名为html标签，“标记名#id值”表示使用该标签并id为该值时，才使用该选择器
      • “#id值”表示只要id为该值，就会使用该选择器
      • 同一页面id值是唯一的（是的，如果同一页面有两个相同的id，样式也能显示出来，但是这样有违逻辑，并且 将来使用js调用id时，会出现混乱）

定义　　　　　　　　　　　　　　　　　　　　　　　　使用

• • • 包含选择器：
      • 多种选择器的层次组合，选择器用空格隔开，各选择器由左到右，为包含关系
      • 定义：各选择器符组合，用空格隔开
      • 使用：各选择器嵌入使用
      • 层数不限，但建议不要太多，影响维护和SEO

定义　　　　　　　　　　　　　　　　　　　　　　使用

• • • 群组选择器：
      • 同时定义多个选择器为同一属性
      • 定义：各选择器组合，用","分隔开
      • 使用：各分隔符直接使用

定义　　　　　　　　　　　　　　　　　　　　使用

• • • 伪元素选择器：
      • 对html元素不同状态的一种定义方式
      • 定义：标签:伪元素
      • 使用：该标签的不同状态使用不同属性

定义　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　使用

• • 属性与属性值用":"分隔开，多个属性值用";"分隔

• 注释
  • 格式：/*.......*/
• 长度单位
  • 相对单位（常用）
    • px：像素
    • em：相对于当前对象内文本的字体尺寸
    • %：百分比
  • 绝对单位（不常用）
    • pt：点
    • cm：厘米
    • mm：毫米
• 颜色单位和URL值
  • 颜色：
    • #rrggbb
    • #rgb
    • rgb(x,x,x)（不常用，浏览器不兼容）
    • rgb(x%,x%,x%)（不常用，浏览器不兼容）
  • URL
    • 表示：url(address)

HTML中使用CSS的方式

• 内联样式表
  • 直接在标签中使用
  • 使用style属性，嵌入css键值对
  • 使用灵活，但失去了CSS的作用

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