CSS学习教程之进阶篇
CSS进阶学习
根据前面对CSS入门学习，我们已经知道了CSS的基本使用方法，后续的进阶学习也是为了让HTML页面的样式能够表现的更完善，更符合前端的审美和视觉效果。
CSS Id 和 Class
如果要在HTML元素中设置CSS样式，需要在元素中设置"id" 和 "class"选择器。
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。以下的样式规则应用于元素属性 id=“para1”:
#para1
{
text-align:center;
color:red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示，在以下的例子中，所有拥有 center 类的 HTML 元素均为居中：
.center {text-align:center;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>
也可以指定特定的HTML元素使用class。在以下实例中, 所有的 p 元素也即是段落元素使用 class=“center” 让该元素的文本居中:
p.center {text-align:center;}
注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
CSS如何创建
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种:
外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：
<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” 。
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style>标签在文档头部定义内部样式表，就像这样:
<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>
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。 例如，外部样式表拥有针对 h3 选择器的三个属性：
h3
{
color:red;
text-align:left;
font-size:8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性：
h3
{
text-align:right;
font-size:20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color:red;
text-align:right;
font-size:20pt;
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
多重样式优先级
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般情况下，优先级如下：
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
<head>
<!-- 外部样式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 设置：h3{color:blue;} -->
<style type="text/css">
/* 内部样式 */
h3{color:green;}
</style>
</head>
<body>
<h3>测试！</h3>
</body>
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
CSS背景的配置
CSS 背景属性用于定义HTML元素的背景。背景效果:
background-color
background-image
background-repeat
background-attachment
background-position
背景颜色
background-color 属性定义了元素的背景颜色，页面的背景颜色使用在body的选择器中:
body {background-color:#b0c4de;}
CSS中，颜色值通常以以下方式定义:
十六进制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”
以下实例中, h1, p, 和 div 元素拥有不同的背景颜色:
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
背景图像
background-image 属性描述了元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体，页面背景图片设置实例:
body {background-image:url('paper.gif');}
下面是一个例子是一个糟糕的文字和背景图像组合，因为背景图片选择的不好，文本可读性差:
body {background-image:url('bgdesert.jpg');}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body {background-image:url('bgdesert.jpg');}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>该文本不容易被阅读。</p>
</body>
</html>
背景图像 - 水平或垂直平铺
默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示:
body
{
background-image:url('gradient2.png');
}
如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
背景图像- 设置定位与不平铺
让背景图像不影响文本的排版，如果不想让图像平铺，你可以使用 background-repeat 属性:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
但是以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，可以改变图像的位置。可以利用 background-position 属性改变图像在背景中的位置:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
背景- 简写属性
在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中，背景颜色的简写属性为 “background”:
body {background:#ffffff url('img_tree.png') no-repeat right top;}
当使用简写属性时，属性值的顺序为：:
background-color
background-image
background-repeat
background-attachment
background-position
以上属性无需全部使用，可以按照页面的实际需要使用。
CSS背景属性
Property 描述
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。
CSS文本格式
文本颜色
颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
一个网页的背景颜色是指在主体内的选择：
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。文本可居中或对齐到左或右，两端对齐，当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
文本修饰
text-decoration 属性用来设置或删除文本的装饰。从设计的角度看 text-decoration属性主要是用来删除链接的下划线：
a {text-decoration:none;}
也可以这样装饰文字：
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
p {text-indent:50px;}
所有CSS文本属性
属性 描述
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距
CSS字体
CSS字体属性定义字体，加粗，大小，文字样式。在CSS中，有两种类型的字体系列名称：
通用字体系列 - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）
特定字体系列 - 一个特定的字体系列（如 “Times” 或 “Courier”）
字体系列
font-family 属性设置文本的字体系列，font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。
多个字体系列是用一个逗号分隔指明：
p{font-family:"Times New Roman", Times, serif;}
字体样式
主要是用于指定斜体文字的字体样式属性。这个属性有三个值：
正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字体大小
font-size 属性设置文本的大小。能否管理文字的大小，在网页设计中是非常重要的。但是，不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。请务必使用正确的HTML标签，记住利用<h1> - <h6>表示标题和<p>表示段落，字体大小的值可以是绝对或相对的大小。
绝对大小：
设置一个指定大小的文本，不允许用户在所有浏览器中改变文本大小，确定了输出的物理尺寸时绝对大小很有用。
相对大小：
相对于周围的元素来设置大小，允许用户在浏览器中改变文字大小。
注意：如果不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。
设置字体大小像素
设置文字的大小与像素，完全控制文字大小：
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本。
用em来设置字体大小
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。em的尺寸单位由W3C建议。1em和当前字体大小相等。在浏览器中默认的文字大小是16px。因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
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 */
在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。
使用百分比和EM组合
在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比：
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
以上代码设置可以在所有浏览器中，显示相同的文本大小，并允许所有浏览器缩放文本的大小。
所有CSS字体属性
Property 描述
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本
font-weight 指定字体的粗细
CSS链接
不同的链接可以有不同的样式。
链接样式
链接的样式，可以用任何CSS属性（如颜色，字体，背景等），特别的链接，可以有不同的样式，这取决于他们是什么状态。这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
当设置为若干链路状态的样式，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
常见的链接样式
文本修饰
text-decoration 属性主要用于删除链接中的下划线：
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列表
CSS列表属性作用如下：
设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像
在HTML中，有两种类型的列表：
无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 - 列表项的标记有数字或字母
使用CSS，可以列出进一步的样式，并可用图像作列表项标记。
不同的列表项标记
list-style-type属性指定列表项标记的类型是：
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;}
作为列表项标记的图像，要指定列表项标记的图像，使用列表样式图像属性：
ul
{
list-style-image: url('sqpurple.gif');
}
如果想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案，在所有的浏览器，下面的例子会显示的图像标记：
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
解释：
ul:
设置列表类型为没有列表项标记
设置填充和边距0px（浏览器兼容性）
ul中所有li:
设置图像的URL，并设置它只显示一次（无重复）
需要的定位图像位置（左0px和上下5px）
用padding-left属性把文本置于列表中
列表 -简写属性
在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。为列表使用简写属性，列表样式属性设置如下：
ul
{
list-style: square url("sqpurple.gif");
}
可以按顺序设置如下属性：
list-style-type
list-style-position
list-style-image
如果上述值丢失一个，其余仍在指定的顺序，就没关系。
所有的CSS列表属性
属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图像设置为列表项标志
list-style-position 设置列表中列表项标志的位置
list-style-type 设置列表项标志的类型
CSS表格
使用 CSS 可以使 HTML 表格更美观。指定CSS表格边框，使用border属性。下面的例子指定了一个表格的Th和TD元素的黑色边框：
table, th, td
{
border: 1px solid black;
}
请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。为了显示一个表的单个边框，使用 border-collapse属性。border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
表格宽度和高度
Width和height属性定义表格的宽度和高度。下面的例子是设置100％的宽度，50像素的th元素的高度的表格：
table
{
width:100%;
}
th
{
height:50px;
}
表格文字对齐
表格中的文本对齐和垂直对齐属性。text-align属性设置水平对齐方式，向左，右，或中心：
td
{
text-align:right;
}
垂直对齐属性设置垂直对齐，比如顶部，底部或中间：
td
{
height:50px;
vertical-align:bottom;
}
表格填充
如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性：
td
{
padding:15px;
}
表格颜色
下面的例子指定边框的颜色，和th元素的文本和背景颜色：
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
CSS盒子模型
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
各个部分的说明：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度，需要知道的盒模型是如何工作的。
元素的宽度和高度
注意: 当指定一个 CSS 元素的宽度和高度属性时，只是设置了内容区域的宽度和高度。要知道，完整大小的元素，还必须添加内边距，边框和边距。下面的例子中的元素的总宽度为300px：
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
算算：
300px (宽)
+ 50px (左 + 右填充)
+ 50px (左 + 右边框)
+ 50px (左 + 右边距)
= 450px
试想一下，只有250像素的空间。设置总宽度为250像素的元素:
div {
width: 220px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
CSS边框
CSS 边框属性允许指定一个元素边框的样式和颜色，如下四种常见样式：
边框样式
边框样式属性指定要显示什么样的边界。border-style属性用来定义边框的样式。
border-style 值:
边框宽度
可以通过 border-width 属性为边框指定宽度。为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。
注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
边框颜色
border-color属性用于设置边框的颜色。可以设置的颜色：
name - 指定颜色的名称，如 “red”
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
Hex - 指定16进制值, 如 “#ff0000”
还可以设置边框的颜色为"transparent"。
注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
边框-单独设置各边
在CSS中，可以指定不同的侧面不同的边框：
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
上面的例子也可以设置一个单一属性：
border-style:dotted 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
上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。
边框-简写属性
上面的例子用了很多属性来设置边框。也可以在一个属性中设置边框。可以在"border"属性中设置：
border-width
border-style (required)
border-color
border:5px solid red;
CSS 边框属性
属性 描述
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。
CSS轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
所有CSS 轮廓（outline）属性
CSS外边距
CSS margin(外边距)属性定义元素周围的空间。
margin
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
可能的值
值 说明
auto 设置浏览器边距
这样做的结果会依赖于浏览器
length 定义一个固定的margin（使用像素，pt，em等）
% 定义一个使用百分比的边距
注意：Margin可以使用负值，重叠的内容。
Margin - 单边外边距属性
在CSS中，它可以指定不同的侧面不同的边距：
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Margin - 简写属性
为了缩短代码，有可能使用一个属性中margin指定的所有边距属性。这就是所谓的简写属性，所有边距属性的简写属性是 margin :
margin:100px 50px;
margin属性可以有一到四个值。
margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px
margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px
margin:25px 50px;
上下边距为25px
左右边距为50px
margin:25px;
所有的4个边距都是25px
所有的CSS边距属性
属性 描述
margin 简写属性，在一个声明中设置所有外边距属性
margin-bottom 设置元素的下外边距
margin-left 设置元素的左外边距
margin-right 设置元素的右外边距
margin-top 设置元素的上外边距
CSS填充
CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
padding（填充）
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。单独使用 padding 属性可以改变上下左右的填充。
可能的值
值 说明
length 定义一个固定的填充(像素, pt, em,等)
% 使用百分比值定义一个填充
填充- 单边内边距属性
在CSS中，它可以指定不同的侧面不同的填充：
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
上内边距是 25px
右内边距是 50px
下内边距是 25px
左内边距是 50px
填充 - 简写属性
为了缩短代码，它可以在一个属性中指定的所有填充属性。这就是所谓的简写属性。所有的填充属性的简写属性是 padding :
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填充属性
属性 说明
padding 使用简写属性设置在一个声明中的所有填充属性
padding-bottom 设置元素的底部填充
padding-left 设置元素的左部填充
padding-right 设置元素的右部填充
padding-top 设置元素的顶部填充
CSS分组和嵌套选择器
分组选择器
在样式表中有很多具有相同样式的元素。
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
为了尽量减少代码，你可以使用分组选择器，每个选择器用逗号分隔。
在下面的例子中，对以上代码使用分组选择器：
h1,h2,p
{
color:green;
}
嵌套选择器
它可能适用于选择器内部的选择器的样式。在下面的例子设置了三个样式：
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
p.marked{
text-decoration:underline;
}
CSS尺寸
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。
p.ex
{
height:100px;
width:100px;
}
<p class="ex">这个段落的高和宽是 100px.</p>
所有CSS尺寸 (Dimension)属性
属性 描述
height 设置元素的高度
line-height 设置行高
max-height 设置元素的最大高度
max-width 设置元素的最大宽度
min-height 设置元素的最小高度
min-width 设置元素的最小宽度
width 设置元素的宽度
959
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
