CSS详细介绍+练习

1.什么是CSS

如何学习

1.css是什么

2.css怎么用（快速入门）

3.css选择器（重点+难点）

4.美化网页（文字、阴影、超链接、列表、渐变…）

5.盒子模型

6.浮动

7.定位

8.网页动画（特写）

1.1什么是CSS

Cascading Style Sheet层叠级联样式表

CSS：表现（美化网页）

1.2发展史

CSS1.0

CSS2.0 DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动、定位

CSS3.0 圆角、阴影、动画…浏览器兼容性~

1.3快速入门

建议使用这种规范

在这里插入图片描述

css的优势：

1.内容和表现分离

2.网页结构表现统一，可以实现复用

3.样式十分的丰富

4.建议使用独立于html的css文件

5.利用SEO，容易被搜索引擎收录！

1.4CSS的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!-- 内部样式 -->
  <style>
    h1{
     
      color: green;
    }
  </style>

<!--  外部样式  -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<!--优先级：就近原则（谁离这个标签近，谁的优先级就高）-->

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可 -->
<h1 style="color: red">我是标题</h1>
</body>
</html>

扩展：外部样式两种写法

链接式：（html）

<!--  外部样式  -->
    <link rel="stylesheet" href="css/style.css">

导入式：（@import是CSS2.1特有的，慢慢不用了）

<!-- 导入式 -->
  <style>
    @import url(css/style.css);
  </style>

2.选择器

作用：选择页面上的某一个或者某一类元素

最重要的基本选择器和属性选择器（css、js、vue都会用到）

2.1基本选择器

1.标签选择器：选择一类标签标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
/*  标签选择器，会选择到页面上所有的这个标签的元素 */
    h1{
     
      color: #671414;
      background: #b69191;
      border-radius: 20px;
    }
    p{
     
      font-size: 80px;
    }
  </style>
</head>
<body>

<h1>学Java</h1>
<h1>学Java</h1>
<p>p标签</p>

</body>
</html>

2.类选择器 class ：选中所有class属性一致的标签，跨标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>/*类选择器的格式    。class的名称{}
          好处：可以多个标签归类，是同一个class，可以复用
  */
    .one{
     
      color: #266cd4;
    }
    .two{
     
      color: #620c67;
    }
  </style>
</head>
<body>

<h1 class="one">标题一</h1>
<h1 class="two">标题二</h1>
<h1>标题三</h1>

<p class="one">P标签</p>


</body>
</html>

3.Id选择器：全局唯一·！ #id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>/*