一、CSS 对齐：
1）、元素居中对齐：
水平居中对齐一个元素，可以使用margin：auto，设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度，并将两边的空外边距平均分配。示例：
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
2）、文本居中对齐：
文本在元素内居中对齐，可以使用text-align：center。示例：
<style>
.center {
text-align: center;
border: 3px solid green;
}
</style>
3）、图片居中对齐：
图片居中对齐，可以使用margin：auto，并将它放到块元素中。示例：
<style>
img {
display: block;
margin: 0 auto;
}
</style>
4）、使用定位方式左右对齐：
使用position：absolute属性对齐元素。当使用position来对齐元素时，通常<body>元素会设置margin和padding。这样可以避免在不同的浏览器中出现可见的差异。示例：
<style>
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
</style>
5）、使用float方式左右对齐：
<style>
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
</style>
6）、使用padding垂直居中对齐：
<style>
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
</style>
7）、使用line-height垂直居中：
<style>
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
</style>
8)、使用position和transform垂直居中：
<style>
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
二、CSS 组合选择符：
CSS组合选择符说明了两个选择器之间的关系。CSS组合选择符包含各种简单选择符的组合方式。在CSS3中包含了四种组合方式：后代选择器（以空格“ ”分隔）；子元素选择器（以大于号“>”分隔）;相邻兄弟选择器（以加号“+”分隔）；普通兄弟选择器（以波浪号“~”分隔）。
1）、后代选择器：
后代选择器用于选取某元素的后代元素。示例：
<style>
div p
{
background-color:yellow;
}
</style>
2）、子元素选择器：
子元素选择器只能选择作为某元素直接/一级子元素的元素。示例：
<style>
div>p
{
background-color:yellow;
}
</style>
3）、相邻兄弟选择器：
相邻兄弟选择器可以选择紧接在另一个元素后的元素，且二者有相同父元素。示例：
<style>
div+p
{
background-color:yellow;
}
</style>
4）、普通兄弟选择器：
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。示例：
<style>
div~p
{
background-color:yellow;
}
</style>
三、CSS 伪类：
CSS伪类是用来添加一些选择器的特殊效果。伪类的语法：
selector:pseudo-class {property:value;}；CSS类可以使用伪类：selector.class:pseudo-class {property:value;}。
1）、Anchor伪类：
<style>
a:link {color:#0000FF;} /* 未访问链接*/
a:visited {color:#000FF0;} /* 已访问链接 */
a:hover {color:#FF0000;} /* 鼠标移动到链接上 */
a:active {color:#000FFF;} /* 鼠标点击时 */
</style>
2）、伪类可以与CSS类配合使用：
- red:visited {color:#FF0000;}
- <a class="red" href="css.html">CSS 语法</a>
3）、CSS：first-child伪类：
使用first-child伪类选择父元素的第一个子元素:
<style>
p:first-child
{
color:blue;
}
</style>
使用first-child伪类选择匹配所有<p>元素的第一个<i>元素：
<style>
p > i:first-child
{
color:blue;
}
</style>
使用first-child伪类选择匹配所有<p>元素的所有<i>元素：
<style>
p:first-child i
{
color:blue;
}
</style>
4）、CSS-:lang伪类：
:lang伪类可以为不同的语言定义特殊的规则。
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
所有CSS伪类/元素：
| 选择器 | 示例 | 示例说明 |
| :checked | input:checked | 选择所有选中的表单元素 |
| :disabled | input:disabled | 选择所有禁用的表单元素 |
| :empty | p:empty | 选择所有没有子元素的p元素 |
| :enabled | input:enabled | 选择所有启用的表单元素 |
| :first-of-type | p:first-of-type | 选择的每个 p 元素是其父元素的第一个 p 元素 |
| :in-range | input:in-range | 选择元素指定范围内的值 |
| :invalid | input:invalid | 选择所有无效的元素 |
| :last-child | p:last-child | 选择所有p元素的最后一个子元素 |
| :last-of-type | p:last-of-type | 选择每个p元素是其母元素的最后一个p元素 |
| :not(selector) | :not(p) | 选择所有p以外的元素 |
| :nth-child(n) | p:nth-child(2) | 选择所有 p 元素的父元素的第二个子元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择所有p元素倒数的第二个子元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素 |
| :only-of-type | p:only-of-type | 选择所有仅有一个子元素为p的元素 |
| :only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
| :optional | input:optional | 选择没有"required"的元素属性 |
| :out-of-range | input:out-of-range | 选择指定范围以外的值的元素属性 |
| :read-only | input:read-only | 选择只读属性的元素属性 |
| :read-write | input:read-write | 选择没有只读属性的元素属性 |
| :required | input:required | 选择有"required"属性指定的元素属性 |
| :root | root | 选择文档的根元素 |
| :target | #news:target | 选择当前活动#news元素(点击URL包含锚的名字) |
| :valid | input:valid | 选择所有有效值的属性 |
| :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属性选择一个开始值 |
四、CSS 伪元素：
CSS伪元素是用来添加一些选择器的特殊效果。伪元素的语法：
selector:pseudo-element {property:value;}；CSS类也可以使用伪元素：selector.class:pseudo-element {property:value;}。
1)、firs-line伪元素用于向文本的首行设置特殊样式。firs-line伪元素只能用于块级元素。可应用于firs-line伪元素的属性：font properties、color properties 、background properties、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height、clear。示例：
- <style>
- p:first-line
- {
- color:#ff0000;
- font-variant:small-caps;
- }
- </style>
2）、first-letter伪元素：
- first-letter伪元素用于向文本的首字母设置特殊样式。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。示例：
- <style>
- p:first-letter
- {
- color:#ff0000;
- font-size:xx-large;
- }
- </style>
3）、伪元素和CSS类：
- 伪元素可以结合CSS类使用。示例：
p.article:first-letter {color:#ff0000;}
<p class="article">文章段落</p>
多个伪元素可以结合使用。示例：
<style>
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
</style>
4）、CSS-：before伪元素：
before伪元素可以在元素的内容前面插入新的内容。示例：
<style>
h1:before {content:url(smiley.gif);}
</style>
5）、CSS-：after伪元素：
after伪元素可以在元素的内容之后插入新的内容。示例：
<style>
h1:after {content:url(smiley.gif);}
</style>
所有CSS伪类/元素：
五、CSS 导航栏：
导航栏基本上是一个链接列表：
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
删除导航栏中的边距和填充：
style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
1）、垂直导航栏：
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
width: 60px;
background-color: #dddddd;
}
</style>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
创建一个简单的垂直导航栏，在鼠标移动到选项时，改变颜色：
<style>
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;
}
</style>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
导航栏创建链接并添加边框：
<style>
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;
}
</style>
<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>
创建一个左边为全屏高度固定导航栏，右边是可滚动的内容：
<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>
<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;">
<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>
2）、水平导航栏：
有两种方法创建水平导航栏，使用内联或浮动的列表项。
内联列表项:
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
浮动列表项：
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
水平导航条：
<style>
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;
}
</style>
<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>
</body>
链接右对齐：
.active {
background-color: #4CAF50;
}
添加分割线：
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
}
灰色水平导航栏：
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #4CAF50;
}
</style>
<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>
</body>
