编程技术文章分享与教程

网站首页 > 技术文章 正文

女朋友要我教她CSS，我就写了这一篇长文，感动哭了?

hmc789 2024-11-25 12:49:43 技术文章 2 ℃

写作背景

女朋友要我教她CSS，于是我就折腾了一周，终于完成了这篇长文…

然后，然后？然后当我发布这篇文章的时候，她会感动到哭吗？

熟悉HTML知识

HTML常见元素

head 部分

body部分

doctype的意义是什么

  • 让浏览器以标准模式渲染
  • 让浏览器知道元素的合法性

HTML、XHTML、HTML5的关系

  • HTML属于SGML（标记语言）
  • XHTML属于XML，是HTML进行XML严格化的结果
  • HTML5不属于SGML或XML，比XHTML宽松

HTML5有什么变化

  • 新的语义化元素
  • 表单增强
  • 新的API（离线、音视频、图形、实时通信、本地存储、设备能力）
  • 分类和嵌套变更

em和 i 有什么区别

  • em是语义化的标签，表强调
  • i 是纯样式的标签，表斜体
  • HTML5中 i 不推荐使用，一般用作图标

语义化的意义

  • 开发者容易理解
  • 机器容易理解（搜索、读屏、软件）
  • 有利用SEO
  • semantic microdata（语义微数据）例电影有评分

哪些元素可以自闭合

  • 表单元素 input
  • 图片 img
  • br hr
  • meta link

HTML和DOM关系

  • HTML是“死”的（字符串）
  • DOM是由HTML解析而来的，是活的
  • JS可以维护DOM

property 和 attritube 区别

  • attritube 是“死”的
  • property 是活的
  • 相互之间不会影响

form的好处

  • 直接提交表单
  • 使用 submit / reset 按钮
  • 便于浏览器保存表单
  • 第三方库可以整体取值
  • 第三方库可以进行表单验证

CSS精华（Cascading Style Sheet）层叠样式表

选择器

  • 用于适配HTML元素
  • 分类和权重
  • 解析方式和性能
  • 值得关注的选择器

选择器分类

  • 元素选择器 a{}
  • 伪元素选择器 ::before{}
  • 类元素选择器 .link{}
  • 属性选择器 [type=radio]{}
  • 伪类选择器 :hover{}
  • ID选择器 #id{}
  • 组合选择器 [type=checkbox] + label{}
  • 否定选择器 :not(.link){}
  • 通用选择器 *{}

选择器权重（1）

  • ID选择器 #id{}+100
  • 类 属性 伪类 +10
  • 元素 伪元素 +1
  • 其它选择器 +0

例子：计算一个不进位的数字

#id.link a[href]
————————————————
计算过程：
#id +100
.link +10
a +1
[href] +0
结果:111
#id .link.active
————————————————
计算过程：
#id +100
.link +10
.active +10
结果:120

那么，我们怎么理解 不进位的数字 这关键字眼呢？用一个简单例子吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
        #test1{
            color: red;
        }
        #test1.test1{
            color: blue;
        }
        .test2{
            color: red;
        }
        div.test2{
            color: blue;
        }
        #test3{
            color: red;
        }
        .c1.c2.c3.c4.c5.c6.c7.c8.c9.c10.c11{
            color: blue;
        }
    </style>
</head>
<body class="body" id="body">
    <div id="test1" class="test1">蓝色</div>
    <div class="test2">蓝色</div>
    <div id="test3" class="c1 c2 c3 c4 c5 c6 c7 c8 c9 c10 c11">红色</div>
</body>
</html>

结果如下图所示：


不妨发现，最后一个 div，尽管我们类选择器有11个，加起来有110，但是依旧没有 id 选择器优先级高，正是因为这个不进位的数字，简单说：你大爷还是你大爷！


Tags：

猜你喜欢

标签列表
最新留言