随笔分类 - [05] CSS
CSS——Cascading Style Sheet，级联样式表，用来进行网页风格设计的。
摘要：一、CSS浮动简介 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。浮动主要在div+css布局时使用。 请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘： 再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失；如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮...
阅读全文
摘要：一、元素定位机制 1.普通文档流 普通文档流将浏览器窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。 2.定位思想和浮动 CSS元素定位的基本思想很简单，它允许我们定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。此外，CSS中的浮动允许元素向左或者向右移动。通常情况下，我们使用div+css布局页面，而css布局中最重要的就是float属性。 3.一切皆为框 div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为...
阅读全文
摘要：按照之前介绍的“元素内容（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-
阅读全文
摘要：在各种类型的样式定义中，内联样式是在元素的style属性中指定，因此不需要定义样式选择器。除此而外，其它类型的样式表都需要定义样式选择器（selector）。选择器就是指定所定义的样式适合于哪些元素，比如应用于p标签、class="important"。样式选择器主要有标签选择器、class选择器和id选择器等，下面分别进行详细学习。一、元素选择器 最常见的 CSS 选择器是元素选择器（element selector），也叫类型选择器（type selector）。换句话说，文档的元素（或类型）就是最基本的选择器。这里的“文档”既可以是HTML文档，也可以是XML文档。如
阅读全文
摘要：一、CSS语法 CSS 规则由两个主要的部分构成：选择器（selector），以及一条或多条声明（declaration）。 selector {declaration1; declaration2; ... declarationN } 1.选择器（selector）：选择器通常是需要设置样式的 HTML 元素。CSS有包括标签选择器、id选择器在内的多种选择器。 2.属性声明（declaration）：每条声明由一个属性（property）和一个值（value）组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值之间用冒...
阅读全文
摘要：一、CSS定义 1.CSS定义 CSS是Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或 XML 等文件式样的计算机语言。CSS的作用就是为网页设置外观，相当于给HTML文档穿上了华丽的衣服。CSS目前最新版本为CSS3，能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒子模型的控制能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。 2.为什么要使用CSS？ 这个问题得从HTML和浏览器的发展...
阅读全文
