CSS了解

CSS

• 概念
• 层叠样式表(Cascade Style Sheets)
• 是一种用来表现 HTML(标准通用标记语言的一个应用)或 XML(标准通用标记语言的一个子集)等文件样式的计算机语言
• 能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统 HTML 的表现而言,CSS 能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言

基本语法

• 创建CSS样式的三种形式
  
  • 内联样式
    
    • 内联样式就是将样式定义在具体 html 元素的 style 属性中
  • 内部样式表
    
    • 通过在 html 页面内容开辟一段属于 css 的代码区域,通常做法为在head标签中嵌套style标签,在style中通过选择器的方式调用指定的元素并设置相关 CSS
  • 外联样式表
    
    • 将CSS内容写在一个单独的文件中，然后通过link标签引入页面
• 样式重叠
  
  • 当设置了相同 css 属性样式时,按照优先级进行覆盖，就近原则
  • 而不同属性样式会同时保留。
• 选择器
  
  • 通过选择器
    
    • *{。。。}
  • 类选择器
    
    • .class属性值{}
  • ID选择器
    
    • #id属性值{}
  • 元素选择器
    
    • 元素名称{}
• 选择器优先级
  
  • 选择器越精准越高级
  • 即通过此选择器能选出几个元素，越少越精准
• 组合选择器
  
  • 后代选择器
    
    • 以空格分割
    • 父选择器 子选择器{}
  • 子元素选择器
    
    • 选择第一代元素
    • 用大于号分割
    • 父选择器 > 子选择器{}
  • 相邻元素选择器
    
    • 选择同一父元素中，紧跟此元素后面的元素
    • 用+分割
    • 选择器1 + 选择器2{。。}
  • 普通兄弟选择器
    
    • 选择同一父元素中，在此元素后面所有的元素
    • 用～分割
    • 选择器1 ～ 选择器2
• 样式继承
  
  • 会继承父类的样式
  • 只能继承元素的外观类样式，颜色 字体等，布局样式不能继承。

• 伪类选择器

  • 设置超链接的四种状态