CSS那些事读书笔记-1
背景
作为一个后端开发，曾经尝试过学习前端，但是总觉不得要领，照猫画虎，而公司里又有专业的前端开发，工作中几乎接触不到实际的前端任务，所以前端的技能田野一直是一片荒芜。但是笔者深知前端的技能对找工作和面试又有着重要的帮助，在二线和三线城市，高级开发几乎都需要精通前端的知识，所以这次下定决定要好好学习一番。这几天搜索到了一本主讲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的更多相关文章
- css权威指南读书笔记
今天翻手机,翻到了许久之前看css权威指南时的笔记,遂移到博客中来. 1.属性选择器p.one class名为one的p元素p[class][name] 含有class和name属性的p元素p[cla ...
- 《CSS Mastery》读书笔记（2）
第二章 目标的样式 要用CSS样式化一个HTML元素,必须要定位一个元素, CSS的选择器就是这样的手段. 这章中,你要学到的 • Common selectors 普通选择器 • Advanc ...
- 《CSS Mastery》 读书笔记 (1)
--本笔记中英混合,专业名词尽量不翻译,免得误解,如果不习惯,就不用往下看了,走好不送. 第一章 基础 人类的好奇心总是促使我们捣鼓,捣鼓是最好做有效的学习CSS的方法 In this chapter ...
- 【Todo】淘宝十年产品事-读书笔记
书籍位置: /Users/baidu/Documents/Data/Interview/业界/淘宝十年产品事.pdf
- 《CSS世界》读书笔记（十六）
<!-- <CSS世界>张鑫旭著 --> line-height与“垂直居中” line-height 可以让单行或多行元素近似垂直居中,原因在于 CSS 中“行距的上下等分机 ...
- 《CSS世界》读书笔记（十五）
<!-- <CSS世界>张鑫旭著 --> 字母x——CSS世界中隐匿的举足轻重的角色 在各种内联相关模型中,凡是涉及垂直方向的排版或者对齐的,都离不开最基本的基线(baseli ...
- 《CSS世界》读书笔记（十四）
<!-- <CSS世界>张鑫旭著 --> 功勋卓越的 border 属性 border-width 不支持百分比值 border-style 类型 border-style ...
- 《CSS世界》读书笔记（十三）
<!-- <CSS世界>张鑫旭著 --> margin 无效情形解析 (1)display 计算值 inline 的非替换元素的垂直 margin 是无效的.对于内联替换元素, ...
- 《CSS世界》读书笔记（十二）
<!-- <CSS世界>张鑫旭著 --> 正确看待 CSS 世界里的 margin 合并 什么是 margin 合并 块元素的上外边距(margin-top)与下外边距(mar ...
- 《CSS世界》读书笔记（十一）
激进的margin属性 margin与元素尺寸以及相关布局 元素尺寸 border box尺寸,对应jQuery中的$().outerWidth()和$().outerHeight()方法,在原生DO ...
随机推荐
- 使用format_obproxy_digest_log工具分析obproxy网络层耗时SQL
之前写过一个博客,介绍 ob_tools包 来实施抓取 observer 层的 gv$ob_sql_audit 的SQL,还提供一些分析SQL来通过不同维度分析缓慢的业务SQL语句,免得和应用扯皮说数 ...
- 【源码】ByteToMessageDecoder对比自定义实现
前言 在上一篇随笔中,我们探讨了如何实现一套自定义通信协议,其中涉及到的粘包和拆包处理最初是完全自定义实现的,后来则改为了继承 ByteToMessageDecoder 来简化处理. 本篇将重点讨论这 ...
- （四）.NET6.0程序部署到Docker上
1.确保安装Docker 2.把需要部署到Docker上面的项目,咱们先添加Docker的支持,启动项目右键 -> 添加 -> Docker支持,选择 Linux 然后会自动生成Docke ...
- 【FAQ】HarmonyOS SDK 闭源开放能力 —Map Kit（4）
1.问题描述: 添加了很多的marker点,每个marker点都设置了customInfoWindow,但是每次只能显示一个customInfoWindow吗? 解决方案: Marker的InfoWi ...
- Linux服务器上shell脚本批量循环测试接口连通性，bash工具循环测试curl性能
使用curl的-w选项来输出各种时间信息 -o /dev/null 用于丢弃响应体,只关心头部信息 -s 用于静默模式,不输出进度信息 %{http_code} 输出HTTP状态码 %{time_na ...
- Mac安装NTL库
Mac安装NTL库 NTL是一个高性能.可移植的C++库,为任意长度的整数提供数据结构和算法:用于整数和有限域上的向量.矩阵和多项式:以及任意精度的浮点运算. 具有以下功能: 任意长度整数运算和任意精 ...
- 安装WindowsXP系统
重点 1.虚拟磁盘类型必须选IDE,不然会找不到磁盘 2.下载地址:链接 ,提取码: 592u 3.可以将这个系统作成一个装机PE[大白菜] 4.安装成功后,调节分辨率时,安装VWmare Tool工 ...
- uni-app封装网络请求
在项目下创建一个文件夹https 然后在文件夹下面创建两个文件api.js request.js api.js 用于存放项目的请求接口 request.js 用于存放封装的请求接口get post 在 ...
- [记录点滴]Redis实现简单消息队列
[记录点滴]Redis实现简单消息队列 目录 [记录点滴]Redis实现简单消息队列 0x00 摘要 0x01 缘由 0x02 背景概念 2.1 Redis是否适合做消息队列 2.1.1 Redis的 ...
- 使用必读-使用Iceberg数据湖需要注意的点
一.开发注意事项 1.Iceberg选择合适的表版本 简述:Iceberg目前有两个表版本(V1和V2),根据数据选择合适的表版本. V1表只支持增量数据插入,适合做纯增量写入场景,如埋点数据. V2 ...