1.1 CSS Part1

css层叠样式表

基础选择器

• 标签选择器： P{属性：值；}
• 类选择器：
  1..自定义类名{}
  2.通过class调用
• id 选择器：#自定义类名{}
• 通配符选择器：*{} 选中页面中所有元素

复合选择器

• 标签制定式选择器：标签名.(#)选择器{}
• 后代选择器：选择器 选择器{}   标签关系包含嵌套关系
• 并集选择器：选择器,选择器{}
• 属性选择器

input[type="text"][id]{
   color: red;
}

• 子代选择器

/*只选中父元素的直接子元素。。也就是说不考虑孩子的孩子*/
div > span{
    color:red;
}

1.2 CSS Part2

• 内联式写法
• 外联式写法
  使用link标签中的herf=""属性将外部样式表引入到当前页面中
• 行内式写法

分类

• 块级元素
• 行内元素
• 行内块元素
  display: block;
  display: inline-block;
  display:inline;
  其他模式转换的方式：浮动和定位（绝对定位、固定定位）

三大特性：

• 层叠性
  与调用样式的顺序无关，和定义样式顺序有关
• 继承性
  有关文字的属性都可以继承
  特殊：
  1.a标签不能直接继承父元素中的文字颜色
  2.标题标签不能直接继承父元素中的文字大小
• 优先级
  1.继承的权重为0。如果单独给子元素设置了属性，就会覆盖父元素的属性。
  2.权重会叠加

伪类

a:link{}超链接默认样式
a:visited{}访问过后的样式
a:hover{}鼠标移动到元素上的样式
:active{}超链接激活的样式
:focus{}获取焦点的样式

背景设置

1.3 CSS Part3

行高问题

• 行高可以继承
• 行高单位
  单独给一个标签设置行高：px em % 不带单位
  当父元素font-size
  子元素设置
  2em 表示子元素为220px=40px
  50% 表示子元素为50%20px=10px
  以上两种方式是先计算再继承
  当不带单位的时候是先继承在和自己的文字大小进行乘积

盒模型

• border
  属性联写中必须要写的是style，颜色和大小可以不写
• padding
  将盒子内容距离盒子边框之间的距离
  边框和内边距可以影响盒子大小
  继承的盒子padding值在父元素宽度范围内，不影响盒子大小
• margin
  1.垂直外边距合并
  2.外边距盒子塌陷问题
  解决方法：
  (1)给父盒子设置border值
  (2)给父盒子设置overflow: hidden

1.4 CSS Part4

浮动

• 浮动元素不占位置（脱标）
• 设置浮动可以实现元素模式转换
• 块级元素在一行上显示
• 图片文字环绕
• 网页布局

定位

position:

• 静态定位
• 绝对定位
  脱标
  可以实现模式转换
• 相对定位
  没有脱标
  子元素绝对定位，父元素性对定位
• 固定定位
  脱标
  能实现模式转换