CSS样式开发大全！

最新推荐文章于 2024-08-12 00:15:00 发布

置顶稣貘

最新推荐文章于 2024-08-12 00:15:00 发布

阅读量1.1k

点赞数

分类专栏： Web前端 #CSS Web前端开发文章标签： css样式 CSS

本文链接：https://blog.youkuaiyun.com/weixin_44179306/article/details/102962212

版权

Web前端开发同时被 3 个专栏收录

3 篇文章

订阅专栏

#CSS

2 篇文章

订阅专栏

Web前端

1 篇文章

订阅专栏

本文详细介绍了CSS的各种概念和用法，包括层叠样式表、ID和CLASS选择器、样式表的三种使用方法、背景图像、文本样式、字体、链接样式、列表样式、表格样式、盒子模型、边框、外边距、内边距、定位、浮动和对齐方式等。通过这些内容，读者可以全面了解并掌握CSS在网站设计中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS/层叠样式表

CSS 指层叠样式表（Cascading Style Sheets）。
您将学习如何使用 CSS 同时控制整个站点的样式和布局。
通过与 XHTML 结合，CSS 可以帮助我们实行表现与结构分离的开发模式。
通过使用 CSS 来提升工作效率！
什么是CSS？: CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。
CSS 是一种标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译。
CSS 是用来表现HTML或XML的标记语言。
CSS 是由W3C的CSS工作组发布推荐和维护的.
CSS 是编程入门人员的必修课，运用CSS样式可以让页面变得美观。
CSS语法由三部分构成：选择器、属性和值： selector {property: value}

** 如何使用CSS?**
有三种方法可以在站点网页上使用样式表：

外联式Linking（也叫外部样式）：将网页链接到外部样式表。
嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。
内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。
其中，优先级：内联式 > 嵌入式 > 外联式

CSS语法：
在这里插入图片描述
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS ID 和 CLASS 选择器

id 选择器：
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。以下的样式规则应用于元素属性 id=“para1”。
实例：

#para1
 {
 text-align:center;
 color:red;
 } 
 <p id="para1">HELLO World!</p>

注意：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
ID属性只能在每个 HTML 文档中出现一次。

class 选择器：
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。 class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

.center {text-align:center;} 
<h1 class="center">小标题,并且标题居中</h1>

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

如何插入CSS样式：
插入有三种方法：

外部样式表
内部样式表
内联样式

外部样式表：
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color:sienna;}           
p {margin-left:20px;}            
body {background-image:url(/images/back40.gif);}

注意：不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

内部样式表：
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式：
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

CSS Backgrounds（背景）：
CSS 属性定义背景效果：

background-color
background-image
background-repeat
background-attachment
background-position

背景颜色：
使用background-color定义了元素的背景颜色。

body
{
    background-color：blue；
}

CSS颜色通常用以下方式定义：

十六进制 - 如：“#FF0000”
RGB表示 - 如：“rgb(255,0,0)"
颜色名称 - 如：“red”

背景图像：
background-image属性描述了元素的背景图像。
默认情况下，背景图像进行了平铺重复显示，以覆盖整个元素实体。
页面背景图片设置实例：

body {background-image:url('paper.gif');}

背景图像-水平或垂直平铺：
如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。
默认情况下，background-image属性会在页面的水平或垂直方向上平铺。
在水平方向平铺，实例：

body
        
{
        
background-image:url('gradient2.png');
        
background-repeat:repeat-x;
        
}

在垂直方向上平铺，实例：

body
        
{
        
background-image:url('gradient2.png');
        
background-repeat:repeat-y;
        
}

不同：在于background-repeat：repeat-x/repeat-y 。

背景图像-设置定位与不平铺：
如果你不想让图像平铺可以使用 background-repeat：no-repeat；属性
我们还可以利用background-position属性进行定位，例：

body
        
{
        
background-image:url('img_tree.png');
        
background-repeat:no-repeat;
        
background-position:right top;
        
}

该图像背景将会被定位在右上角。
以下是等效的位置关键字：

单一关键字	等价的关键字
center	center center
top	top center or center top
bottom	bottom center or center bottom
right	right center or center right
left	left center or center left

背景属性简写：

body {background:#ffffff url('img_tree.png') no-repeat right top;}~

当使用简写属性时，属性值的顺序为：:

background-color
background-image
background-repeat
background-attachment
background-position

以上属性无需全部使用，你可以按照页面的实际需要使用.
background-attachment：属性的意义为背景图像是否跟着页面其余部分滚动。
值为：
1.scroll：背景随着页面其余部分滚动 （默认）。
2.fixed：背景图像是固定的。
3.inherit：指定background-attachment的设置从父类那里继承。
4.local：背景图片随滚动元素滚动。

CSS Text（文本）字体：
CSS Text文本格式:

通过CSS的Text属性，你可以改变页面中文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等等.
**Text color：**颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：

十六进制-如“ #ff0000”
一个RGB值-“ RGB（250，0，0）”
颜色的名称-如“red”

body {color:blue;}
        
h1 {color:#00ff00;}
        
h2 {color:rgb(255,0,0);}

文字对齐方式：
文字排列属性是用来设置文本对齐方式。
文本可剧中或对齐到左右，两端对齐。
当text-align设置为“justify”，每一行被展开为宽度相等，左右边距是对齐。
文本修饰：
text-decoration属性用来删除文本的装饰。
从设计的角度看text-decoration属性主要是来删除链接的下划线：
实例：

<style>
a{text-decoration:none;}
</style}
<p>Link to: <a href="http://www.w3cschool.cn">w3cschool.cn</a></p>

这样就可以清楚链接的下划线。
文本转换：
texi-transform文本转化属性是用来指定在一个文本中的字母大小写。
可用于所有字句变成大写或小写字母，和每个单词的首字母大写。

p.uppercase {text-transform:uppercase;}
        
p.lowercase {text-transform:lowercase;}
        
p.capitalize {text-transform:capitalize;}

uppercase属性值是用来使整个句子字母全部大写。
lowercase属性值是用来使整个句子字母全部小写。
capitalize属性值是用来使整个句子每个单词字母首字母大写。
文本缩进：
text-indent文本缩进属性是用来指定文本的第一行的缩进。
CSS提供了text-indent属性，该属性可以方便的实现文本缩进。
通过使用text-indent属性，所有元素的第一行都可以缩进一个给定的长度。

p {text-indent:50px;}

文本间隔：
word-spacing属性可以改变字（单词）之间的间隔。其默认值 normal与设置值为0是一样的。

p
        
{
        
word-spacing:30px;
        
}

文本属性的扩展应用：
1.指定字符间的空间 letter-spacing属性，用法和word-spacing一样。
2.指定行与行之间的距离：line-spacing属性，用法和word-spacing一样。

CSS样式之 Fonts（字体）：
CSS字体属性定义字体，加粗，大小，文本样式。
serif和sans-serif之间的区别：
在这里插入图片描述

注意：在计算机屏幕上sans-serif字体被认为是比serif字体更容易阅读。
字体系列：
Serif 字体
Sans-serif 字体
Monospace 字体
Cursive 字体
Fantasy 字体

p{font-family:"Times New Roman", Times, serif;}

定义英文！！

CSS字形：
1.字体样式：

用font-style属性来定义：

p.normal {font-style:normal;}
        
p.italic {font-style:italic;}
        
p.oblique {font-style:oblique;}

这个属性有三个值：

    正常 - 正常显示文本


    斜体 - 以斜体字显示的文字


    倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

italic 和 oblique 的区别

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。
    


倾斜（oblique）文本是正常竖直文本的一个倾斜版本。

通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

字体大小：
font-size属性用来定义字体大小

h1 {font-size:2.5em;} /* 40px/16=2.5em */
        
h2 {font-size:1.875em;} /* 30px/16=1.875em */
        
p {font-size:0.875em;} /* 14px/16=0.875em */

1em的默认大小是16px，可以通过下面这个公式将像素转换为em：px/16=em；

CSS链接样式：
不同的链接可以有不同的样式。
链接的四种样式：

a:link-正常，未被访问过的链接。
a:visited-用户已经访问过的链接。
a:hover-当用户把鼠标放在链接上使。
a:active-当用户点击链接的那一刻。
a:hover必须跟在a:link和a:visited的后面；
a:active必须跟在a:hover的后面。
文本修饰：

a:link {text-decoration:none;}
        
a:visited {text-decoration:none;}
        
a:hover {text-decoration:underline;}
        
a:active {text-decoration:underline;}

背景颜色：

a:link {background-color:#B2FF99;}
        
a:visited {background-color:#FFFF85;}
        
a:hover {background-color:#FF704D;}
        
a:active {background-color:#FF704D;}

CSS列表样式（ul）：
CSS列表属性作用如下：
设置不同的列表标记为有序列表
设置不同的列表项标记为无序列表
设置列表标记项为图片

ul.a {list-style-type: circle;}
 ul.b {list-style-type: square;}

 ol.c {list-style-type: upper-roman;}
 ol.d {list-style-type: lower-alpha;}

下列是对list-style-type属性的常见属性值的描述：none：不使用项目符号
disc：实心圆
circle：空心圆
square：实心方块
decimal：阿拉伯数字
lower-alpha：小写英文字母
upper-alpha：大写英文字母
lower-roman：小写罗马数字
upper-roman：大写罗马数字
作为列表标记项的图像：
要指定列表标记项的图像，使用list-sytle-image：url（‘href’）；

ul
 {
 list-style-image: url('sqpurple.gif');
 }

CSS Table（表格）：
表格边框：
指定CSS表格边框，使用border属性。
下面的例子指定了一个表格的TH和TD元素的黑色边框。

table, th, td
        
{
        
border: 1px solid black;
        
}

折叠边框：
border-collapse属性设置表格边框是否被折叠成一个单一的边框或隔开：

table
        
{
        
border-collapse:collapse;
        
}
        
table,th, td
        
{
        
border: 1px solid black;
        
}

表格的宽度和高度：
Width和Height属性定义表格的宽度和高度。
下面的例子是设置100%的宽度，50像素的TH元素的高度的表格：

table
        
{
        
width:100%;
        
}
        
th
        
{
        
height:50px;
        
}

表格文字居中对齐：

td
        
{
        
text-align:right;
        
}

表格文字垂直对齐属性，比如顶部，中间，底部：

td
        
{
        
height:50px;
        
vertical-align:bottom;
        
}

表格填充：

td
        
{
        
padding:15px;
        
}

表格颜色：

table, td, th
        
{
        
border:1px solid green;
        
}
        
th
        
{
        
background-color:green;
        
color:white;
        
}

定义表格标题的位置：

<head>
<style>
caption{caption-side:bottom;}
</style>
<table border="1">
<caption>Table 1.1 Customers</caption>
<tr>
  <th>Company</th>
  <th>Contact</th>
  <th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
</table>

表格标题在表格最底下！

CSS盒子模型：

CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
在这里插入图片描述
不同部分的说明：

Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明
Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
Content（内容） - 盒子的内容，显示文本和图像

   最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

CSS Border（边框）：
CSS 边框 (border) 可以是围绕元素内容和内边距的一条或多条线，对于这些线条，您可以自定义它们的样式、宽度以及颜色。使用CSS边框属性，我们可以创建出比HTML中更加优秀的效果。
border-style属性定义边框的样式：
border-style 值:
none: 默认无边框
dotted: 定义一个点线框
dashed: 定义一个虚线框
solid: 定义实线边界
double: 定义两个边界。两个边界的宽度和border-width的值相同
groove: 定义3D沟槽边界。效果取决于边界的颜色值
ridge: 定义3D脊边界。效果取决于边界的颜色值
inset:定义一个3D的嵌入边框。效果取决于边界的颜色值
outset: 定义一个3D突出边框。效果取决于边界的颜色值

边框宽度：
您可以通过 border-width 属性为边框指定宽度。
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值）和 thick。

边框颜色：
border-color属性用于设置边框的颜色，它一次可以接受最多 4 个颜色值。可以设置的颜色：

name - 指定颜色的名称，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16进制值, 如 "#ff0000"

**注意：**border-color定义时，前面必需定义过border-style。
您还可以设置边框的颜色为"transparent"。

p.one
        
{
        
border-style:solid;
        
border-color:red;
        
}
        
p.two
        
{
        
border-style:solid;
        
border-color:#98bf21;
        
}

边框可单独设置各边：

p
        
{
        
border-top-style:dotted;
        
border-right-style:solid;
        
border-bottom-style:dotted;
        
border-left-style:solid;
        
}

border-style属性可以有1-4个值：

 border-style:dotted solid double dashed;  
    
        上边框是 dotted
        右边框是 solid
        底边框是 double
        左边框是 dashed
    
    


 border-style:dotted solid double; 
    
        上边框是 dotted
        左、右边框是 solid
        底边框是 double
    
    


 border-style:dotted solid; 
    
        上、底边框是 dotted
        左、右边框是 solid
    
    


 border-style:dotted;

    
        四面边框是 dotted

透明边框：

a:link, a:visited {  border-style: solid;
  border-width: 5px;
 border-color: transparent;
  }
a:hover {border-color: gray;}

利用 transparent，使用边框就像是额外的内边距一样；此外还有一个好处，就是能在你需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）。

边框-简写属性：

border：border-width,border-style，border-color

border:5px solid red;

CSS Margin（外边距）：
CSS Margin(外边距)属性定义元素周围的空间。CSS Margin属性接受任何长度单位、百分数值甚至负值。

**Margin **
margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的 margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。

可能的值：

auto：设置浏览器边距，这样做可能会依赖浏览器。
length：定义一个固定的margin（使用像素，pt，em等）
%：定义一个百分比边距。

CSS Padding：
CSS Padding（填充）属性定义元素边框与元素内容之间的空间。

Padding（填充）：
当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。
单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。
可能的值：
1.length：定义一个固定的填充（像素，pt，em等）
2.%：使用百分比定义一个填充。

内边距的百分比数值：

CSS padding 属性的百分比数值是相对于其父元素的 width 计算的，如果改变了父元素的 width，则它们也会改变。
以下是将段落的内边距设置为父元素 width 的 20% 的示例：

p {padding: 20%;}

假设一个段落的父元素是 div 元素，那么它的 padding 的 width 计算是根据 div 进行的：

<div style="width: 200px;"> 
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p> 
</div>

**注意：**上下内边距与左右内边距一致，即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

填充-单边内边距属性：

padding-top:25px;
        
padding-bottom:25px;
        
padding-right:50px;
        
padding-left:50px;

** 填充简写属性：**

padding:25px 50px;

Padding属性，可以有一到四个值。
padding:25px 50px 75px 100px;

上填充为25px
右填充为50px
下填充为75px
左填充为100px

padding:25px 50px 75px;

上填充为25px
左右填充为50px
下填充为75px

padding:25px 50px;

上下填充为25px
左右填充为50px

padding:25px;

所有的填充都是25px

CSS 分组和嵌套：

CSS 分组和嵌套选择器 CSS 分组可以将具有相同样式的选择器进行分组，减少代码量。CSS 嵌套适用于选择器内部的选择器的样式。

Grouping Selectors：

   h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

在样式中有很多具有相同样式的元素。为了尽量减少代码，你可以使用分组选择器。
每个选择器用逗号分隔。
在下面的例子中，我们对上面的代码使用分组选择器。

h1,h2,p
        
{
        
color:green;
        
}

嵌套选择器：
它可能适用于选择器内部的选择器的样式。
在下面的例子，为所有p元素指定一个样式，为所有元素指定一个class="marked"的样式，并仅用于class=“标记”，类内的p元素指定第三个样式：

p
        
{
        
color:blue;
        
text-align:center;
        
}
        
.marked
        
{
        
background-color:red;
        
}
        
.marked p
        
{
        
color:white;
        
}

CSS Display（显示）与Visibility（可见性）：
CSS display 属性和 visibility属性都可以用来隐藏某个元素，但是这两个属性有不同的定义，请详细阅读以下内容。
隐藏元素：**display：none或visibility：hidden
隐藏一个元素可以通过把display属性设置为：“none”，或把visibility属性设置为“hidden”
但是请注意，这两种方法会产生两种不同的结果。
visibility：hidden可以隐藏某个元素，但隐藏的元素仍然会占有空间并且所占空间大小和未隐藏之前一样。也就是说，该元素虽然被隐藏了，但是仍然会影响布局。
实例：

h1.hidden {visibility:hidden;}

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
实例：

h1.hidden {display:none;}

CSS Display-块和内联元素：
块元素是一个元素，占用了全部的宽度，在前后都是换行符。
块元素的例子：<h1> <p> <div>
内联元素只需要必要的宽度，不强制换行。
内联元素的例子： <span> <a>

如何改变一个元素的显示：
可以更改内联元素为块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。
下面的示例把列表项显示为内联元素：

li {display:inline;}

下面的示例把span元素作为块元素：

span {display:block;}

CSS positioning（定位）：
CSS position 属性，允许您将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非事先设定position属性。他们也有不同的工作方式，这取决于定位方法.
有四种不同的定位方法。

Static 定位：
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到top, bottom, left, right影响。

fixed定位：
元素的位置相对于浏览器是相对位置。即使窗口滚动它也是不会滚动的：

p.pos_fixed
        
{
        
position:fixed;
        
top:30px;
        
right:5px;
        
}

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持.
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。

relative 定位：
相对于定位元素是相对其正常的定位。

h2.pos_left
        
{
        
position:relative;
        
left:-20px;
        
}
        
h2.pos_right
        
{
        
position:relative;
        
left:20px;
        
}

可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。

h2.pos_top
        
{
        
position:relative;
        
top:-50px;
        
}

absolute定位：
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

h2
        
{
        
position:absolute;
        
left:100px;
        
top:150px;
        
}

Absolutely定位使元素的位置与文档流无关，因此不占据空间。
Absolutely定位的元素和其他元素重叠。

重叠的元素：
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序：
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意：如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

img
        
{
        
position:absolute;
        
left:0px;
        
top:0px;
        
z-index:-1;
        
}

图片的显示顺序应该在文字后面，因为z-index值为负数。

CSS Float（浮动）：
CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。

什么是CSS Float（浮动）：
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素怎样浮动：
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：

img
        
{
        
float:right;
        
}

**清除浮动 - 使用 clear **
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
使用 clear 属性往文本中添加图片廊：

.text_line
        
{
        
clear:both;
        
}

CSS 水平对齐（Horizontal Align）：
关于 CSS 中元素的水平对齐(Horizontal Align)，你可以使用多种属性来进行设置。
块元素对齐
块元素是一个元素，占用了全宽，前后都是换行符。
块元素的例子：

<h1>
<p>
<div>

中心对齐,使用margin属性：
块元素可以把左，右页边距设置为"自动"对齐。
Note: 在IE8中使用margin:auto属性无法正常工作，除非声明 !DOCTYPE

margin属性可任意拆分为左，右页边距设置自动指定，结果都是出现居中元素

.center
        
{
        
margin-left:auto;
        
margin-right:auto;
        
width:70%;
        
background-color:#b0e0e6;
        
}

提示: 如果宽度是100％，对齐是没有效果的。
使用position属性设置左，右对齐：

.right
        
{
        
position:absolute;
        
right:0px;
        
width:300px;
        
background-color:#b0e0e6;
        
}

注意：绝对定位与文档流无关，所以它们可以覆盖页面上的其它元素。
使用float属性设置左，右对齐

.right
        
{
        
float:right;
        
width:300px;
        
background-color:#b0e0e6;
        
}

使用Padding设置垂直居中对齐

.center {
    padding: 70px 0;
    border: 3px solid green;
}

如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

.center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}

CSS组合选择符：
在 CSS3 中包含了四种组合方式:

后代选取器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以波浪号分隔）

后代选取器：
后代选取器匹配所有指定元素的后代元素。
以下实例选取所有<p>元素插入到<div>元素中:

div p
        
{
        
background-color:yellow;
        
}

子元素选取器：
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
以下实例选择了<div>元素中所有直接子元素 <p>：

div>p
            
{
            
background-color:yellow;
            
}

相邻兄弟选取器：
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
以下实例选取了所有位于<div>元素后的第一个 <p>元素:

div+p
                
{
                
background-color:yellow;
                
}

普通兄弟选取器：
普通兄弟选择器选取所有指定元素的相邻兄弟元素。
以下实例选取了所有

元素之后的所有相邻兄弟元素

div~p
                    
{
                    
background-color:yellow;
                    
}

CSS 伪类：
CSS伪类是用来添加一些选择器的特殊效果。
由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

**语法 **
伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

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

anchor伪类

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 类配合使用：

a.red:visited {color:#FF0000;}       
<a class="red" href="css-syntax.html">CSS Syntax</a>

CSS - :first - child伪类：
您可以使用 :first-child 伪类来选择元素的第一个子元素
在下面的例子中，选择器匹配作为任何元素的第一个子元素的 <p>元素：

<html>
        
<head>
        
<style>
        
p:first-child
        
{
        
color:blue;
        
}
        
</style>
        
</head>
        

        
<body>
        
<p>I am a strong man.</p>
 <div>       
<p>I am a strong man.</p>
        
 </div>
</body>
        
</html>

上述事例中两个p元素颜色都是蓝色，第一个<p>元素是<body>的第一个子元素，
第二个<p>元素是<div>的第一个子元素。

匹配所有作为第一个子元素的<p>元素中的所有元素
在下面的例子中，选择器匹配所有作为元素的第一个子元素的

元素中的所有 元素：

<html>
        
<head>
        
<style>
        
p:first-child i
        
{
        
color:blue;
        
}
        
</style>
        
</head>
        

        
<body>
        
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
        
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
        
</body>
        
</html>

CSS - :lang 伪类：
:lang 伪类使你有能力为不同的语言定义特殊的规则

<html>
        
<head>
        
<style>
        
q:lang(no) {quotes: "~" "~";}
        
</style>
        
</head>
        

        
<body>
        
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
        
</body>
        
</html>

运行结果为：Some text ~ A quote in a paragraph ~Some text.
CSS 伪元素：

CSS - :before 伪元素
“:before” 伪元素可以在元素的内容前面插入新内容。下面的例子在每个

元素前面插入一幅图片：

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

CSS - :after 伪元素
“:after” 伪元素可以在元素的内容之后插入新内容。下面的例子在每个

元素后面插入一幅图片：

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

CSS 导航栏：

导航栏=链接列表
作为标准的HTML基础一个导航栏是必须的。
在我们的例子中我们将建立一个标准的HTML列表导航栏。
导航条基本上是一个链接列表，所以使用 <ul>和 <li>元素非常有意义：

ul
                
{
                
list-style-type:none;
                
margin:0;
                
padding:0;
                
}
<ul>
                    
<li><a href="default.asp">Home</a></li>
                    
<li><a href="news.asp">News</a></li>
                    
<li><a href="contact.asp">Contact</a></li>
                    
<li><a href="about.asp">About</a></li>
                    
</ul>

垂直导航栏：

a
                
{
                
display:block;
                
width:60px;
                
}

示例说明：

            display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
        
        
            width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

CSS 下拉菜单：
HTML 部分：
我们可以使用任何的 HTML元素来打开下拉菜单，如：<span>, 或 a<button>元素。使用容器元素 (如：<div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。使用 <div>元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。
CSS 部分：
.dropdown类使用position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。.dropdown-content类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。注意 min-width 的值设置为 160px。你可以随意修改它。注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto设置可以在小尺寸屏幕上滚动)。我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。:hover选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>