前端(四)——CSS之导入方式、各类选择器

1. CSS简介

1.1 什么是CSS

• Cascading Style Sheet 层叠级联样式表
• 表现 ：美化网页
• 具体表现：字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动….
• 页面演示

1.2 CSS发展史及其优势

发展史：

• CSS1.0
• CSS2.0 DIV（块） + CSS，HTML 与 CSS 结构分离的思想，网页变得简单，SEO
• CSS2.1 浮动，定位
• CSS3.0 圆角，阴影，动画…. 浏览器兼容性

优势：

• 内容与表现分离
• 网页的表现统一，容易修改
• 丰富的样式，使得页面布局更加灵活
• 减少网页的代码量，增加网页的浏览速度，节省网络带宽
• 运用独立于页面的 CSS，有利于网页被搜索引擎收录

1.3 快速入门

• 样式style
  CSS文件夹和index.html文件共存与一个练习文件夹lesson01中，练习格式如下图所示。
  

• 语法规范：HTML里可以编写css的代码 ，每一个声明，最好使用分号“；”结尾

    选择器 {
        声明1;
        声明2;
        声明3;
    }
  

  

• 建议使用这种规范：写一个HTML再写一个CSS
  

2. CSS的三种导入方式

（1）内部样式

（2）行内样式

（3）外部样式

• 优先级：就近原则
  行内样式 > 内部样式 > 外部样式

3. 基本选择器

• 作用：选择页面上的某一个或者某一类元素

（1）标签选择器

• 选择一类标签，会选择到页面上所有的这个标签的元素
• 格式：标签{ }
  
  
  （2）类选择器
• 选择所有class属性一致的标签，跨标签
• 格式： .class的名称{ }
• 好处：可以多个标签归类，是同一个class，可以复用
  
  
  （3）id选择器
• 格式：#id名称{ }
• id保证全局唯一！
• 不遵循就近原则，固定的
  
  
• 优先级：id选择器>class选择器>标签选择器
• 基本选择器不遵循“就近原则”

4. 层次选择器

（1）后代选择器

• 选择 body 之下的所有 p 标签，相当于祖爷爷 爷爷 爸爸 你

• 实例代码
  

• 运行结果
  

（2）子选择器

• 只能选择图中的1、2、3，相当于一代，儿子
• 实例代码
  
• 运行结果
  
  （3）相邻兄弟选择器
• 只能选择与之相邻的元素，只有向下的一个，相当于同辈中的下一个
• 实例代码
  
• 运行结果
  
  （4）通用兄弟选择器
• 选中当前元素向下的所有同代的兄弟元素
• 实例代码
  
• 运行结果
  

5. 结构伪类选择器

• 使用标签选择器，避免使用class，id选择器
• 实例代码
  
• 运行结果
  

6. 属性选择器

• id选择器+ class选择器的结合
• 属性名 = 属性值（正则）
  = 绝对等于
  *= 包含这个元素
  ^= 以这个开头
  $= 以这个结尾
• 实例代码
  
• 运行结果