1.CSS介绍

HTML学习完以后，以及可以使用HTML开发网页了，但是在呈现的效果上没有那么美观，所以接下来我们要学习CSS,CSS就是可以让我们页面变得更加美观，接下来我们开始学习CSS
第一步：在IDEA中创建名为08_CSS-介绍.html的文件：

第二步:编写如下代码，需要注意的是style标签中书写的是css样式，我们先照着写即可

Hello CSS

第三步：浏览器打开页面，效果如下：

很明显，如果没有css，我们只会呈现黑色的效果，而我们加入了css，此处呈现红色大号字体，让我们的网页变得更加的美观的(ps:此处我们审美问题，修饰的并不美丽)。所以css可以美化我们的页面。

2.CSS概念和作用 2.1CSS格式规范HTML,元素名称在规则集开始位置

格式 说明 大括号 开头和结尾，所有的样式放在里面 样式名 左边是样式名，样式名和样式值是固定的，中间使用冒号分隔 样式值 右边是样式值 样式结尾 每个样式以分号结尾

2.2CSS介绍2.2.1CSS概念

• 层叠样式表，用于控制页面的样式（表现）。

2.2.2 CSS作用

• 美化网页

CSS格式规范

1. 选择器:位于规则集开始位置，用于选择HTML元素
2. 属性：改变HTML元素样式
3. 属性值: 在属性右边，冒号后面
4. 存放位置：标签中创建

   CSS内部样式1

   CSS内部样式2

   新增内容：

   第五步：打开浏览器观察效果如下：

   第七步：在resources目录下创建demo.css文件中编写如下的css代码：

   p{
   color: blue;
   font-size: 60px;
   }
   

   第八步：我们注释掉内部样式，新增标签来引入外部css文件，完整代码如下：

   
   
     
       
       
       
       
       
     
     
   
       
   
   
       
   CSS内部样式1
       
   CSS内部样式2
     
   
   

   新增内容：

   第九步：打开浏览器观察效果如图所示：

   
   

   4.CSS选择器

   上一小节我们学习了css的引入方式，其中内联样式和外部样式都书写了css选择器，那么本小节主要来讲解css的选择器，包括css选择器中的属性。顾名思义：选择器是选取需设置样式的元素（标签），但是我们根据业务场景不同，选择的标签的需求也是多种多样的，所以选择器有很多种，我们只学习最基本的3种
   选择器通用语法如下：

   选择器名   {
   css样式名：css样式值;
   css样式名：css样式值;
   }
   

   我们需要学习的3种选择器是元素选择器，id选择器，class选择器，语法以及作用如下：

   4.1元素选择器

   格式：

   1. 选择器的名字必须是标签的名字
   2. 作用：选择器中的样式会作用于所有同名的标签上

   元素名称 {
       css样式名:css样式值；
   }
   

   例子如下：

   
         p{
           color: #00FF00;
           font-size: 30px;
         }
   

   4.2.id选择器:

   1. 选择器的名字前面需要加上#
   2. 作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签

   #id属性值 {
       css样式名:css样式值；
   }
   

   例子如下：

   #{
       color: blue;
   }
   

   4.3类选择器

   1. 选择器的名字前面需要加上.
   2. 作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个

   .class属性值 {
       css样式名:css样式值；
   }
   

   例子如下:

   .cls{
        color: aqua;
    }
   

   接下来我们需要通过代码来演示3种选择器的作用：
   第一步：在IDEA中创建名为10_CSS-选择器.html的文件：

   第二步：遵循上述的3种选择器语法，编写如下代码：

   
   
   
   
   
   
   
   
   
   
   

   CSS元素选择器

   
   
   
   
   

   CSS id选择器

   
   
   

   CSS类选择器

   
   
   
   

   第三步：打开浏览器，观察效果如下图所示：

   css的属性有很多，这是前端做的，我们不写，想要知道详细属性的作用，参考文档https://developer.mozilla.org/zh-CN/docs/Learn/CSS

   5.CSS常用样式

   每个标签都可以设置背景，我们学习的时候以

   标签为例

   功能 属性名 属性取值 背景色 background-color 颜色常量，如：red 使用十六进制，如：#123 背景图片 background-image url(图片文件) 平铺方式 background-repeat repeat 默认。背景图像将在垂直方向和水平方向重复。 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。 no-repeat 背景图像将仅显示一次。 背景大小 background-size 宽度和高度 颜色 color 颜色常量，如：red 使用十六进制，如：#123 文本缩进 text-indent 用于缩进文本，可以使用em单位，表示缩进1个字符，无论字符的大小。 文本对齐 text-align left 把文本排列到左边。默认值：由浏览器决定。 right 把文本排列到右边。 center 把文本排列到中间。 设置大小 font-size 单位：像素 设置样式 font-style 字体设置为斜体 italic 浏览器会显示一个斜体的字体样式。 normal 默认值。浏览器显示一个标准的字体样式。 设置粗细 font-weight bolder加粗 normal 不加粗

   接下来我们需要通过代码来演示
   第一步：在IDEA中创建名为11_CSS-背景颜色设置.html：

   第二步：遵循上述的背景语法，编写如下代码：

   
   
   
   
   
   
   
   
   
   

   
   

   我是h1

   
   

   我是h1

   
   

   我是h1

   
   

   我是h1

   
   

   我是h1

   
   

   我是h1

   
   

   我是h1

   
   

   我是h1

   
   

   我是h1

   
   
   
   
   
   

   第三步：打开浏览器，观察效果如下图所示：