精通CSS-读书记录 ch1-ch3

最新推荐文章于 2023-10-08 01:19:55 发布

vardemy

最新推荐文章于 2023-10-08 01:19:55 发布

阅读量144

点赞数

分类专栏：精通CSS读书记录文章标签： CSS

本文链接：https://blog.csdn.net/qq_36744349/article/details/79822407

版权

精通CSS读书记录专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本想开始学JS，但是去W3C看了两天语法觉得就此离开CSS去面对这么庞大的语言有点太莽撞。而且想着就算不会JS也得把CSS学扎实了，那边在CSSZENGARDEN才草草仿作了几张简单页面，技术必然不到家。其实我也询问了做前端的前辈，但前辈的说法是，直接上JS，称HTML+CSS入门简单无所谓。可是CSS和JS也没有必然联系啊，静态页面做好也能满足不少需求。

但是网上瞎逛来精进自己的技术太不靠谱了，所以打算看看《精通CSS》，系统地学一学。没法太急躁

关键词：微格式、选择器、优先级计算规则、文档结构、outline属性、全局reset、外边距叠加、包含浮动元素的div、匿名块框等

第一章

自己还没有使用过的标签

blockquote
code
abbr
acronym
code
fieldset
legend
label
caption
thead
tbody
tfoot

在分配ID和类名时，要尽可能保持名称与表现方式无联系。应该根据“它们是什么”来为元素命名，而不应该根据“它们的外观如何”来命名。

此处，作者推荐使用连字符的命名，而不是camelCase嘻嘻。

只有在绝对确定这个元素只会出现一次的情况下，才应该使用ID。

微格式：有一组开发人员决定开发一套标准的额命名格式和标记模式来表示人、地点或日期等类型的信息。微格式让我们可以以一种特定的方式标记数据，让其它程序和服务可以访问它。查阅其正式规范:http://microformats.org

可以使用W3C验证器（一个验证器bookmarklet）或firefox web developer extension等插件检查HTML是否是有效的。

第二章

选择器回顾：

常用的选择器：类型选择器（又称元素选择器或简单选择器）和后代选择器。

寻找更特定的元素：类和ID选择器。

善用选择器的结合。

伪类选择器：link和.visited称为链接伪类，只能应用于锚元素。:hover :active和:focus称为动态伪类。伪类可以结合使用，比如a:visited:hover{color:olive;)

通用选择器；

高级选择器；（CSS具有向后兼容性）在对于站点功能或布局很重要的任何元素上，都应该避免使用这些高级选择器。

子选择器：只选择元素的直接后代 >。书中提到IE7中有个bug, 如果父元素和子元素之间有HTML注释，就会出问题，难以想象注释会影响代码解析。（可以用通用选择器来模拟子选择器的效用，基本思想就是用通用覆盖掉子元素后代上的样式）。

相邻同胞选择器：可以用于定位同一个父元素下某个元素之后的元素。例如可以使用相邻同胞选择器让顶级标题后面的第一个段落显示为粗体。（也就是邻近的第一个元素吧）

属性选择器：根据某个属性是否存在或属性的值来寻找元素[]

<a> 标签的 rel 属性用于指定当前文档与被链接文档的关系。

用于 <a> 标签的可选属性 rel 和 rev 分别表示源文档与目标文档之间正式的关系和方向。rel 属性指定从源文档到目标文档的关系，而 rev 属性则指定从目标文档到源文档的关系。这两种属性可以在 <a> 标签中同时使用。

层叠和特殊性

层叠采用以下重要度次序：

标有！important的用户样式

标有！important的作者样式

作者样式

用户样式

浏览器/用户代理应用的样式

然后根据选择器的特殊性决定规则的次序。具有更特殊选择器的规则优先于具有一般选择去的规则，如果两个规则的特殊性相同，那么后定义的规则优先。

书中给出一个demo，查看两个h2的颜色：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>sound wave effect</title>

	<link rel="stylesheet" media="screen" href="sonicwave_style.css">

<style>
    #content div#main-content h2{
        color:gray;
    }
    #content #main-content>h2{
        color:blue;
    }
    body #content div[id="main-content"] h2{
        color:green;
    }
    #main-content div.news-story h2{
        color:orange;
    }
    #main-content [class="news-story"] h2{
        color:yellow;
    }
    div#main-content div.news-story h2.first{
        color:red;
    }
    </style>
</head>



<body>
<div id="content">
    <div id="main-content">
        <h2>Strange Times</h2>
        <p>Here you can read bizarre news stories.</p>
        <div class="news-story">
        <h2 class="first">Bog Snorkeling Champion</h2>
            <p>The 2008 bod snorkeling championship</p>
        </div>
    </div></div>
    
</body>
</html>

结果为两个h2均显示为灰色。（读CSS实战手册时自己选择跳过这部分的讲解了+ +）

为了计算规则的特殊性，给每种选择器分配一个数字值。然后将规则的每个选择器的值加在一起。选择器的特殊性分成4个称为等级：a, b, c, d。

如果样式时行内样式，那么a=1

b等于ID选择器的总数

c等于类，伪类和属性选择器的数量

d等于类型选择器和伪元素选择器的数量

故

 #content div#main-content h2{
        color:gray;
    }//包含两个ID选择器两个类型选择器：0202

    #content #main-content>h2{
        color:blue;
    }//包含两ID选择器 似乎子选择器没有优先级？：0201 经检验 >也只算一个类型选择器吧

    body #content div[id="main-content"] h2{
        color:green;
    }//包含一个ID选择器 一个属性选择器 两个类型选择器：0112

    #main-content div.news-story h2{
        color:orange;
    }//包含一个ID选择器 一个类选择器 一个类型选择器：0111

    #main-content [class="news-story"] h2{
        color:yellow;
    }//包含一个ID 一个属性 一个类型：0111

    div#main-content div.news-story h2.first{
        color:red;
    }//一个ID 两个类 一个类型：0121

再来看《CSS实战手册》中的说法：差不多哈哈哈哈

进一步解释：基本上用style属性编写的规则总是比其它任何规则特殊。具有ID选择器的规则比没有ID.........

为了避免过分混乱，我尽量保持一般性样式非常一般，特殊样式尽可能特殊，这样就不需要覆盖特殊样式了

一种有意思的特殊性用法是在主题body标签上应用类或ID，这样做之后，就可以根据页面或在站点范围内覆盖样式，例如，如果希望新的页面具有特殊的布局，那么可以在主页的主题元素上添加一个类名，并且用它覆盖样式。

Firefox中可以使用firebug来查明样式来源。

2.4

2.4.1对文档应用样式

还可以从另一个样式表导入样式表如@import url(/css/layout.css);但是导入样式表比链接样式表慢。使用结构良好的单一CSS文件可以显著提高下载速度。

给每个注释添加一个标志@，容易搜寻文档。

代码结构：

1.最一般的规则 general styles

1.1.所有全局reset样式

1.2链接标题和其它元素

2.辅助样式 helper styles

2.1表单

2.2通知和错误

2.3一致的条目

3.页面结构 page structure

3.1标题、页脚和导航

3.2布局

3.3其它页面结构元素

4.页面组件 page components

各个压面

5.处理覆盖和例外情况 overrides

（在一层样式上构建另一层样式，处理的样式越来越特殊。）

（注释方法：

/*@group general styles

---------------------------------------------------------------------------------*/）

为了方便，可以在文档开头添加一个迷你颜色查询表。为了使注释更有意义，可以使用关键字来区分重要的注释。如@todo来表示某些东西需要完善，@bugfix表示代码或特定浏览器遇到的问题，@workaround表示并不完善的权宜之计。

CSS优化器：www.cssoptimiser.com/

第三章可视化格式模型

“你要掌握的3个最重要的CSS概念是浮动，定位和盒子模型”

3.1盒模型概述

outline属性：轮廓绘制在元素框之上

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。不影响页面布局

注释：轮廓线不会占据空间，也不一定是矩形。

outline 简写属性在一个声明中设置所有的轮廓属性。

可以按顺序设置如下属性：

outline-color
outline-style
outline-width

全局reset

相当于我之前所称的“预处理”吧。目前比较全的CSS重设(reset)方法总结

3.1.2 外边距叠加：当两个或更多垂直外边距相遇时，它们将形成一个外边距，这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。而且外边距甚至可以与本身发生叠加。假设有一个空元素，它有外边距，但是没有边框和内边距，在这种情况下，顶部外边距与底部外边距就碰到了一起，它们会发生叠加。（元素的顶外边距与父元素的顶外边距发生叠加；元素的顶外边距和底外边距发生叠加（空元素吧）；空元素中已经叠加的外边距与另一个空元素的外边距发生叠加）。只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框，浮动框或绝对定位框之间的外边距不会叠加。

3.2定位概述

3.2.1 可视化格式模型

display属性取值none时，不占用文档空间，但是opacity要吧...

CSS中有三种基本的定位机制：普通流，浮动和绝对定位。那其实我都掌握得还行了，所以以后就大胆用吧！我就喜欢这种总结性的语句。

行内框可以使用水平内边距，边框和外边距调整它们的水平间距，但是垂直内边距，边框和外边距不影响内框的高度。相当于行内元素只在水平方向有变化。修改行内框尺寸的唯一方法是修改行高或者水平边框，内边距和外边距。

匿名块框：将一些文本添加到一个块级元素的开头时，即使没有把这些文本定义为块级元素，它也会被当成块级元素对待。它不与专门定义的元素相关联。块级元素内的文本行也会发生类似情况。假设有一个包含3行文本的段落。每行文本形成一个匿名块框，无法直接对匿名块或行框应用样式。

3.2.2 相对定位

相对于它的起点移动。无论是否移动，元素仍然占据原来的框。因此，移动元素会导致它覆盖其他框。因为对于其它框来说它仍然在最初的位置。实际上呗看做普通流定位模型的一部分，因为元素的位置是相对于它在普通流中的位置的。

3.2.3绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。普通文档流中其它元素的布局就像绝对定位的元素不存在一样。

刚刚尝试了div嵌套，一共三层，最外层设置了absolute,中间层设置了relative，最里层设置了relative。接着我将中间层相对最外层定位，最里层相对于中间层定位。结果却不如我所料。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>sound wave effect</title>

	<link rel="stylesheet" media="screen" href="sonicwave_style.css">

<style>
    *{
        padding:0;
        margin:0;
    }
    #box1{
        height:200px;
        width:200px;
        background-color:antiquewhite;
        position:absolute;
    }
    #box2{
        height:100px;
        width:100px;
        background-color:aquamarine;
        position:relative;
        top:30px;
        left:40px;
    }
    #box3{
        height:50px;
        width:50px;
        background-color:azure;
        position:relative;
        bottom:5px;
        left:5px;
    }
    </style>
</head>



<body>
<div id="box1">
    <div id="box2"> 
        <div id="box3">
        </div>
    </div>
</div>
    
</body>
</html>

结果为：