CSS笔记

来源：互联网发布：欧亚联盟知乎编辑：程序博客网时间：2024/06/05 20:22

1、希望边框出现，必须声明一个样式，border-style。比如border-style: solid; 因为其默认值是none，不会显示。

2、border-style相关属性单词，便于理解记忆

dotted英[ˈdɒtɪd]美[ˈdɑ:tɪd]

adj.有点的，星罗棋布的;v.点缀(dot的过去式和过去分词); 布满; （口）打，击（某人） ; 以小圆点标出（某物）;

dashed英[dæʃt]

n.虚线;v.冲，猛冲( dash的过去式和过去分词 ); 猛掷，（使）猛撞; 匆匆地写或画; 打碎;

solid英[ˈsɒlɪd]美[ˈsɑ:lɪd]

adj.固体的; 实心的; 结实的，可靠的; 可信赖的;n.固体; 立体图形; 立方体;

groove英[gru:v]美[ɡruv]

n.沟，槽; [俚语] 常规，老套：确定的规范; [俚语] 理想状况; [俚语] 非常愉快的经历;vt.刻沟，刻槽;vi.极其快乐，极其满意，过得快活; 受愉快的刺激影响; 投合，契合;

3、外边距合并：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

4、行框和行内框：

行内框只是一个概念，它无法显示出来，但是它又确实存在
它的高度就是行高
在没有其他因素（padding）影响的时候，行内框等于内容区域

行框（line box）。同行内框类似，行框是指本行的一个虚拟的矩形框
行框高度等于本行内所有元素中行高最大的值

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

5、相对定位是“相对于”元素在文档中的初始位置。

绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

6、

purple英[ˈpɜ:pl]美[ˈpɜ:rpl]

adj.紫色的; 帝王的; 词藻华美的;n.紫色; 紫（红）衣，紫袍; 帝位，皇权; 皇族;

vt.使成紫色;

7、css多类选择器

.important.warning {background:silver;}

8、类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写。

9、属性选择器

将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色

a[href][title] {color:red;}

10、

根据部分属性值选择 如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。

p[class~="important"] {color: red;}

能应用于任何属性

11、子串匹配属性选择器

类型描述[abc^="def"]选择 abc 属性值以 "def" 开头的所有元素[abc$="def"]选择 abc 属性值以 "def" 结尾的所有元素[abc*="def"]选择 abc 属性值中包含子串 "def" 的所有元素

举例：希望对指向 W3School 的所有链接应用样式

a[href*="w3school.com.cn"] {color: red;}

12、特定属性选择器

*[lang|="en"] {color: red;}

上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。

注意：一定是以en或者en- 开头，诸如eng ，enfg这样的不行

13、后代选择器示例： h1 em{ color:red; }

两个元素之间的层次间隔可以是无限的。

14、子元素选择器

希望选择只作为 h1 元素子元素的 strong 元素 h1> strong {color:red;}

15、结合后代选择器和子选择器

table.company td > p

选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。

16、相邻兄弟选择器如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器

要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

17、相邻兄弟结合符还可以结合其他结合符：

html > body table + ul {margin-top:20px;}

这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

18、锚伪类

a:link {color: #FF0000}    /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。

19、:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。

这解释真拗口。。

p:first-child i
{
background:yellow;}

看上述例子，比如p的父亲是body，那么这个选择的就是body下的第一个P元素，会把第一个P内的所有i元素都赋成黄色背景

20、设置每个 <ul> 的首个子元素，并设置其样式：

ul>:first-child
{
background:yellow;
}

21、:lang选择器

选择带有以 "en" 开头的 lang 属性值的每个 <p> 元素，并设置其样式：

p:lang(en)
{ 
background:yellow;
}

22、伪类

23、伪元素

24、 :lang 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型：

<html>
<head>

<style type="text/css">
q:lang(no)
   {
   quotes: "~" "~"
   }
</style>

</head>

<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>

25、图像透明度

/* for IE */

filter:alpha(opacity=60);

/* CSS3 standard */

opacity:0.6;

值越小，越透明

26、

27、

28、

29、

30、

0 0