Css学习

什么是CSS

• 怎么学习

  1. css是什么
  2. css怎么用
  3. Css选择器（重点+难点）
  4. 美化网页（文字，阴影，超链接，列表，渐变）
  5. 盒子模型
  6. 浮动
  7. 定位
  8. 网页动画（特效）

1. 什么是Css

   • 层叠样式表
   • CSS：表现（美化网页）
   • 字体、颜色、边框、高度、宽度、背景图片、网页定位、网页浮动

2. 快速入门

   • 内联样式规范，

     <style>

     可以编写css的代码，每一个声明最好用分号结尾
     • 语法：选择器{ 声明1； }
   • 外联样式：使用link外联建议使用

     • <link rel="stylesheet" href="css/style.css">

     • 优势：
       1. 内容和表现分离
       2. 网页结构表现统一，可以实现复用
       3. 样式十分的丰富
       4. 建议使用独立于html的css文件
       5. 利用SEO，容易被搜索引擎收录！

3. CSS的导入方式

   • 行内样式：

     <h1 style="color: skyblue">标题</h1>

   • 内部样式style标签：

     <style>
         h1{
             color: skyblue;
         }
     </style>
                

   • 外部样式：

     <link rel="stylesheet" href="css/style.css">

     ，属于HTML标签
   • 优先级：行内样式>内部样式>外部样式，遵循就近原则
   • 扩展：CSS2.0用导入式，作用是引入CSS样式

     <style>
         @import "css/style.css";
     </style>
                

1. 选择器

   作用：选择叶敏上的某一个或者某一些元素

   • 基本选择器

     1. 标签选择器
        • 标签选择器会选择到页面上所有的此标签

          <style>
                  h1{
                      color: skyblue;
                  }
              </style>
                     

     2. 类选择器
        • 选择所有class属性一致的标签，跨标签
        • 格式：.class的名称{}
        • 好处：可以多个标签归类，是同一个class，可以复用

          <style>
            .a{
              color: skyblue;
            }
            .b{
              color: greenyellow;
            }
            .c{
              color: pink;
            }
            </style>
          
          <h1 class="a">1</h1>
          <h1 class="b">2</h1>
          <h1 class="c">3</h1>
                     

     3. id选择器

        • <style>
              #a{
                color: pink;
              }
              #b{
                color: greenyellow;
              }
              #c{
                color: skyblue;
              }
            </style>
          
          <h1 id="a">1</h1>
          <h1 id="b">2</h1>
          <h1 id="c">3</h1>
                     

   • 层次选择器