今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

1、任务10顺利通过，有两处小问题修改了下。

第一处问题：

这里我运用了checked属性来写出了小圆点和background背景色，

这里checked属性在页面加载时被预先选定的input元素。所以这里checked定义单选框选中。前面说了label的for和id属性相同给input相关联了，input里还要加上name属性。html代码如下：

这里我为什么会出现所有的单选框全部都选中了，问题就出在name上，上图是我改正之后的，之前我给每一个input标签中的name都单独定义了一个不同的名字，如：name=“radio-1”/“radio-2”类似这种不同的name，所以在name不相同的时候，在点击单选框是都会被选中，在每一个单独form标签里，input的name必须是一样的，这样才能在用checked属性来选中单选框时，其他的单选框不会被选中。这个是有规律的，不然就会出现上图中和我一样全部都checked选中了。

checked属性一般适用于 <input type="checkbox"> 和 <input type="radio">。

还有这里我设的id名是不合代码书写规范的，代码的规范我还要好好去看下。

第二处问题：

还是这个老问题。写的时候没有发现，点线和圆那里没有，字的hover效果就不会显示，这里我另外又给最大的父级div里的hover设了color就解决了。

2、开始任务11的重点less和sass了解。

在查看less和sass的区别：

• 1、语法：
• /*style.less*/    /*style.sass*/
  
• 都是使用.sass、.less的扩展名。
• 
  

2、变量：

sass的变量是$开始，变量名称和值用冒号隔开，和css属性一样。如下：

$mainColor: #0982c1;

$siteWidth: 1024px;

$borderStyle: dotted; 

 body {  color: $mainColor;  border: 1px 

                      $borderStyle $mainColor; 

                      max-width: $siteWidth; }

• less的变量名是以@开始的，如下：

• @mainColor: #0982c1;

• @siteWidth: 1024px;

• @borderStyle: dotted;

• body {
    color: @mainColor;
    border: 1px 

•               @borderStyle @mainColor; 

•               max-width: @siteWidth;
  }

写法上还是比较相似，只是变量名不一样。

3、less和sass主要区别在于实现方式不同。

less是基于JavaScript运行,所以less是在客户端处理。

sass是在ruby上，所以需要下载一个组件，是在服务器端处理。但是sass也可以在本地编译。

less和sass在语法上还是有共性的，例如下面几点：

1、Mixins（混入）

类似于定义一个class类名，在某段css中使用元素较多的属性，可以直接给这段定义一个mixin，然后在需要的地方引用mixin就行。

2、嵌套

像之前写代码，有多个类名时，或者你不想设类名就存在父级子级的关系就要通过权重来定义样式，就需要每个css样式的class前写最大的父级的类名。如下：

section { 

    margin: 10px; 

}

section nav { 

    height: 25px;

}

section nav a { 

    color: #0982C1; 

}

section nav a:hover { 

    text-decoration: underline; 

}

前面必须加上section这个父级，用css预处理器less或者sass后就可以少写几个单词，减少代码量，通过“{ }”的形式来嵌套，写法如下：

section {

    margin: 10px;

    nav { 

        height: 25px; 

        a { 

           color: #0982C1; 

           &amp;:hover { 

                text-decoration: underline; 

             } 

        } 

    }  

 }

通过最大的父级来完成嵌套，一定要注意排列，从最高往最低排。

3、颜色函数的运算。

CSS 预处理器一般都会内置一些颜色处理函数用来对颜色值进行处理，例如加亮、变暗、颜色梯度等。

lighten($color, 10%); /* returns a color 10% lighter than $color */

darken($color, 10%);  /* returns a color 10% darker than $color */ 

saturate($color, 10%);   /* returns a color 10% more saturated than $color */

desaturate($color, 10%); /* returns a color 10% less saturated than $color */ 

grayscale($color);  /* returns grayscale of $color */

complement($color); /* returns complement color of $color */

invert($color);     /* returns inverted color of $color */ 

mix($color1, $color2, 50%); /* mix $color1 with $color2 with a weight of 50% */

只是变量名的区别，less是@

明天计划的事情：（一定要写非常细致的内容） 

最近家里有事请假多，继续学习任务11

开始html的代码编写。
遇到的问题：（遇到什么困难，怎么解决的）

 
收获：（通过今天的学习，学到了什么知识）

checked属性的语法理解和运用。name在input中的作用。

简单了解了下sass和lass的区别，看了发现sass看上去比less要好一点，我接下来就着重了解sass框架。

任务总结：

任务名称：CSS-task10

成果链接：https://guilinxi.github.io/task10/task10/task10.html

任务耗时：本次任务从18.12.22-18.12.26 共耗时5天。

官方脑图：

        个人脑图：

任务总结：

任务10写起来不是很难，header和footer前面已经写过了，所以重点不在这里，而是在main主体部分，越到后面的任务，样式就越来越多样化，就会用到很多新的元素和伪类选择器。

   这里的重点就是在表单的制作，表单是form标签设置，通过form来嵌套input元素和label元素。前面的任务就接触过input标签，用input输入标签写过密码字段写出来比较简单，但是这里我就遇到第一个难点。type属性定义单选框radio，所以单选框是有自己的样式的，问题就是UI图上和这个是完全不一样的样式，经过师兄的点播算是清楚input和label这两种元素是要一起用的，label的属性for来关联input，input设di属性，注意要关联id和for的值必须是一致的。写法如下：

<input id="input4" type="radio" name="radio-4">
<label for="input4">外径</label>

如果不使用label关联input的话，单选框样式是写不出来的，这里的圆我们需要通过label元素来写，因为input单选框的样式不能变更，只能通过伪类:before选择器重新写一个圆，我们为什么要用到label标签呢，因为它不会展现效果，只是用来关联input方便我们写出自己的样式 ，所以怎么写样式呢就需要用到伪类选择器，:before和:after，按照ui图上要在文本前面写一个新的样式，所以这里用到的伪类选择器是:before，在文本前面添加内容。注意一点最好是input写在label前面。

在就是input的checked选中属性，这里每个属性的语法要先弄清楚。基本上就是这几个知识点，弄明白了这个任务基本上不是很难。