摘要： 按照之前介绍的“元素内容（element）—>内边矩（padding）—>边框（border）—>外边距（margin）”的学习顺序，这一篇文章该学习元素的外边距了。外边距（margin）就是围绕在元素边框以外的空白区域，设置外边距会在元素外创建额外的“空白”。CSS中元素的margin属性用于置外边距，margin属性接受任何长度单位、百分数值甚至负值。一、margin简写属性 1.为元素的各个边设置同样的固定大小的margin值： 下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白：/*设置一级标题的外边距为0.25英寸*/h1 {margin : 0.25i 阅读全文

摘要： 在传统的HTML文档 中，我们使用表格（table）来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。元素的边框（border）就是围绕元素内容和内边据的一条或多条线，元素外边距（margin）内就是元素的的边框 (border)。每个边框有 3 个方面：宽度（border-width)、样式(border-style)，以及颜色(border-color)。下图中标注的蓝色部分为元素的边框：一、边框与背景 CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当... 阅读全文

摘要： 上一篇文章学习了CSS的Box Model（盒子模型），在接下来的文章中，我会由内而外学习元素Box Model的中的padding、border和margin属性。 这一篇文章，先来学习元素内边矩（padding）：CSS padding 属性定义元素边框（border）与元素内容（element content）之间的空白区域。css padding属性的取值可以是auto（由浏览器计算内边矩的值）、以具体的单位计算的长度值（默认是0px）或百分比（基于父元素的宽度的百分比计算的内边距）。下图表示的是上一篇文章中的Box Model模型，其中的黄色区域（用红色箭头标注）就是元素的内边... 阅读全文

摘要： CSS中， Box Model叫盒子模型（或框模型），Box Model规定了元素框处理元素内容（element content）、内边距（padding）、边框（border） 和 外边距（margin） 的方式。在HTML文档中，每个元素（element）都有盒子模型，所以说在Web世界里（特别是页面布局），Box Model无处不在。下面是Box Model的图示： Box-Model 1 说明：上图中，由内而外依次是元素内容（content）、内边矩（padding-top、padding-right、padding-bottom、padding... 阅读全文

摘要： 在CSS中，outline属性用于设置元素的轮廓，轮廓是绘制于元素周围的一条线，位于边框（border）边缘的外围，可起到突出元素的作用。CSS outline 属性规定元素轮廓的样式（outline-style）、颜色（outline-color）和宽度（outline-width）。一、outline-style outline-style 属性用于设置元素的整个轮廓的样式。outline-style属性的取值包括none（无轮廓）、solid（实线轮廓）和dashed（虚线轮廓）等，样式不能是 none，否则轮廓不会出现。 注意：1.在设置 outline-color 属性之前声... 阅读全文

摘要： 一、border border属性用于设置表格（<table></table>）以及单元格（<th></th>/<td></td>）设置边框。注意：border也是一种简写属性，它一次性设置了table、th和td的四条边框的属性，这些属性都可以单独设置的，在这里就不一一演示了。在这个简写属性中， 各个属性的书写顺序是无关的。例如，下面的例子为table、th和td设置了1px宽的蓝色实线边框。 table, th, td { border: solid blue 1px; }说明：上例中的表格具有双线条边框。这是由于 t 阅读全文

摘要： CSS列表属性主要包括列表类型（list-style-type）、列表图像（list-style-image）和列表位置（list-style-position）。一、list-style-type list-style-type属性用于设置列表类型（标志类型）。例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点（disc）；在有序列表中，标志可能是字母（a/A/...）、数字（1/i/I...）或另外某种计数体系中的一个符号。例如，下面的声明把无序列表中的列表项标志设置为方块。 /*将无序列表中的列表项标志设置为方块*/ ul {list-style-... 阅读全文

摘要： CSS 字体属性用于定义文本的字体系列（font-family)、字体大小(font-size)、字体粗细(font-weight)、字体风格（font-style,如斜体）和字体变形（font-variant,如小型大写字母）等。一、font-family 1.字体系列简介 就像传统的文字处理软件（比如Word）一样，设置字体属性是样式表的最常见的用途之一。不过，尽管字体选择很重要，但是至少在目前还没有一种办法能确保在 Web 上一致地使用字体，因为没有一种统一描述字体和字体的变形的方法。 在Web领域，存在字体的命名混乱的问题：实际上，在Web中相同的字体可能有很多不同的称呼，我... 阅读全文

摘要： 上一篇文章学习了CSS背景，本篇来学习CSS文本。背景（background）和文本（text）一后一前，相互渲染，从而呈现出页面内容。背景就像是画布，而文本就是我们在画布上绘制的文字线条。CSS 文本属性主要包括文本颜色（color）、字符间距（letter- spacing）、对齐文本（text-align）、装饰文本（text-decoration)和文本缩进（text-indent）等，下面分别学习。一、文本颜色 CSS使用color 属性设置文本颜色（前景色）。color属性设置了一个元素的前景色（在 HTML 表现中，就是元素文本的颜色）；光栅图像不受 color 影响。co... 阅读全文

摘要： CSS 允许应用纯色（background-color）作为背景，也允许使用背景图像（background-image）创建相当复杂的效果。CSS 在这方面的能力远远在 HTML 之上。一、背景颜色 可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。比如下面这条规则把<p></p>元素的背景设置为灰色：p {background-color: gray;} 如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：p {background- 阅读全文