【CSS全解01】CSS基础-体系化学CSS

大纲

  • 基础部分学习占比:HTML 1%`CSS 19%Javascript 80%`(`基础部分 ?%框架 ?%`项目 ?%)
  • CSS历史
  • Acid Test for browser
  • CSS是艺术(非逻辑,用测试经验来学,空间感,所见即所学)
  • CSS版本(CSS4* 分模块升级 模块版本level 搜css spec
  • 体系化学习?CSS mdn参考
  • 文档流(Normal Flow)
  • 盒模型([Content | Border] Box)

xx层叠?样式表(进行样式声明)

  • 样式重叠(多次对同一选择器)
  • 选择器重叠(用不同选择器对同一元素)
  • 文件重叠(多个文件)
样式层叠覆盖,CSS极度灵活(不正交 属性、样式不一一对应确定)

浏览器业界毒瘤(QQ、百度),扛把子UC,新星夸克

  • CanIUse 看数据时不用翻译,看注释时用
  1. Edge 对 calc() within grid 支持不好
  2. Safari 仍然不支持intrinsic and extrinsic sizing with grid 的属性 grid-template-rows

体系化学CSS?若不自*,也可成功

googlecss spec

  • TL,DR 在CSS新知识到来的时候,马上学会

写CSS必须学会先

  • 语法(写代码)
  • 调试(哪写错)
  • 查资料(为了抄)
  • 标准制定者

CRM学习法之外的在线临时调试playground

codesandboxcodepenJSBinjsFiddle

CSS语法一:样式语法

selectors-list {
  properties-list
}

选择器{
    属性名:属性值;
    /* 只有注释 */
}
selectors-list ::= selector[:pseudo-class] [::pseudo-element] [, selectors-list]

properties-list ::= [property : value] [; properties-list]

eg.

.a,
#b,
[c="d"]>e f,
g+h,
i~j{
    border:1px red solid;
}
strong {
  color: red;
}
div.menu-bar li:hover > ul {
  display: block;
}

注意事项

  • 所有符号都是英文符号,IDE只开英语输入,中文从记事本里粘贴进来(开不同应用不同输入法:both Win & Mac);标点写错,浏览器会警告,但不报错
  • 区分大小写,a 和 A 不同
  • 没有//注释,只是把选择器拼错不生效而已
  • 最后一个分号建议不要省略
  • 任何地方写错了,都不报错,浏览器会直接忽略,继续渲染,只给警告⚠️
  • 怎么纠错?调试看下文
注意,规则定义中的任何CSS语法错误都将使整个规则无效。无效的规则将被浏览器忽略。

注意CSS定义完全是基于文本(ASCII)的。

eg.

p{
    /* 正确 */
    color:red;
    /* 不正规的“注释”:拼错 */
    xcolor:red;
    //color:red;
    /* 注释 */
    /* color:red; */
}

CSS语法二:常用@语法

@charset "UTF-8"; /* 必须放在第一行;必须以分号`;`结尾 */
@import url(2.css); /* 导入另一个CSS文件;必须以分号`;`结尾 */
@media (min-width:100px) and (max-width:200px){
    /* 语法一:样式语法 */
}

注意事项2

  • @charset必须放在第一行,解析中文字符
  • 前两个@语法必须以分号;结尾
  • @media 单独学
  • charset字面是字符集的意思,UTF-8是字符编码 encodeing,历史遗留问题,encodeing ∈ charset
问:charset 指什么?;答:指文件编码(而不是字符集)。

调试CSS

方法

  • 使用W3C验证器(命令行工具),麻烦 不用
  • VSCode看颜色(semi-colon)大概的位置,不精确,不智能
  • WebStorm看颜色 (精确定位错误;智能提示)
  • 开发者工具看警告
  • css xxx generator
eg. googlecss gradient generator`css shadowbox generator`

浏览器开发者工具的使用步骤

  • 用指针找到元素
  • 看它是否有选择器
  • 看它的样式是否被划掉(⚠️黄色三角警告 +删除线+ 提示非法值 invalid property value )
  • 被其他样式覆盖或写错
  • 看它的样式是否有警告

Border调试法

步骤
  • 定位某个元素有问题
  • 给这个元素加border
  • border没出现?选择器或语法错了,拼错
  • border出现了,看看边界是否符合预期
  • bug解决了才可以吧border 删掉
  • 逐行移动border:1px solid red;看选择器是否生效;属性匹配到哪个属性了;具体哪个属性失效;
  • 加到VScode 等IDE的snnipets里,每次省个几秒:border大法好,用border得永生,现已加入snippets豪华套餐
  • 好像和Emmet想到一块去了:emmmet bd
注意
  • CSS的border调试法就相当于JS的log调试法
  • 重复使用

常见错误

低级错误

  • 拼写错误(选择器、属性名、属性值)
  • 大小写
  • 漏掉分号
  • 非英文符号
  • 反花括号漏掉
  • 没写单位
排除错误:推理,把正确可能性排除,剩下的无论看起来多对,肯定有错

非低级错误

  • 没有

查资料

网站

书籍

  • 不推荐,以练习为主

搜练习素材(注意版权及商用法律风险)

PSD

效果图(可能不提供下载,肉眼,或工具扒)

仿商业网站(排名按喜好>分>先>后)

hobby:

tech blog:

勿沉迷临摹

  • 每个类型临摹一两个即可
  • PC站、移动端、UI套件
  • 再多无益
WB不超过一年半,don't repeat yrself

CSS标准制定者:你爵士和耐先生

规范是你遇到问题用来查的——字典级文档

开始CRM学习法

抄-运行-改

·未完待续·


参考文章

CSS 基础概念.pdf

相关文章



Image placeholder
CaptainAI
未设置
  51人点赞

没有讨论,发表一下自己的看法吧

推荐文章
好好学习-JS基础-call/apply实现

call call()方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法functionfoo(){ console.log(this.name) } varobj={ na

面试知识----js基础

课程推荐:java开发工程师--学习猿地精品课程 1.数据类型: es5:字符串(string)、数字(number),undefined、null、对象(object)、布尔值(boolean)共六

【css】多种背景及使用场景

推荐课程:学习猿地--Java开发工程师在线课--送商业项目--点击进入 background相关使用CSSbackground是最常用的CSS属性之一,但是我们经常使用这个,但往往疏忽到底表达的是什

关于强化学习你应该知道的三件事

如果您有在关注科技相关的新闻,可能读过有关人工智能(AI)应用程序如何通过强化学习训练,在围棋、国际象棋等棋类游戏以及电子游戏中击败人类玩家的报道。作为一名工程师、科学家或研究人员,您可能会希望利用这

强化学习在小桔车服用户运营中的实践

桔妹导读:小桔车服为滴滴旗下品牌,围绕车主及汽车生命周期,整合运营多项汽车服务,更加智能更加用心地为车主提供适合的一站式用车服务,致力于让每一个人拥有轻松车生活。本次分享的主题为强化学习在小桔车服用户

一道阿里Web前端面试题看出你的JS基本功

课程推荐:web全栈开发就业班--拿到offer再缴学费--融职教育 //求出如下题目结果({}+{}).length([]+[]).length(function(){}).length这道题目乍一

微服务配置中心完全解读

本文作者:风卿,Nacos社区committer.在撰写这篇技术选型的文章之前,是比较犹豫的。因为,以其中一个开源项目开发者的身份,去写一篇三个开源项目的对比,即便很克制的去客观的比较,也很难有信服力

ES6系列之箭头函数全解析

引言ES6中允许使用箭头=>来定义箭头函数,是ES6中较受欢迎也较常使用的新增特性。本文将从箭头函数的基本语法,与普通函数对比,箭头函数不适用场景三个方面进行梳理。基本语法//箭头函数 letfunc

微博广告策略工程架构体系演进

概述 1.广告样式与场景 上图是微博广告目前商业场景流,“一屏四大流”。“一屏”指打开微博的Fashion,“四大流”指占据微博商业化的主体,包括关系信息流、热门流、评论流和热搜流。右图为广告投放的

从0到1,马蜂窝大交通团队如何构建高效研发流程体系?

“旅游之前,先上马蜂窝”已经成为许多人习惯性的选择。2019年5月,马蜂窝完成了新一轮融资,金额达2.5亿美元。这也标志着通过集内容、社区、交易为一体的消费决策场景构建,从攻略社区起家的马蜂窝开始迈入

云数据库反脆弱性运维体系

摘要:本文主要分享如何构建反脆弱性的云数据库服务体系与实践,实现分布式云数据库服务的高可用方案,同时采取措施保护分布式云数据库整体服务,实现跨机房分布式自动切换方案,并在实践过程中,实施分享SQL自动

面向DevOps的企业自动化运维体系如何构建?

随着软件交付速度的加快,过去那种研发、测试、部署和运维各自为政的模式,已经无法满足用户需求。越来越多的企业希望通过更高效、更敏捷的方式,快速交付和部署相关应用。所以,DevOps顺势而生!那么,什么是

美团大规模微服务通信框架及治理体系OCTO核心组件开源

微服务通信框架及治理平台OCTO作为美团基础架构设施的重要组成部分,目前已广泛应用于公司技术线,稳定承载上万应用、日均支撑千亿级的调用。业务基于OCTO提供的标准化技术方案,能够轻松实现服务注册/发现

吕理伟:研发质量效率体系建设助力企业发展

导语:本文根据吕理伟老师在2019年10月31日【第十一届中国系统架构师大会(SACC)】现场演讲内容整理而成。  海风教育工程卓越中心原高级总监吕理伟嘉宾介绍:13+年工作经验,2006年重点大学计

如何构建“小数据”驱动的泛场景智能应用体系?

张真百信银行首席技术架构师&AILab负责人目前负责基于自然语言的动态银行研究与落地,关注AI技术与金融,办公,生活场景的深度融入;开源软件UAVStack创始人,面向智能运维提供解决方案,AIOps

IDC发布:4Q18云IT基础设施收入低于传统IT基础设施收入

根据IDC全球云IT基础设施季度跟踪报告,在2018年第四季度(4Q18),包括公有和私有云在内的云IT基础设施产品(服务器、企业存储和以太网交换机)销售收入同比增长28.0%,达到168亿美元。20

解读2019华为第001号文件:AI时代软件开发的第一要义是可信

晓查发自凹非寺量子位出品|公众号QbitAIAI加持,万物互联、万物智能。我们在享受科技进步的同时,软件开发行业却面临着更大的挑战。过去,软件出现安全问题或许仅仅意味着经济损失,但当走向产业互联网时代

嗨!你的 2019 晒好封存了吗?快来看程序老兵的 2019 吧!

时间过得真是太快快快了,2019还剩下最后几个小时了。回望即将过去的这一年,老兵哥做了不少事情,有计划内的,也有计划外的,当然还有不少事情没做。赶在最后时刻晒一晒我的2019年,希望从成绩荣誉中获得一

前端培训-中级阶段(31)- Class 的基本语法、Class 的继承(2019-12-26期)

前端最基础的就是HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知

Express 官网文档翻译-2.4-基础路由

基本路由 路由指确定应用程序如何响应客户端对特定终结点的请求,它是一个URI(或路径)和一个特定的HTTP请求方法(GET、POST等)。 每个路由都可以有一个或多个处理程序函数,这些函数在路由匹配

不一样的css,sass(scss)的基本使用

前言此文主要记录sass的scss语法的基本使用。sass是css的预编译器,它扩展一些css所没有的变量的定义、条件控制、循环、自定义方法等。基础内容1.变量/*scss*/ //声明变量 $pri

02.0. Go 语言基础

Go是一门类似C的编译型语言,但是它的编译速度非常快。这门语言的关键字总共也就二十五个,比英文字母还少一个,这对于我们的学习来说就简单了很多。先让我们看一眼这些关键字都长什么样: breakdefau

02.2. Go 基础

这小节我们将要介绍如何定义变量、常量、Go内置类型以及Go程序设计中的一些技巧。 定义变量 Go语言里面定义变量有多种方式。 使用var关键字是Go最基本的定义变量方式,与C语言不同的是Go把变量类型

03.0 Web 基础

学习基于Web的编程可能正是你读本书的原因。事实上,如何通过Go来编写Web应用也是我编写这本书的初衷。前面已经介绍过,Go目前已经拥有了成熟的HTTP处理包,这使得编写能做任何事情的动态Web程序易

【Java 反射学习】Java 反射基础

知识点 类是用来描述对象的,而反射就可以理解为是用来描述类的。 类中的属性包括: Class类本身 Package类所在的包 Field类中的属性 Method类中的方法 Constructor类中的