CSS

什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个
css规则
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

css主要作用
用来美化我们的HTML页面的
HTML 决定网页的骨架 ,CSS 化妆
将页面的HTML和美化进行分离

块标签
span
div
在网页开发的时候使用div和span都可以，通常可以理解为没有什么区别。但注意的是div占用一行，span不会占用一行，内容占多大宽度，span就有多宽。

css中常用选择器
CSS选择器: 帮助我们找到我们要修饰的标签或者元素

• ID选择器:

  以#号开头 ID在整个页面中必须是唯一的s
  #ID的名称{
  属性名称:属性的值;
  属性名称:属性的值;
  }

• 类选择器:
  以 . 开头
  .类的名称{
  属性名称:属性的值;
  属性名称:属性的值;
  }

• 元素选择:
  元素的名称{
  属性名称:属性的值;
  属性名称:属性的值;
  }

CSS的引入方式:

• 外部样式: 通过link标签引入一个外部的css文件

• 内部样式: 直接在style标签内编写CSS代码

• 行内样式: 直接在标签中添加一个style属性, 编写CSS样式

CSS浮动 :
浮动的元素会脱离正常的文档流,在正常的文档流中不占空间

• float属性:
  left
  right
• clear属性: 清除浮动
  both : 两边都不允许浮动
  left: 左边不允许浮动
  right : 右边不允许浮动
  流式布局

css中的扩展选择器：

• 选择器分组: 选择器1,选择器2{ 属性的名称:属性的值} 中间用逗号隔开

• 属性选择器: 中括号

  a[title]
  a[titile='aaa']
  a[href][title]
  a[href][title='aaa']
  

• 后代选择器: 爷爷选择器 孙子选择器 找出所有的后代 中间用空格隔开

• 子元素选择器: 父选择器 > 儿子选择器 中间用大括号隔开

• 伪类选择器: 通常都是用在A标签上

CSS的优先级

按照选择器搜索精确度来编写: 行内样式 > ID选择器 > 类选择器 > 元素选择器

就近原则: 哪个离得近,就选用哪个的样式

css的绝对定位
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:

实例

h2
{
    position:absolute;
    left:100px;
    top:150px;
}

absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。

css的盒子模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。