CSS知识

CSS
简介：层叠样式表

• 层叠：一层一层的
• 样式表：很多的属性和属性值
  作用：使页面效果更好
• css讲网页内容和显示样式进行分离，提高了显示功能

CSS和html的四种结合方式

1. 在每个html标签上面都有一个属性 style，把css和html结合在一起

<div style="background-color:red;color:green;">xxxxx</div>

2. 使用html的一个标签实现 <style>标签，写在head里面
   
3. 在style标签里面，使用语句 @import url（css文件的路径）;（某些浏览器不起作用）

• 创建一个css文件
• html中
  

4. 使用头标签link，引入外部css文件

• 创建css文件
• html文件
  
  CSS优先级
  从上向下，后加载的优先

CSS的基本选择器
要对那个标签里面的数据进行操作

• 标签选择器
   使用标签名作为选择器的名称

div{
	background-color:gray;
	color:white;
}

• class选择器
  每个htnl标签都有一个属性class
  
• id选择器
   每个html标签上面有一个属性id
  
  优先级：
  style > id选择器 > class选择器 > 标签选择器

CSS的扩展选择器

• 关联选择器-嵌套标签里面的样式
  div里面的p标签
  
• 组合选择器-把不同组合设置成相同样式
  
• 伪元素选择器-css里面提供一些定义好的样式
  比如超链接的状态
  原始状态 鼠标放上去状态 点击 点击之后
  :link :hover :active :visited
  

CSS的盒子模型
区域：div

• 边框
  
  内边距
  
  
  外边距
  
  CSS布局的漂浮
  float：
• left：文本流向对象的右边
• right：文本流向对象的左边
  
  CSS布局的定位
  position：
• absolute：将对象从文档流中拖出，飘起来了，不占位置，其他的自动补位
  
• relative：飘着但其他的不能来占位
  
  图文混排
  
  图像签名
  使用position把文字漂浮起来，再用top，left什么的定位一下
  
  P34