学css的基本知识(css-从入门到放弃-01)


万年都在补基础

目录

学css的基本知识(css-从入门到放弃-01)(1)

dbe766e58e8641f7e39d8304edd0091f.png

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

学css的基本知识(css-从入门到放弃-01)(2)

2 作为一个非专业选手 - 我能为记住如此繁多的属性做点什么
  • 既然砸门都到二阶知识了 - 我建立了一个所有属性的思维脑图
  • 食用方法: 给属性加标签 遇到一个就加一个给属性画更多的图

链接

CSS 属性.xmind

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

下面的在 软件中标注了

学css的基本知识(css-从入门到放弃-01)(3)

.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; }

学css的基本知识(css-从入门到放弃-01)(4)

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

  • 需要资料请留言
,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页