一、总体概述

学习链接：

【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili
HTML全套基础教程-html实战开发-深入浅出HTML_哔哩哔哩_bilibili

本次的学习主要是css的学习，其中包括CSS的基本使用和CSS的选择器。

二、学习内容

1、什么是CSS？

CSS（Cascading Style Sheet）：层叠样式表语言。

CSS的作用是：修饰HTML页面，修饰HTML页面中的某些元素的样式，让HTML页面更好看。 CSS好比是HTML的化妆品一样。 HTML还是主题，CSS依赖HTML。

CSS的存在就是修饰HTML，所以新建的文件还是xx.html文件。

2、CSS的三种使用方式

? ? ? ? 1.HTML中引入CSS的第一种方式

? ? ? ? ? ? ? ? 第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。

????????????????语法格式:

        <标签 style="样式名：样式值;样式名:样式值;样式名:样式值;..."></标签>

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>HTML中引入CSS样式的第一种方式：内联定义方式</title>
</head>
<body>

<!--
    width 宽度样式
    height 高度样式
    background-color 背景色样式
    display 布局样式（none表示隐藏，block表示显示）
-->
<div style="width: 300px;height: 300px; background-color: #CCFFFF; display : block;
border-color: red;border-width: 1px;border-style: solid"></div>
<br><br>

<!--
    样式还能这样写：
        border : 1px solid black;
-->
<div style="width: 300px;height: 300px; background-color: #CCFFFF; display : block;
border: 1px solid black"></div>
</body>
</html>

? ? ? ? 2.HTML中引入CSS的第二种方式

? ? ? ? ? ? ? ? 第二种方式：在head标签中使用style块，这种方式被称为样式块方式。

???????????????? 语法格式：

            <head>
                <style type="text/css">
                    选择器{
                        样式名:样式值;
                        样式名:样式值;
                        .....
                    }
                    选择器{
                        样式名:样式值;
                        样式名:样式值;
                        .....
                    }
                </style>
            </head>

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>HTML中引入CSS样式的第二种方式：样式块</title>
    <style type="text/css">
      /*
          这是CSS的注释。
       */
      /*
          id选择器
          语法格式
          #id{
              样式名:样式值;
              样式名:样式值;
              样式名:样式值;
              ......
          }
       */
      #usernameErrorMsg{
        color: red;
        font-size: 18px;
      }
      /*
          标签选择器
          语法格式：
            标签名{
              样式名:样式值;
              样式名:样式值;
              样式名:样式值;
              ......
            }
            标签选择器作用的范围比id选择器作用的范围广。
       */
      div{
        background-color: black;
        border: 1px solid red;
        width: 100px;
        height: 100px;
      }

      /*
          类选择器
          语法格式：
              .类名{

              }
   le  */
      .myclass{
        border: 1px solid red;
        width: 400px;
        height: 30px;
      }
    </style>
</head>
<body>

<!--
  设置样式字体大小12px，颜色为红色！
-->
<span id="usernameErrorMsg">对不起，用户名不能为空！</span>
<div></div>
<div></div>
<div></div>

<!--class相同的标签可以认为是同一类标签。-->
<br><br><br>
<input type="text" class="myclass"/>

<br><br><br>

<select class="myclass">
  <option>专科</option>
  <option>本科</option>
  <option>硕士</option>
</select>
</body>
</html>

? ? ? ? 3.HTML中引入CSS的第三种方式

????????????????第三种方式：链入外部样式表文件。这种方式最常用。（将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了）

????????????????语法格式：

<link type="text/css" rel="stylesheet" href="css文件的路径"/>

这种方式易维护，维护成本较低。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML中引入CSS样式的第三种方式：引入外部独立的css文件</title>
    <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<span id="baiduspan">点击我链接到百度哦！</span>
<br><br><br>
<img src="../learn/pic.webp" height="200" width="200" alt="图片找不到哦！"/>
</body>
</html>

a{
    text-decoration: none;
}
/*
    cursor :鼠标样式，pointer是小手，hand也是，但是hand有浏览器兼容问题，建议用pointer。
 */
#baiduspan{
    text-decoration: underline;
    cursor: pointer;
}

?3.CSS在列表中的使用

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
  <style type="text/css">
    ul{
      list-style-type: none;
    }
  </style>
</head>
<body>
<ul>
  <li>中国
    <ul>
      <li>北京</li>
      <li>上海</li>
      <li>重庆</li>
    </ul>
  </li>
  <li>美国</li>
  <li>俄国</li>
</ul>
</body>
</html>

三、学习总结

? ? ? ? 本次学习是对html中CSS的学习。

? ? ? ? 首先，CSS是值层叠样式表（Cascading Style Sheets），起到修饰HTML的作用，可以极大提高工作效率。
? ? ? ? 随后，我们需要知道，引用CSS的三种方式，分别为内联定义方式、样式块方式和链入外部样式表文件。其中链入外部表文件这种方式最为常用，可以通过对代码少量的修改，使得大部分页面可以同步进行修改。

? ? ? ? 此外，若要再HTML中设置CSS样式，也需要再元素中设置“id”和“class”选择器，即id选择器和类选择器。用法如下：

id选择器
          语法格式
          #id{
              样式名:样式值;
              样式名:样式值;
              样式名:样式值;
              ......
          }


标签选择器
          语法格式：
            标签名{
              样式名:样式值;
              样式名:样式值;
              样式名:样式值;
              ......
            }
            标签选择器作用的范围比id选择器作用的范围广

 类选择器
          语法格式：
              .类名{

              }

? ? ? ? 最后，CSS的使用可以大大的方便我们对HTML的页面布局进行调整，如位置，颜色，字体，边框等多个元素。