• CSS简介
• • 注释
  • 语法结构
  • • 常用属性
  • 引入方式
• 选择器
• • 基本选择器
  • 组合选择器
  • 属性选择器
  • 伪类选择器
  • 伪元素选择器
• 选择器优先级

CSS(层叠样式表：Cascading Style Sheets)，就是给html语言写的前端加样式的，用于美化前端页面。

同前，学习一种语言其注释很重要！
css文件注释格式为

选择器 {
	属性1:值1;
	属性2:值2;
	属性3:值3;
}

css的美化方式是选择某个标签后针对要美化的属性进行赋值，并以分号结束！

常用属性有颜色color、背景色background-color、高度height、宽度width、字体大小font-size等。

前面先涉及这些，后面有深入的更多

1. head内书写

2. link引入外部css文件

3. 直接在标签内书写

   CSS学习
   

   ps:一般写项目时采用第二种，不建议采用第三种(因为不好检查)，在学习时采用第一种的方式比较方便(以下示例均采用第一种)

• id选择器
  用“#+id名”进行选择

  #ddd {color:blue;}
  
  

• 类选择器
  用“.+类名”进行选择

  .ccc {color:orange;}
  
  

• 标签选择器
  直接选择标签名

  p {background-color:red;}
  
  

• 通用选择器
  用*表示选中所有标签

  * {color:blue;}
    
  

  ps：一般不使用标签选择器和通用选择器，因为范围太大，而一个页面不可能那么简单。

• 后代选择器
  用“空格”，表示选中父标签里任意后代(即嵌一层套或多层套)

  
  
  
      
      
  
  
      
  
          
  
            孙子层
          
          儿子层
      
  
  
  

  结果为“儿子层”和“孙子层“都变为了蓝色

• 儿子选择器
  用“>”选择，只选中父标签的儿子层
  同后代选择器的例子，若改为div>span {color:red;}则只有“儿子层”变为红色

• 邻近选择器
  用“+”号选择，表示选择标签的紧邻的下一个同级标签

  
  
  
      
      
      
  
  
      
  host
      
  邻居
      
  
        弟弟
      
  
  
  

  结果为“邻居”变为红色

• 弟弟选择器
  用“~”选择，表示选择标签所有下面的同级标签
  同邻居选择器例子，若为div~p {color:greenyellow;}则“邻居”和“弟弟”都变为荧光色

属性选择器是用[]来选择的

• [username]：表示选择有属性username的标签
• [username=‘bob’]：表示选择有属性username且属性值等于bob的标签
• input[username=‘bob’]：表示选择有属性username且属性值为’bob’的input标签

常用于a标签和input标签，比如a标签(链接标签)：当鼠标放上去是不是会换颜色啊

• link：初始态，未点击时的状态

• hover：鼠标悬浮在上面的状态

• active：鼠标点中不放的状态

• visited：鼠标点击后的状态

    
    
    


    
人生苦短，我用Python