CSS 学习笔记
什么是 CSS
CSS 称为层叠样式表，也可以称为 CSS 样式表或样式表，其扩展名位 .CSS 。CSS 是用于增强或控制网页样式，并也许将样式信息与网页内容分割开的一种标记性语言
HTML 使用 CSS 样式
CSS 的样式一共分为四种，并且优先级为 行内样式 > 内嵌样式 > 链接样式 > 导入样式
行内样式
直接把 CSS 代码添加到 HTML 标记中，即作为 HTML 标记的属性
使用方法就是在 HTML 中使用 style 属性。
<p style = 'color:red;font-size:px'>段落样式</p>
内嵌样式
将 CSS 样式代码添加到 <head></head>，并且用 <style></style>进行声明。
<head>
<meta charset="utf-8" />
<style type="text/css">
h1{
color: red;
}
</style>
</head>
<body>
<h1>大会总结</h1>
</body>
这里的 type 是 style 属性，text/css 是 type 是他的值。它们是告诉浏览器这里面的文本内容（text）要用当前的层叠样式表（css）来解析，不能当作其他来解析。
链接样式
将页面内容和样式风格代码分离成两个或多个文件
使用方法就是在外部定义 CSS 样式表并且形成 .css 为扩展名的文件，然后 <link> 链接标记链接到页面，而且链接语句必须放在页面的 <head> 标记区。
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<title></title>
</head>
- rel
- 指定链表到样式表，其值为 stylesheet
- type
- 表示样式类型为 css
- href
- 指定了 CSS 样式表所在的位置，此处表示在当前目录下的 CSS 文件夹下有个 style.css 文件
导入样式
导入到 HTML 文件中，也需要创建 CSS 文件。
<head>
<style>
@import '1.css'
</style>
</head>
选择器
选择器也称选择符，HTML 语言中所有的标记都是通过不同的 CSS 选择器进行控制的。选择器不只是 HTML 文档中元素标记，它还可以是类（不同于面向对象中的类），ID(元素的唯一特殊名称)或是元素的某种状态
元素选择器
通配符选择器
选择当前 html 下所有的标签。
| 选择符 | 名称 | 版本 | 描述 |
|---|---|---|---|
| * | 通配符选择器 | CSS2 | 所有元素对象 |
代码如下：
*{ color: red;}
类型选择器
HTML 文档由多个不同标记组成，而 CSS 选择器就用于声明那些标记采用的样式，类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。
| 选择符 | 名称 | 版本 | 描述 |
|---|---|---|---|
| E | 类选择器 | CSS1 | 一文档语言对象类型作为选择符 |
/* 这里 h1 是 E ,E 就是指标签类型 */
/*下面的规则匹配文档树中所有 h1 元素：*/
h1{ color: red;}
ID 选择器
ID 选择器允许以一种独立于文档元素的方式来指定样式。与类选择器相似
- 语法：
ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
#idvalue{property:value}
idvalue 是选择器的名称，自己定义。
类选择器可以给任意数量的标签定义，而 id 选择器在页面中的标记只能使用一次，一个网页文件中只能有一个元素，使用某一个 ID 的值
优先级： ID 选择器 > 类选择器
| 选择符 | 名称 | 版本 | 描述 |
|---|---|---|---|
| E#myid | ID 选择器 | CSS1 | 以唯一标识符 id 属性等于 myid 的 E 对象作为选择符 |
代码如下：
<html>
<head>
<style type="text/css">
#test{
color: red;
}
</style>
</head>
<body>
<h1 id='test'>大会总结</h1>
</body>
</html>
注意：
- ID 选择器中可以忽略通配选择器
- ID 选择器不引用 class 属性的值
- 与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。不能同一文档出现重复值。
- 只能在文档中使用一次
- 不能使用 ID 词列表
- 不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
- ID 选择器区分大小写
类选择器
在一个页面中，使用标签选择器，会控制页面中所有此类标记的显示样式。这个时候可以用类选择器来重新定义，一个标记具有class 属性。
| 选择符 | 名称 | 版本 | 描述 |
|---|---|---|---|
| E.myclass | 类 选择器 | CSS1 | 以 class 属性包含 myclass 的 E 对象作为选择符。 |
代码如下：
<html>
<head>
<style type="text/css">
.one{
color: red;
}
</style>
</head>
<body>
<h1 class='one'>大会总结</h1>
</body>
</html>
- 和 id 一样，class 可作为派生选择器。
.one td {
color: #f60;
background: #666;
}
在上面这个例子中，类名为 one 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 one 的更大的元素可能是一个表格或者一个 div）
- 元素也可以基于它们的类而选择
td.one {
color: #f60;
background: #666;
}
上面的例子中。类名为 one 的单元格。
<td class="one">
注意：
- 类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
关系选择器
包含选择器
| 选择符 | 名称 | 版本 | 描述 |
|---|---|---|---|
| E F | 包含选择器 | CSS1 | 选择所有被 E 元素包含的 F 元素 |
代码如下：
<html>
<head>
<style type="text/css">
li a{ color:yellow;}
</style>
</head>
<body>
<ul>
<li><a href="">Hello,world,</a></li>
<li><a href="">Hello,world,</a></li>
<li><a href="">Hello,world,</a></li>
<li><a href="">Hello,world,</a></li>
<li><a href="">Hello,world,</a></li>
<li><a href="">Hello,world,</a></li>
</ul>
</body>
</html>
子选择符
| 选择符 | 名称 | 版本 | 描述 |
|---|---|---|---|
| E>F | 子选择器 | CSS2 | 选择所有作为 E 元素的子元素 F |
代码如下：
/* 两个元素得相邻 */
<html>
<head>
<style type="text/css">
div > a{ color: brown;}
</style>
</head>
<body>
<div><a href="">Hello world</a></div>
</body>
</html>
相邻选择符
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
| 选择符 | 名称 | 版本 | 描述 |
|---|---|---|---|
| E+F | 相邻选择器 | CSS2 | 选择紧贴在 E 元素之后 F 元素。 |
相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。
例如，如果要使得文本变黑，紧接在 li 中类属性为 .order 元素之后的 a 标签，也就是第 4 个 li 标签。可以这样写：
<html>
<head>
<style type="text/css">
ol .order + li a{ color: black;}
</style>
</head>
<body>
<ol>
<li><a href="">Hello world</a></li>
<li><a href="">Hello world</a></li>
<li class="order"><a href="">Hello world</a></li>
<li><a href="">Hello world</a></li>
<li><a href="">Hello world</a></li>
<li><a href="">Hello world</a></li>
</ol>
</body>
</html>
注意：
- 与子结合符一样，相邻兄弟结合符旁边可以有空白符。
兄弟选择符
| 选择符 | 名称 | 版本 | 描述 |
|---|---|---|---|
| E~F | 兄弟（同级）选择器 | CSS3 | 选择 E 元素所有兄弟元素 F |
例如，如果要使得连续几个文本灰色，选择 span 元素之后兄弟标签的 p 标签。可以这样写：
<html>
<head>
<style type="text/css">
span~p{ color: gray;}}
</style>
</head>
<body>
<div>
<p>
hello world
</p>
<span>hello world</span>
<p>
hello world
</p>
<p>
hello world
</p>
<p>
hello world
</p>
</div>
</body>
</html>
属性选择器
一共分为七种类型
| 选择符 | 版本 | 描述 |
|---|---|---|
| E[att] | CSS2 | 选择具有 att 属性的 E 元素。 |
| E[att=‘val’] | CSS2 | 选择具有 att 属性且属性值等于 val 的 E 元素。 |
| E[att~=‘val’] | CSS2 | 选择具有 att 属性且属性值为一空格分割的字词列表，其中有一个等于 val 的 E 元素。 |
| E[att^=‘val’] | CSS3 | 选择具有 att 属性且属性值为以 val 开头的字符串的 E 元素 |
| E[att$=‘val’] | CSS3 | 选择具有 att 属性且属性值为以 val 结尾的字符串的 E 元素。 |
| E[att*=‘val’] | CSS3 | 选择具有 att 属性且属性值包含 val 的字符串的 E 元素 |
| E[att | =‘val’] | CSS2 |
代码如下：
<html>
<head>
<style type="text/css">
/* 属性选择符:含有某种属性 */
a[target]{ color: lightblue;}
a[data-role]{ color: lightgreen;}
/* 含有具体值得属性选择器 */
a[data-role='goToBack']{ color: orange;}
a[data-role~='goTo']{ color:black;}
a[data-role^='st']{ font-size:50px;}
a[data-role$='d']{ font-size:60px;}
a[data-role*='a']{ color:blue;}
a[data-role|='begin']{ color:darkred;}}
</style>
</head>
<body>
<a href="" target="_blank">页面跳转</a>
<a href="" data-role='goToNext'>页面跳转</a>
<a href="" data-role='goToBack'>页面跳转</a>
<a href="" data-role='goTo goToAll'>页面跳转</a>
<a href="" data-role='start'>页面跳转</a>
<a href="" data-role='end'>页面跳转</a>
<a href="" data-role='begin-end'>页面跳转</a>
<a href="" data-role='begin'>页面跳转</a>
</body>
</html>
注意:
- 只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
伪类选择器
用于向某些选择器添加特殊的效果
- 语法
/*
selector：选择器
pseudo-class：伪类
property：属性
value：值
*/
selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用。
selector.class : pseudo-class {property: value}
| 选择符 | 版本 | 描述 |
|---|---|---|
| E:link | CSS1 | 设置超链接 a 在未被访问前的样式。 |
| E:visited | CSS1 | 设置超链接 a 在其连接地址已经被访问过时的样式。 |
| E:hover | CSS1/2 | 设置元素在其鼠标悬停时的样式。 |
| E:active | CSS1/2 | 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式 |
| E:focus | CSS1/2 | 设置元素在成为输入焦点（该元素的 onfocus 事件发生）时的样式。 |
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
设置超链接的显示状态，
例如，使 a 标签在未被点击时候（连接没有出现在用户代理中）黑色，点击后是蓝色，移动到上面是红色，长按它是黄色。可以这样写：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a:link {
color: black;/* 未访问的链接 */
}
a:visited {
color: blue;/* 已访问的链接 */
}
a:hover {
color: red;/* 鼠标移动到链接上 */
}
a:active {
color: yellow;/* 选定的链接 */
}
</style>
</head>
<body>
<a href="#">Hello World</a>
</body>
</html>
注意：
- 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
- 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
- 这个伪类应用于尚未访问过的链接（link）；也就是说，链接所指的 URI 尚未出现在用户代理的历史中。这种状态与 :visited 状态是互斥的。
- 伪类选择器正常的顺序为 link， visited，hover，active
伪对象选择器
CSS 伪元素用于向某些选择器设置特殊效果。
- 语法：
/*
selector：选择器
pseudo-element：伪元素
property：属性
value：值
*/
selector:pseudo-element {property:value;}
CSS 类也可以与伪元素配合使用：
selector.class:pseudo-element {property:value;}
| 选择符 | 版本 | 描述 |
|---|---|---|
| E:first-letter/E::first-letter | CSS1 | 设置超链接 a 在未被访问前的样式。 |
| E:first-line/E::first-line | CSS1 | 设置超链接 a 在其连接地址已经被访问过时的样式。 |
| E:before/E::before | CSS1/2 | 设置元素在其鼠标悬停时的样式。 |
| E:active | CSS1/2 | 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式 |
| E:focus | CSS1/2 | 设置元素在成为输入焦点（该元素的 onfocus 事件发生）时的样式。 |
在下面的例子中，浏览器会根据 “first-line” 伪元素中的样式对 p 元素的第一行文本进行格式化：
<html>
<head>
<style type="text/css">
p:first-line
{
color: #ff0000;
font-variant: small-caps
}
</style>
</head>
<body>
<p>
You can use the :first-line pseudo-element to
add a special effect to the first line of a text!<br>
text
</p>
</body>
</html>
注意：
- “first-line” “first-letter” 伪元素只能用于块级元素。
- 伪对象要配合content属性一起使用
- 伪对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
- 伪对象的特效通常要使用:hover伪类样式来激活
- 伪类只能使用“：”
而伪元素既可以使用“:”，也可以使用“::”
因为伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾。
679
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
