背景

作为一个后端开发，曾经尝试过学习前端，但是总觉不得要领，照猫画虎，而公司里又有专业的前端开发，工作中几乎接触不到实际的前端任务，所以前端的技能田野一直是一片荒芜。但是笔者深知前端的技能对找工作和面试又有着重要的帮助，在二线和三线城市，高级开发几乎都需要精通前端的知识，所以这次下定决定要好好学习一番。这几天搜索到了一本主讲CSS实例的书，开始学习，希望能坚持下去，同时，也希望所记笔记能对大家有所帮助。

笔记参考书籍：CSS那些事儿

CSS基础部分笔记

选择器

选择器有下面几类，按照是否常用依次下排，其中 包含选择器 属性选择器 子选择器和相邻选择器是我比较陌生的

  • 通配符选择器：*，用于对页面所有元素，或者某个标签下的所有元素应用格式
  • 类选择器：.名
  • id选择器：#名
  • 包含选择器：p span {} 也是用于某个元素的子元素的，可以对元素的子元素应用某种格式
  • 属性选择器：通过属性或者属性值来确定元素
    • E[attr]：有某属性的元素
    • E[attr="value"]:有某属性并且属性值等于value的元素
    • E[attr~="value"]:有某属性，并且属性值中包含空格，按照空格切割属性值，得到的字符数组中有=value的子串
    • E[attr|="value"]:有某属性，并且属性值以value开头，并且存在 - 连字符
  • 子选择器和相邻选择器
    • 子选择器：父元素 > 子元素，必须是下面的第一代直系子代才可以。
    • 相邻选择器：元素1 + 元素2，表达的是同一个父级下相邻的兄弟的关系，被选择的是元素1的第一个兄弟元素2

选择器的优先级

首先存在两个基本原则：

  • 同一个选择器的效果会覆盖，以文档中更靠后的选择器定义样式为准
  • 子类标签会继承父类元素的CSS属性，除了h1~h6

针对同一个标签，使用不同的选择器选择它，优先级如下：

  • 标签选择器 伪类和伪对象：1分
  • 类选择器和属性选择器：10分
  • id选择器：100分
  • style属性：1000分
  • ！important：100000分

书中举了一个例子，我这也实现出来，验证效果

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>css优先级</title>

<style>

p{

    color:blue;

}

p.myColor{

    color:black;

}

.myColor{

    color:yellow;

}

#myColor{

    color:greenyellow;

}

</style>

</head>

<body>

<p>行1</p>

<p class="myColor">行2</p>

<p class="myColor" id="myColor">行3</p>

<p style="color:red" class="myColor" id="myColor">行4</p>

</body>

</html>

效果如下：

各行的计算分数：

  • 行1没有疑问，就只应用了p标签选择器设置的颜色
  • 行2可以应用p.myColor 和 .myColor ,按照得分，会应用p.myColor设置的颜色
    • p.myColor 得分= 1+10 = 11分
    • .myColor 得分 = 10分
  • 行3，显而易见，会应用id选择器设置的颜色
  • 行4，显而易见，会应用style属性本身设置的颜色

如果在p的标签选择器中应用

p{

    color:blue !important;

}

行1到行4都会变成蓝色

盒模型的简要介绍

盒模型在网上已经有很多讲解博客了，基本的知识点就用下图来代替

下面依旧实操书中给的例子来理解盒模型，代码如下

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>css盒模型</title>

    <style>

        div {

            width: 200px;

            height: 30px;

            padding: 20px;

            border: 5px solid #FF0000;

            margin-bottom: 10px;

            color: #FFFFFF;

            background-color: #000000;

        }

    </style>

</head>

<body>

    <div>第一个div</div>

    <div>第二个div</div>

    <div>第三个div</div>

</body>

</html>

效果如下：

内边距为20px，背景颜色包含了内容和内边距的部分。

CSS那些事读书笔记-1的更多相关文章

  1. css权威指南读书笔记

    今天翻手机,翻到了许久之前看css权威指南时的笔记,遂移到博客中来. 1.属性选择器p.one class名为one的p元素p[class][name] 含有class和name属性的p元素p[cla ...

  2. 《CSS Mastery》读书笔记（2）

    第二章  目标的样式   要用CSS样式化一个HTML元素,必须要定位一个元素, CSS的选择器就是这样的手段. 这章中,你要学到的 • Common selectors 普通选择器 • Advanc ...

  3. 《CSS Mastery》 读书笔记 (1)

    --本笔记中英混合,专业名词尽量不翻译,免得误解,如果不习惯,就不用往下看了,走好不送. 第一章 基础 人类的好奇心总是促使我们捣鼓,捣鼓是最好做有效的学习CSS的方法 In this chapter ...

  4. 【Todo】淘宝十年产品事-读书笔记

    书籍位置: /Users/baidu/Documents/Data/Interview/业界/淘宝十年产品事.pdf

  5. 《CSS世界》读书笔记（十六）

    <!-- <CSS世界>张鑫旭著 --> line-height与“垂直居中” line-height 可以让单行或多行元素近似垂直居中,原因在于 CSS 中“行距的上下等分机 ...

  6. 《CSS世界》读书笔记（十五）

    <!-- <CSS世界>张鑫旭著 --> 字母x——CSS世界中隐匿的举足轻重的角色 在各种内联相关模型中,凡是涉及垂直方向的排版或者对齐的,都离不开最基本的基线(baseli ...

  7. 《CSS世界》读书笔记（十四）

    <!--  <CSS世界>张鑫旭著 --> 功勋卓越的 border 属性 border-width 不支持百分比值 border-style 类型 border-style ...

  8. 《CSS世界》读书笔记（十三）

    <!-- <CSS世界>张鑫旭著 --> margin 无效情形解析 (1)display 计算值 inline 的非替换元素的垂直 margin 是无效的.对于内联替换元素, ...

  9. 《CSS世界》读书笔记（十二）

    <!-- <CSS世界>张鑫旭著 --> 正确看待 CSS 世界里的 margin 合并 什么是 margin 合并 块元素的上外边距(margin-top)与下外边距(mar ...

  10. 《CSS世界》读书笔记（十一）

    激进的margin属性 margin与元素尺寸以及相关布局 元素尺寸 border box尺寸,对应jQuery中的$().outerWidth()和$().outerHeight()方法,在原生DO ...

随机推荐

  1. 从韩国客机事故看Java异常处理机制：保障程序的“安全着陆”

    当地时间12月29日上午9时,韩国济州航空编号7C2216航班坠毁于韩国务安机场,除救出的两人外,预计事故其余人员全部遇难.据了解,失事客机因起落架故障准备进行机腹着陆,在此过程中发生事故,最终与机场 ...

  2. 第二章 dubbo源码解析目录

    6.1 如何在spring中自定义xml标签 dubbo自定义了很多xml标签,例如<dubbo:application>,那么这些自定义标签是怎么与spring结合起来的呢?我们先看一个 ...

  3. Fanatastic pg walkthrough 10 Easy

    nmap 发现9090 22 和3000端口 发现漏洞 但是不知道还能读到哪些敏感文件 hacktricks 看看 https://book.hacktricks.xyz/network-servic ...

  4. 使用pkg对nodejs项目打包

    pkg的介绍可以阅读官方说明.下面针对使用做一个简单的说明. 1.  安装, 假设需要将项目打包成 win-x86 下运行的软件包,需要确定使用的 pkg 和 pkg-fecth 的版本,目前最后一个 ...

  5. AI编程：Coze + Cursor实现一个思维导图的浏览器插件

    这是小卷对AI编程工具学习的第3篇文章,今天以实际开发一个思维导图的需求为例,了解AI编程开发的整个过程 1.效果展示 2.AI编程开发流程 虽然AI编程知识简单对话就行,不过咱要逐步深入到项目开发中 ...

  6. 浅谈Redis的三种集群策略及应用场景

    本文分享自天翼云开发者社区<浅谈Redis的三种集群策略及应用场景>,作者:段林 Redis提供了三种集群策略: 1.主从模式:这种模式⽐较简单,主库可以读写,并且会和从库进⾏数据同步,这 ...

  7. Q：oracle通过正则表达式替换对应值

    示例 把http://192.168.1.1:8888/a.html中的192.168.1.1:8888/替换成172.32.32.1:9999/ SELECT replace('http://192 ...

  8. 告别 DeepSeek 系统繁忙，七个 DeepSeek 曲线救国平替入口，官网崩溃也能用！

    前言 DeepSeek作为一款备受瞩目的国产大模型,以其强大的功能和卓越的性能赢得了众多用户的青睐.然而,随着用户量的激增,DeepSeek官网近期频繁遭遇服务器繁忙甚至崩溃的问题,给广大用户带来了不 ...

  9. DeepSeek处理自有业务的案例：让AI给你写一份小众编辑器(EverEdit)的语法着色文件

    1 DeepSeek处理自有业务的案例:让AI给你写一份小众编辑器(EverEdit)的语法着色文件 1.1 背景   AI能力再强,如果不能在企业的自有业务上产生助益,那基本也是一无是处.将企业的自 ...

  10. Typescript通用帮助类，格式化日期时间等

    /** * 格式化日期选项 */ export class DateFormatOption { "M+": number;//月 "d+": number;/ ...