CSS网页制作（精选10篇）
CSS网页制作 篇1
在设计和制作网页的过程中, 使用XHTML超文本标记语言只能对网页中的各种元素进行最基本的格式处理, 如果需要为网页应用更加丰富的样式, 就需要用到一种全新的样式语言, 即CSS样式表。
1 CSS样式表
CSS (Cascading Style Sheets层叠样式表单) 是一种用来表现HTML或XML等文件式样的计算机语言。
CSS目前最新版本为CSS3, 能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言, CSS能够对网页中对象的位置排版进行像素级的精确控制, 支持几乎所有的字体字号样式, 拥有对网页对象盒模型的能力, 并能够进行初步交互设计, 是目前基于文本展示最优秀的表现设计语言。
根据CSS样式表存放的位置以及其应用的范围, 将CSS样式分为3种, 即外部链接式、嵌入式和直接插入式[1]。
外部链接式是一种独立的CSS样式, 它一般将CSS代码存放在一个独立的文本文件中, 扩展名为“.css”。这种外部的CSS文件与网页文档并没有直接的关系。如果需要通过这些文件来控制网页文档, 则需要在网页文档中使用link标签将CSS代码导入。例如, 使用CSS文档来定义一个网页的大小和边距, 其代码如下所示:
在多数CSS文档中, 都会使用“@charset”声明文档所使用的字符集。除“@charset”声明以外, 其他的声明多数可用CSS样式来替代。
2 CSS样式表语法
作为一种具有严格规范的数据表, CSS样式表具有独特的语句结构体系。在使用CSS样式表修饰网页元素时, 应首先了解CSS样式表的语法。
完整的CSS语句通常由选择器、属性以及属性值组成, 其代码如下:
其中:“selector”表示CSS选择器或多个选择器的组合;“property”表示选择器中的某一种属性;“value”则表示这种属性的具体值。
一条CSS样式语句可以包含多个属性, 浏览器将按照从上到下的顺序对这些属性进行解析。因此, 当对某一个属性进行重复定义后, 浏览器将按照最后一次定义的属性进行解析显示。
CSS中的属性值主要分为3种, 即数值、关键字以及特定意义的字符串。数值决定属性的程度;关键字决定属性的类型;特定意义的字符串往往用于引用外部的变量。在以数值为属性值时, 需要了解CSS中的数值与单位。在CSS样式中, 除了数字0、百分比以及颜色以外, 所有的数字属性都应该带有具体的单位。CSS的单位可以分为绝对单位和相对单位两种[2]。绝对单位是指在设计中使用的衡量物体是实际环境中长度、面积、大小等的单位;而相对单位的显示大小不是固定的, 其所设置的对象受屏幕分辨率、屏幕可视区域、浏览器设置和相关元素的大小等多种因素的影响。
3 添加CSS样式
作为一款网页设计软件, Dreamweaver提供了强大的编辑CSS样式的功能, 用户既可以以可视化的方式编辑CSS样式, 也可能通过输入代码的方式编写CSS代码。Dreamweaver CS4提供的[CSS样式]面板可以帮助用户添加和删除当前网页的CSS样式。
该面板主要分为两个部分, 包括所有规则部分和样式属性部分, 所有规则部分的作用是显示当前网页中所有的CSS样式, 而样式属性部分则列出了当前选择的CSS样式已定义的属性。新建CSS样式规则对话框如图1所示。
通过这个对话框可以创建不同类型的CSS样式。
使用Dreamweaver, 用户还可以方便地将外部的CSS文件链接到当前打开的XHTML文档中。用户可以通过[链接外部样式表]对话框为同一网页导入多个CSS样式规则文档, 然后指定不同的媒体类型。这样, 当用户以不同的设备访问网页时, 将呈现不同的样式效果。在[链接外部样式表]对话框中, 用户还可以选中[导入]单选按钮, 将外部的CSS样式文档中的样式代码导入到当前的网页中, 并将其转换为内部CSS样式。
4 CSS滤镜
滤镜是平面设计中的术语。滤镜通常是图像处理软件的插件, 用于处理图像或文本的各种特殊效果。CSS和图像处理软件类似, 也有滤镜功能。其滤镜功能也可以实现比较多的特殊效果, 例如透明、灰度等效果。CSS的滤镜通常可以分为三大类, 即界面滤镜、静态滤镜和转换滤镜。界面滤镜主要的作用是处理网页容器标签的界面, 为这些容器标签添加相关的特效。这一类滤镜有Gradient渐变滤镜和Alpha Image Loader透明背景滤镜两种。静态滤镜是CSS样式表中最常用的滤镜。静态滤镜的使用方法和普通的类属性相似, 为见面的标签添加该滤镜即可直接产生效果。常用的静态滤镜有Alpha透明滤镜、Blur模糊滤镜、Chorma取色滤镜、Drop Shadow投影滤镜、Flip H和Flip V翻转滤镜、Glow发光滤镜等几种。
5 结论
CSS样式表是一个非常灵活的工具, 网页设计人员不必把繁杂的样式定义编写在文档结构中, 可以将所有有关与文档的样式指定内容全部脱离出来。在网页制作时借助CSS样式表可以实现不错的效果同时又可以减少网页代码, 从而为网页减肥, 提高网页传输速度。随着网络技术的不断发展, CSS的应用会愈来愈普遍。
摘要：随着计算机与网络的普及, Internet迅速成为人们生活中的重要组成部分, 网页制作与网站建设也成为网络时代必备的技能之一。当今社会对网站建设人才的需求量越来越大, 网站建设已经成为全新技术, 它涵盖动态开发技术、网络技术、数据库技术等等。Dreamweaver是网页设计与制作领域中用户最多、应用最广、功能最强的软件, 它用于网页的整体布局和设计, 以及对网站进行创建和管理, 被称为三剑客之一, 利用它可以轻而易举地制作出充满动感的页面。在网页设计过程中引入CSS样式表能够简化设计人员的工作, 并且网页效果比较理想。本文对CSS样式表在网页制作过程中的样式规则、语法进行阐述, 并举例说明使用方法。
关键词：网页制作,CSS样式表,样式规则
参考文献
[1]余平.CSS在网页制作中的应用[J].信息技术, 2006, 35 (4) :23.
[2]郝军启, 刘治国, 赵喜来等.Dreamweaver CS4网页设计与网站建设标准教程[M].清华大学出版社, 2010, 10.
CSS网页制作 篇2
2、同一个的class选择符可以在一个文档中重复出现，而id选择符却只能出现一次；对一个标签同时使用class和id进行CSS定义，如果定义有重复，id选择符做的定义有效，是因为ID的权值要比CLASS大。
3、一个兼容性调整(IE和Mozilla)的笨办法：
初学可能会碰到这样一个情况：同样一个标签的属性在IE设置成A显示是正常的，而在Mozilla里必须要设成B才能正常显示，或者两个倒过来。
临时解决方法：选择符{属性名:B !important;属性名:A}
4、如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding
5、li标签前面的图标推荐使用background-image，而不是list-style-image。
6、IE分不清继承关系和父子关系的差别，全部都是继承关系。
7、在给你的标签疯狂加选择符的时候，别忘了在CSS里给选择符加上注释。 等你以后修改你的CSS的时候就知道为什么要这么做了。
8、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。
9、定义链接的四种状态要注意先后顺序: Link Visited Hover Active
10、与内容无关的图片请使用background
11、定义颜色可以缩写#8899FF=#89F
12、table在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。
13、
14、标题是标题，标题的文字是标题的文字。有时候标题不一定需要显示文字，所以:
标题内容
改成
标题内容
15、完美的单象素外框线表格（在IE5、IE6、IE7及FF1.0.4以上中均可通过测试）
table{border-collapse:collapse;}
td{border:#000 solid 1px;}
16、margin取负值可以在标签使用绝对定位的时候起到相对定位的作用，在页面居中显示时，使用绝对定位的层不适合使用left:XXpx这个属性。把这个层放到一个要相对定位的标签旁，然后使用margin的负值是个好方法。
17、绝对定位时使用margin值定位可以达到相对于本身所在位置的定，这与top，left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。
18、如果文字过长,则将过长的部分变成省略号显示：IE5,FF无效，但可以隐藏，IE6有效
19、在IE中可能由于注释带来的文字重复问题时可以把注释改为：
< !–[if !IE]>Put your commentary in here…
20、如何用CSS调用外部字体
语法：
@font-face{font-family:name;src:url(url);sRules}取值：
name：字体名称，
任何可能的 font-family 属性的值
url(url)：使用绝对或相对 url 地址指定OpenType字体文件
sRules：样式表定义
21、如何让一个表单中的文本框中的文字垂直居中？
如果用行高与高度的组在FF中是没有效果的，办法就是定义上下补白就可以实现想想的效果了。
22、定义A标签要注意的小问题：
当我们定义a{color:red;}时，它代表了A的四种状态的样式，如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了，其它三种状态就是A中所定义的样式。
只定义了一个a:link时，一定要记得把其它三种状态定义出来！
23、并不是所有样式都要简写：
当样式表前定义了如p{padding:1px 2px 3px 4px}时，在后续工程中又增加了一个样式上补白5px，下补白6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。可以写成p.style1{padding-top:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好，但你想没想过，你的那种写法重复定义了样式，另外你可以不必去找原来的下补白与左补白的值是多少！如果以后前一个样式P变了话，你定义的p.style1的样式也要变。
24、网站越大，CSS样式越多，开始做前，请做好充分的准备和策划，包括命名规则。页面区块划分，内部样式分类等。
25、几个常用到的CSS样式：
1）中文字两端对齐：text-align:justify;text-justify:inter-ideograph;
2）固定宽度汉字截断：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不过只能处理文字在一行上的截断，不能处理多行。)（IE5以上）FF不能，它只隐藏。
3）固定宽度汉字（词）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。
4）文字用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。
5）图片设为半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；
6）FLASH透明：选中swf,打开原代码窗口，在前输入
针对FIREFOX 给
标签也增加类似参数wmode=”transparent”7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：
.pictures img {
filter: alpha(opacity=45); }
.pictures a:hover img {
使用CSS+DIV布局网页初探 篇3
表格布局方式实际上是利用表格元素具有无边框的特性，在网页中的各个元素按版式划分放入表格的各个单元格中，实现复杂的排版组合。
表格布局的代码最常见的是在HTML标签中间加入大量的设计代码，大量的样式设计代码混杂在表格和单元格中，使得可读性大大降低，维护成本也相对提高。尽管使用DW等网页制作工具进行可视化操作，但不可能帮助缩减代码或删除重复的代码，因而会出现许多没有任何意义的图像占位符及其他元素，文件量庞大，最终导致浏览器下载及解析速度变慢。
使用CSS布局可以从根本上解决表格布局带来的问题。CSS布局的重点不在表格元素的设计上，而是采用另外一元素DIV。DIV可以理解为层或者是块，是一种比表格简单的元素。DIV的功能仅仅是将一段信息标记出来用于后期样式的定义。通过使用DIV，可以将网页中的各个元素划分到各个DIV中，成为网页中的结构主体，而样式表现由CSS完成。DIV在使用时不再需要像表格一样通过单元格来组织版式，通过CSS强大的样式定义功能可以比表格更简单更自由地来控制页面版式和样式。
二、CSS+DIV布局网页的主要内容
要掌握使用CSS+DIV布局网页，首先要深刻理解盒子模型。盒子模型可以类比为装手机的盒子，手机可以当成盒子的内容部分，保护手机的海绵可以当成填充部分，手机盒子的棱角就是边框，两个手机盒子之间的距离就是边距。
盒子模型的宽度（高度）=内容的宽度（高度）+填充的宽度（高度）+边框的宽度（高度）+边距的宽度（高度）。盒子模型的宽度（高度）会随着里面内容和填充的增长而增大，这点有别于真实的盒子。
当了解完盒子模型后，就可以使用CSS+DIV对网页进行设计了。可以先把网页用DIV把所有的区块勾画出来，用CSS样式表里对这些DIV进行属性的设置，然后再布局嵌套里面的文字，图片。文字图片可以使用类进行控制，可以把它们也当成嵌套进去的盒子，不妨给它们加上边框，在盒子理论的引导下就能轻松对它们在网页中的位置进行设置。
使用CSS+DIV布局网页应用比较多的一项是使用项目列表制作导航条。可以先把项目列表里每行的文字变成超链接，并把这些超链接CSS样式表里区块的显示属性设置成块，然后把