《2022年DIV+CSS网页设计的基础教程 .pdf》由会员分享，可在线阅读，更多相关《2022年DIV+CSS网页设计的基础教程 .pdf（14页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、网络营销博客http:/吴文元整理这个文章只是为您介绍CSS 的基础应用，指引您的一个入门的基础教程，主要目的是为 推进 web 标准贡献自己的微薄之力。说点我自己的体会，现在有好多人都在推广WEB 标准，其实对初学者来说，不需要刚学 的时候就学标准，学点简单的还是容易入门的，因为现在HTML 还在照样用啊，所以我希望初学者学习时不要非遵循标准，当你入门之后，你做网页的时候，发现使用表格特麻烦的时候你就该去寻求简单方法了，到时再学也不晚啊，如果你喜欢新技术那么你初学时就学标准吧，按个人的实际来行动吧。下面开始学习了一、如何在HTML 中应用 CSS。您可以利用下列3 种方式将CSS 指定的格式
2、加入到HTML 中：1.在 HTML 文件里加一个超级连结，连接到外部的CSS 文档。(外部连结CSS)这个方法最方便管理整个网站的网页风格，它让网页的文字内容与版面设计分开。您只要在一个CSS 文档内（扩展名为.CSS）定义好网页的风格，然后在网页中加一个超级连接连接到该文档，那么你的网页会按在CSS文档内定义好的风格显示出来了。具体的使用防范是：网页文件的标题 注意：style.css 文件的位置。2.在 HTML 文件内的.标签之间，加一段CSS 的描述内容。(内定义 CSS)这个方法适用于指定某个网页，除了表现外部的CSS 文档定义好的网页风格外，同时还要表现本身HTML 文档内指定的
3、CSS。如果内在添加的CSS 描述与外部连接的CSS 描述相冲突的话，网页的表现将以内在添加的CSS 描述为主，也就是外部的描述就不再起作用了。具体使用方法是：名师资料总结-精品资料欢迎下载-名师精心整理-第 1 页，共 14 页 -网络营销博客http:/吴文元整理 网页标题 网页内容 值得注意的是，为了防止不支持CSS 的浏览器误将标签间的 CSS 风格描述当成普通字串，而表现于网页上，您最好将CSS 的叙述文字插入在 之间。3.在 HTML 文件的文本内容中，随时有需要，随时加一小段CSS 的描述指定风格。(文本间 CSS)这个方法适用于指定网页内的某一小段文字的呈现风格。外部 CSS
4、与内定义 CSS 如果和此定义有相同的项，那么以此定义的CSS 风格表现，外部CSS 文档与内定义CSS 和此定义的没相同的项时那么还会正常显示，同时还会显示文本内容间的CSS 风格。具体使用方法是：网页标题 名师资料总结-精品资料欢迎下载-名师精心整理-第 2 页，共 14 页 -网络营销博客http:/吴文元整理 本页内容 上述的3 种 CSS，可以同时并用，也可以择您所好，单一或成双地使用。如果各 CSS 间的叙述相冲突，则内在定义的CSS 会覆盖外部连结的 CSS，文本间的 CSS 会覆盖内在定义的CSS。二、挑选者、属性和值。先举个例子：H3 COLOR:BLUE;表示在文本中只要使
5、用H3 标签的文字的颜色都是蓝色。其中H3 为挑选者，COLOR 为属性，BLUE为 COLOR 属性的值。挑选者是套用样式的元件，通常为外部 CSS 或内定义 CSS 定义的风格的一个名字，在这个初级教程里理解为一个标签的名字也可以。属性是用语描述挑选者的特性，相当于HTML 语法中的标签的属性。值就是属性的具体内容。在 CSS 中当我们使用到属性值的时候，通常值是有一个度量依据的，也就是说值是有单 位的。比如我们通常说你从家到学校走1，1 什么呢？米，公里，还是走1 小时。通常在 CSS中的单位有：相对单位与绝对单位两种单位具体如下：“em”(比如font-size:2em)：相对于字母高
6、度的比例因子。“%”(比如font-size:80%)：相对于长度单位（通常是目前字型的大小）的百分比例。px(比如 font-size:12px)：像素（系统预设单位）。pt(比如font-size:12pt)：像点。此外还有pc(印刷活字单位),cm(公分),mm(公厘)和 in(英寸)等单位。当值为 0 时，我们就不需要设置单位了，比如你不想要边框那么我们直接设置border:0。在这我多说一句，就是强调单位的使用时，当我自己制作的网页想在分辨率改变时，字体大小也随着改变那么我们就使用单位%和 em，如果你想时你的网页不管怎么调分辨率都是固定大小的那么我们使用px、pt 等元素了。呵呵！
7、三、颜色的设置和使用。名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 14 页 -网络营销博客http:/吴文元整理CSS 提供了 16,777,216种颜色可以供我们来使用，通常表现颜色的方式有三种：颜色名 字、RGB(red/green/blue)数值和十六进制数形式，具体表现如下：红色可以表示为：red、RGB(255,0,0)、rgb(100%,0%,0%)、#ff0000 和#f00五种方 式。#RRGGBB：以三个00 到 FF的十六进位值分别表示0 到 255 十进位值的红、绿、蓝三原色数值。#RGB：简略表示法，只用三个0 到 F 的十六进位值分别表示红、绿、蓝三
8、原色数值。而 事实上，浏览器会自动扩展为六个十六进位的值，如#ABC将变为#AABBCC。但是，显见这样的表示法并不精确。rgb(R,G,B)：以 0 到 255 十进位值的红、绿、蓝三原色数值来表示颜色。rgb(R%,G%,B%)：以红、绿、蓝彼此相对的数值比例来表示颜色，如 rgb(60%,100%,75%)。Color_Name：直接以颜色名称来表示颜色，共有141 种标准的颜色名称。通常我们在设置颜色的时候通常是设置文字的颜色还有一个就是背景色。如按下图进行设置：我们可以保存一下文荡然后浏览你就可以看到效果了。四、关于文本的设置。我们可以使用多种属性来改变网页文本的大小和形状,以使网页
9、文本内容看起来更加美观。font-family：设定文字字型可以取 family-name值，范例：SPAN family-name:楷体 或范例：。名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 14 页 -网络营销博客http:/吴文元整理font-style：设定字体样式，可以取的值有normal 普通字、italic 斜体字；范例：SPAN font-style:italic。font-weight：设定字型份量；可以取的值有normal 普通字、bold 粗体字、bolder 相对于父元素稍粗、lighter 相对于父元素稍细、100,200,300,400,500,6
10、00,700,800,900 数字由小到大代表笔画由细到粗，例如：normal=400bold=700；范例：SPAN font-weight:bolder 。font-size：设定文字大小。text-decoration：设定文字修饰，可能值有none 普通字、underline 文字加底线、overline 文字加顶线、line-through 文字加删除线、blink 设定文字闪烁；范例：SPAN text-decoration:blink text-transform：设定文字转换；可能值有none 普通字、capitalize 将英文单字地一个字母转换为大写、uppercase 将
11、所有文字转换为大写、lowercase 将所有文字转换为小写；范例：SPAN text-transform:uppercase 。五、边缘和区块的设置。MARGIN：边缘，虽然是通透的部份，但是可以藉由边缘宽度的调整来达到内容元素位置调整的目的。PADDING：补白，也就是内容元素与框架之间的这段距离与空间，也可以利用CSS 指令去控制大小。把代码改为如图：他们的属性有：margin-top(上边缘宽度),margin-right(右边缘宽度),margin-bottom(下边缘宽度),margin-left(左边缘宽度),padding-top(上方补白宽度),padding-right(右
12、方补白宽度),padding-bottom(下方补白宽度)和 padding-left(左方补白宽度)。下面通过一个图来给大家说明：名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 14 页 -网络营销博客http:/吴文元整理看看上图理解点了吧！下面我们开始讲讲边框。六、边框border 性质设定。边框也能应用到大多数的HTML 标签中，可以来使网页更加美观，边框的具体属性有border-top：综合设定上边框性质、border-right：综合设定右边框性质、border-bottom：综合设定下边框性质、border-left：综合设定左边框性质。border-style综合
13、设定边框样式，可能值：solid(实线),dotted(虚线),dashed(短直线),double(双直线),groove(3d 凹线),ridge(3d 凸线),inset(3d 嵌入)和 outset(3d隆起)。border-width综合设定边框宽度,可以设置的有border-top-width(设定上边框宽度),border-right-width(设定右边框宽度),border-bottom-width(设定下边框宽度)和 border-left-width(设定左边框宽度).border-color综合设定边框颜色。把下面代码加到你的网页中可以看到效果了：这片文章就介绍到这里了
14、，因为是一个初学者的入门教程。名师资料总结-精品资料欢迎下载-名师精心整理-第 6 页，共 14 页 -网络营销博客http:/吴文元整理学习 CSS 使用技巧教程(1)整体声明1.基本上，整体声明有两种方法，第一种就是针对一个标签，然后一次设定好几个样式。第二种就是同时对好几个标签设定相同的样式。下面这个例子就是：“针对一个标签，然后一次设定好几个样式”：bodyfont-size:9pt;font-color:red;background:white 2.你会发现，我们同时声明了：字形大小为9pt、字形颜色为红色、背景为白色，这 3个样式，为了将这三个样式分隔开，我们利用分号“；”来将之隔
15、开，这样才能正常起作用！当然，若是你觉得这样一列一列的写出来很浪费空间，那么你也可以写成一行的形式，如下：bodyfont-size:9pt;font-color:red;background:white 几个标签设定相同的样式1.刚刚我们看过一个标签，同时设置几个样式的，实际上，我们也可以把好几个标签同时一起来设定，例如：h1,h2,tdfont-size:12pt;font-color:red;font-family:宋体 以此例而言，我们同时设定了三组标签、，换言之，凡是被这三个标签包起来的，其文字大小都会变成12pt、红色字、并且以宋体显示！分项声明搞懂了基本声明和整体声明后，现在要来
16、谈谈分项声明了，这个内容基本上不用多讲，因为并没有什么特别的用法，看看下例就知道了：bodyfont-size:9pt;font-color:red bodyfont-family:宋体;background:white 名师资料总结-精品资料欢迎下载-名师精心整理-第 7 页，共 14 页 -网络营销博客http:/吴文元整理你会发现，我们同时对标签做了两次声明，对！这就是分项声明，也就是说，对同一个标签，我们可以做两次不同的声明，在CSS 中，这是可以的！至于这样是多此一举？还是更加灵活？那就看你的使用习惯了！基本上，每个人的CSS编写习惯都不一样。小心下面的情形：在分项声明中，有种情况要
17、特别注意，如下：bodyfont-size:9pt;font-color:red bodyfont-family:宋体;font-color:blue 你发现了红色的部分吧！同一个标签做分项声明，结果里面的样式的属性有一组是一样的（font-color属性一样，但是设定值不一样），那么结果会怎么样呢？被标签包起来的文字是以蓝色显示的。大家可以试试！外部引用为什么要把CSS声明做成一个CSS 文件呢？这样做的好处有三个。第一个好处，网页处理速度会更快一些，尤其在有很多网页共用一份CSS 样式表时更为好用！因为你不用为每一页都写同样的CSS 代码，网页自然就会更瘦一些轻快一些。第二个好处是，可以防
18、止一些电脑程度较低的使用者直接看到CSS语法（就是有人不喜欢被看见语法），当然指的是无法直接看到，而非无法看到，稍微有点能力的，要查看CSS 文件的内容简直是易如反掌。第三个好处当然就是维护方便了！你只要修改一个CSS文件，不管你有几千个网页文件，都会以你最新修改的版本为准了！开始动手做CSS文件首先，我们将把原来声明中的去掉（CSS 文件里不需要这两个标签，因为，浏览器看到扩展名为css 就知道这是CSS 文件了），然后利用记事本程序把下面代码粘贴过去。bodyfont-size:9pt 然后将它保存，文件名的扩展名为.css，在这里可以保存为style.css，并和网页放在同一目录下。在网
19、页中调用CSS 文件做好 CSS 文件后，下面我们就该在网页中调用了，调用的方法如下所示：名师资料总结-精品资料欢迎下载-名师精心整理-第 8 页，共 14 页 -网络营销博客http:/吴文元整理 CSS外部调用示例 单独调用“单独调用”就是加入STYLE 属性。就是将 CSS 声明套用在单独的一个网页元素上（任一个文字、图片、表格.等，都是网页元素），此时，CSS 将不再以一个样式表来显示结果了，而是利用STYLE 属性加到标签中。为什么要“单独调用”CSS？原因是：比较灵活.举个简单的例子，我们希望让输入的表单的底色不使用白色了？关于 Style 属性其实，几乎每个HTML 标签都有其各
20、自的属性，例如 其中的align 是标签 的 align 对齐属性，加上align 属性后，你就可以设定段落要要居左、居中或居右。相同的，STYLE 也可以当作是一个属性，一样加在标签之中，就我们上面的问题而言，其原先的语法应该是是这样的：语法：结果：现在，我们替这个输入表单加入STYLE 属性，也就是在 标签中加入STYLE 属性：语法：结果：“STYLE=*”就是把 STYLE 当作属性的用法，其后一样将CSS 声明放在 里面，至于里面的background-color:#ccffcc意思就是“背景颜色：#ccffcc”的意思，现在不熟悉没关系，以后会继续讲解的。什么标签都可以加入STYL
21、E 属性吗？基本上，任何标签都可以加上STYLE 属性。所以，你不用担心会有标签不接受。不过，单独调用针对网页元素加入STYLE 属性虽然非常灵活，但是，却失去了CSS 的一个优点，那就是统一性。所以说，你在使用时，除非只有部份网页元素需要单独使用CSS格式，否则，尽量在使用之前介绍的调用方法，如此，日后在维护上会比较简单。自定义类别名师资料总结-精品资料欢迎下载-名师精心整理-第 9 页，共 14 页 -网络营销博客http:/吴文元整理今天讲的有一个新知识“类别”。其实，这知识并不陌生！回想一下，在HTML 标签中，有个属性叫class，当时没有解释这个属性是干什么用的。其实，不是不解释，
22、而是解释了也不会用，所以就暂时没有说，等到了今天。这个class 属性，所以将之解释为“类别”属性，它有什么作用呢？它能够让我们在不同的标签中使用相同的CSS 设定，举个例子如下：我们在读书的时候，常常看到课本上有重点的地方，用红色或其它颜色标明。如果，今天我们的网页上，也想将一些比较重要的地方用“红色、粗体字”来显示，你会怎么做呢？：原始代码“网页教学网”显示结果“网页教学网”使用 CSS 实现重点突出用上面的那种方法是相当不错的！简单用易懂！不过，试想一种情形.若是在我们的网页中有1000 多个所谓的“重点”，今天你突然想把重点通通换成“红色、粗体字”，那你该怎么办呢？这时，我们就讲用CS
23、S 来帮我们解决难题吧！而且，我们的“自定义类别”也就用上了！样式语法.important color:red;font-weight:bold 应用方式“网页教学网”首先，我们在在CSS 表中自己做一个叫做important 的类别，然后利用class 属性，套用在网页中，不难吧！以后若是要将“红色”改成“蓝色”，那么只要改类别里的设置就行了！不管网页中有几万个“重点”，都不用怕了！自定义类别的用法看过了自定义类别的大概用法后，再来做详细的解说，如何自定义类别？自定义类别方法很简单，方法和一般的CSS 声明没什么区别！唯一的不同是，CSS声明是针对某个标签的；而自定义类别则是不针对某个标签，
24、而是要自己命名！样式语法.important color:red;font-weight:bold 以上为例，.important color:red;font-weight:bold 就是我们自定义的类别，其中的 部份和一般的CSS 声明方法一模一样！差别就在前面的.important，没错！important 名师资料总结-精品资料欢迎下载-名师精心整理-第 10 页，共 14 页 -网络营销博客http:/吴文元整理就是我们自定的名称，有了名称，才能调用。注意！前面记得在自定义名称前加一个小点“.”，这样就完成了自定义的一个类别！这个类别可以利用class 来调用！套用到任何标签中！文字
25、属性文字属性是可以设置文字的颜色、大小、字型、粗细等等。原始代码 SPAN.c1 color:red;position:relative;font-size:12px;font-family:Arial;font-weight:700 SPAN.c2 color:blue SPAN.c3 color:green SPAN.c4 color:pink A B C D 显示结果A B C D 文字颜色 COLOR 语法：COLOR:(color)原始代码 SPAN.test color:red A B C D 显示结果A B C D 文字类别 FONT 名师资料总结-精品资料欢迎下载-名师精心整理
26、-第 11 页，共 14 页 -网络营销博客http:/吴文元整理设置字体样式、大小写变化、粗细、大小、文字行列高度、字型语法：FONT:(font-style)(font-variant)(font-weight)(font-size)(font-family)/(line-height)原始代码 SPAN.test FONT:ITALIC BOLD 12pt/18pt A B C D 显示结果A B C D 下载字型 FONT-FACE 语法：FONT-FACE FONT-FAMILY:(font-family);SRC:URL(url)原始代码 FONT-FACE FONT-FAMILY
27、:(未定);SRC:URL(下载地址)显示结果没有结果文字字型 FONT-FAMILY 语法：FONT-FAMILY:(font-name)(generic-family)原始代码 SPAN.test FONT-FAMILY:Arial Black A B C D 显示结果文字大小 FONT-SIZE 设定字体大小(可设单位属性:点 pt、英寸in、公分cm、像素px、百分比%)语法：FONT-SIZE:LARGEMEDIUM SMALLER(length)(percentage)原始代码 名师资料总结-精品资料欢迎下载-名师精心整理-第 12 页，共 14 页 -网络营销博客http:/吴文
28、元整理SPAN.test1 FONT-SIZE:LARGE SPAN.test2 FONT-SIZE:10pt SPAN.test3 FONT-SIZE:50%A B C D E F G H I J K L 显示结果文字样式 FONT-STYLE 设定字体样式(分为:正常、斜体)语法：FONT-STYLE:NORMAL ITALIC 原始代码 SPAN.test1 FONT-STYLE:ITALIC A B C D 显示结果A B C D 文字变化 FONT-VARIANT 设定字体变化(分为:正常、小字体)语法：FONT-VARIANT:NORMALSMALL-CAPS 原始代码 SPAN.
29、test1 FONT-VARIANT:SMALL-CAPS A B C D 显示结果A B C D 文字粗细 FONT-WEIGHT 设定字体粗细(分为:正常、粗字体)名师资料总结-精品资料欢迎下载-名师精心整理-第 13 页，共 14 页 -网络营销博客http:/吴文元整理语法：FONT-WEIGHT:NORMAL BOLD 原始代码 SPAN.test1 FONT-WEIGHT:BOLD A B C D 显示结果A B C D 连接属性在 HTML 文件里的超连接文字经过浏览器的解释后都会以加下划线的方式来显示，并没有动态的效果，通过CSS 之 Anchor Pseudo Classes
30、，大家可以将超连接文字的显示方式做到几种不同的变化。例如： 以上的超级连接经过在浏览器页面上是以加下划线的方式显示。但如果利用CSS 之Anchor Pseudo Classes 则可以做出动态的效果，其标签如下：记得两个属性见;隔开，详细属性值设定请参阅CSS 常用属性(Properties)与设定值一览表。原始代码A:linkcolor:blue;font-size:9pt;text-decoration:none A:visitedcolor:blue;font-size:9pt;text-decoration:none A:hovercolor:red;font-size:9pt;te
31、xt-decoration:underline A:activecolor:red;font-size:9pt;text-decoration:underline 显示结果Click Here!属性分类A:link 是代表普通状态的连接A:visited 是代表访问过的连接A:hover 是代表鼠标移到连接A:active 是代表按下去连接color 是代表连接颜色font-size 是代表连接文字大小，适用point(pt)或是pixels(px)text-decoration 是代表文字样式，none 代表没有下划线名师资料总结-精品资料欢迎下载-名师精心整理-第 14 页，共 14 页 -