《CSS权威指南》读书笔记1

最新推荐文章于 2024-07-25 08:14:42 发布

托怀明月

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量325

点赞数

分类专栏： CSS 文章标签： css 读书笔记

本文链接：https://blog.csdn.net/sinat_38378976/article/details/70495767

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

第一章 CSS与文档

1.层叠（cascade）

2.块级元素

生成一个元素框

3.行内元素

HTML与XHTML中，块级元素不能嵌套在行内元素中；而CSS中，无限制。

4.结合CSS与HTML

link标记

<link rel="stylesheet"  type="text/css" href="sheet1.css" media="all"/>

为了成功加载一个外部样式表，link必须放在head中，但不能放在其他元素内部（如 title）
href属性的值为样式表的URL（相对或绝对均可）
media属性使用all，说明此样式表要应用于所有表现媒体
候选样式表（alternate style sheet）：将rel的属性的值置为alternate stylesheet
如果为一个rel为stylesheet的link指定了标题（title），也就指定了该样式表要作为首选样式表。此样式表要优于候选样式表使用。
如果没有指定title，则其作为一个永久样式表。

style元素

可用其包含样式表

<style type="text/css">

@import指令

<style type="text/css">
@import url(styles.css);
/*@import comes first*/
h1{color:gray;}
</style>

用@import无法指定候选样式表，每个@import指令的样式表都会加载并使用。
其可以应用于一种或多种媒体,如

@import rul(sheet2.css) all;
@import rul(blueworld.css)  screen;

@import指令要出现在样式表的开头。

CSS注释

/this is a css1 comment./
可以跨多行，但是不许嵌套

内联样式(inline style)

<p style="color:gray;">thank you.
</p>

一个内联style属性中只能放一个声明块，而不能放整个样式表。因此，不能放@import，也不能包含完整的规则。

第二章选择器

1.规则结构

2.分组

选择器分组

h1,p{color:gray;}

声明分组

h1{
font:10px Arial;
color:gray;
background:aqua;
}

也结合选择器与声明的分组

3.类选择器与ID选择器

类选择器

多类选择器

<p class="urgent warning">when handing polution.....</p>

这两个词的顺序无关紧要

.warning{font-weight:bold;}
.urgent{font-style:italic;}
p.warning.urgent{background:silver;}

ID选择器

区别

ID选择器仅使用一次
与类选择器不同，ID选择器不允许结合使用，因为ID属性不允许有空格分割的词列表。
类似于类，还可以独立于元素来选择ID，如

#improtant{color:blue;}
与下列元素匹配
<h1 id="important">ok</h1>
<p id="important">ok</p>

4.属性选择器

简单属性选择

p[class]{color:blue;}
*[title]{font-weight:bold;}
a[href][title]{font-weight:bold;}

根据具体属性选择

plant[moon="1"]{font-weight:bold;}

<plant>venus</plant>
<plant moon="1">earth</plant>
<plant moon="2">mars</plant>

也可以把多个属性-值选择器链接在一起
注意：这种格式要求必须与属性值完全匹配！

根据部分属性值选择

<p class="urgent warning">ok</p>
想选择class属性包含warning的元素，可以：
p[class~="warning"]{font-weight:bold;}

*查阅子串匹配属性选择器

特定属性选择类型

5.后代选择器

选择子元素/相邻兄弟元素
伪类与伪元素

伪类选择器

 可以结合使用

伪元素选择器

第三章结构与层叠

继承（inheritance）是从一个元素向其后代元素传递属性值所采用的的机制。确定应当向一个元素应用哪些值是，用户代理不仅要考虑继承，还要考虑声明的特殊性，另外需要考虑声明本身的来源，这个过程就称为层叠（cascade）

1.特殊性

声明与特殊性

如果多个规则与同一个元素匹配且有些声明相互冲突，在这种情况下特殊性非常重要。

通配选择器特殊性

通配选择器对一个选择器的特殊性没有贡献

ID与属性选择器的特殊性

ID选择器与指定id属性的属性选择器在特殊性上有不同
例如：

内联样式特殊性

第一个0是为内联样式声明保留的，它比所有其他声明的特殊性都高。

重要性

p.dark{
color:#333 !important;
background:white !important;}

!important总是放在声明的最后，即分号之前。
标志为!important的声明并没有特殊的特殊性值，不过要与非重要声明分开考虑。实际上，所有!important声明会分组在一起，重要声明的特殊性冲突会在其内部解决，而不会与非重要声明相混。如果一个重要声明与非重要声明冲突，胜出的总是重要声明。