CSS学习：从基础到高级-第一章

发表时间: 2021-11-20 23:08

万年都在补基础

1 万年都在补基础

<!DOCTYPE html>

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。

HTML <meta> 标签

元数据（Metadata）是数据的数据信息。<meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

HTML <link> 标签 / HTML <script> 标签

<link> 标签定义文档与外部资源的关系。<link> 标签最常见的用途是链接样式表。<script> 标签用于定义客户端脚本，比如 JavaScript。<script> 元素既可包含脚本语句，也可以通过 "src" 属性指向外部脚本文件。

2 HTML 全局属性

属性	描述
accesskey	设置访问元素的键盘快捷键。
class	规定元素的类名（classname）
contenteditableNew	规定是否可编辑元素的内容。
contextmenuNew	指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单
data-*New	用于存储页面的自定义数据
dir	设置元素中内容的文本方向。
draggableNew	指定某个元素是否可以拖动
dropzoneNew	指定是否将数据复制，移动，或链接，或删除
hiddenNew	hidden 属性规定对元素进行隐藏。
id	规定元素的唯一 id
lang	设置元素中内容的语言代码。
spellcheckNew	检测元素是否拼写错误
style	规定元素的行内样式（inline style）
tabindex	设置元素的 Tab 键控制次序。
title	规定元素的额外信息（可在工具提示中显示）
translateNew	指定是否一个元素的值在页面载入时是否需要翻译

3 我们怎么实现这个动画的

const panels = document.querySelectorAll('.panel')panels.forEach(panel => {    panel.addEventListener('click', () => {        removeActiveClasses()        panel.classList.add('active')    })})function removeActiveClasses() {    panels.forEach(panel => {        panel.classList.remove('active')    })}

逻辑

1 查找元素2 订阅事件3 去除所有的效果4 添加效果

4 CSS 观察

既然单纯的知识记不住，那试一试编故事吧

1 先引入了字体

2 调整页面宽度的计算方式

box-sizing

2 作为一个非专业选手 - 我能为记住如此繁多的属性做点什么

既然砸门都到二阶知识了 - 我建立了一个所有属性的思维脑图
食用方法：给属性加标签遇到一个就加一个给属性画更多的图

链接

CSS 属性.xmind

body {  font-family: 'Muli', sans-serif;  display: flex;  align-items: center;  justify-content: center;  height: 100vh;  overflow: hidden;  margin: 0;}

下面的在软件中标注了

.panel {    background-size: cover;    background-position: center;    background-repeat: no-repeat;    height: 80vh;    border-radius: 50px;    color: #fff;    cursor: pointer;    flex: 0.5;    margin: 10px;    position: relative;    transition: all 700ms ease-in;}

0fd85d1de41d41ef2f914f6ce81a42ce.png

transition: opacity 0.3s ease-in 0.4s;

transition-property，
transition-duration，
transition-timing-function （1）linear：匀速（2）ease-in：加速（3）ease-out：减速（4）cubic-bezier函数：自定义速度模式
transition-delay

CSS3 @media 查询

如果文档宽度小于 300 像素则修改背景颜色(background-color):@media screen and (max-width: 300px) {    body {        background-color:lightblue;    }}

在例子中

@media (max-width: 480px) {  .container {    width: 100vw;  }  .panel:nth-of-type(4),  .panel:nth-of-type(5) {    display: none;  }}

如果小于 480px 隐藏掉 4-5两个元素

note

需要资料请留言