CSS笔记（四）
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 网页布局
- CSS 总结
CSS 伪类
CSS伪类是用来添加一些选择器的特殊效果。
1. 语法
伪类的语法：
selector:pseudo-class {property:value;}
CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}
2. anchor 伪类
在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示
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 之后，才是有效的。
注意：伪类的名称不区分大小写。
伪类和CSS类
伪类可以与 CSS 类配合使用：
3. 伪类和 CSS 类
a.red:visited {color:#FF0000;}
<a class=”red” href=”css-syntax.html”>CSS 语法</a>
如果在上面的例子的链接已被访问，它会显示为红色。
4. first-child 伪类
您可以使用 :first-child 伪类来选择父元素的第一个子元素。
注意：在IE8的之前版本必须声明<!DOCTYPE> ，这样 :first-child 才能生效。
匹配第一个 <p> 元素
在下面的例子中，选择器匹配作为任何元素的第一个子元素的 <p> 元素：
p:first-child
{
color:blue;
}
在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：
p > i:first-child
{
color:blue;
}
在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：
p:first-child i
{
color:blue;
}
CSS 伪元素
CSS伪元素是用来添加一些选择器的特殊效果。
1. 伪元素的语法：
selector:pseudo-element {property:value;}
CSS类也可以使用伪元素：
selector.class:pseudo-element {property:value;}
2. first-line 伪元素
first-line 伪元素用于向文本的首行设置特殊样式。
在下面的例子中，浏览器会根据 first-line 伪元素中的样式对 p 元素的第一行文本进行格式化：
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
3. first-letter 伪元素
first-letter 伪元素用于向文本的首字母设置特殊样式：
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
CSS 导航栏
熟练使用导航栏，对于任何网站都非常重要。
使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。
具体流程看菜鸟教程：https://www.runoob.com/css/css-navbar.html
CSS 网页布局
网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。
1. 头部区域
头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}
2. 菜单导航区域
菜单导航条包含了一些链接，可以引导用户浏览其他页面：
/* 导航条 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 导航链接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 链接 - 修改颜色 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
3. 内容区域
内容区域一般有三种形式:
- 1 列：一般用于移动端
- 2 列：一般用于平板设备
- 3 列：一般用于 PC 桌面设备
我们将创建一个 3 列布局，在小的屏幕上将会变成 1 列布局（响应式）：
/* 创建三个相等的列 */
.column {
float: left;
width: 33.33%;
}
/* 列后清除浮动 */
.row:after {
content: “”;
display: table;
clear: both;
}
/* 响应式布局 - 小于 600 px 时改为上下布局 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
4. 底部区域
底部区域在网页的最下方，一般包含版权信息和联系方式等。
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}
CSS 总结
本教程已讲解了如何创建样式表来同时控制多重页面的样式和布局。
你已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距。
同时，你也学会了如何定位元素、控制元素的可见性和尺寸、设置元素的形状、将一个元素置于另一个之后，以及向某些选择器添加特殊的效果，比如链接。
你已经学习了CSS，下一步学习什么呢？
下一步应该学习 JavaScript 。
JavaScript 是最流行的语言之一。
JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。
JavaScript可以使您的网站更具活力。
许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的 JavaScript 片段添加到网页中。