CSS基础

---

前言

在页面排版时，内容与样式和混合设计导致页面代码过于臃肿、难维护，也不利于搜索引擎的检索层叠样式表（Cascading Style Sheets CSS）将页面内容与样式分离，极大改善了HTML在页面显示的缺陷。

---

一、CSS概述

• CSS（Cascading Style Sheets）通常称为CSS样式表或层叠样式表（级联样式表),使用CSS可以控制HTML标签的显示样式，如页面中的文本内容(字体，大小，对齐方式，颜色等)。

1、CSS基本语法结构

• CSS是声明式语言（和SQL语言类似），针对哪些元素给哪些相应的样式。
• 选择器；用于指定网页中哪些元素使用这个样式，{}内是对该对象设置的具体样式。
• 声明；属性和属性值以“键值对”的形式出现。
  • 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
  • 属性和属性值之间用英文“:”连接。
  • 多个“键值对”之间用英文“;”进行区分。

二、CSS的使用

如何将HTML与CSS进行关联？

• 内部关联 < style>
• 外部关联<link rel="stylesheet" href="css的URL">
• 内联关联 元素的< style>属性
  

样式表的优先级

• 多重样式是说外部样式、内部样式和内嵌样式同时应用于页面中的某一个元素。在多重样式的情况下，样式表的优先级采用就近原则。
• 一般情况下，多重样式的优先级由高到低的顺序是 内嵌 ----> 内部 ---->外部 ---->浏览器默认。
• 习惯上，将外部样式放在内部样式之前。

三、CSS 选择器

认识选择器（selector）

• 选择指定的元素：从整个html文件中选择，选择的是所有符合条件的元素
• 例如选择body : body {}
• 所有的元素都支持两个属性
  • id：用来唯一表示一个元素，建议不要重复
  • class：描述元素的分类，当有多个class时，建议空格分开

基本选择器

1、通用选择器

• 是一个星号*，功能类似于通配符，用于匹配文档中所有的元素类型。通用选择器可以使页面中所有的元素都使用该规则。
• 语法格式&