[Word]DIV CSS 字体 DIV+CSS 字体 CSS样式允许以三种方式定义样式信息。 1.样式可以定义在单个的 HTML 元素中() 2.在 HTML 页的头元素中(位于 标签内部) 3.在一个外部的 CSS 文件中(.CSS文件) 甚至可以在同一个 HTML 文档内部链接多个外部样式表(多个.CSS文件) ----------------------------------------------------------- --------------------- 多重样式定义将重叠为一个 当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢, 样式定义次序 一般而言，所有的样式会根据下面的层叠规则组合在一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。 1.浏览器缺省设置 2.外部样式表 (外部.CSS文件) 3.内部样式表(位于标签内部) 4.内联样式(在 HTML 元素内部 如:) 因此，内联样式(在 HTML 元素内部)拥有最高的优先权，这意味着 同样的内联样式声明它将优先于其他样式声明。 ----------------------------------------------------------- --------------------- CSS编写环境 CSS可以完全不受环境限制的进行编写，甚至不需要任何软件或辅助工具，你所需要的，只是记事本，打开记事本，编写你的CSS，保存完后把.txt后缀改为.css即可。 如果你是一个熟练有经验的网页师，可能你在公车上用手机就能完成整个网页的布局排版了。 ----------------------------------------------------------- --------------------- CSS小结 1.样式定义如何显示 HTML 元素 2.样式通常存储在样式表中 3.把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 4.外部样式表可以极大的提高工作效率 5.外部样式表通常存储在 CSS 文件中 6.多个样式定义可层叠为一 ----------------------------------------------------------- --------------------- 第二课:CSS语法 本课我们学习CSS的语法,并了解CSS的书写方式 可能有人会问，CSS还有语法,是的，它不属于任何编程语言类型，但它有自己规定的以及，只有了解这些规范你才能写出更简洁、易懂的CSS。 网页设计师们应力求写出的CSS有更好的可读性，更规范的书写，更小的体积，这是初学者们应该要明白的。 CSS 语法由三部分构成:css选择器、属性、值: body { color: #ff0000; } 其中body为选择器，选择器通常是你HTML元素或标签，选择器分为ID选择器(#cssstyle)，类选择器(.cssstyle)，派生选择器(#cssstyle a)。 这3种选择器我们将在后续的教程中一一介绍。 color为属性，是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明。 ----------------------------------------------------------- --------------------- 单位和值的写法 除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000: p { color: #ff0000; } 为了节约字节，我们可以使用 CSS 的缩写形式: p { color: #f00; } 我们还可以通过两种方法使用 RGB 值: p { color: rgb(255,0,0); } p { color: rgb(100%,0%,0%); } 注意:当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。 ----------------------------------------------------------- --------------------- 记得写引号 提示:如果值为若干单词，则要给值加引号: p {font-family:"Arial, Helvetica, sans-serif";} ----------------------------------------------------------- --------------------- 多重声明 提示:如果要定义不止一个css声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条css规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么的好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。就像这样: p {text-align:center; color:red;} 关于空格和大小写 大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑:是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 不论大小写。 不过存在一个例外:如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。 ----------------------------------------------------------- --------------------- 推荐的CSS书写格式 普通写法: .cssstyle{ font-weight:normal;padding:12px;color: red;} 推荐的写法: .cssstyle{ font-weight:normal; padding:12px; color: red; } 为什么这样做,当样式表中存在不止一条规则及声明，第一种书写方法找到想要的标签将会非常的困难，相对第二种方法将会清晰很多，同时，第二种方法的排列顺序按照标签首字母的顺序来排列会更科学。 第三课 CSS 高级语法 这一课,我们将学买CSS的高级语法,并了解什么是CSS选择器,什么是CSS继承,以及css如何摆脱继承. 接下来我们学习的将是在编写中经常会用到的一些技巧以及CSS的一些语法规则。 这将为您之后的学习打下结实的基础。 ----------------------------------------------------------- --------------------- CSS选择器也可以分组 你可以对css选择器进行分组，这样，被分组的选择器就可以共享相 同的声明。用英文逗号将需要分组的选择器分开。在下面的例子中， 我们对所有的h系列元素进行了分组。所有的h系列元素都是绿色的。 h1,h2,h3,h4,h5,h6 {color: green;} ----------------------------------------------------------- --------------------- CSS 继承 根据 CSS，子元素从父元素继承属性。看看下面这条规则: body {font-family: "Arial Black", Gadget, sans-serif;} 无需另外声明，因为通过 CSS 继承，子元素(如:div,a,span,p, td, ul, li等等)将继承最高级元素(本例中是 body)所拥有的属性。 所以根据上面这条规则，页面的 body 元素及其所有子元素将继承 Verdana 字体(假如访问者的系统中存在该字体的话)。 如果字体不存在，则调用浏览器默认设置字体。 ----------------------------------------------------------- --------------------- 那么怎么摆脱继承, 如果你不希望整个页面都使用 "Verdana " 字体，又该怎么做呢,例 如，你希望p(段落标签)的字体是 “宋体”。没问题，创建一个针 对 p 的特殊规则，这样它就会代替父元素的规则: p{font-family:Arial, Helvetica, sans-serif;} 第四课 什么是CSS选择器 这一课,我们将重点学习什么是CSS选择器,并了解什么是了解派生选择器,了解ID选择器,了解类选择器。他们在实际用途中将经常使用，所以，打起精神来～请好好理解这一课。 CSS 选择器分为 派生选择器、ID选择器、 类选择器，他们在实际用途中将经常使用，所以，打起精神来～请好好理解这一课。 ----------------------------------------------------------- ------------------ --- id选择器 id 选择器可以为标有id 的 HTML元素指定特定的样式。 id 选择器以 "#" 来定义。 下面的两个 id 选择器，第一个样式定义字体颜色为蓝色，第二个样式定义字体颜色为黄色: #blue {color:blue;} #red {color:red;} 接着上面的css规则，下面的 HTML 代码中，id为 red 的 p 元素显示为蓝色，而 id为 green 的 p 元素显示为黄色:

这个段落是蓝色。

这个段落是红色。

注意:同一个ID在一个HTML文档中是唯一的，也就是不能同时存在 2个ID名称相同的HTML元素。 例如:

重复定义了，这将是错误的～ ----------------------------------------------------------- --------------------- CSS 类选择器 在 CSS 中，类选择器以一个“点”号表示: .center {text-align: center} 上面样式表示:所有拥有 center 类的 HTML 元素均为居中。 在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

这个段落将会居中

这个段落将会居中

并且同一个HTML元素可以具有多个类，每个类中间用空格分开: .center {text-align: center} .col{color:green;}

这个段落将会居中并且绿色

注意:类名的第一个字符不能使用数字～ ----------------------------------------------------------- ------------------ --- 派生选择器 熟悉HTML的人应该知道，HTML属于树状结构，在CSS中可以利用这种层级关系来定义CSS样式。 通过元素的层级关系来定义样式，可以使标记更加简洁。 派生选择器功能就是根据文档的层级关系来确定某个标签的样式。 比方说，你希望段落(p标签)中的 span 元素变为斜体字，而不是通常的粗体字，可以这样定义一个 派生选择器: p span {font-style: italic;} 请注意标记为 的蓝色代码的层级关系:

我是b标签，我是粗体，不是斜体字，因为我不在span标签中， 所以这个规则对我不起作用

我是斜体字。这是因为我是 span 元素位于 p 元素内。

同时，派生选择器样式可以指定到无论多少个层级。 以下也是正确的(假设HTML 文档中存在这样的层级关系): ul li span b {color:red;} ----------------------------------------------------------- --------------------- ID选择器与派生选择器 ID选择器也常常用于建立派生选择器: #topbar p{Font-size:28px;} 虽然id为topbar的HTML 元素在HTML文档中只能出现一次，但作为派生选择器可以多次使用。 ----------------------------------------------------------- ------------------ --- 类选择器与派生选择器 类选择器也常常用于建立派生选择器: .bg a { background: red;} 与ID选择器一样，类选择器作为派生选择器可以多次使用。 第五课 如何使用CSS样式表, 这一课,我们将学习如何使用CSS样式表,以及了解CSS外部样式表,CSS内部样式表,CSS内联样式 在你浏览网站时，当服务器读到一个样式表时，浏览器会根据它来格式化 HTML 文档的样式。 使用样式表的方法有三种:外部样式表，内部样式表，内联样式 ----------------------------------------------------------- --------------------- 外部样式表 适用于多个HTML文档使用同一个CSS样式表的情况下 外部样式表是使用中最为常见的一种，在head中插入一段link: 浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式化HTML文档。以上代码可以直接复制使用，需要改动的只是把 mystyle.css改为你的CSS文件名，当然，CSS文件应该与HTML文档在同一目录下。 外部样式表可以在任何文本编辑器中进行编辑，样式表应 该以 .css 扩展名进行保存。下面是一个简单CSS文件的例子: @charset "utf-8"; /*这里是DW默认新建CSS文件时自动创建的一行，代表该文档的编码采用UTF-8，一般情况不用去修改*/ /* CSS Document */ h1 {font-size:12;} a {margin-right:30px;} div {background-image: url("bg.jpg");color:red;} 提示:属性值与单位之间没有空格。例如:“margin:20 px” 而不是 “margin: 20px” ，就会在某些浏览器上无法正常工作。 ----------------------------------------------------------- --------------------- 内部样式表 内部样式表适用于单个HTML文档使用CSS样式的情况下 在head中插入一段style: 提示: 标签中的样式内容与外部样式表中的内容 格式是一样的。 ----------------------------------------------------------- --------------------- 内联样式 内联样式适用于个别HTML元素需要使用CSS样式的情况下 在HTML元素标签中插入一段style:

这个是一个文本颜色为蓝色的段落

注意: 标签里的样式要用“双引号”括起来 ----------------------------------------------------------- --------------------- 多重样式 如果某些元素在不同的样式表中被同样的css选择器定义，那么最终的属性值将取决于 css继承 的效果 和 样式定义的优先级。 例如，外部样式表拥有针对 h1 选择器的三个属性: h1 { color: red; text-align: left; font-size: 8pt; } 而内部样式表拥有针对 h1 选择器的两个属性: h1 { text-align: right; font-size: 20pt; } 假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h1 得到的样式是: h1 { color: red; text-align: right; font-size: 20pt; } 即color属性将被继承于外部样式表，text-alignment和font-size属性会被内部样式表中的规则取代。 更详细的内部样式表、外部样式表，内联样式之间优先权

说明

关于失联党员情况说明岗位说明总经理岗位说明书会计岗位说明书行政主管岗位说明书

请参考:第一课 CSS概述 第六课 如何设置CSS背景 相信您已经充分掌握了CSS的基础，学习的路上总是艰苦的～但请记住～你并不孤单～从这一课起，我们将真正开始领略CSS的魅力所在～这一课将学习,如何设置CSS背景,如何设置css背景色,如何设置css背景图片,背景重复等CSS背景相关知识 相信您已经充分掌握了CSS的基础，学习的路上总是艰苦的～但请记住～你并不孤单～ 从这一课起，我们将真正开始领略CSS的魅力所在～准备好了吗,出 发吧～ CSS 可以用纯色做背景，也可以使用背景图像创建更为复杂的效果。 这也说明了CSS的能力远远在 HTML 之上。 ----------------------------------------------------------- --------------------- 背景色 可以使用 background-color属性 为HTML元素设置背景色 下面这条规则把元素的背景设置为绿色: p {background-color:green;} background-color属性 默认值 是transparent。也就是“透明”。也就是说，如果一个THML元素没有指 定背景颜色，那么背景就是透明的，这样其下层元素的背景才能看见。 ----------------------------------------------------------- --------------------- 背景图片 可以使用 background-image属性 使用图片作为背景。 background-image 属性的 默认值 是none，表示背景上没有任何图像。 如果需要设置一个背景图像，必须为这个属性设置一个图片的URL值: body {background-image: url('bg2.gif');} body是整页的背景，而你可以为行内元素或者部分区域设置背景，而不影响到其他部分。 更甚者你可以为textareas、input、select等元素设置背景，但并不是所有用户都能很好的处理这些。 注意:background-image 包括所有背景属性都不能使用css继承。 -------------------------------------------------------------------------------- 背景重复 可以使用 background-repeat属性 在页面上对背景图片进行重复。 repeat-x 和 repeat-y 值分别代表图像只在水平方向或垂直方向上 重复 no-repeat 则不允许图像在任何方向上平铺，也就是如果该HTML元 素的高宽超过了背景图片的高宽，那么 超过的地方将留空。 默认情况下背景图像将从一个元素的左上角开始。请看下面的例子: .repeaty{ background-image: url('bg2.gif');background-repeat: repeat-y; height:200px; } -------------------------------------------------------------------------------- 背景定位 可以使用 background-position属性 改变图像在背景中的位置。 下面的例子在 body 元素中将一个背景图像居中放置: .pos { background-image:url('bg2.gif'); background-repeat:no-repeat; background-position:center; height:200px; } background-position 属性 提供了很多可选择值:top、bottom、left、right 和 center，这些值也可以成对使用。 如:top left，就是将图片放置在左上的意思，值的放置次序不分先 后。 还可以使用长度值，如100px 或 5cm，或者使用百分数值。 ----------------------------------------------------------- --------------------- 百分数值 CSS还提供了百分数值来定义值，假设你希望用百分数值将图像在其元素中居中: .pre { background-image:url('bg2.gif'); background-repeat:no-repeat; background-position:50% 50%; height:200px; } 百分数值 其实是图片中心与其元素中心对齐。换句话说，百分数值同时应用于元素和图像。图像中描述为 50% 50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐。 background-position 属性的默认值是 0% 0%，在功能上相当于 top left。这就是为什么默认的总是从元素的左上角开始平铺。 ----------------------------------------------------------- --------------------- 长度值 长度值是指图片在X、Y上轴的偏移。偏移点是图像的左上角。 比如，如果设置值为 10px 30px，图像的左上角将在元素左上角向右10像素、向下30像素的位置上: .length { background-image:url('bg2.gif'); background-repeat:no-repeat; background-position:10px 30px; height:200px; } 注意:长度值 与 百分数值不同，偏移指的是从元素左上角到图片左上角的X、Y轴距离。 第七课 什么是CSS文本 通过学习css文本属性，了解如何通过css改变文本的颜色、字符间距，对齐文本，装饰文本，缩进文本等等 通过css文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，缩进文本，等等。 ----------------------------------------------------------- --------------------- 缩进文本 文章的第一行缩进，这是一个实用的效果，CSS 提供了 text-indent属性 可以方便地实现这一效果。 你可以自由调节缩进的长度，甚至可以为负的(建议不使用)。 下面将段落首行缩进5em: p {text-indent: 5em;} 注意:text-indent属性不适用于行内元素，如果要使行内元素的第一行进行“缩进”，可以用css边距来实现。 ----------------------------------------------------------- --------------------- 使用百分比值 text-indent属性 可以使用百分比值来控制缩进。 百分数值是相对于父元素的宽度。也就是说，如果缩进值为 20%，元素的第一行缩进长度将是其父元素宽度的 20%。 在下例中，缩进值是父元素的 20%，即 60 个像素: div {width:300px;} p {text-indent:20%;} ----------------------------------------------------------- --------------------- 字间隔 word-spacing属性 可以改变文字之间的间隔。其默认值为0。 此属性值 为正时增大文字之间间隔，同理，为负时缩小文字之间间隔: .plus{word-spacing:30px;} .lose{word-spacing:-5px;} 我的字间距 比较 大 我的字间距 比较 小 ----------------------------------------------------------- --------------------- 字母间隔 letter-spacing 与 word-spacing 的区别在于: letter-spacing是一个单词之间的间隔 word-spacing是每个字母之间的间隔 其用法以及可选值完全与 word-spacing 相同: .le_plus {letter-spacing: 10px;} .le_lose {letter-spacing: -5px;} 我的字母间距比较大 我的字母间距比较小 ----------------------------------------------------------- --------------------- 字符转换 text-transform属性 处理文本的大小写。这个属性有 4 个值: 1. none (无) 2. uppercase (全大写) 3. lowercase (全小写) 4. capitalize (每个单词首字母大写) 如果你突然决定把所有 h1 元素变为大写，这个属性就很有用了。不必单独地修改所有 h1 元素的内容，使用 text-transform 就能简单的完成这个修改: .un {text-transform: uppercase;} 同时text-transform 也充分突出了CSS的主旨，把内容和样式完全分离开来。如果你想要把所有的 h1 元素再变为小写，只要将值换为lowercase 即可，完全不用修改 h1 元素里本来的内容。 ----------------------------------------------------------- --------------------- 文本下划线 接下来，我们讨论 text-decoration 属性，这也是一个常用属性之一。 这个属性有 5 个值: 1. none (无) 2. underline (下划线) 3. overline (上划线) 4. line-through (中划线) 5. blink (文本闪烁，不建议使用，某些浏览器不支持此属性) 如果你希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点: a {text-decoration: none;} 可以有不止一个值，也可以又有上划线，又有下划线: .uline{text-decoration: underline overline;} ----------------------------------------------------------- --------------------- 文本方向 我们知道古汉语就是从右到左来阅读的，CSS引入了Direction属性 来改变其方向，为设计又多了一些乐趣。 这个属性有2个值: 1. ltr (默认，文本从左到右) 2. rtl (文本从右到左) 将文字改为从右到左排列: .ll{ direction: rtl;unicode-bidi: bidi-override; } 我是一颗小小草 注意:假如您想应用direction属性 的元素属于内联元素，您必须设定 unicode-bidi属性 为embed 或 bidi-override。 第八课 如何设置CSS字体 这一课,我们将来学习如何设置CSS字体,通过了解学习css字体的相 关属性,来使用css设置网页中字体的样式 如何设置css字体 这课的内容很少，主要了解下css是怎么巧妙的定义字体的(因为浏 览器默认字体可能达不到理想的效果) ----------------------------------------------------------- --------------------- 指定字体 可以使用 font-family属性 指定在文档中采用某种字体。 使用通用字体系列 如果你希望HTML文档中使用Georgia 字体: body {font-family: Georgia;} ----------------------------------------------------------- --------------------- 指定字体系列 同时，我们也可以定义多个字体，之间用逗号分隔: body {font-family: "Arial Black", Gadget, sans-serif;} 如果检测到用户没有安装 Arial Black 字体，便会调用 Gadget 字体，如果没有 Gadget 字体，则再调用sans-serif 字体，以此类推，全都没有时，则调用浏览器默认字体。 ----------------------------------------------------------- --------------------- 使用引号 您也许已经注意到了，上面的例子中使用了双引号。只有当一个字体名中有一个或多个空格(比如 New York)，或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。 无论单引号或双引号都可以接受。 第九课 如何设置CSS 列表属性 这一课,我们将学习什么是CSS列表属性以及如何设置CSS列表属性,通过修改CSS列表属性,可以更清楚的表达内容结构，使读者能够一目了然. CSS 列表 属性用来放置、改变列表项标志，或者将图片替代列表项标志。列表的样式是为了更清楚的表达内容结构，使读者能够一目了然。 ----------------------------------------------------------- --------------------- 标志类型 要改变css列表的样式，最简单的办法就是改变其标志。 要修改用于列表项的标志类型，可以使用 list-style-type属性: .lie_1 li {list-style-type : square;} 上面的声明把列表中的列表项标志设置成为方块。 ----------------------------------------------------------- --------------------- 图片标志 有时，默认的一些标志是不够的。你可能想用图片来作为这些标志，这时利用 list-style-image属性: .lie_2 li {list-style-image : url(ul.png);} 只要简单地设置一个 url值，就可以使用图片作为标志。 ----------------------------------------------------------- --------------------- 列表项标志的位置 CSS 还可以控制标志出现在列表项内容之外还是内容内部。这是利用 list-style-position属性 完成的。 这个属性有 3 个值: 1. inside (内部) 2. outside (外部) 3. inherit(继承) ----------------------------------------------------------- --------------------- 简写列表样式 为了简洁，可以将以上 3 个列表样式属性合并起来，使用list-style属性，就像这样: li {list-style: url(yyy.gif) square inside;} 第十课 什么是CSS框模型 这一课我们将学习什么是CSS框模型,并了解于CSS框模型相关的内边距padding属性,边框border属性和外边距margin属性 CSS 框模型 包括了内边距、边框 和 外边距(也就是css边距)。 ----------------------------------------------------------- --------------------- 概述 术语翻译: 1. element : 元素 2. padding : 内边距 3. border : 边框 4. margin : 外边距 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何HTML元素。 所以，每个HTML元素从里到外的次序可分为: 内容 ----> 内边距 ----> 边框 ----> 外边距 内边距、边框和外边距都是可选的值，默认值为 0。 只有外边距的值可以为负，并且会常用到负的外边距。 ----------------------------------------------------------- --------------------- 但是，有些浏览器会给于某些HTML元素默认的不为零的内边距和外边距。这可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器的默认样式。这可以分别进行设置，也可以使用通用选择器(*号)对所有元素进行设置(但我们并不推荐用“*”号，请参考这里:css重置): * { margin: 0; padding: 0; } 在 CSS 中，width 和 height 属性指的是实际内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加整个元素框的尺寸。 假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图: #boxs { width: 70px; margin: 10px; padding: 5px; } 提示:内边距、边框和外边距可以应用于一个元素的所有方向(一共4个方向)，也可以应用于指定的一个或多个方向。 第十一课 如何设置CSS边距 这一课,我们将学习如何设置css边距,设置css边距主要是设置css 外边距,css内边距是用css padding属性来设置内边距以及css 的,css外边距是用css margin属性来设置. css边距是在实际排版中常用的属性，好好理解，一定会受益匪浅～ css边距属性分为:内边距 和 外边距。 ----------------------------------------------------------- --------------------- CSS内边距 元素的内边距在边框和内容区域之间。控制该区域的属性是 padding 属性。 换句话说， padding 属性定义元素边框与元素内容之间的空白区域。 padding 属性接受任何长度单位(像素、英寸、毫米或 em。)或百分比值，但不允许为负值。 如果您希望 h1 元素的各边都有 10 像素的内边距: .k1 {padding:20px;}

我的内边距为20px

也可以通过使用下面四个单独的属性，分别设置上、右、下、左内边距: 1. padding-top 2. padding-right 3. padding-bottom 4. padding-left 例如: h4 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; } 您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值: h5 {padding: 10px 0.25em 2ex 20%;} 也许您已经看出，上面的2个例子效果是相同的～ 但更为清晰的CSS结构将会使你事半功倍～ ----------------------------------------------------------- --------------------- 内边距的百分比数值 就像你已经学过的那样，内边距使用百分比值是相对于父元素的宽度 下面这把段落的内边距设置为父元素 width 的 10%: p {padding: 10%;}

我的内边距是父元素宽度的 10%:

注意:上下内边距与左右内边距一样;即上下内边距也是相对于父元素宽度设置，而不是相对于高度。 ----------------------------------------------------------- --------------------- CSS外边距 在元素边框外的空白区域便是外边距。控制该区域的属性是 margin 属性。 margin属性 接受任何长度单位(像素、英寸、毫米或 em。)、百分数值甚至负值。 下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白: h1 {margin : 0.25in;} 下面的例子为 h2 元素的四个边分别定义了不同的外边距，所使用的 长度单位是像素 (px): h2 {margin : 10px 0px 15px 5px;} 与内边距的设置相同，这些值的顺序是按照 上、右、下、左 的顺序来排的 同样，外边距使用百分比值是相对于父元素的宽度: .aa {margin : 30%;}

我的外边距为60px

----------------------------------------------------------- --------------------- 单边外边距属性 您可以使用单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px。不必使用 margin(需要键入很多 auto)，而是可以采用以下方法: p {margin-left: 20px;}您可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距: 1. margin-top 2. margin-right 3. margin-bottom 4. margin-left 为各边设置不同的外边距: h2 { margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; } 当然，我们希望所有的网页设计师们写出最简洁易懂的: p {margin: 20px 30px 30px 20px;} 提示:如果您希望任何一边无外边距，则设置0px即可。 注意:margin属性在IE中会有双倍的Bug,去除Bug的方法是把display属性设置为inline; padding属性在FireFox里不会生效 第十二课 如何设置CSS边框 这一课,我们将学习如休设置CSS属性,并了CSS BORDER的相关属性,如border-style属性,border-width属性等 元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。 控制边框的属性是 border 属性。 边框在HTML元素的修饰中几乎无时无刻都会用到，给网页设计带来更丰富的视觉体验，通过 CSS border 属性允许你规定元素边框的样式、宽度和颜色。 ----------------------------------------------------------- --------------------- 边框与背景 最新CSS2.1 作出了解释: 元素的背景是包括内容、内边距和边框区。也就是说，当边框是间断的(例如，虚线)，在边框间断的地方应该显示的是背景。 大多数浏览器都遵循 CSS2.1 定义，不过一些较老的浏览器可能会有不同的表现。 ----------------------------------------------------------- --------------------- 边框的样式 边框样式将是所有网页设计师最为关心的一点，丰富的样式将会带来 更美观的页面设计。 CSS 的 border-style属性 定义了 10 个不同的样式，包括 none。 例如，您可以为把一幅图片的边框定义为 outset，使之看上去像是“凸起的按钮”: img {border-style:outset;} ----------------------------------------------------------- --------------------- 定义多种样式 同理，您可以为一个边框定义多个样式，例如: .more {border-style: solid dotted dashed double;} 上面这条规则定义了四种边框样式:实线上边框、点线右边框、虚线 下边框和一个双线左边框。 -------------------------------------------------------------------------------- 定义单边样式 如果您希望为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性: 1. border-top-style 2. border-right-style 3. border-bottom-style 4. border-left-style 因此这两种方法是等价的: .noleft {border-style: solid solid solid none;} .noleft {border-style: solid; border-left-style: none;} 注意:如果要使用第二种方法，必须把单边属性放在简写属性之后。 因为如果把单边属性放在 border-style 之前，简写属性的值就会覆 盖单边值 none。 ----------------------------------------------------------- --------------------- 边框的宽度 您可以通过 border-width 为边框指定宽度。 为边框指定宽度有两种方法: 1.可以指定长度值，比如 3px 或 1em; 2.使用 3 个预设值，它们分别是 thin(细) 、medium(普通，默 认值) 和 thick(粗)。 所以，我们可以这样设置边框的宽度: .wid {border-style: solid; border-width: 5px;} 或者: .wid {border-style: solid; border-width: thick;} 注释:CSS 没有定义 3 个关键字的具体宽度，所以一个用户代理可 能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px， 而另一个用户代理则分别设置为 3px、2px 和 1px。 ----------------------------------------------------------- --------------------- 定义单边宽度 您也可以通过下列属性分别设置边框各边的宽度: 1. border-top-width 2. border-right-width 3. border-bottom-width 4. border-left-width 所以可以这样定义: .ya { border-style: solid; border-top-width: 10px; border-right-width: 10px; border-bottom-width: 15px; border-left-width: 15px; } ----------------------------------------------------------- --------------------- 为什么没有边框, 在前面的例子中，您已经看到，如果希望显示某种边框，就必须设置 边框样式，比如 solid 或 outset。 那么如果忘记设置 border-style 属性 会出现什么情况呢, h1 {border-width: 20px;} 尽管边框的宽度是 20px，但是在没有定义border-style 属性 的情况下，无论设置了宽度为多少，会自动将宽度设置为0。 提示:这一点非常重要。事实上，因为忘记声明边框样式是一个初学者常犯的错误。 ----------------------------------------------------------- --------------------- 边框的颜色 设置边框颜色非常简单。CSS 使用border-color属性来控制边框颜色，它一次最多可以接受4个颜色值。 您可以使用任何类型的颜色值，包括类似 命名颜色(red)，RGB，十六进制: .col { border-style: solid; border-color: red; } 提示:如果没有为边框声明颜色，默认情况下它将与元素的文本颜色 相同。另外，如果元素没有任何文本，则继承父元素的文本颜色，以此类推。 ----------------------------------------------------------- --------------------- 定义单边颜色 还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同: 1. border-top-color 2. border-right-color 3. border-bottom-color 4. border-left-color 要指定实线黑色边框，而右边框为实线红色，可以这样指定: .bla { border-style: solid; border-color: black; border-right-color: red; } 第十三课 网页布局如何实现CSS定位 这一课,我们将学习网页布局中如何实现CSS定位,并以此了解CSS的 display属性,position属性,以及什么是块对像,什么是内联对象,内联对象和块对象间如何进行相互转换 从这一课开始我们将接触CSS的布局，一个漂亮页面的基础是布局，以下内容将是非常重要的，如有不懂，务必反复阅读进行理解。 ----------------------------------------------------------- --------------------- CSS 定位和浮动 CSS 为定位和浮动(css浮动)提供了一些属性，利用这些属性，可以建立列式布局，可以将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用很多个

表格

关于规范使用各类表格的通知入职表格免费下载关于主播时间做一个表格详细英语字母大小写表格下载简历表格模板下载

(table)才能完成的任务。 定位的基本思想很简单，它允许你随意定义一个元素的位置，可以使相对于父元素、或者另一个元素甚至于浏览器。显然，这个功能非常强大。 另一方面，CSS中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局，但他在日常网页设计中使用的比重是非常大的～我们将会在后面的章节中明确解释浮动的含义。 ----------------------------------------------------------- --------------------- 行内元素、块级元素 div、h1 或 p 等等元素常常被称为”块级元素”，这意味着这些元 素显示为一块内容。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中。 还不清楚哪些是块元素、行内元素,请参考这里:什么是内联对象,什么是块对象 您可以使用 display属性 改变元素的类型。这意味着， 通过将 display 属性设置为 block，可以让行内元素(比如 )表现得像块级元素一样。同样，将 display属性 设置为 inline，可以让块级元素(比如 )表现得像行内元素一样。甚至可以通过把 display 设置为 none，该元素及其所有内容就不再显示，不占用文档中的空间。 ----------------------------------------------------------- --------------------- CSS 定位机制 CSS 有四种基本的定位机制:普通流、浮动、相对定位和绝对定位。 除非专门指定(浮动、相对定位或绝对定位)，否则所有元素都在普通流中定位。也就是说，普通流中的元素的位置由元素在HTML文档中的位置决定。 块级元素从上到下一个接一个地垂直布置，上下间距是由上下外边距决定的。 行内元素在一行中水平布置。可以使用左右内边距、边框和左右外边距(css边距)调整它们的间距。 在下面的章节，我们会为您详细讲解相对定位、绝对定位和浮动。 ----------------------------------------------------------- --------------------- CSS position 属性 通过使用 position属性，我们可以选择 4 中不同类型的定位，这会影响元素框生成的方式。 position 属性值的含义: static (文档流) 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 relative (相对定位) 相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TOP、RIGHT、BOTTOM、LEFT 个参数进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。 absolute (绝对定位) 绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT 个参数进行定位，在没有设定参数前，默认依据父级的做标原始点为原始点。如果设定此参数后并且父级元素没有定义过position 属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由以上4个参数决定。 fixed 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。 (效果类似页面中浮动广告，无论页面上下滚动，该元素都会处于相同位置) 提示:一般来讲，网页居中用absolute很容易出错，因为网页一直是随着分辨率的大小自动适应的，而absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置，很多人出错就在于这点上。 第十四课 如何进行CSS定位 这一课,我们将更系统更详细的学习css定位,css定位有CSS相对定位和CSS绝对定位,这一课都将有详细解释 这章，我们将要更系统更详细的学习css定位。准备好了吗, ----------------------------------------------------------- --------------------- CSS 相对定位 设置为相对定位的元素会根据参数偏移相应距离。但它原本所占的空间仍保留。 相对定位是一个非常容易掌握的概念。对一个元素进行相对定位，可 以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 将 top 设置为 20px，那么元素将在原位置顶部往下 20 像素的地方，也就是元素向下移动。 将 left 设置为 30px，那么元素将在原位置往右 30 像素的地方，也就是元素向右移动。 #box_relative { position: relative; left: 30px; top: 20px; } 如下图所示(框2): 注意:在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素可能会导致它覆盖其它元素。 ----------------------------------------------------------- --------------------- CSS 绝对定位 绝对定位会使元素不占据空间。这一点与相对定位不同，相对定位实际上属于普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。而绝对定位则完全不属于普通流的模型中。 普通流中其它元素(框1，框2)的布局就像绝对定位的元素(框3)不存在一样，不会有任何冲突: #box_absolute { position: absolute; left: 30px; top: 20px; } 如下图所示: 绝对定位的元素的位置相对于最近的已定位(有设置过position属性的)父元素，如果元素没有已定位的父元素，那么它的位置相对于最初(最顶层)的包含块(如body)。 ----------------------------------------------------------- --------------------- 小结 现在让我们复习一下学过的知识吧:相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位父元素，如果不存在已定位的父元素，那么“相对于”最初的包含块。 提示:根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。 提示:因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的 其它元素。可以通过设置 z-index属性 来控制这些元素的上下堆放次序。 第十五课 如何实现CSS浮动 这一课,我们将学习如何实现CSS浮动,CSS浮动主要是通过CSS的float属性来实现,而清除CSS浮动则可以通过css的clear属性,这一课我们我们也将有CSS的float属性和clear属性的详细讲解 在CSS布局、排版中，90%人都使用浮动进行排版，所以，此课极为重要，请务必理解～ 浮动的元素可以向左或向右移动，直到它的外边缘碰到父元素或另一个浮动框的边框为止。 ----------------------------------------------------------- --------------------- CSS 浮动原理 请看下图，左图为普通的文档流，当把框 1 向右浮动时(right)，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘: 再请看下图，当框 1 向左浮动时(left)，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。 如果把所有三个框都向左浮动(left)，那么框 1 向左浮动直到碰到 包含框，另外两个框向左浮动直到碰到前一个浮动框: 如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”: ----------------------------------------------------------- --------------------- CSS float 属性 在 CSS 中，我们通过 float 属性 实现元素的浮动。 float属性的值有3个 1. left : 左浮动 2. right : 右浮动 3. none : 默认(无浮动) ----------------------------------------------------------- --------------------- 行框和清理 浮动属性还可以制作文本围绕图像的效果。 浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框: 要想阻止行框围绕浮动框，需要对该框应用 clear属性。 clear 属性有4个值: 1. left : 清除左浮动 2. right : 清除右浮动 3. both : 清除左右浮动 4. none : 不清除任何浮动 为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面: 这是一个有用的工具，它让周围的元素为浮动元素留出空间。 让我们更详细地看看浮动和清理。 假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码: .news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; }

some text

这种情况下，出现了一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。 提示:所有元素一旦定义了浮动属性即自动转换成了块级元素。 注意:在实际操作中除了标签(因其具有隐含的宽度)之外的所有标签设定浮动时务必要为元素设定宽度，否则你会有会想不到的麻烦，并且很难找出。 如何让包围元素在视觉上包围浮动元素呢,需要在这个元素中的某个地方应用 clear属性: 不幸的是出现了一个新的问题，由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它: .news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } .clear { clear: both; }

some text

这样可以实现我们希望的效果，但是需要添加多余的代码。常常有元 素可以应用 clear属性，但是有时候不得不为了进行布局而添加无 意义的标记。 不过我们还有另一种办法，那就是对容器 div 进行浮动: .news { background-color: gray; border: solid 1px black; float: left; } .news img { float: left; } .news p { float: right; }

some text

这样会得到我们希望的效果。不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素(常常是站点的页脚)对这些浮动进行清理。这有助于减少或消除不必要的标记。 第十六课 什么是CSS 伪类,CSS 伪类是什么 这一课,我们将学习什么是CSS伪类,并通过学习CSS 伪类了解什么是锚伪类,什么是first-child伪类 什么是CSS伪类,这个名字听上去是不是还挺难理解的,不过在实际使用中，几乎所有网页都会用到它哦～ 先来看下这节课的实例效果吧,查看实例效果 ----------------------------------------------------------- --------------------- 伪类的语法 语法如下: selector : pseudo-class {property: value} 选择器:伪类 {属性:值;} 提示:CSS 伪类同样可以搭配派生选择器(什么是css派生选择器)使用。 以下我们将介绍几种常用的伪类 ----------------------------------------------------------- --------------------- 锚伪类 在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括:未被访问状态，已被访问状态，和鼠标悬停状态，活动状态。这些伪类称为锚伪类: a:link {color: #FF0000;} /* 未访问的链接 */ a:visited {color: #00FF00;} /* 已访问的链接 */ a:hover {color: #FF00FF;} /* 鼠标移动到链接上 */ a:active {color: #0000FF;} /* 选定的链接 */ 提示:在 CSS 定义中，伪类定义是分先后次序，必须按照以上次序定义伪类才会起作用。不过，伪类名称对大小写不敏感。 伪类也可以与 CSS 选择器配合使用: a.red : visited {color: red;} 这是一个链接，访问过链接后我将变成红色 如果上面的例子中的链接被访问过，那么它将显示为红色。 ----------------------------------------------------------- --------------------- first-child 伪类 您可以使用 :first-child 伪类来选择元素的第一个子元素。这个特定伪类很容易遭到误解，所以有必要举例来说明。考虑以下标记:

These are the necessary steps:

• Intert Key
• Turn key clockwise
• Push accelerator

Do not push the brake at the same time as the accelerator.

在上面的例子中，作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。 给定以下规则: p:first-child {font-weight: bold;} li:first-child {text-transform:uppercase;} 第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素(在 HTML 中，这肯定是 ol 或 ul 元素)第一个子元素的所有 li 元素变成大写。 提示:最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。 提示:必须声明 ，这样 :first-child 才能在 IE 中生效。