在css写样式时我通常会给设置的盒子圆角效果，但设置百分比值与像素值是有区别的，设置的盒子是正方形时百分比设置的范围值是：（0%~50%）当值达到50%时形成一个圆，超过50%之后不再变化；像素设置的范围值是：（0px~边长的1/2+px）当值达到边长的一半后不再变化。详情见下图：设置的盒子是矩形（长宽不等）时百分比设置的范…
CSS 概要本教程已向你讲解了如何创建样式表来同时控制多重页面的样式和布局。你已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距。同时，你也学会了如何定位元素、控制元素的可见性和尺寸、设置元素的形状、将一个元素置于另一个之后，以及向某些选择器添加特殊的效果，比如链接。你已…
本节列出了在使用 CSS 时尽量避免使用的技术。Internet Explorer Behaviors它是什么？Internet Explorer 5 引入了行为 (behaviors)。behaviors 是一种通过使用 CSS 向 HTML 元素添加行为的方法。为什么要避免它？只有 Internet Explorer 支持 behavior 属性。用什么代替？请使用 JavaScript 和 HTML DOM 取而代之。例子 1 -…
媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。媒介类型某些 CSS 属性仅仅被设计为针对某些媒介。比方说 "voice-family" 属性被设计为针对听觉用户终端。其他的属性可被用于不同的媒介。例如，"font-size" 属性可被用于显示器以及印刷媒介…
演示：CSS 图片库在此处添加对图像的描述在此处添加对图像的描述在此处添加对图像的描述在此处添加对图像的描述图片库下面的图片库是由 CSS 创建的：实例<!doctype html> <html> <head> <style> div.img { margin:3px; border:1px solid #bebebe; height:auto; width:auto; …
导航栏拥有易用的导航条对于任何网站都很重要。通过 CSS，您能够把乏味的 HTML 菜单转换为漂亮的导航栏。导航栏 = 链接列表导航栏需要标准的 HTML 作为基础。在我们的例子中，将用标准的 HTML 列表来构建导航栏。导航栏基本上是一个链接列表，因此使用 <ul> 和 <li> 元素是非常合适的：实例<ul> <li&…
CSS 分类属性允许你规定如何以及在何处显示元素。CSS 分类属性 (Classification)CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。 属性描述clear设置一个元素的侧面是否允许其他的浮动元素。cursor规定当指向某元素之上时显示的…
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。 CSS 尺寸属性CSS 尺寸属性允许你控制元素的高度和宽度。同样，还允许你增加行间距。 属性描述height设置元素的高度。line-height设置行高。max-height设置元素的最大高度。max-width设置元素的最大宽度。min-height设置元素的最小高度。m…
CSS 伪元素用于向某些选择器设置特殊效果。语法伪元素的语法：selector:pseudo-element {property:value;}CSS 类也可以与伪元素配合使用：selector.class:pseudo-element {property:value;}:first-line 伪元素"first-line" 伪元素用于向文本的首行设置特殊样式。在下面的例子中，浏览器会根据 "first-line&q…
语法伪类的语法：selector : pseudo-class {property: value}CSS 类也可与伪类搭配使用。selector.class : pseudo-class {property: value}锚伪类在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。a:link {color: #FF0000} /* 未访问的链…
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。选择相邻兄弟如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：h1 + p {margin-t…
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。选择子元素如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：h1 > strong {color:red;}这…
后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。根据上下文选择元素我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：h1 em {color:red;}上面这个…
CSS 2 引入了属性选择器。属性选择器可以根据元素的属性及属性值来选择元素。简单属性选择如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。例子 1如果您希望把包含标题（title）的所有元素变为红色，可以写作：*[title] {color:red;}例子 2与上面类似，可以只对有 href 属性的锚（a 元素）应用…
ID 选择器允许以一种独立于文档元素的方式来指定样式。CSS ID 选择器在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。语法首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。请看下面的规则：*#intro {font-weight:bold;}与类选择器一样，ID 选择器中可以忽略通配选择器。前面的例子也可以写作：#intro {…
类选择器允许以一种独立于文档元素的方式来指定样式。CSS 类选择器类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。提示：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方…
选择器分组假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：h2, p {color:gray;}将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则…
CSS 元素选择器最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：html {color:black;} h1 {color:blue;} h2 {color:silver;}可以将某个样式从一个元素切换到另一个元素。假设您决定将上面的段落…
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。CSS 浮动请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：再请看下图，当框 1 向左浮动时，它脱离文档…
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。CSS 绝对定位绝对定位使元素的位置与文档流无关，因此不占据…
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。CSS 相对定位相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。如果将 top 设置为 20px，那么框将在原…
CSS 定位 (Positioning) 属性允许你对元素进行定位。CSS 定位和浮动CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另…
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。外边距合并外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。…
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。CSS margin 属性设置外边距的最简单的方法就是使用 margin 属性。margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。margin 可以设置为…
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允许你规定元素边框的样式、宽度和颜色。CSS 边框在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。元素外边距内就是元素的的边框 (border)。元素的边框就是围…
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。CSS padding 属性定义元素边框与元素内容之间的空白区域。CSS padding 属性CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：h1 {p…
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。CSS 框模型概述元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。提示：背景应用于由内容和内边距、边框组成的…
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。CSS outline 属性规定元素轮廓的样式、颜色和宽度。CSS 边框属性"CSS" 列中的数字指示哪个 CSS 版本定义了该属性。属性描述cssoutline在一个声明中设置所有的轮廓属性。2outline-color设置轮廓的颜色。2outline-style设置轮…
CSS 表格属性可以帮助您极大地改善表格的外观。表格边框如需在 CSS 中设置表格边框，请使用 border 属性。下面的例子为 table、th 以及 td 设置了蓝色边框：table, th, td { border: 1px solid blue; }请注意，上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。如果需要把表格显示为单…
CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。CSS 列表从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单，甚至你的所有朋友都可以表示为一个列表或者是列表的列表。由于列表如此多样，这使得列表相当重要，所以说，CSS 中列表样式不太丰富确实是一大…
