CSS学习，常用常记（伪元素，导航栏）

CSS伪元素是用来添加一些选择器的特殊效果。

语法

伪元素的语法：

selector:pseudo-element {property:value;}

CSS类也可以使用伪元素：

selector.class:pseudo-element {property:value;}

:first-line 伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式。

p:first-line {
	color:#ff0000;
	font-variant:small-caps;
}

注意："first-line" 伪元素只能用于块级元素。

注意： 下面的属性可应用于 "first-line" 伪元素：

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

:first-letter 伪元素

"first-letter" 伪元素用于向文本的首字母设置特殊样式；

p:first-letter {
	color:#ff0000;
	font-size:xx-large;
}

注意： "first-letter" 伪元素只能用于块级元素。

注意： 下面的属性可应用于 "first-letter" 伪元素：

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear

伪元素和CSS类

伪元素可以结合CSS类：

p.article:first-letter {color:#ff0000;}

<p class="article">文章段落</p>

上面的例子会使所有 class 为 article 的段落的首字母变为红色。

多个伪元素

可以结合多个伪元素来使用；
在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large；
第一行中的其余文本将为蓝色，并以小型大写字母显示；
段落中的其余文本将以默认字体大小和颜色来显示；

p:first-letter{
	color:#ff0000;
	font-size:xx-large;
}
p:first-line{
	color:#0000ff;
	font-variant:small-caps;
}

CSS - :before 伪元素

":before" 伪元素可以在元素的内容前面插入新内容；
下面的例子在每个 <h1>元素前面插入一幅图片；

h1:before {content:url(smiley.gif);}

CSS - :after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容；
下面的例子在每个 <h1> 元素后面插入一幅图片；

h1:after{content:url(smiley.gif);}

所有CSS伪类/元素

选择器	示例	示例说明
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个<p> 元素的第一个字母
:first-line	p:first-line	选择每个<p> 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before	p:before	在每个<p>元素之前插入内容
:after	p:after	在每个<p>元素之后插入内容
:lang(language)	p:lang(it)	为<p>元素的lang属性选择一个开始值

类不需要用户或者浏览器做什么动作以及状态就可以显示的效果。
而伪类是需要用户做出某种动作之后才显示的效果。
伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

导航栏

熟练使用导航栏，对于任何网站都非常重要。

使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #555;
    color: white;
}

ul{
	list-style-type:none;
	margin:0;
	padding:0;
}
a:link,a:visited{
	display:block;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	width:120px;
	text-align:center;
	padding:4px;
	text-decoration:none;
	text-transform:uppercase;
}
a:hover,a:active{
	background-color:#7A991A;
}

激活/当前导航条实例

在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中；

创建链接并添加边框

可以在 <li> or <a> 上添加text-align:center 样式来让链接居中。
可以在 border <ul> 上添加 border 属性来让导航栏有边框。
如果要在每个选项上添加边框，可以在每个 <li> 元素上添加border-bottom :

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
    border: 1px solid #555;
}
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
li {
    text-align: center;
    border-bottom: 1px solid #555;
}
li:last-child {
    border-bottom: none;
}
li a.active {
    background-color: #4CAF50;
    color: white;
}
li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

全屏高度的固定导航条

接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>菜鸟教程(runoob.com)</title>
	<style>
		body {
			margin: 0;
		}
		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
			width: 25%;
			background-color: #f1f1f1;
			position: fixed;
			height: 100%;
			overflow: auto;
		}
		li a {
			display: block;
			color: #000;
			padding: 8px 16px;
			text-decoration: none;
		}
		li a.active {
			background-color: #4CAF50;
			color: white;
		}
		li a:hover:not(.active) {
			background-color: #555;
			color: white;
		}
	</style>
</head>
	
<body>
	<ul>
	  <li><a class="active" href="#home">主页</a></li>
	  <li><a href="#news">新闻</a></li>
	  <li><a href="#contact">联系</a></li>
	  <li><a href="#about">关于</a></li>
	</ul>

	<div style="margin-left:25%;padding:1px 16px;height:1000px;">
	  <h2>Fixed Full-height Side Nav</h2>
	  <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
	  <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
	  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
	  <p>Some text..</p>
	  <p>Some text..</p>
	  <p>Some text..</p>
	  <p>Some text..</p>
	  <p>Some text..</p>
	  <p>Some text..</p>
	  <p>Some text..</p>
	</div>
</body>
</html>

水平导航栏

有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。
这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。

内联列表项

建立一个横向导航栏的方法之一是指定元素，上述代码是标准的内联:

ul{
	list-style-type:none;
	margin:0;
	padding:0;
}
li{display:inline;}

浮动列表项

在上面的例子中链接有不同的宽度。
对于所有的链接宽度相等，浮动 <li>元素，并指定为 <a>元素的宽度：

ul{
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;
}
li{
	text-align:center;
	float:left;
}
a{
	display:block;
	width:100px;
	background-color:#dddddd;
}

水平导航条实例

创建一个水平导航条，在鼠标移动到选项后修改背景颜色。

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover {
    background-color: #111;
}

激活/当前导航条实例

在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中；

链接右对齐

将导航条最右边的选项设置右对齐 (float:right;)；

添加分割线

<li> 通过 border-right 样式来添加分割线；

固定导航条

可以设置页面的导航条固定在头部或者底部；

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>菜鸟教程(runoob.com)</title>
	<style>
		body {margin:0;}
		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
			overflow: hidden;
			background-color: #333;
			position: fixed;
			top: 0;/*bottom: 0;*/
			width: 100%;
		}
		li {
			float: left;
			border-right:1px solid #bbb;
		}
		li:last-child {
			border-right: none;
		}
		li a {
			display: block;
			color: white;
			text-align: center;
			padding: 14px 16px;
			text-decoration: none;
		}
		li a:hover:not(.active) {
			background-color: #111;
		}
		.active {
			background-color: #4CAF50;
		}
	</style>
</head>
	
<body>
	<ul>
	  <li><a class="active" href="#home">主页</a></li>
	  <li><a href="#news">新闻</a></li>
	  <li><a href="#contact">联系</a></li>
	  <li style="float:right;border-left:1px solid #bbb;"><a href="#about">关于</a></li>
	</ul>

	<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
		<h1>Fixed Top Navigation Bar</h1>
		<h2>Scroll this page to see the effect</h2>
		<h2>The navigation bar will stay at the top of the page while scrolling</h2>

		<p>Some text some text some text some text..</p>
		<p>Some text some text some text some text..</p>
		<p>Some text some text some text some text..</p>
		<p>Some text some text some text some text..</p>
		<p>Some text some text some text some text..</p>
		<p>Some text some text some text some text..</p>
		<p>Some text some text some text some text..</p>
		<p>Some text some text some text some text..</p>
		<p>Some text some text some text some text..</p>
		<p>Some text some text some text some text..</p>
		<p>Some text some text some text some text..</p>
		<p>Some text some text some text some text..</p>
		<p>Some text some text some text some text..</p>
		<p>Some text some text some text some text..</p>
		<p>Some text some text some text some text..</p>
		<p>Some text some text some text some text..</p>
		<p>Some text some text some text some text..</p>
		<p>Some text some text some text some text..</p>
		<p>Some text some text some text some text..</p>
		<p>Some text some text some text some text..</p>
	</div>
</body>
</html>