程序员小白的博客

属性值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、insert、ouset；多列布局中，可根据内容和喜好不同，调整多列布局中列与列之间的距离，从而完成整体版式规划；边框是样式属性中重要的属性之一，通诺边框能容易地界定边框内容，从而划分为不同的区域；在多列布局中，也能设置多列布局的边框，用来区分不同的列数；属性定义，包括边框宽度、边框颜色和边框样式等等；属性用于定义边框颜色，颜色值支持所有颜色值；属性定义边框样式，属性值和。...

是由浮点数和单位标识符组成的长度值，不可为负值；auto根据浏览器计算自动设置；属性定义多列布局中每列的宽度，可单独使用，也能和其他多列布局属性组合使用；表示值是一个整数，用来定义栏目的列数，取值大于0的整数，不可以为。属性能指定多列布局的列数，不需要通过列宽度自动调整列数；auto属性值表示根据浏览器计算值自动设置；...

块1的position属性值为relative，块1现在是相对于页面的相对定位（即在其默认显示的位置上，通过上下左右四个参数设置偏移一定的距离，仅仅是显示出来的效果偏移了，但它实际还占用着原来的位置）；定位是指定块的位置，即块相对于其父块的位置和相对于它自身应该在的位置；，当设置元素向右向左浮动时，元素回向父元素的左侧或右侧靠近；属性时，该值便能设置各块之间的重叠高低关系；，z-index值大的页面位于其值小的上方；/*高低值-1*//*高低值0*//*高低值1*/...

@toc在网页设计的过程中，有时候需要对文字或图形进行翻转；下面介绍几种翻转的方法：rotateY 输入能让图片或文字水平镜像翻转；例子1：使用 rotateY 属性翻转文字和图片rotateX 属性能让文字或图片垂直镜像翻转；例子2：和 的 属性都能对文字或图片进行水平镜像翻转； 属性参数必须是 负数，否则不能完成翻转；参数数字越大翻转后图形或文字就会增大多少；例子 3： 如上的水平镜像翻转的使用方法类似；例子 4：注意： 镜像翻转以轴为镜像，普通旋转以点为镜像；......

blue 滤镜能实现页面模糊效果，即在一个方向上的运动模糊；语法格式如下所示：radius 参数表示接单单个参数半径，该参数半径以长度形式保存模糊半径；例子 1：

CSS 滤镜是IE浏览器厂商为了增加浏览器功能和竞争力，而推出的一种网页特效；CSS 滤镜不是浏览器插件，也不符合 CSS 标准；从 Interne Explorer 4.0 开始，浏览器就开始支持多媒体滤镜特效，允许使用简单代码对文本和图片进行处理，如模糊、火焰特效、彩色投影、色彩渐变等；当把滤镜和渐变结合到网页脚本中时，就能建立一个动态交互的网页；CSS 滤镜属性的标识符是 ；语法格式如下所示：filtername 是滤镜的名称，如 alpha、blur、chroma、dropshadow

通过使用伪类能对超链接进行修饰；伪类是一种特殊的选择符，能被浏览器自动识别；最大的用处是在不同状态下能对超链接定义不同的样式效果，是 CSS 3本身定义的一种类；例子 1：例子 2：给超链接加入提示内容将图片作为背景图添加到超链接中，这样超链接能有更加精美的效果；使用 属性来实现；例子 2：例子 3：...

使用 属性（鼠标指针属性）能实现对鼠标样式的控制；例子 1：HTML 鼠标样式效果例子2：鼠标放在超链接上，能看到超链接的颜色、背景图片发生变换，且鼠标样式变化

在设计网页时，不但能创建垂直导航菜单，也能创建水平导航菜单；例子1：垂直菜单效果水平效果设置超链接样式例子2：

有序或无序列表能通过 改变项目前的特殊符号，还能使用 属性将每项前面的项目符号替换成任意的图片；属性能定义有序和无序列表项标志的内容；图像相对于列表项内容的放置位置，通常使用 属性控制；语法格式如下所示：none 表示不指定图像，url 表示使用绝对路径和相对路径指定背景图像；例子 1：属性能设置图片显示位置，当使用图片作为列表符号时，图片通常显示在列表的外部，实际上还能将图片列表中的文本信息进行对其，从而显示另一种效果；语法格式如下所示：例子 2：...

无序列表是网页中常见的元素之一，会用 标记罗列哥哥项目，且每个项目前都带有特殊符号；使用 属性来定义无序列表的项目符号；无序列表的 语法格式如下所示：例子 1：有序类别标记能创建具有顺序的列表；使用 属性，能改变有序列表前面的符号；有序列表的 语法格式如下所示：例子 2：...

在定义表单元素边框时，可采用 、 和 及其衍生属性；若要对表单元素设置背景色，可采用 属性，其中将值设置为 （透明色）是最常用的一种方式；代码如下所示：例子 1：

使用属性定义表单元素背景色；例子1：

在显示一个表格数据时，通常都带有表格边框，用来界定不同单元格的数据；当表格的描述标记值大于0时，显示边框；若值为0，则不显示边框；边框显示时，可用属性及衍生属性，以及属性对边框进行修饰，属性表示对边框进行样式、颜色和宽度设置，以达到提高样式效果的目的；属性主要用设置表格的边框是否合并为一个单一的边框，像在标准的 HTML 中那样分开显示；语法格式如下所示： 是默认值，表示边框会被分开，不会忽略 和 属性；而 属性表示边框会合并为一个单一的边框，会忽略 和 属性；例子 1：使用 属

使用 属性，能设置背景图片大小；语法格式如下所示：例子 1： 属性能设置一个或多个值，一个为必填，一个为选填；第一个值指定图片宽度，第二个值指定图片高度；若只设定一个值，则第二个值默认为auto；使用 属性，能完成背景图片的定位；默认情况下， 属性总是以元素左上角原点作为背景图片定位，适应 属性能改变这种定位方式；语法格式如下所示：例子 2：使用 属性，能裁剪背景图片；语法格式如下所示：例子 3:：...

若网页的文本较多，出现了多屏页面，此时背景图片若不能覆盖页面，就会出现看不到背景图片的现象；使用 属性，用来设定背景图片是否随文档一起滚动； 属性包含了两个属性值：，适用于所有元素；例子 1： 属性的值为时，背景图片的位置固定并不是相对于页面的，而是相对于页面的可视范围；使用 属性，设置的重复方式，包括水平重复、垂直重复与不重复等 属性用于设定背景图片师傅重复平铺；例子 2：背景图片垂直重复...

使用 属性能设定标记的背景图片，在 中使用，将图片置于整个主体中；语法格式如下所示：默认属性时无背景图，当要使用背景图时可用 进行导入； 可以使用绝对路径或相对路径；例子 1：使用 属性能调整背景图片位置； 属性用于指定背景图片在页面中所处的位置；该属性值能分为4类：绝对定义位置（length）、百分比定义位置（percentage）、垂直对齐值与水平对齐值；垂直对齐值包括，水平对齐值包括；例子 2：使用垂直对齐值和水平对齐值只能格式化地放置图片；若页面中要自由地定义图片的位置，需要

使用 属性设定网页背景颜色；对于没有设定背景色的标记，默认背景颜色为透明（tranaparent）；语法格式如下所示： 是默认值，表示透明；背景颜色 color 设定方法能采用英文单词、十六进制、RGB、HSL、HSLA、GRBA 来决定颜色；例子1： 不仅能设定整个网页的背景颜色，还能设置指定 HTML 元素的背景色；例子 2：...

用 属性能设计图片和文字之间的距离，即文字与图片之间在一定间距； 属性主要用来在一个声明中设置所有内边距属性，即能设置元素所有内边距的宽度，或设置各边上内边距的宽度；注意： 不允许指定负边距值；语法格式如下所示：参数说明：例子 1：使用 属性能实现文字环绕效果； 属性主要定义元素在哪个方向浮动；一般应用于图像，使文本环绕在图像周围，也能定义其他元素浮动；浮动元素会生成一个块级框，不论它本身是何种元素；若浮动元素非替换元素，则要指定一个明确的值；否则，他们尽可能地窄；语法格式如下所示：

图片横向对齐，即水平方向向上进行对齐；对齐样式与文字对齐，都有 3 种对齐方式，分别为左、中、右；若要定义图片对齐方式，不能在样式表中直接定义图片样式，需要在图片的上一个标记级别，即父标签级别定义对齐方式，让图片继承父标记的对齐方式；这是因为 （图片）本身没有对齐属性，需要使用 CSS 继承父标记的 来定义对齐方式；例子 1：纵向对齐，即垂直对齐，在垂直方向上和文字进行搭配使用；通过对图片垂直方向上的设置，能设定图片和文字高度一致；使用 属性定义图片纵向对齐； 属性设置元素的垂直对齐方式，即

通过 中的 让图片是否具有边框；示例如下：通过 HTML 标记设置图片边框，其边框显示都是黑色，且风格单一，唯一能够设定的就是边框的粗细，不能对边框的样式进行设置；使用 属性定义边框样式，即边框风格（点线式-dotted、破折式边框-dashed、直线式边框-solid、双线式边框-double等）；例子 1：若需要单独定义边框一边的样式，可使用 设定上边框样式、 设定右边框样式、 设定下边框样式、 设定左边框样式；例子 2：...

使用 的描述标记 和 能设置图片大小； 和 分别表示图片的高度和宽度，可以是数值或百分比，单位可以用 px，也可以是**%、em、pt**；注意： 高度属性是和宽度属性 设置要求相同；例子1：CSS 3 中，可使用属性 和 设置图片的宽度和高度，以此达到图片的缩放效果；例子 2：CSS 3 中， 和 用来设置图片宽度最大值和高度最大值； 和 的值一般是数值类型；语法格式如下所示：或在定义图片大小时，若图片默认尺寸超过了定义的大小，就以 所定义的宽度显示，二图片高度将同比例

文字垂直居中称为文字顶部对齐或底部对齐； 属性，该属性用来定义垂直对齐方式；该属性定义行内元素的基线相对于该元素所在的基线的垂直对齐，允许指定负长度值和百分比值，这会让元素降低而不是升高；在单元格中，这个属性会设置单元格框中的单元格内容的对齐方式；语法格式如下所示：例子 1：在段落中，通常用首行缩进两个字符表示这是一个段落的开始；通过 属性能设定文本块的首行缩进；语法格式如下所示： 属性表示有百分比数字或由浮点数字和单位标识符组成的长度值，允许为负值； 属性可看成能定义两种缩进方式，一

属性能设置字符文本之间的距离，即在文本字符之间插入多少空间，允许负值，即让字母之间更加紧凑；语法格式如下：例子 1：单词之间的间隔若设置合理，一是会给整个网络布局节省空间，二是能给人赏心悦目的感觉，提高阅读效果；使用 属性直接定义指定区域或段落中单词之间的间隔； 属性用于设定词与词之间的间距，即增加或减少词与词之间的间隔；语法格式如下：例子 2：通过 属性，可设置多种对齐； 属性用于定义对象文本的对齐方式；语法格式如下：例子 3：...

在网页显示信息时，若指定显示区域宽度，而显示的信息过长，其结果就是信息会撑破指定的信息区域，进而破坏整个网页布局；若设定的显示区域过长，就会影响整体的网页显示；使用 属性能解决上述问题；属性用来定义文本溢出时显示省略标记，即定义省略文本的出来方式；它不具备其他的样式属性定义，要实现溢出时产生省略号的效果还需要定义强制文本在一行内显示（）及溢出内容为隐藏（），只有这样才能实现溢出文本显示省略号的效果；语法格式如下：例子 1：当在一个指定区域显示一整行文字时，若文字在一行显示不完时，就需要换行；

通过设置字体主粗细，能让文字显示不同的外观； 属性能定义字体的粗细程度；语法格式如下所示：属性有 13 个有效值，分别是bold、bolder、lighter、normal、100~900；若没有设置该属性，则使用默认值 normal；属性值设置为 100~900，值越大，加粗的程度就越高；例子 1： 用来定义文字风格，即字体显示的样式；语法格式如下：例子 2：显示字体时，有时需要给文字添加阴影效果，并且为阴影添加颜色；需要用到 属性，该属性还具有不透明度效果；语法格式如下：

在 css 样式中，多使用 color属性定义颜色；例子1 ：# 2. 定义文字的字体 属性用于指定文字字体类型，即在网页中展示字体不同的形状；语法如下所示：有两种声明方式；第一种为使用 name字体名称，按优先顺序排列，以逗号隔开，若字体名称包含空格，则应使用引号括起；第二种声明方式使用所列出的字体序列名称，若使用 fantasy序列，将提供默认字体序列；CSS 3 中常使用使用第一种声明方式；例子2：注意： 在字体显示时，若指定一种特殊字体类型，而在浏览器或操作系统中该类型不能正确获

HTML 网页可看成一个节点的集合，在一个HTML 文档中能包含不同的标记，HTML 文档中的每个成分都是一个节点；一个节点数中的所有节点彼此都是由关系的；一个节点树能把一个 HTML 文档展示为一个节点集，以及它们之间的连接；在一个节点树中，最顶端的节点被称为根；每一个节点，除根之外，都拥有父节点；一个节点能有无数的子，叶是无子的节点，同级节点拥有相同的父的节点，如下图所示；CSS 继承是指子标记会继承父标记的所有样式风格，并能在父标记样式风格的基础上加以修改，产生新的样式，而子标记样式完全不

集体声明就是在声明各种CSS选择器时，若某些选择器的风格完全相同，或者部分相同，可将风格向提供的 CSS 选择器同时声明；例子1：在 CSS 控制 HTML 标记样式时，还能使用层层递进的方式，即嵌套方式，对指定位置的 HTML 标记进行修饰；例子 2：...

标签选择器最基本的形态如下：通过一个具体标记来命名，能对文档里这个标记出现的每一个地方应用样式定义。例子 1：在一个页面，使用标签选择器会控制该页面中所有此标记的显示样式；若需要为此类标记中的一个标记重新设定，仅使用标签选择器是不能达到效果的，还要使用类别（class）选择器；类选择器用来为一系列标记定义相同的呈现方式，语法格式如下： 是选择器的名称，若一个标记具有 class 属性且 class 属性为 ，那么该标记的呈现样式由该选择器指定；在定义类选择符时，需要在 classValue 前面

样式表的用法（三）1. UI 元素状态伪类选择器1. UI 元素状态伪类选择器UI元素状态伪类也是 css3 新增的选择器，UI 即 User Interface（用户界面）的简称；UI 设计则是指对软件的人机交互、逻辑操作、界面美观的整体设计；UI 元素的状态一般包括可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等，css3 定义了 3 种常用的状态伪类选择器；例子1：使用 UI 元素状态伪类选择器的示例<!DOCTYPE html><html> &lt

样式表的用法（三）1. UI 元素状态伪类选择器1. UI 元素状态伪类选择器UI元素状态伪类也是 css3 新增的选择器，UI 即 User Interface（用户界面）的简称；UI 设计则是指对软件的人机交互、逻辑操作、界面美观的整体设计；UI 元素的状态一般包括可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等，css3 定义了 3 种常用的状态伪类选择器；例子1：使用 UI 元素状态伪类选择器的示例<!DOCTYPE html><html> &lt

样式表的用法1. 属性选择器2. 结构伪类选择器1. 属性选择器不通过标记名称或自定义名称，通过直接标记属性来修饰网页，直接使用属性控制 HTML 标记样式，称为属性选择器；属性选择器即根据某个属性是覅存在或属性值来寻找元素，因此能够实现某些非常有意思和强大的效果；在 css2 中已经出现了属性选择器，但 css3 中有新增了 3 个属性选择器，即现在 css3 中有 7 个属性选择器，共同构成 css 功能强大的标识属性过滤体系；例子 1：使用属性选择的示例<!DOCTYPE html&

样式表的用法1. 在 HTML 中插入样式表2. 单独的链接 css 文件1. 在 HTML 中插入样式表可以直接把 css 代码添加到 html 的标记中，即作为 HTML 标记的属性标记存在；这样能很简单地对某个元素单独定义样式；例子 1：使用 css 的实例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>在HTML中插入样式表</title&gt