freeCodeCamp刷题总结（一）

最新推荐文章于 2023-03-22 23:32:21 发布

菜鸟M

最新推荐文章于 2023-03-22 23:32:21 发布

阅读量814

点赞数

分类专栏： freeCodeCamp刷题文章标签： html5 css javascript jquery

本文链接：https://blog.csdn.net/weixin_43592907/article/details/106536171

版权

freeCodeCamp刷题专栏收录该内容

8 篇文章 3 订阅

订阅专栏

一：HTML基础
1.H5的主体部分放在 <main>中
2.所有img元素中必须有alt属性，alt属性的文本是当图片无法加载时显示的替代文本，
3.锚点：a中 href属性值为井号#加上想跳转区域对应的id属性值，这样就可以创建一个内部跳转。
4.placeholder ，input输入框占位符
5. input，label的属性：
autocomplete=“off” ：隐藏输入框中的下拉表单
单选按钮只是input输入框的一种类型。每一个单选按钮都应该嵌套在它自己的label（标签）元素中；相关联的单选按钮应该有相同的name值，name相同就可以实现单选

 <label>
    <input name="1" type="radio">indoorasd</label>
  <label>
    <input name="1" type="radio">outdoordasd</label>

在这里插入图片描述
当input的type =“radio“时，点击后，不可以再取消；
当input的type=“checkbox”时，点击后，可以取消；

注意label标签的for属性：当for的值等于input中id的值时，点击文本可以直接实现input框的选定

 <label for="dd"><input id="dd" type="checkbox">打的</label>
  <label for="aa"> <input id="aa" type="checkbox">非凡哥</label>

6.声明HTML文档的文档类型：
<!DOCTYPE ...>来告诉浏览器你使用的是 HTML 的哪个版本，"..." 部分就是版本的数字信息。<!DOCTYPE html>对应的就是 HTML5。
在这里插入图片描述
二：CSS基础
1.为所有h2元素添加css属性

2、class选择器，CSS 的class具有可重用性，以 . 开头

3、CSS字体降级，当Helvetica字体不可用时，自动调用sans-serif字体：

p {
  font-family: Helvetica, sans-serif;}

4、在一个元素上可以同时应用多个class，通过使用空格来分隔。例子如下：

<img class="class1 class2">

5、给图片添加一个边框，包括大小，颜色，实线；
border-color：边框颜色；border-style：实线； border-radius：圆角；
圆图片：当border_radius：50%;

.thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius:10px;
  }

在这里插入图片描述
6、给元素（div）添加背景色：

.silver-background{
    background-color:silver;
  }

7、padding（内边距），margin（外边距），border（边框）：（上右下左）
内边距：如下图，以blue-box框内文字为准，改变文本与边框之间的距离；
在这里插入图片描述
外边距：如下图，以blue-box盒子为例，是为元素的每一侧添加外边距，也就是离其他元素的距离；

8、CSS选择器：
会改变所有type为radio的元素的外边距。

[type="radio"]{
    margin:10px 0px 15px 0px;
  }

9、继承Body样式：H1内的样式由body决定
在这里插入图片描述
10、样式中的优先级： blue > pink >body：green
1）设置h1的文本为pink，发现会覆盖body给的color：green；

2）在<style>标签里面声明的class顺序十分重要。第二个声明始终优于第一个声明。因为.blue-text在.pink-text的后面声明，所以.blue-text会覆盖.pink-text的样式。
在这里插入图片描述
11：优先级：! important 的优先级最高（color: red !important;），内联样式的优先级>id 选择器优先级> class选择器优先级
Hello World 最终显示为粉色：
（使用优先级的目的：当你需要保证你的 CSS 样式不受影响，你可以使用!important。）
在这里插入图片描述

12、十六进制编码获得指定颜色：
1）在 CSS 里面，我们可以用使用 6 个十六进制的数字来代表颜色，每两个数字控制一种颜色，分别是红（R），绿（G），蓝（B）。例如，#000000代表着黑色；
2）使用rgb(0, 0, 0)；上色；

13、自定义CSS变量(--变量：value)：
1）创建 CSS 变量，需要在变量名前添加两个破折号，并为其赋值：--penguin-skin: gray;

.id{ --penguin-skin: gray;}

2）创建变量后，CSS 属性可以通过引用变量名来使用它的值

background: var(--penguin-skin);

3）CSS 变量附加回退值，设置一个备用值来防止某些原因导致变量不生效的情况：
当变量有问题时：使用black颜色

background: var(--penguin-skin, black);

4）层级CSS变量（:root{}）：
创建的变量，不但可以在你声明变量的元素里面使用，同时也可以在该元素的子元素里面使用。这种效应称为cascading（层叠）。CSS 变量通常会定义在:root元素里。

当你在:root里创建变量时，这些变量的作用域是整个页面。
如果在元素里创建相同的变量，会重写:root变量设置的值。
在这里插入图片描述
5）媒体查询（@media）更改变量：
屏幕小于或大于媒体查询所设置的值，通过改变变量的值，那么应用了变量的元素样式都会得到响应修改。
如下图：在@media中重新声明:root选择器，当界面小于350px时，@media中的值会响应修改；
在这里插入图片描述

第一部分已经完结。