CSS 对齐、组合选择符、伪类、伪元素、导航栏

一、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;}

多个伪元素可以结合使用。示例：

<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>

</ul>

删除导航栏中的边距和填充：

style>

{

list-style-type:none;

margin:0;

padding:0;

}

</style>

</head>

<body>

<ul>

</ul>

1）、垂直导航栏：

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

}

li a {

display: block;

width: 60px;

background-color: #dddddd;

}

</style>

<ul>

</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>

</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>

</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>

</ul>

</div>

</body>

2）、水平导航栏：

有两种方法创建水平导航栏，使用内联或浮动的列表项。

内联列表项:

<style>

{

list-style-type:none;

margin:0;

padding:0;

}

{

display:inline;

}

</style>

<body>

<ul>

</ul>

</body>

浮动列表项：

<style>

{

list-style-type:none;

margin:0;

padding:0;

overflow:hidden;

}

{

float:left;

}

{

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>

</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>

</ul>

</body>

CSS 对齐、组合选择符、伪类、伪元素、导航栏

相关文章

xcode-工程设置

【Unity细节】Failed importing package？？？Unity导包失败？

常见面试题-计算机网络相关

多门店民宿预定系统酒店预订管理系统源码/公寓/农家乐小程序源码

NtripShare Mos地铁自动化监测终端盒子硬件设计

hdlbits系列verilog解答（缩减语句）-38

零代码Prompt应用大赛正式开始！飞桨星河社区五周年活动第一站

gorm使用之各种表关系实例-主外键-＞struct