软件协会授课

HTML是什么

        HTML 文档是包含多个 HTML 元素 的文本文档。每个元素都用一对开始和结束 标签 包裹。每个标签以尖括号（<>）开始和结束。也有一部分标签中不需要包含文本，这些标签称为空标签。 

CSS 是什么

        CSS 可以用于给文档添加样式 —— 比如改变标题和链接的颜色及大小。它也可用于创建布局 —— 比如将一个单列文本变成包含主要内容区域和存放相关信息的侧边栏区域的布局。它甚至还可以用来做一些特效，比如动画。查看本段内容中所给出的特定案例。

将一个网站类比为人的话，html就是骨架控制基本的一个框架，css就是皮肤和衣服控制外貌等,JavaScript就是大脑控制行为和思想.

HTML基本元素

        div : 块级元素 独占一行

        块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度，因此创建了一个“块”

        span:  行内元素 默认情况下，行内元素不会以新行开始，而块级元素会新起一行

HTML基本语法

       以<>包裹形成标签，并以</>结尾,内容在中间，比如 <div>hello world</div>

CSS 基本语法

       语法由一个 选择器(selector)起头。 它 选择(selects) 了我们将要用来添加样式的 HTML 元素。 在这个例子中我们为一级标题(div）添加样式。

div {
    width: 100px;

    height: 200px;

    background-color:red;
}

        在选择器后面是一对大括号{}, 在大括号内部定义一个或多个形式为 属性(property):值(value); 的 声明(declarations)。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值.

        在上面的例子中，我们想表达的就是给 div 标签 宽度为100px, 高度为200px, 背景颜色为red 红色。

        我们刚刚涉及到了CSS中的几个概念，选择器, 属性和属性值,下面会逐一介绍。

选择器

       回顾刚刚的操作，我们可以发现，写css大致可以分为以下两步

        1. 选择元素

        2.写样式

那么，在选中元素这一环节，选择器就起到了他的作用。

               

   标签选择器

        回顾上文的示例css代码，我们在大括号前面写了一个div，而div正好是，html代码里<>中的内容，<>包裹的东西就叫做标签，我们把里面的东西写在大括号前面，就叫做标签选择器，标签选择器指向html里所有同类型的标签元素

类选择器

        什么是类，首先，类定义在html代码里，例如

     <div class=”box”>hello world</div>

        <div>hello world</div>

        第一个是定义了类的div，第二个则是没定义的

        下面开始进行 css 代码

.box {
      background-color:blue;
    }

        格式是 . + 类名  后面跟上 大括号，此代码起作用后，上面的加了box类名的div将会有一个蓝色的背景，而没加的则不会有。

        下面引入一个重要的知识： 伪类

                 首先来看一段代码   

.box:hover {
     color: blue;
    }

这段代码的意思是，鼠标经过(hover) box这个类对应的元素身上时，字体的颜色(color)变为蓝色。

         CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。伪类，顾名思义，半假不真的类，真的类是需要定义在html里的,而伪类是不存在于html代码里的，伪类是为类而服务的。

         下面介绍两种常见的伪类

  :hover

         鼠标经过时的样式

  :nth-child(n)

         选择当前类元素的第n个子元素

后代选择器

        后代选择器（通常用单个空格字符表示）组合了两个选择器，如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先（父母，父母的父母，父母的父母的父母等）元素，则它们将被选择。利用后代组合器的选择器称为后代选择器。

通俗的来讲,就是选择父元素的一系列子元素

下面看一段示例代码

     html 代码   

 <div class="box">

        <span>1</span>

        <span>2</span>

        <span>3</span>

        <span>4</span>

        <div>5</div>

    </div>

    css代码

 .box span {

       color:red ;

}

         

这段代码实际就展示了后代选择器的作用，我们选到了div父元素里的所有span子元素，并将他们的字体颜色改为了红色，而没有改变除span外其他子元素(div)的样式。

属性

        接下来我们进行属性的学习，属性是css中最重要的组成部分，像我们上面所写的background-color(背景颜色)，color(字体颜色)，width(宽度)，height(高度)等都是css属性，不难发现，这些属性大都是英文单词的字面意思，所以要记住这些属性并不难。

下面来介绍几种常见的属性

        width: 表示宽度，值为 数字 + 单位(px,vh,em...)

        height: 表示高度度，值为 数字 + 单位(px,vh,em...)

      background-color: 表示背景颜色, 值为 16进制数(如#fff,表示白色)，RGB(如(245, 246, 247))，颜色的对应英文(如red)

        background: background 是一种 css的简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。这里重点介绍一下radial-gradient()，这是CSS函数创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形（circle）或椭圆形（ellipse）。这个方法得到的是一个CSS数据类型的对象，其是 一种图片。

        radial-gradient()：其值有五个，下面介绍其中的三个，第一个 ： position

第二个: shape 渐变的形状可以为 circle(圆形),ellipse(椭圆), 第三个： color 渐变起始颜色 和 渐变目标颜色.

示例:

body{
    height:100vh
    background: radial-gradient(circle, navy, black);
}

效果

可变基础

CSS变量是用于在样式表中重用的存储值。 使用自定义var()函数可以访问它们，并使用自定义属性符号进行设置。

:root {

--main-color: goldenrod;

}


div {

background-color: var(--main-color);

}

:root内定义的变量是全局变量，而选择器内定义的变量特定于该选择器。

div {

--module-color: goldenrod;

background-color: var(--module-color);

}

在上面的示例中，任何div都将接受该变量，但是我们可以使用诸如class和id class定位方法来命名更具体。