一. CSS简介

• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素,更好的修饰html
• 多种样式共同作用于一个标签
• 了解决内容与表现分离的问题

二. CSS基础语法

选择器名称 {属性名1:属性值1; 属性名2:属性值2;... }

• 如果值为若干单词，则要给值加引号：

  p {font-family: "sans serif";}

三.CSS选择器

• 选择器的分类

  • 类选择器
    • .类名{ color:red;...}
  • id选择器
    • #id名{color:red;...}
  • 元素选择器
    • 标签名{color:red;...}
  • 伪元素选择器
    • 标签名:link{ color:red;...}

• 选择器 组合

  h1,h2,h3,h4,h5,h6 {
    color: green;
    }
  

• 选择器 关系

  {

  li strong {
      font-style: italic;
      font-weight: normal;
    }
  <p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
  <ol>
  <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
  <li>我是正常的字体。</li>
  </ol> 
  

  }

  四.CSSS与HTML的结合方式

  1. 内部样式
     1. style属性方式<font style="font-size:150;color:red">爱好</font>
     2. style标签方式<style></style> 放在head标签中
  2. 外部样式
     1. 导入方式@import url=("xxx.css")
     2. 链接方式<link rel="stylesheet" type="text/css" href="xxx.css"></link>

  五. CSS常用布局

  1. 盒子模型
     • border 设置盒子边框
     • padding 内边距 元素在盒子中的位置
     • margin 外边距 盒子的位置
  2. 浮动属性
     • float
  3. 定位属性 position
     • position:static
     • position:fixed
     • position:relative
     • position:absolute