1、希望边框出现,必须声明一个样式,border-style。比如border-style: solid; 因为其默认值是none,不会显示。
2、border-style相关属性单词,便于理解记忆
dotted | 英[ˈdɒtɪd] | 美[ˈdɑ:tɪd] |
adj. |
v. |
dashed | 英[dæʃt] |
n. |
v. |
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 选择器用于选取属于其父元素的首个子元素的指定选择器。
这解释真拗口。。
{
background:yellow;
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">
</style>
</head>
<body>
<p>文字<q
</body></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、