CSS思维导图+学习笔记+实际案例-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45647642/article/details/105980423

这篇博客详细介绍了CSS的基础知识，包括CSS的作用、引用方式、书写规范，重点讲解了选择器、属性以及盒子模型。通过实例展示了如何使用CSS进行页面美化，如文字、背景、列表和尺寸设置。此外，还探讨了浮动和显示属性，以及浮动带来的问题。最后，通过BookStore页面构建的案例，将理论知识应用到实践中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思维导图

一、CSS简介
1、什么是css
层叠样式表，css是对html进行样式修饰的语言
层叠：就是层层叠加覆盖，如果不同的css样式对同一html标签进行修饰，
有冲突的部分使用优先级最高的，不冲突的部分共同作用。

样式表：就是css属性样式的集合

2、css有什么作用
（1）修饰html,使html样式跟家好看
（2）提高样式代码的复用性
（3）html的内容和样式分离，便于后期维护（高内聚，低耦合）

3、css的引用方式和书写规范
（1）内嵌样式是将css代码嵌入到html标签中

 <div style="color:red;font-size:100px">CSS，你好</div>

语法：

使用style属性将样式嵌入到html标签中
属性的写法：属性：属性值
多个属性之前使用，进行分割

（2）内部样式
在head标签中使用style标签进行css的引入

<style type="text/css">
    div{
   
     color:green;
     font-size:100px;
     }
   </style>

语法：

使用style标签进行css的引入
属性type：告知浏览器使用css去解析
属性的写法：属性：属性值
多个属性之前使用，进行分割

（3）外部样式 (推荐使用)
将css样式抽取成单独的css文件，谁想去使用谁进去引入该文件

 <link rel="stylesheet"href="link.css" type=""text/css>

语法：

创建css文件，将css属性写下css文件中
在head中使用link标签引入css文件
- rel：代表要引入的文件与html之前的关系
- href：css文件地址
- type：告知浏览器使用css解析器进行解析
属性的写法：属性：属性值
多个属性之前使用，进行分割

（4）@import方式

 <style type="text/css">
    @import url("link.css");
   </style>

link与@import区别：

link所有浏览器都支持 @import低版本的IE浏览器不支持
@import方式是等待html加载完毕之后再去加载
import不支持js动态修改

二、CSS的选择器【重点】
1、基本选择器
（1）元素选择器
语法：html标签名{css属性}
示例：

  <style type="text/css">
     span{
   
      color: green;
      font-size: 100px;
     }
    </style>
    </head>
    <body>
     <span>hello css!</span>
    </body>
    </html>

（2）id选择器 id唯一性
语法：#id的值{css属性}
示例：

<style type="text/css">
    #div1{
   
      background-color: #B6F084;
      width: 100px;
      height: 100px;
    }
    #div2{
   
      background-color: #E980E9;
      width: 200px;
      height: 200px;
    }
    #div3{
   
      background-color: #8093E9;
      width: 300px;
      height: 300px;
    }
   </style>
   </head>
   <body>
    <div id="div1">hello css!!</div>
    <div id="div2">hello css!!</div>
    <div id="div3">hello css!!</div>
   </body>

（3）class选择器
语法：.class的值{css属性}
示例：

<style type="text/css">
    .class1{
   
       background-color: #B6F084;
       width: 100px;
       height: 100px;
    }
    .class2{
   
       background-color: #E980E9;
       width: 200px;
       height: 200px;
    } 
   </style>
   </head>
   <body>
     <div class="class1">hello css!!</div>
     <div class="class1">hello css!!</div>
     <div class="class2">hello css!!</div>
   </body>

***选择器的优先级
id>class>元素

2、属性选择器
语法：基本选择器[属性=”属性值“]{css属性}
示例：

<style type="text/css">
   input[type='text']{
   
     background-color: yellow